#1nlab14: responsive design

Responsive Design

Retooling for Mobile Devices, Rich Media and User Experience

Ryan Horner @4RyanHorner

25 Years Ago…

Ever Evolving…

Source: bradfrost.com

Source: bradfrost.com

Source: bradfrost.com

The Web’s Biggest Evolution

“Mobile is eating the world” - Andreesen Horowitz

Beyond Hyperbole

Beyond Hyperbole

25% of Global traffic comes through mobile devices. – Mary Meeker

51% of all emails are opened on mobile devices. – Litmus

Only 15% of Fortune 1000 have mobile optimized sites. – Restive

48% of users say they feel frustrated and annoyed when they get to a site that's not mobile-friendly. – Google & Sterling

Research

RESPONSIVE DESIGN

Responsive design is the combination of flexible grids, flexible images and media queries.

- Ethan Marcotte, who coined RWD in 2010

Source: bradfrost.com

•  Makes great user experiences

•  Lower overall cost –  No separate mobile site –  One place to manage content, one CMS –  One codebase

•  Consistency across devices •  One URL •  Better SEO •  Will work on devices that don’t exist yet

RWD Benefits

•  Regent College Responsive Redesign* –  99% increase in unique visitors –  77% increase page views –  63% increase in online applications

•  Time Inc. Responsive Redesign* –  Mobile Traffic is up 23% –  Homepage unique visits are up 15% –  The mobile bounce rate decreased by 26%

Quantifiable

* Luke Wroblewski, 2014

Responsive design is a big rethinking of what a website is and what users experiences we should be creating. It is an approach & philosophy to redefine the web to respond and adapt to a world of many devices & form factors.

A New Approach & Philosophy

MOBILE

BROWSERS

SEO

TESTING

CONTENT & MEDIA

PERFORMANCE

PAGE LAYOUT

ANALYTICS

WORKFLOW

Fluid Grid

PAGE LAYOUT

•  The fold no longer exists •  Views change at "Break" points •  Not just iPad and iPhone views

Layouts Shift / Columns Drop

PAGE LAYOUT

•  It’s not “pages” anymore •  Think of design systems •  A set of components to assemble

•  Websites are living / breathing –  they come to life in the browser in new

ways –  a single snapshot doesn't represent

•  A single resolution concept is about a design aesthetic –  Then move into browser for the

experience

•  Similar to the change from print to web –  Getting rid of rigid limitations –  Not a loss of control but gaining flexibility

Workflow

WORKFLOW

•  Problem with linear workflows –  Decisions are being made in each

step, before we have all the info / data

–  With so many variables iterations are necessary

•  Collaborative with cross disciplinary teams

•  Process has to adapt –  Based on approval process –  Align with availability of stakeholders

Workflow

WORKFLOW

FrontEnd

BackEnd Content

Strategy

Creative

Mobile Form Factor

MOBILE •  Not designing for a specific mobile device –  New devices will come out

•  Design for new mobile device capabilities –  Touch / Swipe –  Finger Size and Reach –  Location –  Microphone / Camera –  Phone Dialing

•  Avoid cramming a desktop site onto mobile –  Mobile First Design –  Focus on the most important elements

•  Pete & Jessica Mobile Talk

•  A way to understand what each user experience is like –  Get indicators

on what is working or not

•  Go beyond page views –  use device,

browser, resolution on axis

–  bounce rates, time on site, dead ends

ANALYTICS

•  Continue to monitor for new changes and adapt regularly

•  Add Google Event Tracking –  Weisert Talk –  Menu clicks –  Scroll Depth –  Carousels usage –  Tab click-throughs

Always Changing

ANALYTICS

•  SEO has changed –  Google works for searchers –  You have to earn the top spot by actually

being the best answer –  SEO is now user experience optimization

•  RWD provides better User experiences –  Google rewards low bounce rates –  Google rewards sites that stick –  Google recommends one URL with the same

content –  Responsive sites have better referrals

RWD is SEO SEO

•  Google warns on different m.site.com •  Or not being responsive

Google Warnings SEO

•  4 seconds before 25% of users abandon a site

•  Trumps all other efforts

Performance Matters

PERFORMANCE

*KISSMetrics

•  What happens on page load?

•  The original architecture of the web vs a modern web requests

PERFORMANCE

•  Numerous behind the scenes efforts

•  Roundtrips •  Payload/ Page Size •  Image Count & Size •  Typography

•  Performance is design –  Use a performance budget

Performance Considerations

PERFORMANCE

•  Don’t fight it! •  Inconsistent with each other •  Moving target •  It’s OK to be

different

•  Graceful Degradation

•  Progressive Enhancement

Browser Wars

BROWSERS

•  Content is what it’s always been all about

•  Content First Approach –  Use Content Inventory to drive design

•  It’s not where content is placed but… –  What is its priority in the grid?

•  Content length across form factors –  Provide a consistent, but focused, experience –  A larger screen does not mean a larger ability to focus

•  Images / Video –  From mobile to 5K iMac –  Fuzzy for some or slow for all –  SVG (Vector Graphics)

Content & Media

CONTENT & MEDIA

Testing

TESTING

•  Not designing for specific devices, but should test on some

•  Browser Stack and http://responsive.is/

•  Chrome Dev Tools – Emulation

Testing Approaches

TESTING

•  Analytics will show high Bounce Rates

A LOOK TO THE FUTURE

•  Only 15% of sites are responsive - Restive –  The future is to catch up to current user needs

•  Responsive thinking beyond resolution and form factor –  Location –  Time of Day –  Interests –  Context –  Jeff Small Talk

•  Semantic Web –  common data formats on the web –  watches, notifications, cards –  Vinu talk

What’s Next

TAKEAWAYS

The Modern, Responsive Web

MOBILE

BROWSERS

SEO

TESTING

CONTENT & MEDIA

PERFORMANCE

PAGE LAYOUT

ANALYTICS

WORKFLOW

•  Makes great user experiences

•  Lower overall cost –  No separate mobile site –  One place to manage content, one CMS –  One codebase

•  Consistency across devices •  One URL •  Better SEO •  Will work on devices that don’t exist yet

•  It’s the best way to take advantage of the modern web

Responsive Design Benefits

•  Those making the web share it on the web

–  Aaron Gustafson –  Luke Wroblewski –  Stephen Hay –  Jared Spool –  Jeffrey Zeldman –  Brad Frost @ bradfrost.com –  Justin Avery @ responsivedesign.is –  Ethan Marcotte @ www.responsivewebdesign.com –  evolutionofweb.appspot.com –  State of Mobile Web from Restive.io –  Dave Rupert @ daverupert.com –  www.creativebloq.com –  A List Apart –  Artifact Conference

Credits