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.

1. AN OVERVIEW OF
RESPONSIVE WEB DESIGN
Ivan Frantar - 2012

2. MEDIA QUERIES
• What is Responsive Design?
• Mobile Influence
• Fluid Design
• Adapting to Context
• Adapting to Typography
• Adaptive Images
• Media Queries
• Tools for browser compatibility

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

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

5. MOBILE INFLUENCE
Source: http://www.flickr.com/photos/jodyodea/3910686634/

6. MOBILE INFLUENCE
STATISTICS AS OF END OF 2011
Connect 69% 31% App
Navigate 65% 35% Browser
Inform 61% 39%
Manage 54% 46%
Entertain 40% 60%
Search 37% 63%
Shop 27% 73%
Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/

7. FLUID DESIGN
#header 100% #header 100%
#content 70% #sidebar 20% #main-content 20%
30% 60%
#footer 100% #footer 100%
#wrapper max-width:960px

8. FLUID DESIGN
• Good for different screen sizes
• Good for accessibility
• Good for keeping the content flexible

9. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?

10. ADAPTING TO CONTEXT
Target % Context = Result
960px
698px 218px

11. ADAPTING TO CONTEXT
Target % Context = Result
960px
96%
698px 218px
698 % 960 218 % 960
Width:72.7083333%; Width:22.7083333%;

12. ADAPTING TYPOGRAPHY
USING EM'S
• 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
body {
font-size:100%; /* will condition the size across font */ 218px
}

13. ADAPTING TYPOGRAPHY
USING EM'S – example
• Apply same formula: target % context = result
#header { #header {
display: block; display: block;
padding-top: 75px; padding-top: 75px;
color: #333; color: #333;
text-transform: uppercase; text-transform: uppercase;
font: Arial; font: Arial;
font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */
} }
218px

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

15. ADAPTING IMAGES
PROBLEMS
• 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
SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)
• Responsive Images: 218px
Experimenting with Context-Aware Image Sizing (link)
• Adaptive Images (link)

16. MEDIA QUERIES
@media screen and (max-width: 1200px) { @media screen and (max-width: 980px) {
body{ body{
width:1000px; width:850px;
margin:0 auto; margin:0 auto;
} }
#content { #content {
width: 700px; width: 550px;
} }
.sidebar{ .sidebar{
width:280px; width:280px;
} }
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 380px) {
body{ body{
width:600px; width:360px;
218px
margin:0 auto; margin:0 auto;
} }
#content { #content {
width: 400px; width: 360px;
} }
.sidebar{ .sidebar{
width:190px; width:360px;
margin: 0 0 20px 10px; margin: 0 0 10px 0;
} }
} }

17. MEDIA QUERIES

18. TOOLS & SOURCES
• Modernizr (link)
• Mediaqueri.es (link)
• Respond.js (link)
• Semantic.gs (link)
• Columnal.com (link)

19. AN OVERVIEW OF
RESPONSIVE WEB DESIGN
Ivan Frantar - 2012

20. MEDIA QUERIES
• What is Responsive Design?
• Mobile Influence
• Fluid Design
• Adapting to Context
• Adapting to Typography
• Adaptive Images
• Media Queries
• Tools for browser compatibility

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

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

23. MOBILE INFLUENCE
Source: http://www.flickr.com/photos/jodyodea/3910686634/

24. MOBILE INFLUENCE
STATISTICS AS OF END OF 2011
Connect 69% 31% App
Navigate 65% 35% Browser
Inform 61% 39%
Manage 54% 46%
Entertain 40% 60%
Search 37% 63%
Shop 27% 73%
Source: http://www.mediafly.com/2012/02/mobile-app-usage-vs-browser-usage-on-mobile-devices/

25. FLUID DESIGN
#header 100% #header 100%
#content 70% #sidebar 20% #main-content 20%
30% 60%
#footer 100% #footer 100%
#wrapper max-width:960px

26. FLUID DESIGN
• Good for different screen sizes
• Good for accessibility
• Good for keeping the content flexible

27. BUT WHAT ABOUT ALL THOSE GADGETS PEOPLE ARE CARRING WITH THEM?

28. ADAPTING TO CONTEXT
Target % Context = Result
960px
698px 218px

29. ADAPTING TO CONTEXT
Target % Context = Result
960px
96%
698px 218px
698 % 960 218 % 960
Width:72.7083333%; Width:22.7083333%;

30. ADAPTING TYPOGRAPHY
USING EM'S
• 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
body {
font-size:100%; /* will condition the size across font */ 218px
}

31. ADAPTING TYPOGRAPHY
USING EM'S – example
• Apply same formula: target % context = result
#header { #header {
display: block; display: block;
padding-top: 75px; padding-top: 75px;
color: #333; color: #333;
text-transform: uppercase; text-transform: uppercase;
font: Arial; font: Arial;
font-size: 48px; font-size: 3em; /* 48 % 16 = 3 */
} }
218px

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

33. ADAPTING IMAGES
PROBLEMS
• 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
SOLUTIONS (NOT ENTIRELY RELIABLE AT PRESENT TIME)
• Responsive Images: 218px
Experimenting with Context-Aware Image Sizing (link)
• Adaptive Images (link)

34. MEDIA QUERIES
@media screen and (max-width: 1200px) { @media screen and (max-width: 980px) {
body{ body{
width:1000px; width:850px;
margin:0 auto; margin:0 auto;
} }
#content { #content {
width: 700px; width: 550px;
} }
.sidebar{ .sidebar{
width:280px; width:280px;
} }
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 380px) {
body{ body{
width:600px; width:360px;
218px
margin:0 auto; margin:0 auto;
} }
#content { #content {
width: 400px; width: 360px;
} }
.sidebar{ .sidebar{
width:190px; width:360px;
margin: 0 0 20px 10px; margin: 0 0 10px 0;
} }
} }

35. MEDIA QUERIES

36. TOOLS & SOURCES
• Modernizr (link)
• Mediaqueri.es (link)
• Respond.js (link)
• Semantic.gs (link)
• Columnal.com (link)