Responsive Design Techniques October 24th, 2012

Matt Fiore Principal Designer Siteworx

http://bostonglobe.com

Responsive sites are device agnostic, responding to the device they are viewed in Delivering the richest user experience to that device

Overview

Award-winning interactive agency

7 offices, 200+ strong

50% annual company growth

Strong qualifying track record in the Global 500

Expertise in mobile, web content management, eCommerce and analytics

Awards

Clients

The web is viewed on hundreds, if not thousands,

of distinct devices Each has its own screen size,

resolution and interaction model

(click, swipe, drag, etc.)

Responsive Design. The practice of creating digital experiences that adapt to seamlessly deliver content suited to the device context of the user’s operating system, screen size, or orientation.

Device specific sites? No.

Less engaging user experience across devices? No

http://www.mobilusdesign.com/responsive-web-designed-websites-for-wordpress/

Device  Agnos,c  Approach    Defining breakpoints where the design breaks, not using device sizes •  Too many new devices •  Sizes change all the time •  What’s next is too hard to predict

One Codebase.

One Content Platform.

One URL.

One site to rule them all.

One Codebase

One Content Platform

One URL

Content Design rather than web design

Other  Posi,ves  to  Responsive  

•  Increases SEO

•  Simplifies Analytics

•  One codebase to maintain

•  One content repository to manage

•  No redirects can increase speed

•  Reach more channels in traditional timeframe

Responsive design combines flexible grids, flexible images/media, and CSS media queries

RESPONSIVE  DESIGN  

Consider content priority and implications on experience and brand across all devices

Design inside out (phone through desktop)

Control all layouts via CSS (Tablet, Mobile, Desktop)

Offer graceful degradation

Responsive Alignment  

Responsive  Component  Order  

“Mobile First” helps focus on only the most important data and actions in an application Mobile internet adoption has outpaced desktop internet adoption by as much as eight times

Answer this question:

If it’s not needed on mobile, is it needed in the first place?

The  Reality  

•  Most companies already have a web presence

•  Some have gone through recent costly redesigns of one of their platforms

•  Mobile First is sometimes unrealistic and difficult for stakeholders to process

•  Desktop first, is usually the most common and sometimes easy upfront

•  Educating clients and stakeholders about what responsive really means is crucial

Staged  Approaches  

Mobile First

Desktop and Down

Tablet and Out

Responsive  Solu,ons  

•  Show desktop and mobile together, make those decisions really demonstrate the issues clearly

•  Prototyping in Axure, before HTML

•  Mobile research for user types is really helpful

•  Designing in a static format doesn’t really work anymore

•  Design needs to understand development and how it will actually work

•  Design and Development communication is crucial

•  Don’t make radical changes in layout or style

•  Be cognizant of page load, hidden structure and markup

•  Timing of loading content, subnav, hidden components

•  Interactions are limited more so in responsive

•  Impact from a budget, mindset, decision making standpoint

•  Content prioritization is crucial

Responsive  Tips  

Responsive  Naviga,on  Menus  

Convert a Menu to a Dropdown for Small Screens

Responsive  Data  Tables  

Swap out tables for graphs

Images  &  Video  

Resize and swap

Hiding  Components  

•  Can hack to point to dummy content

•  Markup still exists

Test  on  Devices!!  

•  Even when prototyping in Axure

•  Use designs in their environment

•  Emulators only get you part of the way

DeWalt  Demo Video  

Responsive  Layout  PaIerns  http://www.zurb.com/playground/off-canvas-layouts

http://bradfrost.github.com/this-is-responsive/patterns.html

http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

http://www.thismanslife.co.uk/projects/lab/responsivewireframes/

Visit us at Siteworx.com

Matthew Fiore Principal Designer

mfiore@siteworx.com

www.linkedin.com/in/matthewfiore