From variables to wearables…
Since the advent of the smartphone and mobile internet services nearly everybody is walking into walls glued to their screens reveling in the encyclopedic knowledge of the internet (or let’s face it, watching cat videos). Data from Google Analytics and other traffic detection services show that more and more people are doing most, if not all, of their day-to-day web browsing from their mobile devices. This means it has never been more important to ensure your website caters to mobile devices, but there’s a catch, what devices do you cater for? Tablets? Phones? Smart watches?
With the vast variety of portable devices, brands and screen resolutions out there it is impossible to accurately predict exactly what size of screen your users are going to be using.
Responsive web design is the design methodology of making a singular website ‘respond’ to the size of the viewport it is being presented in, allowing users to view your website from any device big or small and have it look as well presented as it does on a desktop computer. From humble beginnings responsive design has evolved gradually over the years, it has taken many different forms as standards and support for modern technologies have improved and the requirement for a way to cater to an increasingly mobile obsessed populace has become more crucial. This whitepaper focuses on the technologies that have emerged to tackle this issue and where they are going.
It all started with variable width
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.
Modern responsive design
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.
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.