Responsive Web Design presentation at the Fort Wayne AdFed
-
Upload
reusser-design-llc -
Category
Design
-
view
3.339 -
download
2
description
Transcript of Responsive Web Design presentation at the Fort Wayne AdFed
RESPONSIVEWEB DESIGN
Nate Reusser #AdFedRWD@natereusser
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
WHAT IS RWD
#AdFedRWDRESPONSIVE WEB DESIGN
WHYFOCUS ON
RWD?
#AdFedRWDRESPONSIVE WEB DESIGN
#AdFedRWDRESPONSIVE WEB DESIGN
350MILLIONIPODS
193MILLIONIPHONES
100MILLIONIPADS
2.4 INTERNET USERS WORLDWIDE
IN 2012...
BILLION
1.3 EXABYTES
MOBILE DATA TRAFFICPER MONTH
31 PERCENT
USED A TABLET ORE-READER (U.S. Internet Population)
#AdFedRWDRESPONSIVE WEB DESIGN
2010
#AdFedRWDRESPONSIVE WEB DESIGN
Ethan Marcotte coined the phrase
2011
#AdFedRWDRESPONSIVE WEB DESIGN
2012
#AdFedRWDRESPONSIVE WEB DESIGN
1. A Fluid Foundation
2. Flexible Content
3. Media Queries
RWD BASICS
#AdFedRWDRESPONSIVE WEB DESIGN
• 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
FLUID FOUNDATION
#AdFedRWDRESPONSIVE WEB DESIGN
• Start with a solid Content Plan
• Gather content prior to design & dev
• Use a Content Priority Guide
#AdFedRWDRESPONSIVE WEB DESIGN
FLEXIBLE CONTENT
#AdFedRWDRESPONSIVE WEB DESIGN
@media (min-width: 720px) { .logo { float: none; padding: 10px; }}
\
MEDIA QUERIES
#AdFedRWDRESPONSIVE WEB DESIGN
• 0-519 pixels Most all phones will see this in portrait
• 520-759 pixelsPhones 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+ pixelsDesktop full width, Kindle Fire, iPad in Landscape Mode, Flat Screen TVs
#AdFedRWDRESPONSIVE WEB DESIGN
BREAKPOINTS
ITEMS TO CONSIDER
NAVIGATIONSingle-Level Multi-Level
• Toggle [EXAMPLE]
• Footer Anchor [EXAMPLE]
• Select Menu [EXAMPLE]
• Multi-Toggle [EXAMPLE]
#AdFedRWDRESPONSIVE WEB DESIGN
FEATURE SUPPORT
• Click to Call
• GeoLocation
• GeoFencing
• Native Device Functionality
#AdFedRWDRESPONSIVE WEB DESIGN
•Better experience for mobile users
• “One-size” approach to web analytics won’t work
•Google recommends RWD (June 2012)
• Less costly to maintain
EFFECTIVE?
#AdFedRWDRESPONSIVE WEB DESIGN
PROS CONS
• One Codebase
• Single URL
• Social Sharing
• Device Agnostic
• Future Proof
• Problems with images, javascript disabled
• Advertising
• More development & planning
• Legacy Support
#AdFedRWDRESPONSIVE WEB DESIGN
•Depends on the project
• Target Audience Needs, need an app?
•Budget
NEED FOR RWD?
#AdFedRWDRESPONSIVE WEB DESIGN
DEMOS
GET STARTEDGreat responsive frameworks to get the hang of things:
• Foundation by ZURBhttp://foundation.zurb.com
• Fluid Baseline Grid Systemhttp://www.fluidbaselinegrid.com
• Twitter Bootstrap 2.0http://twitter.github.com/bootstrap/
• 1140 Grid Systemhttp://cssgrid.net/
• Skeltonhttp://www.getskeleton.com/
#AdFedRWDRESPONSIVE WEB DESIGN
RESOURCES• Responsive Layouts & Patterns - Brad Frost
http://bit.ly/U4N5qH
• Device Agnostic Approach to RWDhttp://bit.ly/GHjK2D
• Responsive Web Design (A List Apart)http://bit.ly/bcKwQQ
• Media Querieshttp://mediaqueri.es/
#AdFedRWDRESPONSIVE WEB DESIGN
START THINKING
•Pixel Density (i.e. Touch Targets)
• Typekit / WebFont (Hosted Fonts)
•Retina Display
•Pictos / Font Glyphs / SVGs
#AdFedRWDRESPONSIVE WEB DESIGN
• 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
THE FUTURE
THANKS!
#AdFedRWDRESPONSIVE WEB DESIGN
Slides will be posted to:
http://www.slideshare.net/reusserdesign