1. Responsive Design Techniques
October 24th, 2012
Matt Fiore
Principal Designer
Siteworx

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/

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

10. One Codebase.
One Codebase
One Content Platform
One Content Platform.
One URL
One URL.
One site to rule them all.

11. Content Design rather than web design

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

13. Responsive design combines flexible grids, flexible
images/media, and CSS media queries

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

17. Responsive Alignment

18. Responsive
Component
Order

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

22. Staged
Approaches
Mobile First
Desktop and Down
Tablet and Out

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

25. Responsive
Naviga,on
Menus
Convert a Menu to a Dropdown for Small Screens

26. Responsive
Data
Tables
Swap out tables for graphs

27. Images
&
Video
Resize and swap

28. Hiding
Components
• Can hack to point
to dummy content
• Markup still exists

29. Test
on
Devices!!
• Even when
prototyping in Axure
• Use designs in their
environment
• Emulators only get
you part of the way

30. DeWalt
Demo Video

35. Responsive
Layout
PaIerns
http://www.zurb.com/playground/off-canvas-layouts
http://bradfrost.github.com/this-is-responsive/
patterns.html
http://bradfrostweb.com/blog/web/complex-navigation-
patterns-for-responsive-design/
http://www.thismanslife.co.uk/projects/lab/
responsivewireframes/

36. Visit us at Siteworx.com
Matthew Fiore
Principal Designer
mfiore@siteworx.com
www.linkedin.com/in/matthewfiore