Designing for Your Customer’s Browser/Device

As web designers we are tasked with developing sites that are not only attractive and functional but also provide a consistent look regardless of where they are being viewed.

In a former job, one of my main tasks was to design marketing email campaigns to send out to our 50,000+ customer lists a few times a week. After working out the finer details of the message, the offer, and the layout I set out to break apart the PSD and create an HTML version that was both SEO and viewer-friendly.

Most times it was a pretty straight-forward task. That is, until I hit the testing phase. Now, I constantly preview my work in a browser to make sure that everything is looking right throughout the process, but every once in a while I’d run into issues with how a particular design would display depending on where I was viewing it. You see, different browsers will interpret the HTML code in slightly different ways. Some might display text at a different relative size, some might add a little extra space below an image, some might display colors differently.

Compounding the problem with the marketing emails, not only do browsers vary, but email clients do as well. I would often test my emails in Outlook 2003, Outlook 2007 (which is a HUGE pain to design for), Gmail, Yahoo, AOL, and Hotmail, and then test all of the web-based email clients again in Chrome, IE, Firefox, Safari, and Opera, just to make sure I had all the bases covered.

Why did I go through all of this trouble? Because you don’t always know where your visitors will be coming from.

If you don’t have Google Analytics setup for your site, do it now! I’ll wait… The tools in there allow you to see what operating system, browser, web-based email client source, and connection speed your visitors are using to get to your site. By keeping track of what the majority of visitors are using, you can cut back on which email clients and browsers to test with. Why test in AOL or with Opera if only a trace number of visitors are using them? The argument is that you should put your time and energy into designing for your target audience. If most of your visitors are using Chrome, then you know where to direct your efforts.

A real-world example of this is, at that same old job we were looking for ways to include more on our product pages without making visitors scroll too much. So, I took a quick look at our analytics and saw that over 95% of our visitors were using screens with a resolution over 1000px wide. Yes, we still had visitors coming in with 800×600 screens, but there weren’t many. We figured we could increase the width of our site by 150px or so to give ourselves room to work with so we could enhance the customers’ experience. We knew we would be further alienating the very small percentage of people with really small screens but, at the same time, they were probably used to having to scroll left and right and down to see everything since most websites now are bigger than the antiquated 800×600 resolution.

The results were quite clear, actually. We saw an increase in time spent on the site, increased sales because of the added features, and we didn’t see much of any change in the visitors with smaller screens.

For a more complete write-up about this topic including some strategies, check out the article Effective Design for Multiple Screen Sizes on mobiForge (via +Debi Bower).

No Comments

Leave a Comment: