Responsive Web Design - Why and How
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design - Why and How

on

  • 560 views

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 ...

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.

Statistics

Views

Total Views
560
Views on SlideShare
558
Embed Views
2

Actions

Likes
0
Downloads
20
Comments
0

2 Embeds 2

http://bootstrap.oktopic.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design - Why and How Responsive Web Design - Why and How Presentation Transcript

  • Responsive Web Design How 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 Million Android 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
  • Mobile It’s Not About It’s About the Web
  • How do you design a web site that works well on all devices?
  • 1. Design for the Desktop 2. Separate Mobile Site 3. Native Mobile App 4. 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 because of browser, device or configuration. - Brad Frost
  • Context of Use
  • Context of Use
  • Mobile First
  • Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer 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 Tiles Communicate the essence of a visual brand for 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 the devices and set the breakpoints BETWEEN them. Define breakpoints where your layout breaks. Also define breakpoints where you need a layout change due to space limitations.
  • 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 Patterns Top Navigation
  • Footer Anchor
  • Navigation Patterns Toggle Navigation
  • Navigation Patterns Left Nav Flyout
  • Navigation Patterns Three-Dimensional Menu
  • Content, Content, Content
  • • Ethan Marcotte’s article that coined the term http://www.alistapart.com/articles/responsive-web-design/ • Responsive Web Design, the book http://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 Marcotte http://www.alistapart.com/articles/fluidgrids/ • Responsive Web Design, another article by Ethan Marcotte http://www.netmagazine.com/features/responsive-web-design • CSS3 Media Queries http://webdesignerwall.com/tutorials/css3-media-queries • Mediaqueries.es, a list of sites using Responsive Web Design techniques http://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 • me@ryandoddcs.com or rdodd@siteworx.com • Linkedin Where to find me
  • Questions?