When building, redesigning, or maintaining a web site or web application, it’s important to understand the technology visitors will use to access the site to create the best user experience possible.
So what do you need to consider? Although there can be many factors at play, here are the key questions you should answer:
- What browsers are used to view the site?
- What devices are used to access the site?
- What screen resolutions are commonly used by site visitors?
Most of us web developers have a tendency to get pretty excited about using new coding techniques and technologies like CSS3 and HTML5, but it’s important for us to consider what browsers the site visitors will be using so we can determine whether those techniques are appropriate or not.
If you find that your user base primarily views the site in recent browsers, then you may have more flexibility with new technologies. However, if you find that a significant portion of users are accessing the site in older browsers, you’ll need to make sure that they can complete all functions without any major drawbacks.
That doesn’t mean that the site has to look identical in all browsers however. Many web developers commonly employ a technique called progressive enhancement. This coding technique allows for users in recent browsers to see the site design as intended (with enhanced design elements) without negatively impacting the experience of users in older browsers in a significant way. Enhancements might include design elements like rounded corners, gradients, or drop shadows.
There are many desktop browsers that support progressive enhancement techniques including Google Chrome, Firefox, Safari, Internet Explorer 9, and Opera. Internet Explorer 8 and lower usually do not get the benefits of such enhancements.
Most mobile browsers tend to have good support for progressive enhancement techniques as well, including the default Android browser, Safari, Google Chrome, Amazon Silk, Opera Mobile/Mini, and many others.
Understanding what devices your visitors are using will help you engage with them more effectively. There are many devices that allow people to hit the web in addition to computers, including tablets, phones, and gaming consoles. Most computer users access the web in a similar way, with a keyboard and mouse, but don’t forget that there are some users who rely on screen readers to recite the content of the page to them and who navigate by keyboard only.
Tablets and phones are “tap” devices, meaning that users interact with web sites using their fingers. For these devices, it’s typically helpful to create larger tap radii for links and to avoid displaying critical content on mouseover or via right-click.
Because there are many different ways to access a web site, it’s important to design and develop with accessibility in mind. You should always aim to make your site accessible for your target audience and their expected browsing devices, but not at the expense of impaired users.
With users accessing the web on phones, tablets, PCs, laptops, TVs, and a seemingly endless number of devices that come in all shapes and sizes, there is, likewise, a seemingly endless number of screen resolutions that you must consider while developing a site.
PCs and laptops tend to have resolutions equal to or greater than 1024 x 768 pixels, although you may still see a few users running at 800 x 600 pixels. 1024, though possibly the lowest desktop resolution that you’ll need to really consider, is still rather popular and has held a significant portion of the market share for many years. You should, in most cases, consider that to be your base and confirm that your site is usable at those dimensions.
Phones, tablets, and netbooks bear further consideration. If your user base includes a number of mobile users, you may be able to improve usability significantly by applying a different layout or styles optimized for smaller sized screens. CSS3, widely supported by recent mobile browsers, offers an elegant solution of applying different styles at different browser sizes and is often the preferred approach.
Bringing It All Together
Understanding how users experience your site or application will allow you to serve them better and, ultimately, improve overall customer satisfaction. The easiest way to gather data on browsers, devices, and screen resolutions is via Google Analytics, which offers reports for all three. I highly recommend that you review these reports to get a better understanding of your users, especially if you are considering a redesign for your current web site and to close it out, here are some nifty screen shots of those reports: