Looking at the future of responsive design

The first attempt to handle responsive design was mostly aimed at the different varieties of desktop monitor screens. As screen resolutions grew, it became apparent the need for a one size fits all solution for web design was essential. Although at the time there were a number of ‘palm pilot’ type devices that where akin to early smartphones, generally possessing very rudimentary graphical interfaces and limited or buggy HTML/CSS support, the use of mobile devices for internet browsing didn’t truly become popular until the first graphical smartphones.

The ‘variable width’ method relied on using the existing functionality in HTML/CSS to use percentages to structure the layout of the page, for example setting it so that 70% of the viewport would be the main ‘content’ of the page, the main document, and the remaining 30% to be a side menu or some form of aside content. This method made the website stretch or shrink depending on the monitor size while retaining the rough structure and shape of your layout. This meant your site would look more natural in a variety of monitor sizes and configurations.

Despite the improvement over ‘static’ inflexible websites, this method had its disadvantages. For one, in earlier designs it more often than not relied heavily on using HTML tables to control the structure and sizing of pages, which created a lot of nested code that was difficult to maintain and downright ugly when it came to development. There was also the issue of extremes. Although a design might still look fairly neat if pushed or pulled a bit in either direction, what happens if the user has an enormous widescreen monitor?

Although it was possible as CSS developed to set a maximum width for your layout, it was common for earlier developers to try and use as much of the available space as possible and span the full width of the browser. Suddenly all your well-proportioned content is stretched beyond all recognition, enormous chunks of empty whitespace between your content blocks making it look barren and skeletal. What if it’s a mobile device? When it comes to smaller screens you have limited screen capital, meaning that whilst having two or three columns of content might look nice for a desktop device, trying to cram them into the width of a mobile device is going to be like cramming three hippos into a pocket watch, utterly destroying your layout and making your text content unreadable.

This was, however, the very first technique for developing websites for various devices and whilst variable width websites are the foundation of responsive design, early responsive layouts did not have enough control over the way their content would react when space was limited. You had one design for all sizes and if it was too big to fit a device, tough taters.

Mobile specialised websites (dual websites)

An alternate philosophy for combatting this problem came later as the use of mobile devices for internet browsing became more common. This was the introduction of ‘mobile friendly’ websites that ran alongside their desktop specialised counterparts. These websites would often be cut down versions of the company’s desktop site, typically with less functionality, variable width and under a subdomain such as ‘m.example.com’. When users visited the main website they would typically have their user agent (the unique string identifying each browser) detected by a server side script, which redirected them to the mobile friendly alternative.

Although catering exclusively to mobile devices, this too had some significant disadvantages. If incorrectly planned, having a mobile-friendly site could be potentially detrimental to your ranking in search engines. They would view both your desktop and mobile site as two separate sites with duplicate content, two sets of link addresses for your unique content e.g. www.example.com/article/12345/ and m.example.com/article/12345/ and so on. This could mean search engines would spread rank between the two sites, or worse view it as content spamming, believing one or both sites had stolen the content of another in an attempt to gain search rank.

Aside from the possible implications concerning search engines, the greater onus was the overhead of maintaining two websites that are functioning and designed separately. This resulted in twice the workload for any functional or design related updates and twice the potential for something to go wrong.

There was also the issue of larger mobile devices, whereby in attempting to maximise compatibility mobile friendly sites would generally be designed to display nicely in the smallest viewport available. This unfortunately meant that tablets or other larger screened mobile devices with more space to play with would have it wasted, or a return to the ‘stretched out’ content problem we had with the traditional variable width approach.

Separate ‘mobile friendly’ websites still exist, although are far less common. To this day, popular websites such as Facebook and YouTube still have mobile specific websites. There is still merit to having a mobile friendly site, such as to be used in combination with native smartphone applications that simply provide a ‘layer’ over the website, allowing it to behave as a local application. However nowadays there is no direct reason you could not integrate the same functionality using modern responsive design techniques.

Javascript frameworks

In the interim between the use of mobile websites and modern responsive design were (and in many cases still are) responsive JavaScript frameworks. These libraries tended to emulate much of the functionality of the eagerly awaited CSS3, which was still not supported widely enough across mobile and desktop browsers to be relied upon for crossbrowser compatibility. These libraries would give you numerous tools to reorganise your content based on the browser’s detected viewport size and toggle CSS classes on elements, enabling you to change the appearance of your content at different sizes.

This was mostly a stop gap for a more universal solution and like the previous attempts had its own problems, although slightly less debilitating than the previous alternatives. Using a framework often required you to commit fully to the framework’s method of development and organisation of code and required some hacking and modding to make it behave the way you wanted it to. This also had the disadvantage of making it difficult to draw a line between design and coding. You were also relying exclusively on the user’s browser having JavaScript support simply to render your sites layout. This could potentially cause issues if a bug occurred within the framework’s code, if your code encountered issues, or if the browser had bugs in its JavaScript parser. Older Internet Explorer browsers were particularly known for having trouble with this.

A number of these frameworks are still maintained and updated today. However, as support for more advanced features of HTML5 and CSS3 have increased over the years, they tend to have moved more towards cross-browser compatibility, adding the native functionality of CSS3 to older browsers using JavaScript. Some also provide more advanced responsive behaviour that adds features that are not supported as part of CSS3, such as device specific rendering and more complex control of a site’s content order.

Modern responsive design

With HTML5 and CSS3 support becoming a very desirable and expected standard of all modern mobile and desktop browsers, developers are now free to take full advantage of the flexibility the new rules and declarations allow. One of the most important of these relating to responsive design was the introduction of media queries. These special CSS declarations allowed you to natively specify in what context certain styles should be applied to your layout with the use of ‘breakpoints’, size constraints that are applied above, below or between developer specified viewport sizes. This solution allowed developers to natively create device-independent layouts without the need for third party frameworks, JavaScript or specially tailored websites.

If we return to our three column layout problem we had with classic variable width sites, we can shrink it as much as we like, but we inevitably end up with content overflowing over each other making a design look broken, claustrophobic or even making it unusable. With the addition of breakpoints we can get around this issue. We can make the assumption that any device over 900 pixels wide is most likely a desktop device. As we have plenty of space, we can specify that we want our three column layout to display normally with all columns side by side.

However, we also need to think about tablet devices where space is more finite. For those devices we can specify that anything below 900 pixels wide but larger than 600 may want our first two columns next to one another and the third column to be pushed underneath. Similarly once we get down to smartphone sizes, we can have all columns take up the full width of the page and fold underneath each other. No more cluttered content! Each set of CSS styling would be applied at each breakpoint either overriding or completely rewriting the styling of an element, making your content display in the most appealing or desired way within any range of viewport.

Alongside media queries and breakpoints with the addition of CSS3 we also received a new form of display called the ‘flex’ element. These elements have numerous useful applications for both positioning and responsive design, particularly of note is the ‘flex order’ property which, in combination with our media queries, allows us to reorganise content blocks on the fly. Say a user visits on a mobile device. Out of our three columns, the second column’s content is the most important, we want it to be the first thing the user sees when they visit. With flex order we can simply reorganise that column to appear first, the ‘first’ second and leave the third where it is.

Of course it isn’t just the core layout that benefits from these updates, you can restyle any of your content to be better presented for the user: converting link text into easy to tap buttons for mobile devices, shrinking or enlarging font sizes to ensure your text content looks smart on any device or even completely restyling your website’s header to look more like a native app.

With the application of just these two methods from CSS3’s varied toolbox, developers can now create more specialised interfaces for a variety of devices. Taking advantage of CSS3’s native functionality, it is possible to create more accessible designs for mobile, tablet and even utilising the additional space provided by extra-large desktop devices. A skilled developer may also be able to cut down on code bulk by no longer needing hidden layout elements specific to individual viewport sizes, as they have the freedom to completely restyle any given element for any given viewport size.

The future of responsive design

Whilst modern responsive design is a vast step forward from the static websites of previous years, there are still devices the web has not been able to reach, wearables being of particular note. As these type of devices gain popularity, the need to extend beyond the original boundaries of HTML may be required to keep up.

Devices such as Apple’s Smart Watch or Samsung’s ‘Gear’ band are certainly flashy, but due to the limited screen space even a deeply optimised responsive website would find it difficult to display in a meaningful or nicely presented way in such a small space.

Some believe the solution is to provide an audio based interface, building site from ‘audio up’, providing voice commands for site navigation and screen-reader-esque readouts for each section. This however has certain pros and cons. While in Sci-Fi and spy films the idea of whispering secretive commands into your wrist device seems pretty cool, in reality the majority of the populous still feel anxious or silly talking to an inanimate object in public or even in private company.

Voice recognition technology has been around for years but when was the last time you heard someone bark ‘search for cheap bulk underpants’ into their phone at a bus stop?

Audio interfaces have the inherent issue of indirectly announcing to all and sundry what you’re browsing or searching for at any given time, eliminating privacy and no doubt bothering people around you.

There are also those who argue there should be a limit to what responsive design or the web in general should attempt to adapt to in the future. Do you really need to check your Facebook updates on your smart toaster’s display or catch up on today’s emails on your belt buckle? In truth smart watches and other modern wearable devices are marketed more as an accompaniment to your main device rather than a replacement — what could it really do that would supersede the convenience of browsing on a modern smartphone display?

Unlike responsive design for the browser, something like the audio interface mentioned above would likely require specialist planning and design and increase the amount of overhead in website development. There is also the matter of support. One of the benefits (and curses) of the internet is anyone of any skill level can set up a site and upload virtually any content and code they like and the browser will try its best to cobble together a working visual interface. Imagine what that would be like with an audio browser? Badly structured websites reading the page in the wrong order or simply spouting badly formatted jibberish? What happens if the owner hasn’t bothered with audio navigation at all, would it fall back to accessibility levels and read the site from top to bottom line by line? While all respectable websites should aim to provide support for screen readers to allow easy access for the visually impaired, it is by no means an optimal way of browsing the web.

In my opinion a more likely step forward in the field of responsive design would be the adaption for virtual reality devices, which are becoming more commonplace as popular consoles and services such as the PlayStation 4 and Steam release their own virtual reality devices. The current ‘browser’ style method of browsing the web could still work for VR, perhaps as standard a user could scroll and navigate through a floating document in virtual space. However, I feel much more could be done with the medium in the future, perhaps having floating controls you can control web videos with or even 360 degree displays for images and web pages. Facilities allowing web developers to create virtual environments to navigate through or more innovative ways to browse information.

This may be a long way off from the state of the web right now. The implementation of the HTML5 and CSS3 standards has made leaps and bounds in providing the tools for developers to do far more with their content, but it might not be until the next big advance in these technologies before we can reach these intriguing mediums.

Conclusion

Today more and more websites are redeveloping themselves to follow the modern responsive design methodology to reach more of their client base and future-proof themselves from further developments in web enabled devices. With the reduced overhead of only needing one website for all, website owners are free to spend time producing new features that everyone can enjoy without worrying some of their audiences will miss out or that it will break existing functionality somewhere down the line.

At Sponge we believe in designing a truly fantastic web experience for customers that delivers results and return on investment. That's why we have developed a range of web design services and e-commerce software to rapidly provide everything you'd expect, but with a fully customised solution for your business. We have some great packages to help you spread costs too!

If you have any questions about the points I've raised, or want a more in-depth chat about all things web design, please get in touch.