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