Battling The Browser: How Fluid Is Your Web Design?

In today’s online climate your website must be optimised to display across a range of browsers. Find out how below.
A badly-presented website can be the kiss of death for potential customers. If you want people to engage with your brand and entrust you with their hard-earned money, presenting a professional face to the world is absolutely critical. After all, a public website is often the only tangible impression customers get of a brand.
However, achieving this can be surprisingly challenging, particularly given the modern diversity of website browsers. From Apple’s ubiquitous Safari to the brand new Microsoft Edge, getting the same content to display consistently across different platforms can be a real headache even for professional programmers. These are some of the technical challenges posed by different browsers, with tips on how to overcome them…
Internet Explorer
While IE has now been archived by Microsoft, it once posed a great obstacle for web devs worldwide. Once described as “the bane of most web developers’ existence”, the late and unlamented Internet Explorer has become increasingly problematic since its IE6 heyday. Display issues became so chronic that a free Google Chrome Frame plugin was released, enabling people to effectively turn IE into a Chrome emulator. Microsoft’s IE Developer Toolbar enables programmers to selectively disable particular settings and display image dimensions, while TamperIE is a security testing tool that works on http:// sites and can be used to identify security flaws.
Edge
The death of Internet Explorer was greeted with cheers among the web development community, but it remains one of the most common website browsers. Its replacement is the largely-unknown Edge, which has been in beta testing for some time. It runs on EdgeHTML (itself based on IE’s old Trident layout engine), and the likes of JavaScript shouldn’t need modifying. However, users are already reporting issues with slow loading of graphic-heavy sites and the inability to scroll down until all the content has downloaded, a particular bugbear with Edge’s predecessor. Creating sites with low-res graphics may be advisable, at least in the short term.
Chrome
As the world’s most popular browser, Google’s Chrome is widely praised for its stability. Historic issues have included fonts not displaying properly and pages hanging rather than loading, but Google has been highly proactive in resolving these issues. Chrome’s built-in developer tools are also handy for debugging extensions and pages.
Firefox
Now into its 40th incarnation, Mozilla’s Firefox is also considered to be a stable platform compared to the likes of Internet Explorer. Firewall and cache issues can prevent objects from downloading, while sites with SSLv3 often fail to display at all. However, most known issues with Firefox can be resolved by individual users adjusting their display/hardware settings, which means there’s relatively little for programmers to worry about in terms of compatibility. For instance, missing content is usually due to the absence of a plugin or a conflict between two different plugins, such as when VLC Media Player prevents QuickTime or Windows Media content from playing.
Safari
Sometimes good intentions have unintended consequences. Such was the case when Apple programmed Safari 5.0.1 with DNS prefetching to accelerate web page loading, only to discover that this can prevent content from loading at all. The intention to simplify web browsing also prevented programmers from viewing source code, though the View Source app can resolve this issue. Apple’s slow update cycle frequently causes frustration for developers, particularly since Safari is inextricably embedded into iOS and can’t be deleted.
Mobile browsers
The biggest challenge with any mobile browser is getting content to display effectively in the available space. From the square screens on BlackBerry devices to the erratic connection speeds of a triangulating smartphone, creating content for mobile browsing requires a streamlined approach that strips out unnecessary functionality and avoids any autoplaying content. While some websites employ mobile versions (with the normal web address preceded by the letter m), mobile stylesheets automatically expand to fill the available space. Creating single-column page layouts and reducing margins are good habits to adopt, while background images and floating elements should be avoided altogether to ensure responsive website designs look equally good regardless of a device’s output display settings.