SlideShare a Scribd company logo
1 of 39
Download to read offline
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
Beyond Hyperbole 
“Mobile is eating the world” - Andreesen Horowitz
Beyond Hyperbole 
25% of Global traffic comes through mobile devices. 
– Mary Meeker 
51% of all emails are opened on mobile devices. 
– Litmus 
48% of users say they feel frustrated and annoyed when they get 
to a site that's not mobile-friendly. 
– Google & Sterling 
Research 
Only 15% of Fortune 1000 have mobile optimized sites. 
– Restive
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
#1NLab14: Responsive Design
RWD Benefits 
• 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
Quantifiable 
• 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% 
* 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 
PERFORMANCE 
TESTING CONTENT & MEDIA 
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
Workflow 
• 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 
BackEnd Content 
FrontEnd 
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
Always Changing 
• Continue to monitor for new changes 
and adapt regularly 
• Add Google Event Tracking 
– Weisert Talk 
– Menu clicks 
– Scroll Depth 
– Carousels usage 
– Tab click-throughs 
ANALYTICS
RWD is SEO 
• 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 
SEO
Google Warnings 
• Google warns on different m.site.com 
• Or not being responsive 
SEO
Performance Matters 
• 4 seconds before 25% of users 
abandon a site 
• Trumps all other efforts 
PERFORMANCE 
*KISSMetrics
PERFORMANCE 
• What happens 
on page load? 
• The original 
architecture 
of the web vs 
a modern web 
requests
Performance Considerations 
• Numerous behind the scenes efforts 
• Roundtrips 
• Payload/ Page Size 
• Image Count & Size 
• Typography 
• Performance is design 
– Use a performance budget 
PERFORMANCE
Browser Wars 
• Don’t fight it! 
• Inconsistent with each other 
• Moving target 
• It’s OK to be 
different 
• Graceful 
Degradation 
• Progressive 
Enhancement 
BROWSERS
Content & Media 
• 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
Testing 
TESTING
Testing Approaches 
• Not designing for specific 
devices, but should test on 
some 
• Browser Stack and 
http://responsive.is/ 
• Chrome Dev Tools – 
Emulation 
TESTING 
• Analytics will show high Bounce Rates
A LOOK TO THE FUTURE
What’s Next 
• 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
TAKEAWAYS
The Modern, Responsive Web 
MOBILE 
BROWSERS 
SEO 
PERFORMANCE 
TESTING CONTENT & MEDIA 
PAGE LAYOUT 
ANALYTICS 
WORKFLOW
Responsive Design Benefits 
• 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
Credits 
• 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

More Related Content

What's hot

Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Precedent
 
UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" iKatDigital
 
Jeff cox mobile_presentation
Jeff cox mobile_presentationJeff cox mobile_presentation
Jeff cox mobile_presentationJeff Cox
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyTechBlocks
 
Introduction to HTML5 magazine apps
Introduction to HTML5 magazine appsIntroduction to HTML5 magazine apps
Introduction to HTML5 magazine appsMichael Kowalski
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First StrategySteve Buttry
 
Mornington Peninsula responsive design
Mornington Peninsula responsive designMornington Peninsula responsive design
Mornington Peninsula responsive designSeamlessCMS
 
Mobile Presentation
Mobile PresentationMobile Presentation
Mobile Presentationdmkirspel
 
(Healthcare) make your business mobile with responsive web design
(Healthcare) make your business mobile with responsive web design(Healthcare) make your business mobile with responsive web design
(Healthcare) make your business mobile with responsive web designLeisl Schrader
 
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersResponsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersBBDO
 
Designing a Mobile First UX
Designing a Mobile First UXDesigning a Mobile First UX
Designing a Mobile First UXUnmesh Ballal
 
Speers michelle mobile_presentation
Speers michelle mobile_presentationSpeers michelle mobile_presentation
Speers michelle mobile_presentationmspeers85
 
Benefits of Mobilizing User Experience
Benefits of Mobilizing User ExperienceBenefits of Mobilizing User Experience
Benefits of Mobilizing User Experiencemspeers85
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To UsabilityOvidiu Von M
 
Responsive web design ms training audience
Responsive web design ms training audienceResponsive web design ms training audience
Responsive web design ms training audienceBill England
 

