responsive web design - why and how
Post on 17-Oct-2014
559 views
DESCRIPTION
This is the Responsive Web Design presentation given to the CIDD, Chicago Interactive Design & Development Meetup group, (sponsored by the WunderLand Group) on 3-13-14 by Ryan Dodd, Design Director for Siteworx in Chicago.TRANSCRIPT
Responsive Web DesignHow and Why
Back in my day…
When life was simple
And Then Came The One
January 9, 2007
Mobile internet adoption has outpaced desktop internet adoption by eight times http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html
AT&T, the exclusive carrier for Apple's iPhone, saw a 4,932% increase in mobile traffic data in the since the iPhone’s launch. http://www.lukew.com/ff/entry.asp?933
Smartphone sales surpassed worldwide PC sales by the end of 2011 http://www.pcworld.com/article/171380/
Does Mobile Matter?
Innovation & Transition
2010 iPad – 3 million sold in 80 days
iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”
Today
iPhone 5 sold 5 Million on first day
2 Million in first 24 hours
Over 210 MillionAndroid Activations in 2013
The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.
– Ethan Marcotte
Beyond the desktop
Mobile
MobileIt’s Not About
It’s About the Web
How do you design a web site that works wellon all devices?
1. Design for the Desktop2. Separate Mobile Site3. Native Mobile App4. Responsive Design
Options
Desktop Design
Separate Mobile Design
One site to rule them all
It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.
–Jeffrey Zeldman
Responsive Web Design
One site, multiple devices
One site, multiple devices
• Consistent Experience• Content Parity• No Zooming• Single Code Base (also for CMS users, one login)• Device Agnostic• URL Management
Advantages of Responsive Design
• Context of Use• Speed/bandwidth• Advertising• Workflow• Project Management
Disadvantages of Responsive Design
“It’s not like our industry nailed web design before we started responsive design. It’s still a work in progress.”
- Dan Willis@uxcrank
• Content sites vs. transactional sites• Context of use• Resources• CMS• Don’t do a native app just because the
client wants one
How do you choose?
• Device/browser support• Test on real devices• Test in real-life, everyday scenarios• Speed/bandwidth• Small-screen first• Let content determine design• Let design determine breakpoints• Consider UX and Business goals first• Communicate with your clients• Responsive workflow
Things to Consider
A flexible, grid-based layout
Flexible images and media
Media queries, a module from the CSS3 specification.
The Ingredients
Design Process
Design
Develop
Content Parity
Content Parity
Content Parity
Content Parity
Content Parity
The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration.
- Brad Frost
Context of Use
Context of Use
Mobile First
Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps.
Make it work better for everybody.
Some Examples
Some Examples
Some Examples
Some Examples
Clean out the clutter
Give Everybody the same content
Displayed appropriately for their device
No Matter what device they have
Responsive Web Design
Start with Content
Style TilesCommunicate the
essence of a visual brandfor the web
Mostly Fluid
Column Drop
Layout Shifter
Off Canvas
Style Tiles
Style Tiles
Breakpoints
Set breakpoints according to the content
Device Breakpoints
Device Class Breakpoints
Natural Breakpoints
320px? 480px? WTF!
Break at the specific device width. DON’T DO THIS!!
Identify your most important device widths, classify thedevices and set the breakpoints BETWEEN them.
Define breakpoints where your layout breaks. Also definebreakpoints where you need a layout change due to spacelimitations.
Frameworks
http://foundation.zurb.com/
http://foundation.zurb.com/grid-example1.php
http://www.zurb.com/soapbox
• Bootstrap• Skeleton• 320 and UP• SimpleGrid• Semantic Grid System• Frameless (Kind of)• HTML5 Boilerplate• Golden Grid System
Other Frameworks
Wireframes and Prototyping
Navigation Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html
Navigation PatternsTop Navigation
Footer Anchor
Navigation PatternsToggle Navigation
Navigation PatternsLeft Nav Flyout
Navigation PatternsThree-Dimensional Menu
Content, Content, Content
• Ethan Marcotte’s article that coined the termhttp://www.alistapart.com/articles/responsive-web-design/
• Responsive Web Design, the bookhttp://www.abookapart.com/products/responsive-web-design
• Fluid Images, by Ethan Marcotte (Chapter 3 of the book)http://www.alistapart.com/articles/fluid-images/
• Fluid Grids, by Ethan Marcottehttp://www.alistapart.com/articles/fluidgrids/
• Responsive Web Design, another article by Ethan Marcottehttp://www.netmagazine.com/features/responsive-web-design
• CSS3 Media Querieshttp://webdesignerwall.com/tutorials/css3-media-queries
• Mediaqueries.es, a list of sites using Responsive Web Design techniqueshttp://mediaqueri.es/
Resources
• The article that started it all, by Ethan Marcotte:– http://www.alistapart.com/articles/responsive-web-design/
• Fluid Images by Ethan Marcotte:– http://unstoppablerobotninja.com/entry/fluid-images
• IE8 and below Media Queries fix:– http://code.google.com/p/css3-mediaqueries-js/
• IE6 min/max-width hack:– http://www.cameronmoll.com/archives/000892.html
• Fluid Grids by Ethan Marcotte:– http://www.alistapart.com/articles/fluidgrids/
• Media Queries reference, list of Media Query selectors available:– http://www.w3.org/TR/css3-mediaqueries/
• Responsive Typesetting:– http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html
Resources
• @rdoddlm – follow me on Twitter• [email protected] or [email protected]• Linkedin
Where to find me
Questions?