ResponsiveDesign101

August 2014

Breakpoints

Rely on media queries

Set at specific pixel widths

Common size / width patterns for mobile, tablet and desktop

Responsive and Adaptive Design both rely on the idea of “breakpoints,” which alter layout, structure, font sizes, UI elements and generally hide / show content differently based on device screen sizes (using media queries).

Breakpoints are set at specific browser width points and can be defined using minimum width, maximum width, or both (page height should never be fixed).

Typically, breakpoints are set based on most common device / screen sizes, which are: 320 pixels (phone portrait)490 pixels (phone landscape)768 pixels (tablet portrait)

1024 pixels (tablet landscape / small desktop)1280 pixels (most common desktop)1600 pixels (large desktop / TVs)

2 / 17 v1

Responsive vs. Adaptive

Responsive is fluid

Adaptive “snaps”

You can mix and match

Responsive Design: a design that will fluidly change and respond to fit any screen or device size, and is coded using percentages.

Adaptive Design: A design that will change to fit a predetermined set of screen sizes based on fixed widths, coded using pixels.

The two approaches can be mixed by creating a site that is fluidly responsive until a certain breakpoint, at which point it switches to adaptive (or vice versa).

90%1280px

3 / 17 v1

Responsive or Adaptive?

Responsive = content focused

Adaptive = design focused

Consider budget, responsive is less in the long run

If content is most important to the site, choose responsive to ensure the widest possible range of device / screen resolution support.

If design is more important, choose adaptive to ensure that layout, type, and spacing are precisely respected.

Budget is also a consideration. As responsive focuses on a pattern design / development, it takes less time and is more “universal.” In contrast, adaptive focuses on precision design, taking more time to ensure correct display at different breakpoints.

4 / 17 v1

What are some practical implications?

Adaptive may be more optimized

Responsive uses pattern design

Adaptive is easier to understand for traditional designers

Adaptive uses server side technologies to deliver only required content, including images, that have been optimized specifically for a device type (i.e. mobile, tablet, desktop). This also means that you can deliver an entirely different experience based on device type.

Adaptive is often easier to understand and design, because you can create different experiences for different platforms. However, this can be confusing for users accessing the same site from multiple devices as the experience is not necessarily universal.

Responsive requires more planning upon implementation. Conceptual planning up front is needed in order to correctly apply responsive patterns. Pattern design has to be thoroughly understood by the designer (this means letting go of fixed widths and precise spacial relationships).

5 / 17 v1

Steps to take for high quality design

Think mobile first

Pattern design vs. precision design

Understand variations in device and screen size

Approach concepts from the mobile first perspective, as it is the top choice for user browsing. Mobile first forces design to focus on important content and functionality.

Understand that there are huge variations in screen sizes and new devices are being released all the time. To prepare for this, keep your design as fluid as possible to accommodate for the old and the new.

Think pattern design vs precision design. In most cases not only does the screen size change, but also the content.

6 / 17 v1

Layout and Content

Don’t design for best case only

Defend against “no content” state

Don’t forget responsive means pattern design vs. precision design

Take into account the possible lengths of content and design with flexible length in mind. This could mean preparing a text field that can fit the longest possible names, different language names, etc.

Don’t forget to account for “no content” state. What if there are no users registered or no comments posted?

Remember that responsive sites rely on percentages. It is not possible to take a precision level approach when designing these layouts.

7 / 17 v1

Usability

Interaction means many states

Sizing should be context relative

Capabilities and interaction should change with context

Websites or web applications components usually have more than one state. These states include but are not limited to:

When thinking about breakpoints take into account how the user interacts. For example, “touch points” usually have to be larger (at least 40x40 pixels).

Take into account different interactive capabilities of touch devices. Can the same clicking interaction be done using a swipe motion on mobile? or two fingered tap?

disabled buttons controls vs. selected buttons touched vs. clicked on buttons

8 / 17 v1

Graphics and Images

Choose vectors over pixels

Cropping, like content, can be dynamic

Always try to use vector graphics (SVG) for buttons, elements and logos as newer devices have higher resolution capabilities and graphics can look pixilated.

In a fluid layout where dimensions of elements can change, don’t always count on images be-ing cropped exactly as you want them. In addition, text and content on top of the image will not always remain in the same relative position.

9 / 17 v1

Style Guide Concepts

You don’t have to design every page

Remember to keep rules universal

Use pixels for adaptive, and percentages for responsive

It’s not required to design every page and every state of an application. For example, an ap-plication or site with multiple forms only needs one form designed. The rest can be pat-terned from the single design with accompanying style guide notes.

In all cases, rules should be as universal as possible. This avoids errors, increases usability of the application, and allows the solution to be more optimized all while decreasing design and development work. For example, primary headers should always be the same distance from content, or the distance between input fields should always be the same.

Use the right type of measurement depending on the approach you take - pixels for adaptive and percentages for responsive (in the case of adaptive each breakpoint should have notes).

10 / 17 v1

Style Guide Examples - Overall

Provide global styles for fonts and colours

Identify font families and ensure each heading type is included Identify font weights / types used and outlined usage for specific elements or patterns (i.e. paragraph, vs pull quote, vs twitter feed) Use type kit if possible

Provide Global colour chart

Each colour should have HEX equivalent

Provide global layout rules

Adaptive or Responsive? What are the breakpoints?

What are universal behaviors for menus / footers / galleries?

11 / 17 v1

Style Guide Examples - Pages

Distance relationships between elements

In pixels for adaptive In percentage as responsive

If layout is adaptive, provide outline for each breakpoint (i.e. what is the distance between menu items at a lower or higher breakpoint?)

Layouts that are responsive down to the mobile level usu-ally reflow content, and in such cases a separate design should be included with a similar guideline Clearly identify elements that reflow, and the relationship to the larger breakpoint Remember that elements fall below from left to right; if you have element A to the left of element B in desktop, and they stack on mobile, element B will always go below element A

For free tips on preparing style guides and design files go to tdfcreative.com/psd

12 / 17 v1

Elements change as the browser width changes, removing or adding content and repositioning appropriately for the use case.

www.foodsense.is

13 / 17 v1

14 / 17 v1

Completely fluid layout ensures content is legible on any screen size, andunique architecture means it’s also fully accessible and SEO compatible.

www.thedevelopmentfactory.com #devfactorybuilt

15 / 17 v1

Totally fluid layout is combined with transitioning and resizing elements to give the site a truly dynamic feel - elements open and close inline as well.

www.theneedforspeedmovie.com #devfactorybuilt

16 / 17 v1

A completely fluid layout is combined with transitions and animations - elements change depending on context (mobile vs. desktop).

www.futureshopgrants.ca #devfactorybuilt

Los Angeles

126 E. Alameda Ave, Suite 203

Burbank, CA, 91502

213.814.5520

Toronto

67 Mowat Avenue, Suite 545

Toronto, ON, M6K 3E3

416.922.0706

Krakow

ul. Dielta 93/7

31-031 Kraków

+48.128.811.964

www.thedevelopmentfactory.com