CSS3 has brought about a ton of fancy visual effects such as shadows
and animations, but what about practical improvements? Is there anything
about CSS3 that actually improves the way you can build websites from a
usability standpoint?
The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.
User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.
That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.
This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.
For starters, you’re going to see a lot of expert use of floats and percentages used for sizing. Notice in the snippet below Meagan used percentages for both the width of the element and the margin. She’s also meticulous about telling you where these percentages come from in the form of a comment with some quick math.
This definitely makes layout a little trickier, but it sets a good foundation for flexible page widths even before she gets to the media queries. However, the properties shown above are, for the most part, what you see being manipulated further within the media queries.
Here we can see that Meagan has targeted a maximum screen width of 800px and then defined a series of styles that apply directly to devices meeting that specification. From here, floats, margins, padding, display and even images are tweaked for optimum layout at that size.
A total of five different media queries are setup for different circumstances: max-width: 960px, 800px, 640px, 540px and 480px. Each of these is quite thorough in outlining specific behaviors for that screen size. Here is the section for max-width: 480px.
One interesting trick here that you should pay special attention to is the use of fluid images. By setting the width of an image to 100%, it will fit into the width of its container and resize as the browser window changes. Ethan Marcotte explains this technique in-depth on his site . Be sure to resize your browser window on his site and watch the header images respond.
The answer is a resounding “yes” and is due largely to the inclusion of media queries. Media queries are incredibly useful because they solve a huge problem that arose quite suddenly in web design: the need to design for vastly different screen sizes.
User screen sizes have always differed but for the most part this difference was limited to a few inches and you could bet on a huge majority of your audience fitting within parameters that were fairly easy to design around. These days though you have some users on a 27″ Apple cinema display and others on a 3.5″ smartphone.
That’s a huge difference and there are plenty of stops along the way. The ever-growing number of devices that are web friendly make it increasingly difficult for designers to present one static solution that caters to everyone’s needs.
This need has given birth to the idea of responsive web design, which goes far beyond fluid page widths and actually dramatically changes the layout of a page as the size of the browser window or device screen size changes. Media queries are one of the most powerful tools for meeting this goal because they allow the designer to set special CSS according to certain pre-established rules.
How It Works
This may seem like it’s going to be a ton of extra work, and I’d be lying if I said that it’s a painless process, but the good news is that CSS and media queries do a lot of the heavy lifting for you. Let’s jump into Owltastic’s code a little to see how this all works.
For starters, you’re going to see a lot of expert use of floats and percentages used for sizing. Notice in the snippet below Meagan used percentages for both the width of the element and the margin. She’s also meticulous about telling you where these percentages come from in the form of a comment with some quick math.
.navigation li {
float: left;
display: block;
width: 16.24%; /* 105/645 */
margin-right: 4.7%; /* 30.315/645 */
}
This definitely makes layout a little trickier, but it sets a good foundation for flexible page widths even before she gets to the media queries. However, the properties shown above are, for the most part, what you see being manipulated further within the media queries.
@media screen and (max-width: 800px) {
.aside p {
font-size: .75em;
}
.aside .section {
background: none;
padding: 0;
margin-bottom: 2em;
}
.section .latest-shot {
background: url(../img/bg-light.jpg);
}
.aside h1 {
text-align: left;
}
.hentry h1 {
font-size: 1.75em;
}
.hentry .meta p {
float: none;
margin: 0 0 5px 0;
}
.hentry .meta .bullet {
display: none;
}
}
Here we can see that Meagan has targeted a maximum screen width of 800px and then defined a series of styles that apply directly to devices meeting that specification. From here, floats, margins, padding, display and even images are tweaked for optimum layout at that size.
A total of five different media queries are setup for different circumstances: max-width: 960px, 800px, 640px, 540px and 480px. Each of these is quite thorough in outlining specific behaviors for that screen size. Here is the section for max-width: 480px.
@media screen and (max-width: 480px) {
.logo {
margin-top: 30px;
}
.container {
padding: 15px;
}
.navigation {
margin: 0 0 15px 0;
}
.navigation li {
width: auto;
margin-bottom: 10px;
margin-right: 3%;
}
.navigation li a {
border-right: none;
padding: 0;
display: block;
}
.navigation li a em {
display: none;
}
.hentry .floated-image {
width: 100%;
}
}
One interesting trick here that you should pay special attention to is the use of fluid images. By setting the width of an image to 100%, it will fit into the width of its container and resize as the browser window changes. Ethan Marcotte explains this technique in-depth on his site . Be sure to resize your browser window on his site and watch the header images respond.
No comments:
Post a Comment