Responsive Web Design presentation at the Fort Wayne AdFed

5,290 views

Published on

Nate Reusser recently spoke in front of 80+ advertising and marketing professionals during a luncheon held at the Fort Wayne Advertising Federation. Here are his slides, full of useful information and resources!

Published in: Design

Responsive Web Design presentation at the Fort Wayne AdFed

  1. R S O SV EP NI E W BD SG E EI NNate Reusser #AdFedRWD@natereusser
  2. W A I R D H T S W Approach to web design in which a site is crafted to provide an optimal viewing experience Provides easy reading and navigation with a minimum of resizing, panning, and scrolling Mix of flexible grids and layouts, images and an intelligent use of CSS media queriesRESPONSIVE WEB DESIGN #AdFedRWD
  3. W Y H F C SO O U N R D W ?RESPONSIVE WEB DESIGN #AdFedRWD
  4. RESPONSIVE WEB DESIGN #AdFedRWD
  5. 350 MILLION MILLIONMILLION 193 100IPODS IPHONES IPADS
  6. I 2 1 .. N 0 2. 2.4 BILLION INTERNET USERS WORLDWIDE 31 PERCENT USED A TABLET OR E-READER (U.S. Internet Population) 1.3 EXABYTES MOBILE DATA TRAFFIC PER MONTHRESPONSIVE WEB DESIGN #AdFedRWD
  7. 2 1 00 Ethan Marcotte coined the phraseRESPONSIVE WEB DESIGN #AdFedRWD
  8. 2 1 01RESPONSIVE WEB DESIGN #AdFedRWD
  9. 2 1 02RESPONSIVE WEB DESIGN #AdFedRWD
  10. R DB S C W AI S 1. A Fluid Foundation 2. Flexible Content 3. Media QueriesRESPONSIVE WEB DESIGN #AdFedRWD
  11. F UD L I F U D TO O N A I N • Basic Fluid Layout [EXAMPLE] Content continually flows or adjusts in a word-wrap fashion. No distinct content differences • Adaptive Layout [ EXAMPLE] Predefined break points where different layouts are triggered. • Responsive Layout [EXAMPLE] Combination of Fluid & Adaptive. Still have predefined break points, however, content will flow to expand or contractRESPONSIVE WEB DESIGN #AdFedRWD
  12. F E I L L XB E C N E T O T N • Start with a solid Content Plan • Gather content prior to design & dev • Use a Content Priority GuideRESPONSIVE WEB DESIGN #AdFedRWD
  13. RESPONSIVE WEB DESIGN #AdFedRWD
  14. M DA E I Q E I S U RE @media (min-width: 720px) { .logo { float: none; padding: 10px; } } RESPONSIVE WEB DESIGN #AdFedRWD
  15. B E K ON S R A P I T • 0-519 pixels Most all phones will see this in portrait • 520-759 pixels Phones with large resolutions, tablets with small resolutions in portrait mode • 760-959 pixels iPad and most Android Tablets in portrait, most Android phones in Landscape orientation, Resized Desktops • 960-1140+ pixels Desktop full width, Kindle Fire, iPad in Landscape Mode, Flat Screen TVsRESPONSIVE WEB DESIGN #AdFedRWD
  16. I E ST T M OC NI E O SD R
  17. N VG TO A I A I N Single-Level Multi-Level • Toggle [EXAMPLE] • Multi-Toggle [EXAMPLE] • Footer Anchor [EXAMPLE] • Select Menu [EXAMPLE]RESPONSIVE WEB DESIGN #AdFedRWD
  18. F A U E E T R S P O T U P R • Click to Call • GeoLocation • GeoFencing • Native Device FunctionalityRESPONSIVE WEB DESIGN #AdFedRWD
  19. E F C I E F E TV ? • Better experience for mobile users • “One-size” approach to web analytics won’t work • Google recommends RWD (June 2012) • Less costly to maintainRESPONSIVE WEB DESIGN #AdFedRWD
  20. PROS CONS • One Codebase • Problems with images, javascript disabled • Single URL • Social Sharing • Advertising • Device Agnostic • More development & planning • Future Proof • Legacy SupportRESPONSIVE WEB DESIGN #AdFedRWD
  21. N E F RR D E D O W ? • Depends on the project • Target Audience Needs, need an app? • BudgetRESPONSIVE WEB DESIGN #AdFedRWD
  22. D M S E O
  23. G TS A T D E T R E Great responsive frameworks to get the hang of things: • Foundation by ZURB http://foundation.zurb.com • Fluid Baseline Grid System http://www.fluidbaselinegrid.com • Twitter Bootstrap 2.0 http://twitter.github.com/bootstrap/ • 1140 Grid System http://cssgrid.net/ • Skelton http://www.getskeleton.com/RESPONSIVE WEB DESIGN #AdFedRWD
  24. R S U C S EO R E • Responsive Layouts & Patterns - Brad Frost http://bit.ly/U4N5qH • Device Agnostic Approach to RWD http://bit.ly/GHjK2D • Responsive Web Design (A List Apart) http://bit.ly/bcKwQQ • Media Queries http://mediaqueri.es/RESPONSIVE WEB DESIGN #AdFedRWD
  25. S A TT I K N T R HN I G • Pixel Density (i.e. Touch Targets) • Typekit / WebFont (Hosted Fonts) • Retina Display • Pictos / Font Glyphs / SVGsRESPONSIVE WEB DESIGN #AdFedRWD
  26. T EF T R H U U E• Screensize - Viewport, Orientation, Resolution• Connection Speed - Adjusting bandwidth during session• Color - Poor Lighting, Monochrome, Retina Display• Interaction - Touch, Mouse, Voice, Keyboards• Performance - Battery Life, Performance, CPU
  27. T A K! H N S Slides will be posted to: http://www.slideshare.net/reusserdesignRESPONSIVE WEB DESIGN #AdFedRWD

×