Approaches to Responsive Design & Development
description
Transcript of Approaches to Responsive Design & Development
![Page 1: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/1.jpg)
Approaches to Responsive Design & DevelopmentJanuary 21, 2013
![Page 2: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/2.jpg)
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’
![Page 3: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/3.jpg)
Elements of Responsive Design• Fluid Grids & Fluid Layouts• Media Queries • Flexible Images/Media
• Responsive Menus• Flexible type
![Page 4: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/4.jpg)
Fluid Layouts• Benefits vs. fixed-width layout; drawbacks• Target / Context = Result
Fixed-Width (based on pixels) Fluid Layout (based on %’s)
![Page 5: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/5.jpg)
Fluid Grids• Typically 12 or 16 columns with column width and gutters
based on %’s• Example:
![Page 6: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/6.jpg)
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
![Page 7: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/7.jpg)
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/
![Page 8: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/8.jpg)
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’
![Page 9: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/9.jpg)
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
![Page 10: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/10.jpg)
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
![Page 11: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/11.jpg)
Responsive Menus• Full Horizontal• Select Box (ex. RoomTemp)• Custom Dropdown (ex. Daystar)• Off Canvas
• http://css-tricks.com/responsive-menu-concepts/
![Page 12: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/12.jpg)
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)
![Page 13: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/13.jpg)
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
![Page 14: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/14.jpg)
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
![Page 15: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/15.jpg)
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)
![Page 16: Approaches to Responsive Design & Development](https://reader036.fdocuments.in/reader036/viewer/2022062411/56816731550346895ddbdb08/html5/thumbnails/16.jpg)
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