advancio, inc. academy: responsive web design
Post on 06-Aug-2015
29 Views
Preview:
TRANSCRIPT
Agenda
• What is RWD ?• Main Components (How it does work ?)• Related Concepts
Responsive Web Design
RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port) using media queries.
Our picture of a “web visitor” is rapidly evolving
Increasingly web visitors aren’t using PC’s
•1.8 billion internet connections in the world
today.
•6.8 billion people in the world today.
•3.4 billion people with mobile devices today.
( roughly ½ the population of the planet)
Why it is relevant ?
49%
29%
14%
8%
Smaller displays
Tablets and notebooks
Monitors with larger displays
Smartphones
And today’s web statistics show plenty of fragmentation
Each new device requires a dedicated site
Site
Home
About
Contact
Mobile
Home
About
Contact
Tablets
Home
About
Contact
And this quickly gets out of control…
Site
Home About Contact
Mobile
TabletsHome
About
Contact
Widescreen displays
Home
About
What is the ideal solution?
Create once and adapt for everywhere
Main Components
• Media Queries• Fluid Grids• Scalable images
Media Queries
• W3C created media queries as part of the CSS3 specification.– Enhanced media types. – Allows targeting of specific physical characteristics of the
device.
Media Queries
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=“min.css" />
a media type (screen), and the actual query enclosed within parentheses, containing a
particular media feature (max-device-width) to inspect, followed by the target value (480px).
Media Queries
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
Asking device if its horizontal resolution (max-device-width) is equal to or less than 480px.
Media Queries
Can include MQ in CSS as part of a @media rule:
@media screen and (max-device-width: 480px) { .column { float: none; }
}
Fluid Grids
target ÷ context = result
Title – target width= 700px
Target column width = 329px 329px ÷ 988px = 33.29%
700px ÷ 988px = 0.7085 *100 =70.85%
Context Width= 988px
Title – target width= 700px
Calls for pages element sizing to be in relative units like percentages, rather than absolute units like pixels or points
Scalable images
Scale to size of containing elementul#image-icons li img {
max-width:100%}
Scalable images
Scale to size of containing elementul#image-icons li img {max-width:100%}
ul#image-icons li img {max-width:50%}
Related Concepts
• Mobile First Approach• Progressive Enhancement• Graceful Degradation
• Mobile experience should be the first one created.• Three reasons why:
– Mobile is exploding– Mobile forces you to focus– Mobile can extend your capabilities
Graceful Degradation
• Focuses on building the website for the most advanced/capable browsers.
• Older browsers are expected to have a poor, but passable experience.
• Small fixes may be made to accommodate a particular browser ( they are not the focus )
Progressive Enhancement
Progressive Enhancement consists of the following core principles:
•Basic content and functionality should be accessible to all web browsers.
• Enhanced layout external CSS.
• Enhanced behavior external JavaScript.
• End-user web browser preferences are respected.
top related