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