Approaches to Responsive Design & DevelopmentJanuary 21, 2013

What is Responsive Design?

• An approach to web design in which a site is crafted to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (Wikipedia)

• Ethan Marcotte, A List Apart, Responsive Web Design (May 25, 2010)

• No longer a ‘luxury’

Elements of Responsive Design

• Fluid Grids & Fluid Layouts

• Media Queries

• Flexible Images/Media

• Responsive Menus

• Flexible type

Fluid Layouts

• Benefits vs. fixed-width layout; drawbacks

• Target / Context = Result

Fixed-Width (based on pixels) Fluid Layout (based on %’s)

Fluid Grids

• Typically 12 or 16 columns with column width and gutters based on %’s

• Example:

Using Fluid Grids

• 1140gs – cssgrid.net (PSD template included)

• Foundation by Zurb (framework)

• Twitter Bootstrap (framework)

• Use 12/16 column PSD template when creating mockup

Media Queries

• Placed in stylesheet (can also use Javascript detection)

• Looks at the capability of the device and checks for:

• Width & Height of browser window

• Orientation

• Resolution

• http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

• http://nmsdvid.com/snippets/

Media Query Example

@media only screen and (min-device-width

: 320px) and (max-device-width : 480px)

{

#primary-nav {display:none;}

#responsive-nav {display:block;}

}

• Example: RoomTemp

• Concept of ‘breakpoints’

Media Query Breakpoints

• Browser widths that have a media query declaration to change the layout once the browser is within the declared range

• 320 px — Mobile portrait

• 480 px — Mobile landscape

• 600 px — Small tablet

• 768 px — Tablet portrait

• 1024 px — Tablet landscape/Netbook

• 1280 px & greater — Desktop

Flexible Images & Media

img, embed, iframe {

Max-width:100%;

Height:auto;

}

• http://css-tricks.com/video-source-by-screen-size/ -Different videos depending on screen size and device

• http://retinajs.com/ - Retina Images

Responsive Menus

• Full Horizontal

• Select Box (ex. RoomTemp)

• Custom Dropdown (ex. Daystar)

• Off Canvas

• http://css-tricks.com/responsive-menu-concepts/

Flexible Typography

• Set body to font-size:100% / 1em (16px)

• Base all fonts relative to the base font size, so a 32px H1 would be 2em (32 / 16 = 2)

• This makes it easy to adjust all typography with a single media query, changing the body font-size up or down

• PxtoEm.com

• CSS3 rems (based off HTML element, no nesting)

Responsive Frameworks

• Based around a fluid grid (except Skeleton); some contain user interface elements and additional features

• Skeleton

• Twitter Bootstrap

• Zurb Foundation

• 1140 CSS Grid

Advantages of Frameworks

• Basic media queries & responsiveness done for you

• Cross-browser tested

• Rapid protoyping; grid template provided for designing

• Drawbacks: learning curve, lots of markup, can be tough to create highly custom designs

Helpful Plugins

• CSS3-Mediaqueries.js (support for media queries on IE8 and below)

• Retina.js (serve up high res images)

• Fittext.js (scalable headlines)

• FlexSlider (responsive slider)

• FitVids.js (fluid video embeds)

Hacking Responsive WordpressThemes• Inspect the behavior of the site

• Look at the media queries

• Determine if they are using a framework…learn how to incorporate that

• Example: Teamate.us