With an emerging market of innovative mobile devices it has become more important to create responsive designs.
In my last article (Part 1) we started with the setup of our HTML and our media queries. The pad.css was the easiest to format due to the change in the screen resolution.
I saved the formatting of the handset for the last part of this series because it’s the device that will start to see changes to our fluid layout. Every site developed without flash content is mobile compatible but is the content mobile friendly?
A couple of the first few changes we’ll make to make our content more mobile friendly is to increase the fonts sizes and the line heights in the body:
body {
font-size: 16px;
line-height: 20px;
} We need to reduce the width of our design to fit the device as well. By decreasing the size of our container from 680 pixels to 300 pixels, we can make this fit within our media query. There is another factor we have to consider when developing our HTML for iOS devices, we’ll add a meta tag in our head section:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
If you take a look at your device and refresh, your design should look like crap.
But that’s ok, really. We’re going to fix it and make everything better because we can remake the navigation in our ‘mobile.css’ file.
Let’s try and make our navigation a bit more mobile friendly much like the rest of our mobile layout.
I’ve given my navigation menu the id of menu; if you want to utilize a bit of HTML5 tagging feel free to use the tag ‘nav’. I just happen to do a lot of corporate work that needs to be compatible with legacy browsers like IE7:
#menu {
height: 40px;
width: 280px;
font-size: 1.143em;
line-height: 20px;
margin: 5px auto 5px auto;
text-align: center;
}Make sure to cover your bases with your unordered list as well. The reason for changing the ul’s width is the fact that it’s a little too large for the device at the moment. Set the margin to ‘margin: 0 auto;’ and the width to the same size as the #menu at 280 pixels.
Since you’ve taken the moment to address the changes in the unordered list we’ll need to pay attention to the list items as well. Depending on the number of links, we’ll need to consider how we would like them laid out both in portrait and in landscape. For the intended purpose of this article, we’ll stick with portrait for now. Let’s locate the #menu li and take a look at our code:
#menu li {
width: 260px;
display: block; /*--As opposed to inline for Screen--*/
margin-left: 0px;
} Remember to always check your device as needed throughout development. If you don’t have a suitable device, you can use Dreamweaver’s Multiscreen preview or any other online tools at your disposal.
Applications such as PhoneGap and AIRiPad are just a couple to name a few. By now our navigation menu should start taking shape on your mobile device, whether you’re using text links or the menu in your design is a group of buttons, we need to rethink the padding of the links. This makes the links easier to engage on the smaller screen.
/*--- I like to shorthand a lot of my CSS ---*/
#menu a:link, #button {
padding: 5px 1.5em 5px 1.5em;
margin: 5px 5px 5px -35px;
} From this point forward we’ll work on more of making the existing content in our design fit into the size of the mobile device, so let’s keep in mind any images you may have for logos of featured areas.
The screen width will more than likely be limited to 320 pixels (iPhone 3Gs). Using the min-device-width and max-device-width properties, we can do our best to make sure that our design stands up to the intended integrity whether the device is portrait or landscape.
Something I didn’t cover last time is that you can include your media queries in one external CSS file either at the bottom of your main sheet or in their own separate sheet. Below is an example of using the query in your main stylesheet with a method of @media:
/*--- Responsive CSS for mobile devices---*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
font-size: 16px;
line-height: 20px;
}
#container {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#menu {
height: 40px;
width: 280px;
font-size: 1.143em;
line-height: 20px;
margin: 5px auto 5px auto;
text-align: center;
}
#menu li {
width: 260px;
display: block; /*--As opposed to inline for Screen--*/
margin-left: 0px;
}
#menu a:link, #button {
padding: 5px 1.5em 5px 1.5em;
margin: 5px 5px 5px -35px;
}
}Using @media within your CSS is like using the @import rule to link to external stylesheets in your HTML. If you’re not fully prepared to tackle CSS media queries I at least hope these two articles has at least given you a launch pad to go out on your own and start developing with media queries. Remember to save often and test repeatedly.
Additional Resources:
Strictly using CSS isn’t your only option. With css3-mediaqueries-js, you can utilize javascript to help you achieve cross device bliss. This external JS file will reportedly help you render your media queries even on some legacy browsers (including IE 5).
As a warning, it will not work if you are using the @import rule for an external stylesheet and also will not work with the media attribute of the or tags.
