Notes from Code School's Journey Into Mobile - Level 3 (Adaptive Adventures)
- Adaptive Web Design
- Break Points
- Media Queries
What is Adaptive Design?
Adaptive design is design for controlled adaptation. You know the device or design context that you need to design for, i.e. when you need to adapt the styles from one environment (like desktop) to another (like mobile). This does not mean you are designing for the universal web, but for a specific context.
- device
- screen size
- resolution
Four Design Keys
Keep these in mind before starting any design project.
- Who is your user?
- How will they use the site?
- Context (i.e. what device?)
- Content (how will it adapt?)
The next couple of levels in this course will use an example site for the "Nautilus Bar & Restaurant". Here is what the site looks like on desktop:
 |
| example site as seen on desktop |
And here is what we want it to look like on mobile:
 |
| example site as seen on mobile |
Elements of Adaptive Web Design
Break points are where your design break down, typically the height and width of the viewports.
There are many mobile devices of varying sizes, but for this example we'll use the standard iphone dimensions to set our break points.
height: 480px
width: 320px
 |
| standard iphone dimensions |
Media Queries
As part of the CSS3 spec, the @media query was introduced. E.g.
@media screen and (max-width: 320px) {
body {
font-size: 100%;
}
}
Media type is 'screen'
Query is 'max-width: 320px'
Beneath is all the styles contained for that query
What is this actually telling the browser to do?
It's saying, for any viewport that is less-than or equal to 320px in width, use these styles over the original styles.
You can also set a min-width if you want to set styles for really large screens.
@media screen and (min-width: 1024px) {
body {
font-size: 100%;
}
}
Where do you put media queries?
You could use a separate stylesheet for each, but that would be cumbersome and increase the load time. It's best practice to put your media queries in a group at the bottom of your stylesheet. This way they are easier to maintain, easier to find, and doesn't increase the load time as much as an external stylesheet.
For our Nautilus Restaurant example, we could create two media queries, one for portrait and one for landscape.
@media screen and (max-width: 320px) {
}
@media screen and (max-width: 480px) {
}
But, if your site is based on a fluid layout, it can scale based on the viewport size, which means you only need to define the larger of the two. The site will scale down gracefully to 320px.
Here are our styles for the header area of the desktop site:
h1 {
background: url(images/logo.png) no-repeat;
height: 84px;
text-indent: -9999px;
width: 308px;
}
header {
border-bottom: 15px solid #26343e;
padding: 25px 0;
}
And now, to adapt this for mobile, we will remove the bottom border and padding. As well as swap out the logo for a smaller version.
@media screen and (max-width: 480px) {
h1 {
background: url(images/logo_s.png) no repeat;
height: 80px;
margin: 0 auto;
text-indent: -9999em;
width: 295px;
}
header {
border-bottom: none;
padding: 0;
}
}
 |
| header adapted to mobile |
Next, we want to move the location and contact information below the logo. In the desktop environment it was floated to the right of the logo. Here are the original desktop styles:
.logo {
float: left;
}
.location {
float: right;
}
.addy {
float: left;
}
.mappy {
float: right;
text-align: center;
width: 270px;
}
 |
| location and contact info. desktop version |
To adapt to mobile, we will remove all the floats, add a background color and make the 'map it' button the width of the viewport:
@media screen and (max-width: 480px) {
.logo {
float: none;
margin: 0 auto;
text-align: center;
}
.location {
background-color: #26343e;
float: none;
margin: 0 auto;
text-align: center;
}
.addy {
float: none;
}
.mappy {
float: none;
}
}
|
| location and contact info. adapted for mobile |
Now, for the desktop version, the menu blocks are floated to the right and left of each other.
 |
| menu blocks .beverages and .cuisine floated left and right on desktop version |
.box {
min-height: 425px;
width: 41.666667%; /* 400px/960px */
}
.beverages {
float: left;
}
.cuisine {
float: right;
}
But this won't work in a mobile environment because the boxes and text would become too small to read. Instead, we will stack the boxes on top of each other. To do this, we'll allow the width to inherit the full width of the viewport size, then remove the floats.
@media screen and (max-width: 480px) {
.box {
margin: 20px auto;
min-height: 0;
width: inherit;
}
.beverages {
float: none;
}
.cuisine {
float: none;
}
}
 |
| menu blocks with floats removed, adapted for mobile |
No comments:
Post a Comment