The number of platforms, operating systems, screen sizes, environments and even contexts that users experience a web site in a browser has expanded and changed significantly since we created our first animated gif hosted on Geocities. It’s hard to believe that yahoo.com was table-based, using <center> tags and was 760 pixels wide when the first generation iPhone was released in June 2007. A lot has changed.
First of all, web technologies over the last few years have made a significant departure from browsers all-together. As I write this, my family is using the internet to watch the Cosby show on Netflix through our PS3. I haven’t visited twitter.com in ages because I much prefer their desktop app. We visit blogs less and less in favor of media coming to us, many times through apps outside the browser like Reeder.
But we still use browsers a lot, no question. Google’s taking a very different approach than Apple in the way they want people to use the web by bringing everything into the browser with ChromeOS. Most small businesses need a simple site that works in a variety of platforms, contexts and environments, and that’s it. But even that’s it can be a difficult task.
So where does this leave web designers and developers? How do we ensure that our lovingly crafted work performs great for all users in all of their various environments? I think we all agree that the short answer is we can’t, but there are some approaches that can greatly benefit our users and clients, and reduce our own headaches.
1. Gauge your target audience to decide how thoroughly you should debug versions of Internet Explorer
Chances are that for most projects a good chunk of your traffic is still using IE6. I know, it’s 2011 and Facebook dumped IE6 back in August of 2010. But the 20% of your visitors that are trying to figure out why a paperclip pops up when they start typing in Word (depending on your target audience) didn’t know Facebook did that and don’t care. Try to get out of the techno-bubble and make sure the information and usability of your site is adequate for the least tech-savvy people in your target audience. This is significantly more important than getting on a soap box about the semantic web and how css3 transitions and the canvas element will kill Flash by the end of the week. It doesn’t have to be the same design at the pixel level, but it shouldn’t look broken either. You can use “please upgrade your browser” prompts, but don’t rely on them to get away with a site that’s unusable in IE. There are folks out there that either don’t have a choice since it’s a business machine, or don’t even know what a browser is.
If your target audience for a project is pretty hip to the snip on the web, you can likely relinquish even more details for IE users, since the significantly small margin of your audience that uses IE probably came to the site through a link or a search and isn’t directly interested in the content. The level of graceful degradation you adhere to is different depending on your target audience’s web experience.
2. Yeah, media queries are cool, but…
….there are a million ways to conditionally change information, layout, design, etc. for users who come to your site from various mobile devices. Media queries are just one of many tools at our disposal for presenting “responsive” web sites, to coin the trending phrase. Many times it’s best just to serve up different code by running a server-side conditional that looks for the browser and platform, since a site needs to be significantly faster with less http requests in a mobile context. What good is a media query that just hides elements if the site is still as slow as molasses on a 3G network?
3. As much as you can, debug all the browsers your target audience will use at the same time during front-end development
- Create your markup all the way through for a given page before doing any css. This helps to ensure that your markup is as clean as possible since you’re focused entirely on the semantics
- Style one element and debug that one element for all browsers to the level you feel is appropriate for your audience. Add elements to the markup only if they are absolutely necessary, and only if they are semantically acceptable.
- Send off for review with the assurance that everything works as it should in all the browsers it should.
- Have pity on the people that are searching through a hundred lines of jquery for a missing semicolon that breaks a site in IE but works in everything else.
4. Use the latest technology first
If you follow the workflow described in number 3 above, it can really release you to play around with the latest and greatest css specifications and html5 markup, and there are some great tools for bringing more archaic browsers along for the journey with some of the more common css3 styles (CSS3pie, modernizr, html5shiv). You should be as forward-leaning as possible in this regard for a number of reasons. For the best browser rendering engine (Webkit) and fair ones that at least recognize a good chunk of the css3 specification (Gecko, Presto), using css3 can significantly reduce the size/weight of your site. It goes without question that it also greatly increases the speed of front-end development. Pushing the latest technology in your development is also a very good thing for the overall progression of the web technologies. You’re encouraging things to move forward. You’re learning the tools and skills that everyone will be using 6 months from now.
5. Consider the context before making radically alternative site design and functionality for mobile browsers
Unless there’s a very clear situation where your visitors would use your site in a mobile browser on a consistent basis, just make sure at the bare minimum that your site is usable in a mobile browser. If there is a specific situation/context where your users would visit your site often in a mobile browser, consider whether it would be even more useful as an app, or at the bare minimum that its interface within the browser feels intended and comfortable for mobile use.
6. Don’t start with following the trend. Start with searching for the greatest solution.
The web offers a vast ocean of opportunities to innovate and be creative. It’s good to have and develop technologies and standards like HTML5 that attempt to ease the burden of developers by providing consistency and predictability and creating cohesion between devices and platforms. At the same time, there really, really are no rules on the web. If you think of a better way to build something that proves to have great qualities (useful, reusable, lightweight, easy, framework/language agnostic, etc.), go for it, even if it flies in the face of the latest trend. This is especially true if you see that a trend is actually a very poor choice, and that there are several much better solutions out there. It’s beneficial for the web community at large for you to be creative, experiment, and share your solutions.