In recent years, the deluge of new connected devices that have entered the market has created an increasingly complex challenge for designers and developers alike.

Until relatively recently, the role of a UX or UI designer was comparatively straightforward. Digital experiences lived on their own, and were built and tailored for the specific mediums by which they were to be consumed. Moreover, the number of devices though which a user could access your brand was more limited. Digital experiences were confined to (typically) either a desktop or laptop computer, or in some cases a relatively basic browser embedded in a mobile phone. Furthermore, these devices were fairly homogenous within their classes, sporting similar screen resolutions and hardware capabilities.

Background

Aside from the challenges presented by the variety of available browsers and their individual quirks, designing for the digital realm was, in essence, a single act event- the vast majority of websites were tailored for a 1024px monitor, and as such we adopted the convention of a 960px grid. In certain cases, an unstyled and limited mobile version was made available as well.

Fast forward a few years, and the solution becomes far more complicated. Users are accessing the web through a myriad of options, with each individual often owning more than one connected device. The average tech-savvy individual may wake up, check their favourite news website on their phone, continue reading on their tablet during the commute, check in at lunch on their desktop at work, and interact with the same news brand through their television in the evening. No longer will one point of entry suffice for digital brands.

The Problem

Desktop computing has entered a new era, where 30-inch screens boasting 2,560 horizontal pixels are not uncommon. Game consoles and modern televisions are internet ready, and provide a novel “10-foot experience”, where the interaction is distant and driven by inputs beyond the typical buttoned remote, such as physical gestures. Tablets are now ubiquitous, and feature screens from 7 to 10 inches. Technology research firm Gartner predicts a yearly 261% increase in global tablet sales through 2015. Powerful smartphones come in a near infinite number of shapes and sizes, and feature resolutions from 130ppi to the iPhone 4 ‘s 326ppi retina display. Modes of interaction include the mouse, keyboard, touch, physical gesture, and hard buttons or trackpads. To add to the complexity, the majority of these devices support both portrait and landscape orientations.

To date, most brands have adopted a fragmented approach, simultaneously building and supporting separate desktop websites, mobile apps, and tablet apps. While this has sufficed during the early stages of the post-PC movement, as the number of available devices increases this pattern becomes more time consuming and more expensive to maintain.

A Solution

However, while the problem seems to have increased tenfold in complexity, not all is lost. Thankfully, most modern browsers (both desktop and mobile) have great support for HTML5, JavaScript and CSS3, which together form a great toolset for addressing the challenge presented by device share fragmentation. As Ethan Marcotte wrote in his pivotal article entitled Responsive Web Design, rather than continue to build designs that are highly specific and inflexible, we need to begin creating designs that are adaptive to the circumstances under which they are:

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”

What this means is that a design can be implemented using HTML5 and CSS3 and should adapt and respond to the various screen sizes and mediums that render the content. Rather than producing isolated experiences through multiple apps and multiple versions of a website, we can now provide one responsive design that will cover all the bases. This strategy involves primarily three components:

1. Using CSS3 media queries to alter the layout: rearranging, hiding and showing content selectively
2. Flexible media and text, to allow for the best viewing experience across a wide range of sizes
3. Be built upon a flexible, grid based layout to fill in the gaps between the layout breakpoints (sizes at which the layout changes drastically)

For example, a designer may choose to set two breakpoints: one between mobile (typically at >320px) and tablets, and one between tablets and desktops (typically at >768px). This results in three distinct layouts; each optimized for the screen which it will be displayed on. However, these should be flexible and fluid enough to stretch and adapt to any screen size that fits within these bounds. While the layout may be optimized for the iPad, it should work equally well on a closely sized Android tablet. Another example would be a desktop browser window, which can be resized to a near infinite combination of width and height.

These can be placed within your base style.css and each of mobile.css, tablet.css and desktop.css can contain styles specific to each platform.

The main strategies for addressing responsive design are antithetical, and are known as mobile-first design_and _top-down design. While the details of each are outside the scope of this post, I will provide a brief overview of each.

Mobile-first design was pioneered by Luke Wroblewski and starts, as it ‘s name implies, with designing the mobile UX. This allows a designer to practice progressive enhancement, which involves adding layers of functionality and enhancement as the screen size and hardware allow it. The theory here is that by designing first for the mobile experience, any extraneous UI elements or non-critical content will be omitted, forcing the designer to focus on the core content and functionality.

Top-down design proposes the opposite, where the ideal experience is built out and then gracefully degraded by removing content and functionality as the devices become smaller and increasingly limited. This strategy provides a great user experience on the desktop but can result in suboptimal experiences on mobile.

While the layout and design are of obvious importance, it ‘s also important to remember the means of interaction each device will support. Take the example of a photo gallery: users will intuitively swipe and pinch on mobile, while the same interaction will have to be rethought on the desktop since the mouse is the primary means of interaction and these gestures are unavailable. Thankfully, libraries such as the jQuery-like Zepto.js offer us easy ways to support interactions such as touch events.

Going Forward

Whether you are a designer or a developer, involved with marketing or sales, the future of digital content is unavoidable. Technology will continue to provide us with increasing numbers of connected smartphones, tablets, internet-ready appliances, cars and televisions, and I ‘m sure a few surprises along the way. While there is certainly a place for desktop-only websites or native-built apps, a flexible and responsive design which maintains your brand’s visual integrity is a winning strategy going forward. Ensuring that every single user, regardless of device or screen size, gets an optimized user experience is becoming increasingly valuable in a world where consumers are making decisions about your brand and product within the first couple seconds of the interaction.

Responsive Design is something we believe in strongly here at Polar Mobile. It is a core element of the UX design for our MediaEverywhere solution, which allows brands and businesses to provide their users with an experience across a vast number of connected devices. Learn more about MediaEverywhere here.