23rd February 2011
Throughout the course of my web development career I have debated this point with project managers, designers, clients, and even other web developers, who have argued that websites should look identical in every browser.
There are several reasons that is impossible:
A lot of websites make extensive use of images for headings, navigation items etc to get around this problem, but this results in slower page load times and loss of definition when zooming in. And even this won’t fix the problem. Viewing an image heavy website on the iPad will look very different on Amazon’s Kindle.
Loss of definition when zooming in on images
Rounded corners is a perfect example of the differences between browsers. In CSS3, we can specify “border-radius” to create a border with rounded corners. It will work in all the latest versions of Safari, Opera, Chrome, and Firefox (with the property “-moz-border-radius”). Microsoft haven’t implemented CSS rounded corners in IE8, so web developers are forced to implement an alternative such as the jQuery Rounded Corners plugin, or resort to using images. Either way, web developers probably should implement two solutions - one for browsers which have implemented rounded corners, and another for those who haven’t. But more often than not, web developers implement a “one fits all” solution which makes the page load more slowly, is less accessible and generally stifles progression - developers put more effort in to making sure their site is backwards-compatible than making sure their site makes full use of the latest web development technology. But I suppose the one thing we generally can’t do is tell our clients that the rounded corners don’t display in one of the most popular browsers, so we have to implement that alternative.
The main thing I want people to realise is that the web is not print. The web is very much about design, but just as (if not more) importantly, the web is about content, user experience and accessibility - people should be able to consume web content from their laptop, PC, phone, tablet or screen reader.
My strategy is simple: ensure the site looks as close as possible to the original design in the latest version of all the major browsers, and ensure the content and functionality is accessible in in older versions, across a range of platforms. The most important thing to test in older browsers is functionality and accessibility - if functionality is visible in older versions of a browser, make sure it works! If your functionality is only supported in the latest browsers, ensure their is a graceful fallback, tell the user what they’re missing and encourage them to upgrade!
Youtube in Internet Explorer 6
Digg in Internet Explorer 6
For me this goes slightly too far. Like it or not, there are still a large number of people using Internet Explorer 6 - so it’s important to spend time making sure the site looks error free, but it’s equally important no to spend hours pushing pixels trying to reach an unachievable goal.
And above all else, does the user really notice? If you were to visit a website in Safari, then then next day visit the site in Firefox would you notice if the font was 1px larger? Would you notice if lines of content were 4 pixels longer? There are plenty of beautifully designed sites out there which look amazing regardless of the minute differences between how they look in various browsers. And if god had wanted websites to look the same in every browser, he would have created a “world wide web consortium” to get browser vendors to agree on a set of core principles which would be supported by everyone.
On Tuesday I eagerly downloaded the new version of Internet Explorer, hoping that this version would be a turning point for the browser. I hoped this might be the end of IE’s inconsistencies, the start of Microsoft conforming to web standards, and the death of IE-specific style sheets. …
19th March 2011read more »
I use jQuery cycle for lots of freelance development projects, but ran in to problems recently when building a photography site. My client was uploading around 40 high-resolution images in to a slideshow, which caused two problems …
15th February 2011read more »
I’ve just spent a while trying to fix a really annoying little problem using TinyMCE in Drupal 6, so thought I’d share the solution. My client was entering content into a TinyMCE text field and had complained that the spacing between paragraphs and list items was too big. …
7th January 2011read more »