Wednesday, April 28, 2010

Everyone celebrate, it’s Notepad day.

I would like to declare today (or possibly tomorrow, seeing as today has gone already, or even the whole week) “notepad day” as a direct result of the frustration that a developer “friendly” tool has created for a site I’m trying to get live.

It’s a pretty simple scenario – a form that needs to be filled in, which the designers have mocked up with nice text box hints, and validation behaviours. All very simple in HTML/CSS/JS terms. The problem arises because MSFT, in their infinite wisdom, decided to make it really “easy” for .NET developers to auto-magically add the correct validation hooks by adding code attributes inside the model class definitions (it’s an MVC app) – i.e. it auto-generates the HTML, a set of dynamic CSS attributes to decorate the output and some JS to manage the behaviour.

So, this model annotation:

Class annotations

Combined with this view:

View definition

Outputs this HTML and associated JS:

HTML output JS outputAs a result, when there is a problem with the UI code and you turn to your HTML developer he then tells you he has no idea where the HTML comes from – it’s a .NET thing. So you ask the .NET developer, who knows where it comes from, but does not know either how to affect the output, or what the output should ideally look like.

There is absolutely no reason for the the Html.EditorFor helper – not only does it not save time, it pulls the .NET developer across the line and into the HTML. (It also means recompiling the code to change the validation which is insane.)

This is not the first time they’ve done this – they have quite a heritage in the trying-to-be-simple-but-totally-missing-the-point stakes:

1. In VB6 there was some crazy model that involved compiled VB6 apps emitting HTML. Never went anywhere. (I can’t even find out what it was called. Although I did come across this – which has to win a prize for most optimistic course organiser – VB6 for Beginners, starting April 2010…)

2. ASP.NET WebForms – instead of respecting HTTP/HTML, they designed a model that involved replicating the eventing model of a local app by manipulating something called the ViewState and which resulted in developers spending most of their time asking themselves in what order the chain of 874 events fired, and where in the stack of 400 child controls the problem lay.

3. MVC – having finally got the message, and adopted the clean lines of the rest-of-the-world’s favoured model, they decide that implementing MVC wasn’t enough. What developers really want/need is a way of ignoring the problem that HTML is harder than it looks, and different to C#. MSFT – please STOP.

A website is more complex than a server app if only because it involves a skills laminate – designers, HTML and server-side all come together around the same output, and in order to allow each of these to do their jobs effectively they need to have clearly-defined roles. HTML developers are responsible for what is displayed in the browser, and they can’t take on this responsibility if HTML is being cooked up behind the scenes by some opaque process.

I presume this happens because MSFT are keen to look after the smaller development shops where they don’t have the luxury of split roles, and one developer is doing everything, but it’s a royal PITA for teams who want to do the job properly, and only serves to undermine the impression that non .NET designers / HTML developers / project managers / testers etc. have of the platform. Which is unfair, as it is actually rather good.

Tuesday, April 27, 2010

Did ancient Egyptians Tweet?

One of the enduring mysteries of human civilisation is the question of how the world “forgot” about hieroglyphics. Despite the fact that they were used by the most advanced civilisation of its time, for hundreds of years, people seem to have moved on and simply forgotten to take a translation with them. Without the discovery of the Rosetta Stone (which you can read about on Wikipedia if you don’t already know about it) we’d still be in the dark.*

That could never happen now could it? Well what happens if people stop reading / writing books, and start communicating only through Facebook updates and 140 character tweets. Evolution will see us to a point where an ever decreasing number of people actually produce any thoughts / words of their own, and everyone else simply retweets, or worse still, just clicks on the Like button.

And what happens then when for some reason (EMP, Solar flare, who knows) all that data is lost?

Will archaeologists look back on the early internet years as a new Dark Ages – where, despite an explosion in the volume of communications, very little of value survives?

Just a random thought that came up in office conversation today*, but it could happen… couldn’t it?

* Our thinking in the office was that papyrus had a similar effect on the Egyptians - they all upgraded from sandstone tablets to the fancy new "paper", only for someone to accidentally burn down the entire national archives.

