Web Design for User Experience: The 90/90 Rule
Reading Time: 4 minutes
How many digital devices – computers, smartphones, tablets – do you own, or do you have in your household? If you’ve ever visited a certain website on more than one of those devices, you know the way you see and navigate the site is different. You’ve probably come to expect that your website will work on whatever device visitors are using, but how do web developers make that happen?
In the early days of web design, all users accessed the internet from desktop computers, which meant developers only had to test the sites they built against five internet browsers. But we’re no longer able to focus on desktop alone, where all the browsing used to take place. We must now also consider mobile devices. And mobile websites are more important than ever, as mobile web traffic now surpasses desktop traffic. In fact, as much as 70% of web traffic currently comes from mobile devices!
With the additional browser versions and mobile devices – of various screen sizes! – testing has become more complicated, time-consuming, and expensive.
You probably want your website to work everywhere, all the time. But given all the possible options, it would be virtually impossible for web designers to develop websites that work on 100% of browsers and devices 100% of the time.
Which brings us to the 90/90 rule.
The 90/90 rule actually derives from a humorous saying among software development professionals that originated with Tom Cargill at Bell Labs as a way to express how developers don’t anticipate the hard parts. It goes like this:
“The first 90% of the code accounts for 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”
It’s a joke because that totals 180%, which obviously makes no sense. So, it’s become an amusing way of thinking about why software development tends to take longer than typically estimated when projects are planned and why they’re, therefore, notoriously over deadline.
Applying the Rule to Design
Let’s take a second to reiterate what we’re up against. In addition to the various web browsers available, there are three main device sizes to tackle: desktop, small mobile (phones), and medium- to large-sized mobile (tablets). Also, keep in mind that users have the option to view mobile sites in both portrait and landscape by rotating the device – very different views and experiences, right? Finally, consider how different navigating with a keyboard and mouse is from navigating on mobile. (For example, there’s no option for making items appear on “hover” – when you move your mouse over something but don’t click.)
Achieving perfection on all those possible options would take forever and cost eleventy-million dollars (give or take). So, developers have to use their time and tools wisely to make sure they get the most bang for their buck to maximize user experience across devices and browsers. Therefore, their goal is typically to reach 90/90 – to get to where sites work on 90% of devices, 90% of the time.
There are two ways to get to 90/90: responsive design and multiple layouts. Multiple layouts is exactly what it sounds like – creating multiple designs for desktop and mobile. Responsive design refers to ways to create web pages that adapt to different sizes. So, although it’s impossible to get sites to work perfectly with every possible screen, responsive design tends to make most of them “happy.”
Aside from the obvious reasons you’d want your website to look good no matter how visitors access it, getting the design right is important for other reasons. A properly designed site will load quickly, which means fewer users will ‘bounce’ out of frustration. Also, aesthetics aside, when people land on your site, they need to be able to find what they want – and easily – or they too will bounce. And guess what’s one of the factors that affects your search engine ranking. You guessed it: bounce rate. Search engines won’t “reward” you with visitor traffic if the data indicates visitors leave the site quickly.
What Does This Mean for You?
Well, for one, be kind and trust your web developer! There are a lot of variables to consider, and your developer is going to know how to maximize your site’s user experience across devices.
Next, tell your designer if there is one particular device your website absolutely, positively must fit. For example, the screen size that everyone in your office uses for an internal site, or a site for use on specific screens in a brick and mortar store or kiosk. Your developer can nail that one, critical size and then optimize for other options.
Third, prioritize! Your developer can give you specific advice, based upon the needs of your site and your audience, and will design accordingly. But as you review designs in development, stick to the most commonly used browsers, which are Chrome, Safari, and Android. (And avoid Internet Explorer, as fewer and fewer people use it, and Microsoft no longer supports it!)Finally, use the tools available for checking how mobile-friendly your site is without having to track down all the different types of devices to see what your site looks like on them. For example, copy your site URL into Google’s mobile-friendly testing tool for immediate feedback on how Google evaluates your site. Browser Stack, which offers a free trial, allows you to test your website across thousands of browser and device combinations. Finally, Geopeeker, which has both free and premium options, offers insights as to how your site appears and functions in different parts of the world.
Designing Gorgeous, Responsive Websites for Our Clients
At Raney Day Design, we create websites that are not only visually appealing but also provide your site visitors with an amazing user experience. Our design and development team has a reputation for maximizing performance across browsers and devices to ensure your visitors have a great experience on your site. There are two ways to learn more about how we can help you design a website that attracts your ideal audience and converts them into clients.