When it comes to web design and development, what you see is most definitely not what you get.
Before writing any code, the client reviews design layouts to show what the website will look like. Unfortunately people tend to treat these the same way they treat print proofs. They think once they sign off on the web design comps, that is EXACTLY what the website will look like. The problem is that not everyone is looking at your website with the same operating system, web browser, screen size, or pixel density.
All browsers are not created equal.
Although browsers should conform to W3C standards, they are not required to. Complicating matters further, the W3C standards are always evolving and expanding. But the browser companies decide when and how they implement these changes. Each browser interprets the same set of code slightly differently. For instance, Internet Explorer will optimize it for Windows while Mobile Safari will optimize it for the iPhone. Sometimes these different interpretations are barely noticeable and other times they are very dramatic.
Complicating matters even further, there are always multiple versions of a browser being used at any given time. For instance, Internet Explorer 8, 9, and 10 are currently being used. Each version displays the same web page very differently.
Test. Test. And test some more.
It’s crucial to test your website in multiple browsers and versions of each browser. It can be a daunting task, but with a good strategy and some technology, any pain is totally worth it.
Step 1) Know yourself.
Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.”
― Bruce Lee
The first step is to change your perspective. Separate design and content. What happens to your precisely designed desktop website when it’s displayed on the small screen of a mobile phone? Does the content reflow to use the small space? What happens if the user has vision problems and increases the font size to 30pt? The design must be flexible. You can either create a website that flows like water to take on the shape and size available or you can demand a rigid, pixel perfect design that will “crash.” Don’t waste time making sure that a line break hits properly in all 20+ browser iterations. It might work for a while…until a new browser version comes along. But think of the time and money you wasted and what you could have invested in better marketing or content. This doesn’t mean compromising your design. But you will need to stop treating website design like print design. It’s a different medium with different challenges and requirements.
Step 2) Know your audience. Look at your current website analytics and see what browsers your customers are using. How much traffic comes from mobile devices? How many customers are using Internet Explorer?
You should also view global usage breakdowns per browser. It’s important to know the most popular browsers and what version of those browsers are used most. Compare those stats to your web analytics.
We’ve found that global trends don’t always match up to vertical market usage. For instance, Internet Explorer 8 usage is 5.5% globally. But you may find that in your vertical market that Internet Explorer 8 usage is over 30%. Armed with this information, you’ll be able to easily determine how much effort you need to put into dealing with browser quirks.
Step 3) Know thy enemy. Every browser has its quirks. As stated earlier, every browser translates and displays the same code differently. Know the differences or find someone who does.
Step 4) Know the tools of the trade. There are a number of tools (free and pay) available for testing your website on multiple operating systems and browsers. Some will provide a screenshot of your page in each browser.
Others diagnostic sites test your site live. You log in and select the operating system and the browser version to test the page. For instance, you could select Windows 7, Internet Explorer 9. This type of solution is great for testing customer processes like a shopping cart checkout.
Adobe Edge Inspect
It’s essential that your website looks great for all your customers, and with the amount of fragmentation in the browser market, browser testing is a must. It can be difficult and time consuming for the novice. If testing is not built into your development budget, it should be. The ROI is very high if you have an experienced developer.
See more of our web design posts on WavyBrainy; and leave comments below!