Blogging And All That Malarkey

Hardboiled CSS3 Media Queries

This entry has been deprecated:

Please use 320 and Up instead.

Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.

Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.

They’re part of a wider toolkit that I’ll be releasing at the same time as the book. But for now, you can download and incorporate these override queries at the bottom of your existing CSS files. Download the CSS file

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

Download the CSS file and any comments or suggestions for future improvements would be more than welcome.

Sign-up for email alerts or follow @itshardboiled for more updates and sneak previews.

Leave your comment

Andy

October 2 2010 @ 03:31am #

+1 to evernote.
Cheers.

Rob

October 2 2010 @ 03:36am #

Domo arigato Clarke san

Mau

October 2 2010 @ 04:28am #

This is awesome!

Thank you for throwing this out to us.

hans Verhaegen

October 2 2010 @ 05:29am #

Wow, this is great stuff to get started and learn about media queries. Did not know that Iphone 4 needed special treatment other then Iphone 3.

Ryan

October 2 2010 @ 05:53am #

How convenient! If this is a taste of things to come in Hardboiled Web Design, it’s definitely going to be a great read. Thanks, Andy!

Mason Wendell

October 2 2010 @ 07:21am #

This is great. I’ve been doing a lot of this sort of work lately and this sort of resource helps a lot.

David DeSandro

October 2 2010 @ 08:55am #

Bryan Rieger’s slides on Rethinking Mobile Web really got me thinking about media queries. I was convinced they would be the golden ticket to design for all sorts of devices, but maybe its not the best solution when you think about the breadth of mobile devices out there.

Sergio Acosta

October 2 2010 @ 09:11pm #

Thank you, Andy, this is so helpful. Looking forward to read your book.

Bridget

October 3 2010 @ 01:12am #

Thank you! I was just about to compile my own list like this. You just saved my fingers from having to type it out. Copy/Paste as clips for use anytime!

You, sir, rock.

kae

October 3 2010 @ 10:43am #

wow
thanks so much \o/a

Theo

October 3 2010 @ 11:31pm #

Thank you for this more than useful resource !

Andrew Hedges

October 5 2010 @ 08:15am #

How is this even useful? 320x480 are the dimensions for iPhone and a couple of Android devices, but not for many other devices that support media queries. To label that “Smartphones” is doing the web a great disservice, in my opinion.

http://anidea.com/technology/designer’s-guide-to-supporting-multiple-android-device-screens/

Andy Clarke

October 5 2010 @ 08:26am #

@segdeha (Andrew Hedges) 320x480 are the dimensions for iPhone and a couple of Android devices, but not for many other devices that support media queries. To label that “Smartphones” is doing the web a great disservice, in my opinion.

I’d love to see what your alternatives are, so that I can incorporate them into what I’m working on. I’m sure lots of other people would appreciate that too.

Andrew Hedges

October 5 2010 @ 08:42am #

The real problem, in my opinion, is that with the proliferation of device sizes, media queries on device width/height just aren’t that useful. I’m down with targeting styles to particular screen sizes. I just wouldn’t call it ‘smartphones’ because it gives the impression that by targeting 320x480, you have it covered. The smallest screen I know of is 240x320, so maybe just add a set of rules for that case as well?

To be clear, this is a great 80% (or maybe even 90%) solution. I just wouldn’t want developers to use this not realizing that it may not cover some important cases.

Andrew Hedges

October 5 2010 @ 09:14am #

@epascarello on Twitter pointed me to this chart of mobile phone screen sizes:

http://labs.thesedays.com/2010/04/01/choosing-the-right-platform-for-your-mobile-website/

If this chart is to be believed, the really small screens do not appear to support media queries (in particular, the one with a 240x320 screen is on a pre-WebKit Blackberry), so 320x480 does appear to be a safe baseline for devices that are capable of understanding the media query directives.

@girlie_mac on Twitter brought up that there are likely “gazillions” of qVGA Nokia S60 phones out there that run WebKit. If that’s true, then it might be wise to include 240x320. If not, then apologies for raising the alarm unnecessarily.

Ryan Seddon

October 5 2010 @ 02:17pm #

Can you release it on github? Myself and I’m sure many other people could contribute if it was.

Jeff Croft

October 6 2010 @ 01:56am #

Great stuff. Thanks for posting all these! I would just make one suggestion. If you do choose to link separate stylesheets for all your media queries instead of keeping them in one file: please, for the love of the internet and your servers, using some kind of on-the-fly concatenation technology to reduce HTTP requests. This is one of the biggest reasons websites are slow today. Having links in your header to several CSS files (and several JS files, too, for that matter) is a sure-fire way to piss off your system administrator. :)

Thanks for these, Andy!

Andy Clarke

October 6 2010 @ 03:02am #

@thecssninja (Ryan Seddon): Can you release it on github?

I would love to Ryan, but as a designer (not a technical person), I’ve actually no idea what github is, or how to work its. Any help would be appreciated.

cancel bubble