What's hot (19)

Mobile-First Design
Mobile-First DesignMobile-First Design
Mobile-First Design
 
Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13Optimising Mobile Seminar, Melbourne & Perth-June'13
Optimising Mobile Seminar, Melbourne & Perth-June'13
 
UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die" UX & Usability: From "nice to have" to "do or die"
UX & Usability: From "nice to have" to "do or die"
 
Jeff cox mobile_presentation
Jeff cox mobile_presentationJeff cox mobile_presentation
Jeff cox mobile_presentation
 
Michael Kowalski, Padify
Michael Kowalski, PadifyMichael Kowalski, Padify
Michael Kowalski, Padify
 
Why and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web StrategyWhy and How to Build a Mobile First Web Strategy
Why and How to Build a Mobile First Web Strategy
 
Introduction to HTML5 magazine apps
Introduction to HTML5 magazine appsIntroduction to HTML5 magazine apps
Introduction to HTML5 magazine apps
 
Mobile-First Strategy
Mobile-First StrategyMobile-First Strategy
Mobile-First Strategy
 
UX patterns & practices
UX patterns & practicesUX patterns & practices
UX patterns & practices
 
Mornington Peninsula responsive design
Mornington Peninsula responsive designMornington Peninsula responsive design
Mornington Peninsula responsive design
 
Mobile Presentation
Mobile PresentationMobile Presentation
Mobile Presentation
 
(Healthcare) make your business mobile with responsive web design
(Healthcare) make your business mobile with responsive web design(Healthcare) make your business mobile with responsive web design
(Healthcare) make your business mobile with responsive web design
 
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersResponsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
 
Designing a Mobile First UX
Designing a Mobile First UXDesigning a Mobile First UX
Designing a Mobile First UX
 
Speers michelle mobile_presentation
Speers michelle mobile_presentationSpeers michelle mobile_presentation
Speers michelle mobile_presentation
 
Benefits of Mobilizing User Experience
Benefits of Mobilizing User ExperienceBenefits of Mobilizing User Experience
Benefits of Mobilizing User Experience
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
Responsive web design ms training audience
Responsive web design ms training audienceResponsive web design ms training audience
Responsive web design ms training audience
 
Mobile Monday
Mobile MondayMobile Monday
Mobile Monday
 

Viewers also liked

#1NLab14: Re-Defining Why You Lead
#1NLab14: Re-Defining Why You Lead#1NLab14: Re-Defining Why You Lead
#1NLab14: Re-Defining Why You LeadOne North
 
#1NLab14: Reanalyzing Analytics
#1NLab14: Reanalyzing Analytics#1NLab14: Reanalyzing Analytics
#1NLab14: Reanalyzing AnalyticsOne North
 
#1NLab14: Rebalance
#1NLab14: Rebalance#1NLab14: Rebalance
#1NLab14: RebalanceOne North
 
#1NLab14: Redefining Your Style
#1NLab14: Redefining Your Style#1NLab14: Redefining Your Style
#1NLab14: Redefining Your StyleOne North
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping BehaviorOne North
 
#1NLab14: Reintegrations
#1NLab14: Reintegrations#1NLab14: Reintegrations
#1NLab14: ReintegrationsOne North
 
#1NWebinar – Getting Personal: Creating a Customized Interactive Experience
#1NWebinar – Getting Personal: Creating a Customized Interactive Experience#1NWebinar – Getting Personal: Creating a Customized Interactive Experience
#1NWebinar – Getting Personal: Creating a Customized Interactive ExperienceOne North
 
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...One North
 
#1NLab15: Orchestration
#1NLab15: Orchestration#1NLab15: Orchestration
#1NLab15: OrchestrationOne North
 
#1NLab15: Genre Bending – Finding Your Differentiator
#1NLab15: Genre Bending – Finding Your Differentiator#1NLab15: Genre Bending – Finding Your Differentiator
#1NLab15: Genre Bending – Finding Your DifferentiatorOne North
 
#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem
#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem
#1NLab15: Creating Digital Harmony – The Marketing Technology EcosystemOne North
 
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of DigitalOne North
 
Brand: The Unbreakable Frame
Brand: The Unbreakable FrameBrand: The Unbreakable Frame
Brand: The Unbreakable FrameOne North
 
