Responsive design provides an optimal viewing experience across devices by using fluid grids and layouts, flexible images and media, and media queries. Key elements include fluid grids based on percentages, media queries that detect device capabilities and alter styles, and flexible typography that scales with the base font size. Popular frameworks like Bootstrap simplify the process but can limit customization. Plugins also help add responsive features to sites.

1. Approaches to
Responsive Design &
Development
January 21, 2013

2. 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’

3. Elements of Responsive Design
• Fluid Grids & Fluid Layouts
• Media Queries
• Flexible Images/Media
• Responsive Menus
• Flexible type

4. Fluid Layouts
• Benefits vs. fixed-width layout; drawbacks
• Target / Context = Result
Fixed-Width (based on pixels) Fluid Layout (based on %’s)

5. Fluid Grids
• Typically 12 or 16 columns with column width and gutters
based on %’s
• Example:

6. 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

7. 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/

8. 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’

9. 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

10. 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

11. Responsive Menus
• Full Horizontal
• Select Box (ex. RoomTemp)
• Custom Dropdown (ex. Daystar)
• Off Canvas
• http://css-tricks.com/responsive-menu-concepts/

12. 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)

13. 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

14. 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

15. 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)

16. Hacking Responsive Wordpress
Themes
• 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