Even the browsers were getting easier. Webkit and Mozilla based browsers were the most standards-compliant we’ve ever seen. IE8? Not bad for a Microsoft browser. IE7 was a bit of a mess, but nothing like IE6 which finally fell below 10% usage. Mobile? To some extent there were so many different phone operating systems and phone browsers that many of us had given up bothering. Call it a head-in-the-sand approach. But it sure made things nice.

Then Apple sold 3 million iPads in 80 days.

#*@&!

Oh yeah, and the iPhone4 is out with a super high-res screen. And mobile seems to be consolidating. The big three (in no particular order) are Android running Chrome (webkit), iOS running Safari (webkit), and Blackberry running who-knows-what but people who care can download Opera which is right there with webkit when it comes to web standards. So guess what. Mobile matters. It matters a lot. And the mobile space is clearly not as fragmented as before.

All of this adds up to a big problem. People are viewing our web sites on all kinds of screen sizes. 1024 is no longer a magic number. Not when mobile growth is 8x that of desktop growth. The pace is so hot that it looks like mobile web access will eclipse desktop web access in just 3 to 5 years. So yeah mobile matters. And size matters. The number of screen sizes we should care about just jumped through the roof given the variations of phones, iPads, tablets-yet-to-come, netbooks, laptops, desktops and external monitors that are already out in the field.

So what’s a designer to do? How can we avoid being thrown back to the horrid days of browser-sniffing and coding completely different HTML layouts for different browsers and devices?

The answer is blowing in the wind, and it’s called Responsive Design.

The core principles of Responsive Design for the web are using a flexible grid, sizing design elements as proportions (%) rather than pixels, and using CSS3 media queries to make your design responsive to the size of the viewport or device.

Wait wait wait you say: this sounds a lot like fluid layouts which have been around forever. Sort of, but in the words of Jeffrey Zeldman “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”

The lynchpin in this technique that doesn’t suck is the use of media queries, a CSS3 feature, that allows you to change how elements are displayed based on the size of the viewport. This even works dynamically while you are dragging the corner of your web browser around. This lets you create a design that morphs into a one column layout for small viewport or device sizes, and a three column layout for large viewports, but not TOO wide if you are on a 1920px wide browser. Yep, you can even keep line lengths readable.

But CSS3 isn’t supported by IE8. Or IE7. Or IE6. No problem. Turns out there a Javascript workaround that enables IE5+ (yes, that’s right, IE5+) to interpret media queries. http://code.google.com/p/css3-mediaqueries-js/ Now we’re talking!

Media queries are supported in the latest versions of all the other browsers that matter including: Opera 9.5+, Firefox 3.5+, Safari 3+, Chrome and Mobile Webkit.

And to sweeten the deal, the Javascript workaround mentioned above also allows Firefox 1+ and Safari 2 to use media queries

Ready to learn more? Start with the definitive article by Ethan Marcotte:
http://www.alistapart.com/articles/responsive-web-design/

Follow up here, which includes links to some related articles, shares the history of the very recent evolution of the technique, and includes links to several sites already using the technique:
http://www.zeldman.com/2010/06/23/responsive-design-is-the-new-black/

I’ll be demonstrating the techniques at the upcoming Fort Collins Internet Pros Meetup on Thursday, August 12. Learn more and RSVP here:
http://www.meetup.com/goFCIP/calendar/12297128/

Remy reviews two HTML5 features:

1. Storage including localStorage and sessionStorage which are local data storage capabilites that surpass the capabilities of cookies (to say the least), and
2. Offline Apps: specific techniques so you can tell an offline browser to load required files for a web site or web app from a local cache, thus making the web site renderable or the web app functional without a connection to the Internet. Supported presently by Safari and Firefox though the applicationCache methods.

Pretty interesting stuff to keep an eye on. These capabilities alone are a good reason to me to start using HTML5 now. As more browsers support these features we can create web sites using just HTML5 and Javascript with capabilities of full blown web apps. And they’ll work even when not connected to the Internet. Awesome.