October 6 2010 @ 07:55am #

Hi Andy,

Please correct me if I’m wrong here, but the idea of having a smartphone.css (and all the others) is to hide/adjust all the “desktop/laptop” styles, right? Site X will render acceptably in various devices.

If so, you’re still serving *all the data and resources* to smartphones for example. In today’s web, that can be sending upwards of a megabyte if not more.

Wouldn’t you want to be doing user agent sniffing in the http headers, then send the appropriate response (data/assets) based on the device?

paul

October 6 2010 @ 08:00am #

cool, just what I needed! I’m experimenting with responsive design here : delighttv.webtemplateprofessional.com
it’s a video gallery site. At the moment, I have 3 different layouts

B

October 6 2010 @ 08:50am #

Super cool, thanks!

Miles Carmany

October 6 2010 @ 08:52am #

@cancel bubble

Unfortunately, and assuming I understand this correctly, desktop browsers still download all available stylesheets linked in the head, regardless if they are needed or will ever be needed. I know that this applies to media=print, not entirely sure about other cases.

What this would mean, is that your server still takes the hit, the user still has to wait for latency, the browser stores it in memory somewhere and possibly also the cache, and it may even delay rendering depending on how a particular browser works.

What Jeff Croft was mentioning above is one of the best optimizations you can do is reduce the total number of HTTP requests made for each page. I don;t know at what point file size of your resources trumps HTTP requests, but I think for most real world uses the advice leans strongly toward a single CSS + JavaScript file for each page.

Nicolas Gallagher

October 6 2010 @ 10:42pm #

When using multiple style sheets there doesn’t seem to be any benefit to using the media attribute on the link element over using @media within each style sheet. Easier to edit @media conditions in the CSS of each file rather than the media attributes in the HTML.

Hiren Khambhayta

October 7 2010 @ 12:45am #

Extra ordinary, could not imagine this could also happen. Great Job.

Kris Noble

October 7 2010 @ 01:10am #

So useful, thank you - look forward to seeing what else is in the toolkit!

cancel bubble

October 7 2010 @ 03:45am #

@Miles

What I mean is say your “desktop” or regular website has some sort of rich UI like a carousel. This isn’t appropriate for mobile so you do display:none on the carousel parent/wrapper in your mobile stylesheet. Great in theory, but you’re still downloading all the carousel assets(html/css/javascript/images) and then just hiding them.

This isn’t just related to rich UI widgets but other elements on the page as well. For example, maybe an entire sidebar is hidden on mobile, or you’re hiding desktop-sized page header images (instead of serving mobile versions), etc. You’re still downloading all those elements and assets only to hide them.

You may be fetching 800k yet only rendering 80k in the mobile device, when you should be only fetching that 80k.

Miles Carmany

October 7 2010 @ 04:01am #

@cancel bubble

For something like that you might have to do something really clever that i’m not smart enough to figure out. Also, I just haven’t seen enough actual benchmarking to know where the sweet spots are on size vs. HTTP requests. That seems likes something Google and Mozilla might want to do, but outside of general recommendations, I’d like to see some charts with hard data.

asd

October 7 2010 @ 06:36am #

I don’t think I like the idea of having to specify different CSS for iPad portrait, iPad landscape, two iPhones versions and for regular smartphones etc aswell. This is not going into the direction of getting to design nice sites with one CSS file.

It should be. Some generic smartphone layout should be all that is needed and the device adapt to that :/

cancel bubble

October 7 2010 @ 07:59am #

@Miles

It has nothing to do with size vs http requests, it’s about ***fetching data you don’t end up using in the device***. Why should mobile users be forced to download 800k of data if you’re using a mobile stylesheet to hide 750k of that data? I’m of course just making up the total bandwidth size but nowadays it’s very easy for page sizes to exceed 1 megabyte.

Miles Carmany

October 7 2010 @ 08:46am #

@cancel bubble

I just reread your original comment, and I see where we took differing paths. Do you think that someone working on a similar project might decide to keep the carousel in different forms for each device?

Rich UI for the desktop, simple touch friendly overlay for others?

cancel bubble

October 7 2010 @ 11:38am #

@Miles

That’s when I think you’d want to do user agent detection based on http headers. That way you serve up appropriate code based on device rather than serving everyone the same code and then proceed to use device-specific stylesheets to hide unwanted elements.

If elements are unwanted on mobile they shouldn’t be served to them in the first place.

Daniel

October 7 2010 @ 12:24pm #

unnecessary header requests (multiple stylesheets)= slower performance
minified, gzipped scripts & stylesheets = faster performance

Anders

October 7 2010 @ 04:59pm #

Good stuff!

What’s the reason you’re not using the CSS3 orientation feature, such as (orientation: portrait)?

Commenting is not available in this channel entry.

Hardboiled CSS3 Media Queries

This entry has been deprecated:

Leave your comment

Miles Carmany

Miles Carmany

Miles Carmany

Daniel

Anders

Hardboiled Web Design by Andy Clarke