My first HTML5 powered website (www.navinsoni.in) has been up and running for a few weeks now and has even been featured on HTML5Arena, a gallery showcasing interesting HTML5 sites on the world wide web at http://www.html5arena.com/websites/view/489/navin-soni.  I am thankful to my boss, Navin Soni (not only because it is the redesign of his personal website), for letting me take it up as a project (and go nuts with it) amidst other work for (often unreasonable) clients. I utilized the opportunity to learn and build a website using the latest toys in a web designers’ arsenal, namely HTML5, CSS3 and dollops of Javascript and jQuery as toppings. While NavinSoni.in explores much of the new HTML5 markup and several CSS3 techniques, I have tried introducing some JavaScript based techniques that I yearned to implement but never could because there wasn’t the “right” project, but getting a license to experiment on this project was liberating. One of these techniques was making the site technically “one page” as the content moves horizontally within a “frame” (technically it just a div) while the rest of the site, including the navigation, header and footer is fixed. Another Javascript-powered eye-candy I added was a flipping-tab effect on the “about me” page (or maybe I should say “frame”).

As for the HTML5 used, it is true that a majority of the features are just not supported on present browsers, but one condition that developers should keep in mind is that while we are developing for the future, we need to have fallbacks that work NOW in the “real world”. And for now, Javascript libraries are the solution. I took Paul Irish’s HTML5 Boilerplate as the base over which I built the site. It has pre-included the Modernizr (modernizr.com ) – a HTML5 detection library (its written in JavaScript) which detects if an advanced feature used in the website is supported in the current browser. This lets developers take advantage of such features in the browsers that support them, yet create a fallback in the browsers that lack support for that feature. We can use the new semantically sound elements (article, section, aside, header, footer, nav among several others) RIGHT NOW. Oh and, by the way, of course you can implement Modernizr even you are not using the HTML5 Boilerplate.  Interested? Do read this piece at AlistApart. And yes, another challenge was to keep the HTML5 markup W3C compliant (http://validator.w3.org/check?uri=http%3a%2f%2fnavinsoni.in%2f).

I have tried to use minimal images for presentation and a lot of effects are done using CSS3. For example, the tabs on the home page are not images, neither is the curved red paper kind of element below (on non-IE browsers) the tabs that flip on being clicked. Also note, the main navigation tabs (About, Ventures, etc.) are not images! Surprised? It’s all CSS3. Hint: I have played with CSS3 border-radius, the transform, and CSS3 gradient features.
You can take a look at the site at: www.navinsoni.in. And, if you are a developer willing to get their hands dirty with HTML5, you can also do a control+U (view source) and study the markup and also check out the style.css to get a taste of the CSS3 goodies.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark