The web is changing. With some of the new HTML5 and CSS3 standards now being supported by IE 8 and above, more options are available now than ever before — especially for forward-thinking UI Developers.
It’s hard sometimes to keep these new techniques at bay when they are able to do such amazing things for your clients, like restructuring a web site layout on the fly with a flexible, responsive grid system — one of my favorite being designer Andy Taylor’s (@andytlr) 1140 CSS Grid System
In the spirit of collaborative development, let’s take a look at how the historic Boston Globe redesigned the new BostonGlobe.com using a flexible grid to create an all-in-one web application that scales for tablets, desktop browsers, and mobile devices. Jeff Soderman (@jeffsonderman) of The Poynter Institute has a nice, concise write-up on the Poynter blog.
Catering to the plethora of mobile devices on the market today is a new and evolving challenge, according to Chris Coyier of CSS-Tricks.
“Browser support for media queries is surprisingly decent. Internet Explorer 9 will be supporting it, but IE8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I'd either fake it with JavaScript or use anIE specific style sheet and style it in the same style as the most common browser width (sic).”
Implementing Flexible Grids
To really embrace these new standards one must dig in and apply these technologies to their designs. Earlier this summer, I had an opportunity to embrace these new standards when I worked on several iPad applications. As you may know, Safari browsers use WebKit as their rendering engine, making Safari one of the most progressive layout engines in use today.
The joy of working with a WebKit browser (like Chrome or Safari) is that that it supports most of the latest standards and you rarely have to employ fixes or hacks. In addition, the iPad has a fixed height and width for both horizontal and landscape display, so we had a progressive, stable development environment that really allowed us to push the UI envelope.
Immediately after wrapping up these projects I wondered how these technologies could be applied to standard web sites. You know, the ones that have to respect antiquated browsers like IE7.
In A List Apart article in May of 2010, Ethan Marcotte, a fellow Boston designer, coined the term Responsive Web Design. Since then, he’s published a book on the subject and has prompted some very interesting challenges and questions for modern development. 
In the book, Marcotte compares web architecture to traditional architecture, and the new trend of having spaces, like walls, mirrors, and other dynamic construction materials, adjust to building occupants. Have a dinner party with a crowded room of people on a summer night, and then maybe your LCD-enabled wall changes from a warm red color to a cool blue. Some walls are actually able to sense when a room is filling to capacity and adjust to expand the space of a room. As web architects, we can take several cues from the architectural community.
At the end of the day, the web is a very dynamic environment and many budgets have gone overboard trying to accommodate the various entry points to a “web business” or application. From URL redirects, to micro sites for mobile, why choose?
I suggest that a standards-compliant site can be built using today’s technology that not only adjusts its display based on whichever medium the client is using, but also responds to client feedback and allows users to customize their experience with simple browser cookies.
I always found it disconcerting to open a site on my iPhone only to get prompted to visit the mobile site. What’s wrong with the site I’m currently on, and what am I going to miss if I visit the mobile version?
A smart UI Developer should avoid tasking the user with making that decision. It is our job to stay 2-3 steps ahead of the consumer, making their web experience simple and fluid. Today, due in part to Ethan Marcotte’s trend-setting article, we shouldn’t have to ask users to choose between different versions of content when today’s web sites can be scalable, not only in design, but in structure.
A review of our clients’ site traffic for January 2009 reveals an average of about 0.5% of visitors are using an iPhone to browse sites. Consumer focused sites – such as museums – are seeing the biggest iPhone usage with rates starting to pass 2%. With record numbers of iPhones being sold, these numbers are sure to increase. Other newcomers including Google’s Chrome browser and Sony Playstations are showing up on usage reports.