From Mobile First to Mobile Only
From Mobile First to Mobile OnlyFrom Mobile First to Mobile Only
From Mobile First to Mobile OnlyOne North
 
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...One North
 
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...One North
 
Merchandising Your Content: Inspirations from the Retail World
Merchandising Your Content: Inspirations from the Retail WorldMerchandising Your Content: Inspirations from the Retail World
Merchandising Your Content: Inspirations from the Retail World One North
 
Social Media - Turning Your People & Your Network into Your Best Marketing As...
Social Media - Turning Your People & Your Network into Your Best Marketing As...Social Media - Turning Your People & Your Network into Your Best Marketing As...
Social Media - Turning Your People & Your Network into Your Best Marketing As...One North
 

Viewers also liked (20)

#1NLab14: Re-Defining Why You Lead
#1NLab14: Re-Defining Why You Lead#1NLab14: Re-Defining Why You Lead
#1NLab14: Re-Defining Why You Lead
 
#1NLab14: Reanalyzing Analytics
#1NLab14: Reanalyzing Analytics#1NLab14: Reanalyzing Analytics
#1NLab14: Reanalyzing Analytics
 
#1NLab14: Rebalance
#1NLab14: Rebalance#1NLab14: Rebalance
#1NLab14: Rebalance
 
#1NLab14: Redefining Your Style
#1NLab14: Redefining Your Style#1NLab14: Redefining Your Style
#1NLab14: Redefining Your Style
 
#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior#1NLab14: Reshaping Behavior
#1NLab14: Reshaping Behavior
 
#1NLab14: Reintegrations
#1NLab14: Reintegrations#1NLab14: Reintegrations
#1NLab14: Reintegrations
 
#1NWebinar – Getting Personal: Creating a Customized Interactive Experience
#1NWebinar – Getting Personal: Creating a Customized Interactive Experience#1NWebinar – Getting Personal: Creating a Customized Interactive Experience
#1NWebinar – Getting Personal: Creating a Customized Interactive Experience
 
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...
#1NWebinar - Creating a Digital-Centered Customer Experience: Starting with B...
 
#1NLab15: Orchestration
#1NLab15: Orchestration#1NLab15: Orchestration
#1NLab15: Orchestration
 
#1NLab15: Genre Bending – Finding Your Differentiator
#1NLab15: Genre Bending – Finding Your Differentiator#1NLab15: Genre Bending – Finding Your Differentiator
#1NLab15: Genre Bending – Finding Your Differentiator
 
#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem
#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem
#1NLab15: Creating Digital Harmony – The Marketing Technology Ecosystem
 
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital
#1NLab15: Composing a Sensory Experience – Tapping Into the Future of Digital
 
Brand: The Unbreakable Frame
Brand: The Unbreakable FrameBrand: The Unbreakable Frame
Brand: The Unbreakable Frame
 
From Mobile First to Mobile Only
From Mobile First to Mobile OnlyFrom Mobile First to Mobile Only
From Mobile First to Mobile Only
 
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...
#1NWebinar - Creating a Digital-Centered Customer Experience: Branded Express...
 
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...
#1NLab13: Partnerships | Inspiration - Creating Experiences Through Creative ...
 
Merchandising Your Content: Inspirations from the Retail World
Merchandising Your Content: Inspirations from the Retail WorldMerchandising Your Content: Inspirations from the Retail World
Merchandising Your Content: Inspirations from the Retail World
 
Social Media - Turning Your People & Your Network into Your Best Marketing As...
Social Media - Turning Your People & Your Network into Your Best Marketing As...Social Media - Turning Your People & Your Network into Your Best Marketing As...
Social Media - Turning Your People & Your Network into Your Best Marketing As...
 
campus images
campus imagescampus images
campus images
 
Bheki Theo pretoria
Bheki Theo  pretoriaBheki Theo  pretoria
Bheki Theo pretoria
 

Similar to #1NLab14: Responsive Design

Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePointspdlabs
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Hall_
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Effective course design
Effective course designEffective course design
Effective course designWCET
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURTerminalfour
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive DesignR2integrated
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandhjc
 
Responsive Web Design Presentation
Responsive Web Design PresentationResponsive Web Design Presentation
Responsive Web Design PresentationEnvano
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive DesignUXMattFiore
 
