Web Design: Modern Web Browser Challenges
So many web browsers, so little time…
With an unprecedented number of internet-enabled devices on the market, and with many older devices still functioning well, there have never been so many web browsers and program versions to consider. From the stock browser in Android devices to specialist platforms like Tor, via mainstream web browsers including Opera and Dolphin, this diversity poses a number of challenges for designers and web hosting companies. After all, a BlackBerry PlayBook user doesn’t really care if a particular webpage has been optimized for desktop use – their only concern is that the site looks good on their device.
Take a Head Count
The first thing to acknowledge is just how many browsers currently exist. The Android app store alone is packed with alternatives, each offering a variety of functionalities from ad blocking to seamless video streaming. Desktop users can stick with the venerable Internet Explorer or upgrade to its Edge successor, go corporate with Google’s Chrome and Apple’s Safari, or select a grassroots platform like Firefox from the community-driven Mozilla Foundation. Even a single brand can have multiple versions – the freeware Maxthon browser is compatible with everything from MacBooks and towers to Kindles and Windows Phones – with multiple generations of browsers varying subtly but markedly in their architecture.
Simplicity is Key
A web designer aiming for universal accessibility must design a site simple enough to run on any platform before comprehensively beta-testing it to check for incompatibilities or glitches. Each browser brings its own demands, with Tor’s slow ping rates making autoplaying content inadvisable and Safari’s disdain for Flash meaning HTML5 is a safer option. Indeed, HTML5 has been engineered to create universally acceptable standards for web page text, so it’s a relatively safe programming language to choose.
Pixel Perfect
Another challenge involves screen resolution. There are currently five main standards for high definition output, ranging from 1280×720 up to 4096×2160, and modern mobile devices might offer any one of these. The safest bet from a design perspective is to create a webpage no wider than 800 pixels, which will display consistently with a varying quantity of blank space either side. Vertical scrolling is more socially acceptable than horizontal scrolling, so it’s better for webpages to be tall and narrow than short and wide.
Even on devices with the same pixel width, variations will occur. Some devices have different display ratios resulting in letterbox-style viewing modes, and a few can accept stylus inputs alongside the ubiquitous touchscreen controls. Since neither of these input methods is pixel perfect, it’s vital to ensure hyperlinks are reasonably large and well-spaced to prevent users accidentally tapping the wrong one. A top navigation bar ensures easily accessible governance for vertically scrolling pages, and it goes without saying that TLS should be factored into every ecommerce site. HTTPS pages should display even on archaic browsers.
Be Responsive
A few general rules also deserve mention. Because the majority of web traffic is conducted through mobile devices with erratic wireless connections, websites should be designed with plain backgrounds and compressed images. Sites that detect smaller screen resolutions and resize responsively tend to look more professional than one-size-fits-all alternatives, and a minimalist framework will always download more quickly than a bloated one. Avoid the need for browser plugins if at all possible, and get friends and family members to test a site prior to going live to identify glitches on particular versions of different browsers.