Designing From the Bottom Up

In the current multi-screen ecosystem, users are more likely to consume similar content on multiple devices for different purposes. A user will typically flip through news headlines and abstracts on a smartphone, but will choose to read the full news stories on a tablet or desktop computer. These changes in user behavior have forced digital designers and developers to think in terms of multiple-screen sizes when deciding on the content layout of a website. Faced with this challenge, the industry is gradually adopting a responsive design method in order to optimize the user experience on any possible device.

The responsive approach to web design and development allows for the production of a single, front-end code base that will seamlessly adjust the content layout to different screen sizes and optimize the user interface for a range of devices, including smartphones, tablets, laptops and desktops. Thus, rather than building multiple apps or sites for different categories of devices, it becomes possible to build and maintain a single digital product that will be flexible enough to accommodate any device, including the ones that don’t easily fall into clear categories, such as the Kindle Fire. In this sense, it’s a future-proof strategy.

A responsive design approach aims to maximize readability and usability on any device by displaying the content layout that is most appropriate for the size and capabilities of each device. To achieve this goal, responsive design uses a flexible layout grid design that can easily transform the content layout based on the characteristics of the device’s display screen.

For instance, the layout can be simplified to a single column of content on a small screen, while a more complex multi-column layout can be provided for tablets or larger desktop screens. It’s a bit like creating a set of LEGO blocks of code that can be assembled in different shapes and sizes to allow the content to adapt itself to the screen size where it’s being displayed. The layout will also automatically adapt to the device’s orientation and the content will be displayed differently in portrait or landscape mode.


A Wide Range of Challenges


While responsive design is a great way to optimize the user experience on any device, it’s a technique that challenges the traditional way of building websites. As a matter of fact, it brings into question the design process itself as well as the tools and the usual project workflow.

Instead of following the usual route of web design, from wireframes to mock-up to prototype, responsive design calls for multiple iterations of a prototype adapted to each screen width. Working on a constantly evolving prototype also means using a different set of tools than the ones that have been typically used. Traditionally, most standard web design is done first in Photoshop or Illustrator whereas in responsive design, the best tool to start with is InDesign, since its internal logic parallels that of web design and development.

The usual tools, Photoshop and Illustrator, are respectively ideal for image manipulation and typography. However, since most web pages are essentially composed of text and images, a tool like InDesign that was created to handle both is by far better suited for the job. The fact that InDesign can also work with grids, templates and style sheets is another clear advantage.

Moreover, since the responsive design process is geared toward iterating prototypes, a large part of the design work is actually done directly in the browser. This means that front-end developers who have to work on prototypes are involved right from the beginning of the process instead of coming in once the design templates have been completed.

The early involvement of front-end developers also allows the production team to consider the different aspects of an interactive design right from the start. Instead of working with static pages that don’t reflect the reality of the user experience, working in code makes it possible to see what really happens when a user interacts with the product. Ultimately, responsive design requires a certain amount of merging between design and development from a process standpoint as well as from a resources point of view. The goal is to find the right balance between design intentions and coding possibilities in order to create the best possible user experience across all devices.


A Few Constraints


Responsive design does have some limitations. Compared with standard web design, responsive design involves additional costs. Depending on the scope of the project, a responsive design site production can potentially involve extra design and development time as well as longer testing phases to ensure that the content layout will properly adapt itself to different screen sizes.

There are also issues to be resolved with advertising content, which is almost never built in responsive mode but still needs to be integrated in these new fluid layouts. The ads will usually have to be sandboxed into well-defined areas of the page to ensure that they won’t break the overall design. The bottom line is that ads are not yet being sold in accordance with the responsive web approach. Each ad is sold in a specific format, size and position for placement on either a mobile device or a desktop. There is currently no distinction in ad formats that can be sold and displayed on an iPad, Kindle or 12-inch Android tablet.

The emergence of smart TVs also adds another level of complexity to the design process because designing for the TV screen adds the element of viewing distance to the equation. The format of each content item, the size of images, the text elements and the interactions will require a custom design approach that takes into consideration the fact that a user could be sitting as far as six feet from the TV screen.

Designers are also struggling with the limitations imposed by having to think in terms of objects rather than pages when working on responsive projects. They need to find elegant ways of creating engaging layouts by handling multiple blocks of content that must to be rearranged in different grid sizes.

The limitations described above clearly show that responsive design is no “silver bullet.” The method is still in its infancy and we have only seen a limited number of large-scale projects. However, even if responsive design won’t fix everything, it forces designers and developers to work more closely together and to concentrate on user needs.

As consumers diversify how they interact with multiple screens, testing and exploring new ways to adapt content to context is essential to ensure an optimal experience across multiple touch points. In this sense, a responsive design approach is more foolproof than the standard web design approach.

(Photo: Nurun)

Further Reading

A Design That Fits More Than One Screen

Q2 2013

The lack of any standard interface mode between multiple screens is forcing users to develop their own mode of navigation in the multi-screen ecosystem.

Read more

Navigating and Expanding the Multi-Screen Ecosystem

Q2 2013

The multiplication of content viewing devices has given rise to an array of new consumption behaviors.

Read more