- 12 min read
- Mobile, CSS, Responsive Design, CSS3, Media Queries
- Share on Twitter, LinkedIn
Editor’s Note: Please note that this article was published in 2010 and is out of date. Rachel Andrew has written another article on the current state of media queries for responsive design that provides updated and more relevant information on the subject.
CSS3 continues to excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 offers and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses a part of CSS3 that is also shared by Internet Explorer 8 is not supported. It doesn’t matter, though, as one of the most useful places for this module is somewhere that has a lot of support – small devices like the iPhone and Android devices.
Reading: How-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website
Further reading on SmashingMag:
- Techniques for gracefully demoting media queries
- Breakpoints and the future of websites
- Looking beyond the usual media query breakpoints
- Learning CSS3: A Reference Guide
In this article, I’ll explain how you can use a few CSS rules to create an iPhone version of your website using CSS3. this will work now. We’ll look at a very simple example, and I’ll also walk through the process of adding a small screen style sheet to my own site to show how easily we can add mobile style sheets to existing sites.
Media Queries
If you’ve ever created a print style sheet for a website, then you’re familiar with the idea of creating a specific style sheet that comes into play under certain conditions – in the case of a print style sheet, when the page is printed. This functionality was enabled in CSS2 by media types. Media Types allow you to specify a media type to target, allowing you to target print, handheld, etc. Unfortunately, these media types have never received much support from devices, and apart from the print media type, you will rarely see them in use.
The media queries in CSS3 take this idea and extend it. Instead of searching for a device type, they look at the device’s capabilities, and you can use them to search for all sorts of things. For example:
- Width and height (of the browser window)
- Device width and height
- Orientation – for example is a phone in landscape or portrait mode?
- Resolution
If the user has a browser that supports media queries, we can write CSS specifically for certain situations. For example, recognizing that the user has a small device like a smartphone with a specific description and giving it a specific layout. To see an example of this in practice, UK web conference dConstruct has just launched their website for the 2010 conference and it’s using media inquiries to great effect.
The dConstruct 2010 site in Safari on a desktop computer
The dConstruct 2010 website on an iPhone
You can see from the example above that the page has not only been made smaller to fit, but that the content has actually been redesigned to be more accessible on the device’s small screen. Also, many people think this is an iPhone layout – but it’s not. It appears the same way on Opera Mini on my Android-based phone. By using media queries and targeting device capabilities, the dConstruct website caters to all types of devices – even ones you might not have thought of!
Use media queries to create a style sheet for phones
To start, we can look at a very simple example. The layout below is a very simple two-column layout.
A very simple two-column layout
To make it easier to read on a phone, I decided to do this linearize the entire design, make everything in one column, and also make the header area much smaller so readers don’t have to scroll past the header before getting to content.
The first way, media queries to use is to have the alternative section of CSS right in your single stylesheet. So to target small devices we can use the following syntax:
@media only screen and (max-device-width: 480px) { }
We can then use our alternative CSS for small screen and width devices inside of add curly braces.By using the cascade we can easily override any style rules we previously set in our CSS for desktop browsers. As long as this section is last in your CSS, the previous rules will be overridden. To linearize our layout and use a smaller header graphic I can add:
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background image: url(media-queries-phone.jpg); Height: 93px; position: relative; } div#header h1 { font size: 140%; } #content { float: none; Width: 100%; } #navigation {float:none; width: automatic; } }
See also: How to Get a Professional Email Address With a Custom Domain
In the code above I use an alternate background image and reduce the height of the header, then set the content and navigation to Floating None and override the width previously set in the style sheet. These rules only apply on a small screen device.
My simple example as displayed on an iPhone
Associating a separate stylesheet using media queries
Adding the device specific code inline can be a good way to use media queries when you only need to make a few changes but your stylesheet has a lot of overrides or you want to completely separate the styles shown for desktop browsers and which are used for small screen devices, then linking in another stylesheet allows you to keep the CSS separate.
To add a separate stylesheet after your main stylesheet and cascade to override the rules to use n, use the following .
Test media requests
I If you own an iPhone, Android device or any other device that has a browser, that supports media queries, you can test your CSS yourself. However, you need to upload the code somewhere to view it. What about testing devices you don’t own and testing on-premises?
One excellent website that can help you during the development process is ProtoFluid This application gives you a form to enter your URL – which can be a local URL – and view the design as it would in the browser on an iPhone, iPad or a number of other devices The screenshot below is the dConstruct site we looked at earlier as seen in the iPhone view on ProtoFluid.
The dConstruct 2010 site in ProtoFluid
You can also log in your own window size if you have a specific device you are testing and know the dimensions of the screen.
To use ProtoFluid, you need to slightly modify the media query shown earlier to also include the maximum width as the maximum device width. This means that the media query comes into play even if the user has a normal desktop browser but is using a very small window.
@media only screen and (max-width: 480px), only screen and ( max-device- width: 480px) { }
After updating your code as above, just refresh your page in the browser and then drag the window in and you should see the layout change when it’s 480 pixels reached. Media queries now respond when the viewport width reaches the value you entered.
You are now ready to test using ProtoFluid. The really nice thing about ProtoFluid is that you can still use tools like FireBug to tweak your design, something you won’t have once on the iPhone. Of course, you should still try to view your layout on as many devices as possible, but ProtoFluid makes development and testing that much easier.
Note that if you don’t want your site to use the layout changes when someone narrows the window, you can always remove the max-width part of the query before going live, so the effect only happens to people with a small device and not just a small browser window.
Retrofitting an Existing Website
I kept the example above very simple to demonstrate the technique. However, this technique could be used very easily to retrofit an existing website with a small screen version. One of the big selling points for using CSS for layout was the ability to provide alternative versions of our theme. As an experiment, I decided to take my own company website and apply these techniques to the layout.
The Desktop Layout
My company’s website currently has a multi-column layout. The homepage is a bit different, but in general we have a fixed-width 3-column layout. This theme is a few years old, so we didn’t consider media queries when creating it.
My site in a desktop browser
Adding the new style sheet
See also: How to add a co-host to a Facebook event in 3 simple steps
I need to make a number of changes to linearize this layout Therefore I will add a separate stylesheet that uses media queries to load this stylesheet after the current stylesheet, only if the maximum width is less than 480px.
To create my new stylesheet I’m taking the default stylesheet for the site and saving it as small-device.css So this starts as a copy of my main stylesheet What I’m going to do is go through and override certain rules and then delete everything I need I don’t.
Resize header
The first thing I want to do is make the logo look good on small devices f fits the screen as the logo is a background image is easy as I can load another logo in this style esheet. I also have another background image with a shorter top section that the logo sits over.
body { background-image: url(/img/small-bg.png); } #wrapper { width: auto; border: automatic; text alignment: left; Background image: url(/img/small-logo.png); background position: left 5px; background repeat: no repeat; Minimum height: 400 pixels; }
Linearize the layout
The next main task is to linearize the layout and make everything one column. The desktop layout is created using floats, so all I have to do is find the rules that make the columns float, set them to float:none and width:auto. This causes all columns to be placed one below the other.
.article #aside { float: none; width: automatic;
Cleaning up
Everything after this point is really just a case of looking at the layout in ProtoFluid and tweaking it to include sensible amounts of areas that are now stacked rather than in columns to give edge and padding. Being able to use Firebug in ProtoFluid makes this task much easier as my workflow mostly consists of playing around with Firebug until I’m happy with the effect and then copying that CSS into the stylesheet.
Testing the website with ProtoFluid
Testing on an iPhone
After creating and uploading my stylesheet, I wanted to check how it works on a real target device . On the iPhone, I discovered that the loaded page was still zoomed out rather than zoomed into my easy-to-read single column. A quick search on the Safari developer site gave me my answer – to add a meta tag to the site header that sets the viewport width to the device width.
After adding the meta tag, the page is now zoomed into a single column.
The website as it is now on an iPhone is displayed
This was a very simple retrofit to show that it is possible to easily add a mobile version of your website. If I were to build a website from scratch where I would use media queries, I would definitely make certain choices to simplify the process. For example, respecting the linearized column order, using background images where possible as these can be toggled with CSS – or perhaps using fluid images.
Our desktop layout has a case study carousel on the Homepage, it wasn’t easy to interact with a touchscreen device, so I checked with JavaScript that the browser window was very narrow and the carousel wasn’t launching. The way this was already written meant that stopping the carousel from loading caused a case study to appear on screen, which seems like a reasonable solution for users with a small device. Given more time, I could rewrite this carousel with an alternative version for mobile device users, perhaps with interactions more suited to a touchscreen.
More Resources
This is relatively new Technique, but there are already some excellent tutorials on media queries. If you know others, please post them in the comments.
- A List Apart – Responsive Web Design
- Sitepoint CSS Reference – Media Queries
- Targeting the iPhone 4 Retina display with CSS3 media queries
- Aral Balkan: How to make your web content look stunning on the new iPhone 4 Retina display
- Stuff and nonsense: Proportional Leading with CSS3 Media Queries
- Matthew James Taylor: iPad Landscape and Portrait Layout
Support for Media Queries in Older Browsers
This article covers using media queries on devices with native support.If you’re only interested in supporting the iPhone and commonly used mobile browsers like Opera Mini, you have the luxury of not having to worry about unsupportive browsers. If you want to start using media queries in desktop browsers, you might be interested to know that there are some techniques available that use JavaScript to support browsers like Internet Explorer 8 (and lower versions) and pre-3.5 Firefox. Internet Explorer 9 will have support for CSS3 media queries.
- The “Media Queries” section under When can I use shows which browsers have support
- css3-mediaqueries-js – a library aimed at adding media query support to non-supporting browsers
More inspiration
To see a more interesting use of media queries, take a look at Hicksdesign, where Jon Hicks used media queries to provide a better experience not only for mobile device users, but also for regular web browser users with smaller windows. Also see Simon Collison’s website and Ed Merritt’s portfolio for more examples of this technique.
Try it yourself
Using media queries is a place to really start using CSS3 in your daily work. Keep in mind that the browsers that support media queries also support many other CSS3 properties, so your stylesheets targeting those devices can also use other CSS3s to create an elegant effect when viewed on an iPhone or other mobile device to achieve. If you have implemented media queries on your website or are trying this technique after reading this article, let us know in the comments.
See also: How to build a fantasy cricket website & mobile app like Dream11?