Friday, April 23, 2010

Will Google ever ‘Like’ Facebook?

So the new web is semantic & social and search is important. Facebook has made its play for the first two, and the assumption is that it's going to make a play for the third (search) as part of its new web land grab (AKA Kill Google).

But even if Facebook is serving up billions of Like buttons, whilst that means it can theoretically catalogue the web and apply personalised recommendations, it still has to do the engineering. And whilst Facebook isn't short of clever developers (quite the opposite), its 300 engineers have nothing like the firepower required to beat Google at this (I know this is hardware not software, but as an indication of the size of Google it’s pretty impressive - http://bit.ly/cbktww).

With valuations where they are there's nothing to prevent Facebook from acquiring the rocket scientists it requires - but why bother? 99.9% of the web is still unstructured, and making sense of that is Google's home ground (great Wired article on search query semantics here - http://bit.ly/9i6kYg).

What is really required (by us, the users) is a combination of the two – Google’s algorithmic scientists and search experts working with Facebook's recommendations and social graph. This would give us what we want – a searchable, personal, semantic web. And this begins with Google adding the Like button to its search results. (And ends, slightly unrealistically, with Facebook allowing Google to index its data).

Of course Google doesn't own part of Facebook, Microsoft does. So the best we can hope for in the future is something like this, but using Bing - FaceBing, or perhaps BingBook?

In the end this is all about ad revenue, and no one seems inclined to share that right now, so although it makes for an interesting user experience / engineering challenge, it's not going to happen.

:-(

[Update: Not sure when this appeared, but the Facebook developers’ site search results page now sports a natty blue Bing logo. Has Microsoft out-flanked Google with its purchase?]

Thursday, April 22, 2010

What f8 means for you, me, Google & the web.

Having had a night’s sleep since my slightly hysterical twitterings from the f8 conference keynote (below), here is a slightly more considered post.

The combination of the new Facebook Like button and their Open Graph protocol could kick-start the semantic web (finally). Is this a problem for Google, or an opportunity?

(Just to recap – the Open Graph Protocol (OGP) is a set of HTML meta tags that allow developers to apply semantic markup to a web page - Facebook may have just killed off the microformats community in the process of defining their own protocol. The Like button is a way for users to interact with a site – they may have killed off Delicious and Digg with this one.)

Applying OGP tags to the HTML of a web page applies the necessary metadata to allow semantic interpretation of the page (whether it represents a “movie” or a “book” for instance). That said, there is no barrier to Google using this data to improve its indexing of the web. Just as Facebook can now see that an IMDB page represents a “movie”, so can Google. The semantic web is now a reality.

The real dilemma is this: Google’s secret sauce, and the thing that gave it its mojo in the early days, was its understanding of the “popularity” of any given web page, which it measured (and probably still does) by applying complex algorithms to the value of links in from other web pages. It’s a bit like the ATP Tennis rankings – you gain more points from winning matches, but the number of points you gain depends on who you’re playing, and at what stage of the tournament. A link to your site from the BBC website is worth more that a link from this blog. So far, so normal.

Facebook is of such a scale these days that it is now in a position to apply its own re-interpretation of the web – at least any page that any of its 400 million members have come across (which you have to assume is most of it). Facebook’s Like button will give it access to explicit recommendations of pages across the web. The Like button alone allows Facebook to compile an index of the web that connects you to any page via a sequence of recommendations, each of which has a relevance ranked not only by the “influence” of the recommender, but by their relationship to you, as a person. At the same time, each page that implements the OGP tags can be indexed semantically and placed in the correct context. (And just as Google promoted the use of correct HTML through its SEO recommendations, Facebook will encourage the use of OGP through its involvement. I would strongly recommend any web developer to implement OGP tags in their website, starting today.)

The net result is a search engine that is not only based on the recommendations of people I know, but that actually understands the context and content of the pages it is indexing. This could be the holy grail of search.

This is the beginning of the next phase of the Web (3.0?) – post-Google, semantic and personal. You have been warned.

10

Guilty pleasures

One of the pleasures of working in a creative office as a techie is in seeing the creative process in full flow. I can’t give any specifics, but at the moment one of my favourite websites is being redesigned by the person sitting next to me.

How many people get the chance to say to the designers of a successful site - “please don’t change X” and actually have that taken into account?

It feels a bit like stepping in wet cement – you know you shouldn’t do it, but the opportunity to have your footprint captured forever (or until the next redesign) is too tempting to ignore.

So, apologies in advance about the colour scheme on www.{…}.com – I just like it that way.

Tuesday, April 20, 2010

SEO 101 – More notes from Google

Why listen to what I have to say, when Google says it themselves - http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

It’s a great starter document for anyone interested in what it takes to get up and running with SEO, and includes the following basics:

  • URL structure
  • Site structure / sitemaps
  • HTML best practices
  • Managing site crawlers (use of robots.txt)
  • Site submission / webmaster tools
  • Useful further reading

Less edifying is the article on hiring an SEO consultant, which includes this gem:

While SEOs can provide clients with valuable services, some unethical SEOs have given the industry a black eye through their overly aggressive marketing efforts and their attempts to manipulate search engine results in unfair ways. Practices that violate our guidelines may result in a negative adjustment of your site's presence in Google, or even the removal of your site from our index.

You have been warned (article here - http://www.google.com/support/webmasters/bin/answer.py?answer=35291&cbid=-8knlzs0q58yb&src=cb&lev=index)

Monday, April 19, 2010

Doing Things Right (#DTR)

Today I’m starting a movement called “Doing Things Right” in response to the success of the Getting Things Done (GTD) movement.

Doing Things Right means exactly what it says. The low-hanging fruit that I’m using to kick off the movement is HTML development. As I’ve mentioned here before, everyone involved in web development should understand two things before anything else – the basics of the HTTP protocol, and how to format good HTML. 

Any web development team should have someone who is held responsible for ensuring that the HTML emitted by any dynamic server-side code (.NET, Java, Python, PHP, RoR, doesn’t matter what technology is used) is not only well-formed, but semantically meaningful. (And at the same time, let’s all hope that Webforms get caught in the cross-fire.)

I’ll keep a list here of references to good practice, and will mark any Twitter posts that are relevant with #DTR.

First off is this link to the POSH (Plain Old Semantic HTML) wiki - http://microformats.org/wiki/posh, which is a great place to start. I would also call out this article (referenced from the POSH article) - http://tantek.com/log/2002/11.html#L20021128t1352 – which is a great walkthrough of the steps taken to migrate from lazy HTML to good HTML.

Wednesday, April 14, 2010

iPad apps that impress

I’m not a fan, but I have now seen some iPad apps that impress. If you do own one, and want to show it off, try one of these:

Gap1969 – this is a really good ecommerce example, with great no-boundary scrolling – the entire shop is on one screen, and you just zoom around in all directions. Not sure how usable it is long-term, but it’s a great start.

Alice – this has already received a lot of online press – and deservedly so. You might not want to sit down for two hours to read a book on the iPad, but this example of an animated book/app is outstanding. If I had kids, this alone would make me buy one.

Toy Story – I guess it helps if you own Pixar, but again this is outstanding. It looks like interactive kids books are the run away success so far (comics look great on the iPad as well).

Dr. Seuss can’t be far behind.

(I’ll keep the list updated as I come across more).

FreeAgent + GetSatisfaction = Happy Customer

I’ve started using FreeAgent to manage consultancy projects (thanks Glyn), and it’s a fantastic product – it does exactly what it needs to do, it’s incredibly flexible – you can use it to manage cashflow, timesheets, invoicing, tax/IR reminders etc.

When backfilling some detail this morning I realised that I had no billing rate set up against a project, and no obvious way of adding it in. (It was only for completeness – as FreeAgent allows you to edit the invoice in situ it doesn’t matter if fields aren’t set up correctly to begin with – which is how it should be – use the data input to guide the user, without boxing them in.)

FreeAgent uses GetSatisfaction for their feedback, so I figured instead of trying to work out how to set the billing rate, I’d just ask. Lo and behold, I received an answer within five minutes of posting the question – GetSatisfaction is as good at managing feedback as FreeAgent is at managing small business finance – together they make for a very happy customer. No hunting through the FAQs, no “support@xyz.com” black hole – just a great customer experience, from start to end.

Thank you both, and if you’re a contractor / small business struggling with finance, use FreeAgent, and if you’re looking for a feedback management service (used to be called CRM) take a look at GetSatisfaction.

Tuesday, April 13, 2010

Is a front-end developer really a ‘developer’?

Now that HTML has risen back to the surface as a (the) first-class citizen of the web, along with it's siblings, CSS and JS, it’s time to revisit its place in the developer landscape.

Several recent projects have suffered from a lack of attention to the subtleties of the front-end code, but the ubiquitous use of AJAX, the emergence of HTML5, and the enforcement of good HTML practices by Google’s indexing process (see previous posts) mean that we can no longer ignore the value of good front-end developers, and that we should appreciate that a “good” front-end developer is worth considerably more than a “cheap” front-end developer. It’s no longer a commodity, and those at the top of their game should expect to earn as much as their back-end platform peers.

All of which leads to the question of the day – is it easier to teach an HTML/CSS/JS developer some basic PHP/C# etc., or to teach a C#/Java developer HTML/CSS/JS?

I think the answer today is the former – I would expect anyone claiming to be a front-end web developer these days to have a deep understanding of languages (not just how to use JS, but a real understanding). Hard-core platform developers have to stop looking at the front-end team as being involved with the fluffy stuff.

[Best analogy I can think of is Rugby union – to quote Peter Fitzsimmons (NZ), back in the 1970/80s:

Forwards are the gnarled and scarred creatures who have a propensity for running into and bleeding all over each other.”,

whilst

backs can be identified because they generally have clean jerseys and identifiable partings in their hair"”.

And then along came Jonah Lomu, and now you can’t tell the difference – the backs are 6’7” tall and the front row endorse ‘male grooming’ products.]

Wednesday, April 07, 2010

SEO handbook – Notable app SEO report

Looking around for something to allow for online collaboration for designers (Basecamp+, allowing annotation of designs), I came across Notable (www.notableapp.com), which looks just the job. Not only can you upload designs, you can import them direct from a URL, or “clip” them using the Firefox browser plug-in.

Better still, if you do upload the HTML source, it not only gives you a screenshot of the page design to annotate, but it provides a very neat SEO report – see below for its review of the Wired HTC HD2 review:

notable_seo_report_wired This is a great one page report, and well worth signing up to Notable for.

User interface design – ultimate AJAX interaction

Whilst I’m on the subject I may as well share my favourite experience on the web – and the moment AJAX started to work for me.

I can’t honestly remember when Google rolled out the “star”, it may well have been there from the start – but it was certainly when I first started to see the web as an O/S.

Screenshot of Gmail "star" interaction

For those of you who don’t know how this works (it’s popped all over the place since) - it works simply by clicking on the star – at which point, and with no screen refresh, the message is starred, forever.

Not out of the ordinary today, but pretty radical back in the day, and I’m still surprised by how few sites have emulated this (Twitter being the notable exception).

User interface design – rollover options

Just a very quick post about user interface design. I love Twitter from a UX point of view – particularly the “More” concept (no more paging), but I wanted to pick out something else that it seems to have pioneered – the use of hidden controls.

The Twitter interface is kept very clean by having no interaction controls (retweet, reply, etc.) visible until you mouse over a particular tweet. It’s a very simple, very neat solution to a perennial problem, and YouTube seem to have taken their lead (see screenshots below). Facebook has eschewed this approach, and has links for “Comment, Like, Add as Friend” on each post.

Twitter stream (showing rollover options):Screenshot of Twitter stream showing rollover optionsYouTube comments (showing rollover options)Screenshot of YouTube comments showing rollover optionsFacebook stream options:Screenshot of Facebook stream showing rollover options