Mobile Optimization that Actually Works
Mobile Optimization that Actually WorksMobile Optimization that Actually Works
Mobile Optimization that Actually WorksOptimizely
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingAtwix
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIJuan Carlos Duron
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove DesignMike Vdovin
 
BBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignBBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignJaneMuder
 
Designing for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesDesigning for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesHileman Group
 
Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Generate UK
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldThomas Robbins
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawMeet Magento Spain
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Karin Tracy
 

Similar to #1NLab14: Responsive Design (20)

Responsive design SharePoint
Responsive design SharePointResponsive design SharePoint
Responsive design SharePoint
 
Ready, Set, Go Mobile!
Ready, Set, Go Mobile!Ready, Set, Go Mobile!
Ready, Set, Go Mobile!
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Effective course design
Effective course designEffective course design
Effective course design
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive Design
 
Next gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotlandNext gen mobile aug 2013 scotland
Next gen mobile aug 2013 scotland
 
Responsive Web Design Presentation
Responsive Web Design PresentationResponsive Web Design Presentation
Responsive Web Design Presentation
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
Mobile Optimization that Actually Works
Mobile Optimization that Actually WorksMobile Optimization that Actually Works
Mobile Optimization that Actually Works
 
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic MarketingResponsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
Responsive Design: Where, Why and How | Imagine 2013 Strategic Marketing
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROI
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove Design
 
BBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignBBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive Design
 
Designing for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn SeriesDesigning for Mobile - Hileman Group Lunch & Learn Series
Designing for Mobile - Hileman Group Lunch & Learn Series
 
Why Are Mobile Websites Important?
Why Are Mobile Websites Important?Why Are Mobile Websites Important?
Why Are Mobile Websites Important?
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen world
 
Responsive Web Design - Tom Robertshaw
Responsive Web Design - Tom RobertshawResponsive Web Design - Tom Robertshaw
Responsive Web Design - Tom Robertshaw
 
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
 

More from One North

Why your analytics land with a thud
Why your analytics land with a thudWhy your analytics land with a thud
Why your analytics land with a thudOne North
 
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing WorldOne North
 
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...One North
 
From PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand ExperiencesFrom PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand ExperiencesOne North
 
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand PuzzleOne North
 
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics HurdlesOne North
 
Orchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in ContextOrchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in ContextOne North
 
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital MarketersOne North
 
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the RunwayOne North
 
#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About Inspiration#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About InspirationOne North
 
#1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong #1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong One North
 
#1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy #1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy One North
 
#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSO#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSOOne North
 
#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that WorksOne North
 
#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative Conundrum#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative ConundrumOne North
 
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions #1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions One North
 
#1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future #1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future One North
 
#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday Spaces#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday SpacesOne North
 
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data #1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data One North
 
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX #1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX One North
 

More from One North (20)

Why your analytics land with a thud
Why your analytics land with a thudWhy your analytics land with a thud
Why your analytics land with a thud
 
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
#1NWebinar - 2020 Trends: Surviving Today’s Ever-Changing World
 
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
#1NWebinar: From PSO to PSB – A New Model for Creating Differentiated Brand E...
 
From PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand ExperiencesFrom PSO to PSB: A New Model for Creating Differentiated Brand Experiences
From PSO to PSB: A New Model for Creating Differentiated Brand Experiences
 
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
#1NWebinar: Talent Brand - The Missing Piece of Your Brand Puzzle
 
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
#1NWebinar: Digital Blindspots - A Q&A on Common Marketing Analytics Hurdles
 
Orchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in ContextOrchestration: Making Your Digital Marketing Work in Context
Orchestration: Making Your Digital Marketing Work in Context
 
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
#1NWebinar: GDPR and Privacy Best Practices for Digital Marketers
 
#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway#1NWebinar: Digital on the Runway
#1NWebinar: Digital on the Runway
 
#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About Inspiration#1NLab17 - Feeding Your Brain: True Stories About Inspiration
#1NLab17 - Feeding Your Brain: True Stories About Inspiration
 
#1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong #1NLab17 - Eight for Eight: Finishing Strong
#1NLab17 - Eight for Eight: Finishing Strong
 
