After careful research, I decided to increase the width of the 856px layout to 860px. The 856px layout had design issues that affected the symmetry of the layout. 860px is much simpler and to the point. Besides, 10px gutters are easier to work with as oppose to multiple variations based on the number of columns in the 856px format. Yes, monitors are wider now; however, wide screen monitors and laptops are not the only devices that are used to view the web today. (At some point I do believe only designers and developers will actually still use systems with a keyboard and mouse.) The 860px layout is a better jump off stage if one decides to develop stylesheets for mobile devices. Click here to see the example and resize your browser window to various smaller sizes. You can view the switching of the stylesheets based on layout and text size.

The ease of transition from the standard desktop layout of the 860px format to a tablet and smart phone screen size is not incredibly smooth without the use of Javascript. However, it gets the job done. In spite of all the campaigns I have come across to promote mobile stylesheets and plugins, my site renders quite well on the iPhone and iPad without additional stylesheets or scripts. At some point, the use of multiple stylesheets based on screen sizes will become obsolete (which is sooner than later I hope). For now this is a cool little feature.  (download)

I just installed the “Raider” theme on my personal blog. It’s actually an XHTML layout I designed back in February of this year and sort of forgot about it. I came across it earlier this week and decided to convert it into a WordPress theme. I rewrote the markup in HTML5, the styling was already done in CSS3. I also decided to add CSS gradient throughout the site.

I am well aware of how IE7 and 8 can even eff up a wet dream. With that in mind, I took precautions by implementing a custom script from Jeff Way that enables most browsers to display HTML5 markup as you (designer/developer) intend it. However, that only performed half of the job. My CSS3 elements were sprawled all over the place until I installed two other custom scripts. The first was generated at the Modernizr site and the second at Selectivizr.  Both of these scripts are aimed at achieving similar goals, however, Selectivizr is specifically aimed at assisting particular browsers render CSS3. At some point I am hoping this (IE-6-7-8) will not be an issue anymore and we can get on with our lives.