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