#1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy #1NLab17 - Building an Account-Based Marketing Technology Strategy
#1NLab17 - Building an Account-Based Marketing Technology Strategy
 
#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSO#1NLab17 - #1NResearch: Earning Loyalty as a PSO
#1NLab17 - #1NResearch: Earning Loyalty as a PSO
 
#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works#1NLab17 - The Apparent Chaos: Bold Design that Works
#1NLab17 - The Apparent Chaos: Bold Design that Works
 
#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative Conundrum#1NLab17 - Functional Fixedness: A Creative Conundrum
#1NLab17 - Functional Fixedness: A Creative Conundrum
 
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions #1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
#1NLab17 - From Obstacle to Opportunity: Using Tech to Inspire Solutions
 
#1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future #1NLab17 - Designing for the Future
#1NLab17 - Designing for the Future
 
#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday Spaces#1NLab17 - Design of Everyday Spaces
#1NLab17 - Design of Everyday Spaces
 
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data #1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
#1NLab17 - Designing the Next Release: Measuring & Experimenting with Data
 
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX #1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
#1NLab17 - Taming your Services Taxonomy: Strategic IA for Great UX
 

#1NLab14: Responsive Design

  • 1. Responsive Design Retooling for Mobile Devices, Rich Media and User Experience
  • 9. Beyond Hyperbole “Mobile is eating the world” - Andreesen Horowitz
  • 10. Beyond Hyperbole 25% of Global traffic comes through mobile devices. – Mary Meeker 51% of all emails are opened on mobile devices. – Litmus 48% of users say they feel frustrated and annoyed when they get to a site that's not mobile-friendly. – Google & Sterling Research Only 15% of Fortune 1000 have mobile optimized sites. – Restive
  • 12. Responsive design is the combination of flexible grids, flexible images and media queries. - Ethan Marcotte, who coined RWD in 2010 Source: bradfrost.com
  • 14. RWD Benefits • 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
  • 15. Quantifiable • 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% * Luke Wroblewski, 2014
  • 16. 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.
  • 17. A New Approach & Philosophy MOBILE BROWSERS SEO PERFORMANCE TESTING CONTENT & MEDIA PAGE LAYOUT ANALYTICS WORKFLOW
  • 18. Fluid Grid PAGE LAYOUT • The fold no longer exists • Views change at "Break" points • Not just iPad and iPhone views
  • 19. Layouts Shift / Columns Drop PAGE LAYOUT • It’s not “pages” anymore • Think of design systems • A set of components to assemble
  • 20. Workflow • 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
  • 21. 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 BackEnd Content FrontEnd Strategy Creative
  • 22. 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
  • 23. • 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
  • 24. Always Changing • Continue to monitor for new changes and adapt regularly • Add Google Event Tracking – Weisert Talk – Menu clicks – Scroll Depth – Carousels usage – Tab click-throughs ANALYTICS
  • 25. RWD is SEO • 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 SEO
  • 26. Google Warnings • Google warns on different m.site.com • Or not being responsive SEO
  • 27. Performance Matters • 4 seconds before 25% of users abandon a site • Trumps all other efforts PERFORMANCE *KISSMetrics
  • 28. PERFORMANCE • What happens on page load? • The original architecture of the web vs a modern web requests
  • 29. Performance Considerations • Numerous behind the scenes efforts • Roundtrips • Payload/ Page Size • Image Count & Size • Typography • Performance is design – Use a performance budget PERFORMANCE
  • 30. Browser Wars • Don’t fight it! • Inconsistent with each other • Moving target • It’s OK to be different • Graceful Degradation • Progressive Enhancement BROWSERS
  • 31. Content & Media • 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
  • 33. Testing Approaches • Not designing for specific devices, but should test on some • Browser Stack and http://responsive.is/ • Chrome Dev Tools – Emulation TESTING • Analytics will show high Bounce Rates
  • 34. A LOOK TO THE FUTURE
  • 35. What’s Next • 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
  • 37. The Modern, Responsive Web MOBILE BROWSERS SEO PERFORMANCE TESTING CONTENT & MEDIA PAGE LAYOUT ANALYTICS WORKFLOW
  • 38. Responsive Design Benefits • 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
  • 39. Credits • 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