I’ve been fascinated with the idea of “occasionally connected apps” since Macromedia Central was introduced in 2003 (since discontinuted, Adobe Central Developer Support Center, Anatomy of a Central App, Central Blog). Adobe AIR is making good inroads as the present platform of choice for occasionally connected apps. It would be a major improvement to have this capability without the requirement of a proprietary pluigin, i.e. the Flash Player. I’m excited to see active progress in that direction.

1. Content & functionality
2. Navigation & usability
3. Design

I want to point out, these were determined by a thorough scientific study consisting of me thinking about this for at least 18 seconds. The question I thought about is this: when I hear people recommend a web site to their friends, when they say, “Hey, check out this web site, it’s great”, what do they mean? Why do they think the web site is great? We’ll delve into this more shortly.

The web site owner clearly has a stake too, and I would argue that what makes their own web site great to them is generating more conversions (in the SEO sense of the word), which in the case of a commercial business means more sales and a bigger bottom line. A bigger bottom line also means minimizing the cost to build and maintain their web site.

Achieving that success for the web site owner requires the three items above, plus one more:

4. Structure

Within “Structure” I include coding to web standards, and implementing appropriate accessibility guidelines. Such a structural foundation to the web site maximizes the number of visitors that can use the site: it opens the site to visitors with special needs, and makes the site look and function correctly across the largest number of web browsers and display devices possible. Utilizing web standards also minimizes the cost to develop the site, makes it easier (and therefore lest expensive) to maintain, and makes it possible to implement Search Engine Optimization techniques to maximum effectiveness.

To be continued…

Well, which browser you use is less important than having the realization that not everyone on the Internet uses the same web browser you do. A common mistake we all make at times in life is to assume that others think the same way we do, or do things the same way we do. In consumer circles Microsoft still dominates cyberspace and it is easy to assume that everyone is using Internet Explorer to view your web site. But that certainly is not the case.

The seven most widely used web browsers on the Internet as of last month are, in order of popularity:

Internet Explorer 6
Firefox
Internet Explorer 7
Safari
Opera
Internet Explorer 5
Netscape

Resources for web browser market share stats:
http://www.w3schools.com/browsers/browsers_stats.asp
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

The first three have a total of about 90% of the browser market share. Three of the seven browsers above have growing market share: Firefox, IE7, and Safari. The rest are in decline.

As a web site owner, the reason you care about all of that is that you want to be sure your web site works well in more than just the web browser you use personally.

Every web browser out there renders (displays) any given web page slightly differently (or sometimes drastically differently!). A good web developer will take that into account and make accommodations so web sites they produce display faithfully in a wide range of browsers. Coding to web standards is an important start. After that, browser testing and using browser-specific CSS styles is almost always required to achieve multiple-browser consistency for your web site.

Based on the statistics, at a minimum you want your web site to render correctly in at least: IE6, IE7, Firefox and Safari. These four browsers have the dominant market share, or are growing in popularity. Safari is important as it is the native browser for Apple computers (whose market share is growing), and Apple also recently released Safari for the PC that runs wonderfully on Windows. Safari’s market share will continue to increase as a result.

Opera should also be considered. While it only has about 1.5% market share overall, it is one of the dominant web browsers in the hand-held device market. If having your web site display correctly on mobile devices is important to you, make sure you test on Opera. The mobile device market is extremely complicated to test for because of the variety of platforms and web browsers in use. But Opera is a consideration none the less. Safari weighs in here too – it is the native browser on the iPhone.

Is your head spinning yet? It needn’t be. When you pick a web developer, ask them what browsers they test in. You now have enough knowledge to know if their response is reasonable or not.

Unfortunately there are numerous examples of web sites that look right in only one web browser, and often at only one window size. Thoroughness by your development team makes a big difference. You might be able to save a few bucks by going with a cheaper web developer, but if your site only looks right to 35% of the people visiting your site was it worth it?