3. Responsive sites are
device agnostic,
responding to the device
they are viewed in
Delivering the richest user
experience to that device
http://bostonglobe.com
4. 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
Clients
Awards
5. 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.)
6. 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.
7. Device specific sites? No.
Less engaging user experience across
devices? No
http://www.mobilusdesign.com/responsive-web-designed-websites-for-wordpress/
8.
9. 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
12. 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
14. 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
19. “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
20. Answer this question:
If it’s not needed on mobile,
is it needed in the first place?
21. 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
23. 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
24. Responsive
Tips
• 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
