responsive design
DESCRIPTION
This is a quick presentation I gave to my teammates to demonstrate some features of responsive design and how it can be applied across different viewports.TRANSCRIPT
RESPONSIVE WEB DESIGN
Ivan Frantar - 2012
AN OVERVIEW OF
MEDIA QUERIES
• What is Responsive Design?• Mobile Influence• Fluid Design• Adapting to Context• Adapting to Typography• Adaptive Images• Media Queries• Tools for browser compatibility
WHAT IS RESPONSIVE WEB DESIGN?
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.
- Ethan Marcotte
Source: http://www.alistapart.com/articles/responsive-web-design/
WHAT IS RESPONSIVE WEB DESIGN?
• Flexible grid layout• Flexible Images & Typography• Media queries• Adaptive User Experience
BENEFITS
• Can't afford mobile developers• Optimize User Experience using same content
MOBILE INFLUENCE
Source: http://www.flickr.com/photos/jodyodea/3910686634/
MOBILE INFLUENCE
Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
Connect 69% 31%
Navigate 65% 35%
Inform 61% 39%
Manage 54% 46%
Entertain 40% 60%
Search 37% 63%
Shop 27% 73%
App
Browser
STATISTICS AS OF END OF 2011
FLUID DESIGN
#header 100%
#content 70% #sidebar30%
#footer 100%
#header 100%
#main-content 60%
20%
#footer 100%
20%
#wrapper max-width:960px
FLUID DESIGN
• Good for different screen sizes• Good for accessibility• Good for keeping the content flexible
BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
ADAPTING TO CONTEXT
960px
698px 218px
Target % Context = Result
960px
698px 218px
Target % Context = Result
96%
698 % 960
Width:72.7083333%;
218 % 960
Width:22.7083333%;
ADAPTING TO CONTEXT
218px
USING EM'S
ADAPTING TYPOGRAPHY
body { font-size:100%; /* will condition the size across font */}
• Size of an em related to the size of its context• Most browsers use as default 16px font size• Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordingly
218px
USING EM'S – example
ADAPTING TYPOGRAPHY
• Apply same formula: target % context = result
#header { display: block; padding-top: 75px; color: #333; text-transform: uppercase; font: Arial; font-size: 48px;}
#header { display: block; padding-top: 75px; color: #333; text-transform: uppercase; font: Arial; font-size: 3em; /* 48 % 16 = 3 */ }
218px
ADAPTING IMAGES
img { max-width:100%;}
• Automatically images will scale 100% of container• Remove 'height' and 'width' attributes on <img> tag• Applicable to <embed>, <object>, <video>
218px
ADAPTING IMAGES
• File size not suitable from one viewport to another• Connectivity hungry if large images for wrong device• No solid solution to retrieve images appropriatly to device
PROBLEMS
SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)
• Responsive Images: Experimenting with Context-Aware Image Sizing (link)• Adaptive Images (link)
218px
MEDIA QUERIES @media screen and (max-width: 1200px) {body{ width:1000px; margin:0 auto; }#content { width: 700px; }.sidebar{ width:280px; }}
@media screen and (max-width: 980px) {body{ width:850px; margin:0 auto; }#content { width: 550px; }.sidebar{ width:280px; }}
@media screen and (max-width: 750px) {body{ width:600px; margin:0 auto; }#content { width: 400px; }.sidebar{ width:190px; margin: 0 0 20px 10px; }}
@media screen and (max-width: 380px) { body{ width:360px; margin:0 auto; }#content { width: 360px; }.sidebar{ width:360px; margin: 0 0 10px 0; }}
MEDIA QUERIES
TOOLS & SOURCES
• Modernizr (link)• Mediaqueri.es (link)• Respond.js (link)• Semantic.gs (link)• Columnal.com (link)
RESPONSIVE WEB DESIGN
Ivan Frantar - 2012
AN OVERVIEW OF
MEDIA QUERIES
• What is Responsive Design?• Mobile Influence• Fluid Design• Adapting to Context• Adapting to Typography• Adaptive Images• Media Queries• Tools for browser compatibility
WHAT IS RESPONSIVE WEB DESIGN?
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.
- Ethan Marcotte
Source: http://www.alistapart.com/articles/responsive-web-design/
WHAT IS RESPONSIVE WEB DESIGN?
• Flexible grid layout• Flexible Images & Typography• Media queries• Adaptive User Experience
BENEFITS
• Can't afford mobile developers• Optimize User Experience using same content
MOBILE INFLUENCE
Source: http://www.flickr.com/photos/jodyodea/3910686634/
MOBILE INFLUENCE
Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/
Connect 69% 31%
Navigate 65% 35%
Inform 61% 39%
Manage 54% 46%
Entertain 40% 60%
Search 37% 63%
Shop 27% 73%
App
Browser
STATISTICS AS OF END OF 2011
FLUID DESIGN
#header 100%
#content 70% #sidebar30%
#footer 100%
#header 100%
#main-content 60%
20%
#footer 100%
20%
#wrapper max-width:960px
FLUID DESIGN
• Good for different screen sizes• Good for accessibility• Good for keeping the content flexible
BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?
ADAPTING TO CONTEXT
960px
698px 218px
Target % Context = Result
960px
698px 218px
Target % Context = Result
96%
698 % 960
Width:72.7083333%;
218 % 960
Width:22.7083333%;
ADAPTING TO CONTEXT
218px
USING EM'S
ADAPTING TYPOGRAPHY
body { font-size:100%; /* will condition the size across font */}
• Size of an em related to the size of its context• Most browsers use as default 16px font size• Therefore if we use ems by changing the size of the body tag We can change the size of all the types accordingly
218px
USING EM'S – example
ADAPTING TYPOGRAPHY
• Apply same formula: target % context = result
#header { display: block; padding-top: 75px; color: #333; text-transform: uppercase; font: Arial; font-size: 48px;}
#header { display: block; padding-top: 75px; color: #333; text-transform: uppercase; font: Arial; font-size: 3em; /* 48 % 16 = 3 */ }
218px
ADAPTING IMAGES
img { max-width:100%;}
• Automatically images will scale 100% of container• Remove 'height' and 'width' attributes on <img> tag• Applicable to <embed>, <object>, <video>
218px
ADAPTING IMAGES
• File size not suitable from one viewport to another• Connectivity hungry if large images for wrong device• No solid solution to retrieve images appropriatly to device
PROBLEMS
SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)
• Responsive Images: Experimenting with Context-Aware Image Sizing (link)• Adaptive Images (link)
218px
MEDIA QUERIES @media screen and (max-width: 1200px) {body{ width:1000px; margin:0 auto; }#content { width: 700px; }.sidebar{ width:280px; }}
@media screen and (max-width: 980px) {body{ width:850px; margin:0 auto; }#content { width: 550px; }.sidebar{ width:280px; }}
@media screen and (max-width: 750px) {body{ width:600px; margin:0 auto; }#content { width: 400px; }.sidebar{ width:190px; margin: 0 0 20px 10px; }}
@media screen and (max-width: 380px) { body{ width:360px; margin:0 auto; }#content { width: 360px; }.sidebar{ width:360px; margin: 0 0 10px 0; }}
MEDIA QUERIES
TOOLS & SOURCES
• Modernizr (link)• Mediaqueri.es (link)• Respond.js (link)• Semantic.gs (link)• Columnal.com (link)