Ryan Horner, One North Managing Director of Technology, shares his insight into the importance of retooling digital experiences for mobile devices, rich media and user experiences.
From the 2014 Experience Lab: Reimagine Marketing. To watch a video of this presentation, visit http://bit.ly/11VvGLF.
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
13.
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
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