Responsive Web Design presentation at the Fort Wayne AdFed
16 likes3,292 views
This document discusses responsive web design (RWD), emphasizing its importance for providing optimal viewing experiences across various devices. Key concepts include fluid and adaptive layouts, media queries, and the necessity for a solid content plan before design. The document also highlights the benefits and challenges of RWD, along with recommended frameworks and resources for implementation.
![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 contract
RESPONSIVE WEB DESIGN #AdFedRWD](https://image.slidesharecdn.com/adfed-rwd-1-24-12-130124144617-phpapp01/85/Responsive-Web-Design-presentation-at-the-Fort-Wayne-AdFed-12-320.jpg)
![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](https://image.slidesharecdn.com/adfed-rwd-1-24-12-130124144617-phpapp01/85/Responsive-Web-Design-presentation-at-the-Fort-Wayne-AdFed-18-320.jpg)
Responsive Web Design presentation at the Fort Wayne AdFed
- 1. R S O SV EP NI E W BD SG E EI N Nate 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 queries RESPONSIVE WEB DESIGN #AdFedRWD
- 3. W Y H F C SO O U N R D W ? RESPONSIVE WEB DESIGN #AdFedRWD
- 5. RESPONSIVE WEB DESIGN #AdFedRWD
- 6. 350 MILLION MILLION MILLION 193 100 IPODS IPHONES IPADS
- 7. 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 MONTH RESPONSIVE WEB DESIGN #AdFedRWD
- 8. 2 1 00 Ethan Marcotte coined the phrase RESPONSIVE WEB DESIGN #AdFedRWD
- 9. 2 1 01 RESPONSIVE WEB DESIGN #AdFedRWD
- 10. 2 1 02 RESPONSIVE WEB DESIGN #AdFedRWD
- 11. R DB S C W AI S 1. A Fluid Foundation 2. Flexible Content 3. Media Queries RESPONSIVE WEB DESIGN #AdFedRWD
- 12. 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 contract RESPONSIVE WEB DESIGN #AdFedRWD
- 13. 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 Guide RESPONSIVE WEB DESIGN #AdFedRWD
- 14. RESPONSIVE WEB DESIGN #AdFedRWD
- 15. M DA E I Q E I S U RE @media (min-width: 720px) { .logo { float: none; padding: 10px; } } RESPONSIVE WEB DESIGN #AdFedRWD
- 16. 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 TVs RESPONSIVE WEB DESIGN #AdFedRWD
- 17. I E ST T M O C NI E O SD R
- 18. 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
- 19. F A U E E T R S P O T U P R • Click to Call • GeoLocation • GeoFencing • Native Device Functionality RESPONSIVE WEB DESIGN #AdFedRWD
- 20. 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 maintain RESPONSIVE WEB DESIGN #AdFedRWD
- 21. PROS CONS • One Codebase • Problems with images, javascript disabled • Single URL • Social Sharing • Advertising • Device Agnostic • More development & planning • Future Proof • Legacy Support RESPONSIVE WEB DESIGN #AdFedRWD
- 22. N E F RR D E D O W ? • Depends on the project • Target Audience Needs, need an app? • Budget RESPONSIVE WEB DESIGN #AdFedRWD
- 23. D M S E O
- 24. 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
- 25. 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
- 26. 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 / SVGs RESPONSIVE WEB DESIGN #AdFedRWD
- 27. 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
- 28. T A K! H N S Slides will be posted to: http://www.slideshare.net/reusserdesign RESPONSIVE WEB DESIGN #AdFedRWD