My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Saturday, April 02, 2011

See You There HTML5

My uncle Paolo opened an Italian Restaurant in London, New Barnet, and I have been there few weeks ago to visit him and bring him my congratulations.
While this is absolutely not technical, the story I would like to tell you is ...

The Real Beauty Of The Web

HTML5 is probably the most overrated buzz word since the Web started existing, most likely even more misunderstood than Ajax therm itself.
Microsoft promoted his latest IE9 (and please use it if you like IE) behind the sentence Beauty Of The Web ... well, accordingly with Microsoft the web has always been beauty since Chrome, WebKit, Opera, and Firefox became real competitors ... but this is another story.
What many did not get about this HTML5, is that it's born backward compatible, which means that as document declaration it can be used right now and there is nothing to wait for...
The real value of HTML5 is the ability to bring newer techniques where available, still being compatible in W3C therms with all those old browsers that never followed strictly Web standards.
This is beautiful, not because I have been able to create the latest "kick ass website with fantastic special effects", simply because following few steps and remembering few rules, the landing page I have created for Paolo should work in almost every damn browser with relevant market share presence.

See You There ... For Sure!

we'll know the mobile web is "ready" when links to the desktop version are understood to be unnecessary
This sentence from @grigs perfectly summarize my idea of a landing page.
While I was trying to take some inspiration, in this case checking other restaurant websites, I have realized that most of them where:
  1. absolutely unusable from mobile devices and/or tablets
  2. extremely heavy to download
  3. entirely based on Flash Player
  4. massive portals ... I mean ... seriously, it's a restaurant, not a social network!

Compromised Usability: Less Customers!

I have been living in London for a couple of years and I think I know something about the classic Londoner life style. First of all for a London citizen is quite common to have an unlimited bandwidth contract for a smart phone and about 20 pounds per month, smart phone included. Secondly, London has quite frenetic life-style and the "show me what I am looking for: NOW!" moment is specially frequent during lunch breaks and surely a nice to have in all other cases.
If we land in a page that takes ages to be downloaded and does not give us instantly info we are looking for, in a restaurant case I guess a "where and what", we have to search again. Moreover, if the page uses all cool libraries and frameworks that have never been developed for mobile and all links and sections works only through these magic libraries, the user may be totally unable to access what he is loooking for: a place to eat!

Size Matters: The Annoyed Potential Customer

Many devices show on top how much data has been downloaded so far. If we see a progress bar that takes ages to be filled and a page that is empty for more than 5 seconds after the round-trip is completed, we start thinking the page is too heavy, the device is slow or, even worst, "FFS I am paying this bandwidth!".
It's true, the web could be scary for all those people that have a pay per surf contract and if these people are scared to surf the net it's only our fault. Moreover, if the page takes too long to be visualized we go back and we re-fine the search or we click the next result in the list, isn't it?

Flash Player and the Skip Intro Anti Business

The (in)famous player we all know, the one that still shows videos on Youtube, has been wrongly used since the beginning when it comes to Web content. The classic skip intro for a 500Kb of bullshit nobody is interested about is the biggest epic fail of the history of web. Put a link in the main page that points to the intro? That would have been too much user friendly so ... naaaaaaaa!
Even worst, many devices do not support the Flash Player since only lately this has become suitable for mobile devices without draining the little battery.
If your business entry point cannot be reach by all possible customers, you paid the "skip intro" to ruin the potential of your business since all Apple products, as example, won't be able to reach your business.

The Restaurant Community Epic Fail

When I have seen that Paolo created a facebook group, the first thought has been: well done uncle, keep it updated!.
When Paolo asked why the site I was planning to create could not have the community section, this is what I have answered:
  • it's a restaurant, not a social network
  • nobody comes back to a restaurant website. Once they reach the place, they'll come back to the restaurant, if happy, or they won't
  • if anybody is interested in your group, there is a link that points to this group ... and since facebook is the only place they will go back for sure, on-line speaking, let them chose to join the group and be notified via their home screen wall
Paolo understood my points, I still do not get why on earth a restaurant should create a community online with events notification, the registration form etc etc ... seriously, let social networks do this job and don't waste your time/money for this stuff ( KISS and YAGNI )

As Summary

I made this page as simple "best luck, uncle Paolo" present and over a week end and I hope you will like it. It is simple, it follows my favourite principles, and it's not pretentious as many other restaurant websites I have seen out there.
Why did I post about it? To make a bit of advertisement for my uncle delicious food from Tuscany, and to tell the story about how the web is still too much stereotyped and rarely ad-hoc from real business value perspective.
Keep it simple, and try to obtain the most important goal first: everything else could be added later, and only if you need it!


Anonymous said...

to keep the site simple is a thing, to use 8-bit PNGs as fullsize photos in the gallery is not KISS, it's simply bad :D .
C'mon, for real world photos use JPGs, or at least 24 bit PNGs ;-) !

Bellalì ragazzuolo

Andrea Giammarchi said...

yep, the gallery part will be improved soon, this is not the only problem there and the post was more about the landing page ;)

lrbabe said...

+1 for jpeg over png8, we're back 10 years in time.

Andrea Giammarchi said...

some full size picture is already png 24bit, some will be soon ... this post is about the landing page, you both picked up about the gallery which is not strictly related, neither that bad looking, at least from my devices and my Mac.

The gallery will be updated soon in any case, the landing page is by choice under 100Kb, font excluded, font loaded only in updated browsers.

Have a nice Sunday :)

Chris said...

I'd like to think what your saying will happen, that HTML5 to bringing about the end of horrible flash intros and the like, but I'm concerned that it is just going to replace the technology and not the use of it. After all flash intros themselves superseded horrendous animated GIFs!

BTW you appear to be pulling in the same home.js script twice on the gallery page.


Andrea Giammarchi said...

cheers Chris, it wasn't harming but nice spot, already removed ;)