knowledge-kitchen

Responsive Design - Designing For A Multi-Device Ecosystem

designing for a variety of devices

1. Overview
2. Implications
3. Approaches
4. Conclusions

Overview

Concept

Responsive Design is a catchy term for design that works on a variety of different devices

• Desktop computers (incluing laptops)

• Tablets

• Mobile devices

Smartphone adoption

Almost all American adults now own a smartphone. Pew Research found 81% did in 2019, up from 35% in 2011. Younger adults reach 96% usage.

Smartphone vs. desktop ownership

A larger percentage of Americans own smartphones than do desktops.

Multi-device ecosystem

1/2 of adults also own a tablet device and half also own an e-reading device.

Smartphone-only

1/5 Americans do not have home Internet service, but rely on smartphones for Internet. This is more common among the younger and less affluent.

Flippening

Smartphone dominance is a recent phenomenon, flipping a few years ago.

Implications

Constraints

The majority of Americans now consume content on The Web via their mobile devices. This imposes very specific constraints we have to consider in design.

• Smartphone devices have smaller screens than desktop devices.

• This means that not as much content fits on a mobile screen than on a desktop screen.

• Smartphone devices generally have slower internet connections than desktop devices.

• This means that smartphone users are less inclined to click links to load new pages than desktop users.

Design effects

As a result, web pages that are usable on smartphones as well as desktops and tablets have adopted a few relatively new design features.

• Sites with fewer pages (because pages load slowly)

• Longer scrollable pages (because you now need to stick more stuff on the main page)

• Bigger fonts and less text per page (because screens are ridiculously small)

• Requiring users to click a a ‘hamburger’ icon to get to the primary navigation (because there isn’t a lot of space to show everything at once).

Approaches

Choices choices

Designers have tended to pick one or both of two responsive design approaches.

• Scaling layouts - the width of the web page adjusts automatically to fill the width of whatever browser is being used to view it. The layout and content otherwise remain the same across all devices.

• Breakpoint-based layouts - the width of the web page automatically switches between several fixed widths depending upon the width of the browser being used it. The layout and content displayed on the page may differ from one width to another.

• Hybrid layouts - a combination of scaling and break-point based layout. Typically, breakpoint-based layouts will be used until a minimum width is reached, at which point a scaling layout is used at all browser widths smaller than the minimum width threshold.

Prevent mobile devices from zooming in

By default, some browsers on mobile devices will automatically zoom into a page.

• They do this is because many websites are not properly designed to fit on mobile screens, so the browser manufacturers try to ensure that content is large enough for users to view on mobile, regardless of the intended design.

• This is undesireable for conscientious designers who want to control the width at which your content is displayed on mobile devices.

• To prevent this, add the following to the head element of the html code.

<meta name="viewport" content="initial-scale=1" />

Scaling layouts

The technique for scaling layouts is the simpler of the two.

• Use percentages or other relative sizing units instead of pixel values for widths of all layout components

• This allows them to scale proportionally to whatever browser width is currently being used. The layout stays the same, but simply gets bigger or smaller depending on browser width.

Breakpoint-based layouts

Breakpoint-based layouts rely on a feature of CSS called media queries

• Media queries allow a page to switch between different sets of CSS code, depending upon the browser current width

• A typically breakpoint-based design may involve 3 or more different sets of CSS code: one for mobile-sized browsers, another for tablet-sized browsers, and one for desktop-sized browsers.

• The layouts may be completely or only partially different at each different device width.

• The content may also be completely or only partially different at each different device width. This is achieved by hiding or showing differenet pieces of content setting the CSS display property for any piece of content with the block or none values.

Breakpoint-based layouts (continued)

Media queries specify the width at which a set of CSS code should be loaded.

• For example, the following code would load only 1 of 3 different CSS files, depending on the current browser width.

<!-- load different CSS files for different browser widths -->
<link
  rel="stylesheet"
  media="only screen and (max-width: 480px)"
  href="css/mobile.css"
/>
<link
  rel="stylesheet"
  media="only screen and (min-width: 481px) and (max-width: 960px)"
  href="css/tablet.css"
/>
<link
  rel="stylesheet"
  media="only screen and (min-width: 961px)"
  href="css/desktop.css"
/>

• Of course, there might be some styles that are consistent across all browser widths. These can be loaded without a media query.

<link rel="stylesheet" type="text/css" href="css/all_devices.css" />

Conclusions

You now have an understanding of the issues related to designing for a variety of devices.

• Thank you. Bye.