Recently I wrote about the fundamentals of responsive web design, and how important it was to acknowledge that it wasn’t going away.
When CSS3 became available, it introduced a concept called media queries — which allows presentations to be tailored to a specific range of devices without changing the content itself.
In layman’s terms, this gives us a chance to represent our website in different ways depending on the device that is used for viewing. Whether it be an iPad, iPhone or any other tablet or smart phone, you have the capability of serving up a better viewing experience to your visitors.
Implementing Media Queries
Before I get into the types of media queries that are available, you’ll need a method for detecting the device that is being used for viewing. Thankfully, Apple is smart and came up with the Viewport meta tag which we can use.
If you are using the Genesis Framework to power your website, there’s an easy way to implement this so that it loads properly in the head section of your source code.
Simple place the following code into your child theme’s functions.php file:
/** Add Viewport meta tag for mobile browsers */
add_action( 'genesis_meta', 'add_viewport_meta_tag' );
function add_viewport_meta_tag() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}In Genesis 1.9 we will be adding a brand new Genesis Responsive function which will use add_theme_support to replace the method above as well as introduce a number of other extremely cool mobile-friendly features.
Now that you have the Viewport meta tag added to your head, now we can move forward with understanding the various types of media queries and how they can be used.
Types of Media Queries
I have a tremendous amount of respect for designer Chris Coyier, so I am going to be unoriginal and rely on his knowledge to present the various types of media queries. Props also goes out to Andy Clark for his hard work which served as the source for the snippets that Chris used.
Thanks to them, we have a an elegant roadmap to using media queries for standard devices. Below are the snippets of CSS that should be added to your theme’s style sheet.
Currently we place them at the bottom of the child theme’s style.css file, but the upcoming Genesis Responsive function will load a responsive.css file if it exists in the theme folder.
Smartphones (portrait and landscape)
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Styles */
}Smartphones (landscape)
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {
/* Styles */
}Smartphones (portrait)
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {
/* Styles */
}iPads (portrait and landscape)
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Styles */
}iPads (landscape)
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* Styles */
}iPads (portrait)
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* Styles */
}Desktops and laptops
/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
/* Styles */
}Large screens
/* Large screens ----------- */
@media only screen
and (min-width: 1824px) {
/* Styles */
}iPhone 4
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}The snippets above are merely examples of using media queries for standard mobile devices. You can target general screen viewing areas by changing max-device-width to max-width.
Here’s a list of resources that I found useful while doing research on media queries:
Brian, I am assuming we don’t need add that code to the functions.php for Genesis themes that are already responsive?
That is correct – if you are using a StudioPress theme that is tagged as “mobile responsive” that is already there. And if that’s the case, you can check the bottom of your theme’s style.css file and you should see CSS code and media queries there already.
In general, I don’t recommend targeting specific devices and/or resolutions. If you’re taking a “mobile-second” approach where you first build the site for standard browsers and then add media queries for lower resolutions below, just scale the site down and make changes when things look wrong. (If you’re doing a “mobile-first” approach, do the same but in reverse.)
You might need to change your menu at 480px, or at 615px. It just depends on your site design and content.
The goal should be for it to look good at ANY resolution, not writing device-specific styles. This makes it future-proof for any devices you didn’t target or didn’t exist when you wrote your styles.
You are stealing my idea for a follow up post.
I completely agree – the max-device-width vs. max-width thing for me was easy to choose, as I use the latter in most cases.
And as you mentioned, “the goal should be for it to look good at ANY resolution, not writing device-specific styles” — this leads me to believe you’ve seen the recent commits that have been made in Trac for Genesis 1.9. Again,
I absolutely agree with Bill.
Media-Queries or, better, breakpoints should be set to provide a consistent user experience.
If your menu breaks at 598px there’s no reason to have a 767px/600px /whatever query. You just need one at 598px.
That’s why I like to call this approach “Adaptive” design rather than “Responsive”. But that’s another long story…
bill youve got your eyes on the prize, great comment.
+1,000, Bill.
I hate seeing this concept of designing for specific devices. That’s a step backwards for Web design when responsive design should be a step forward.
Thanks for mentioning the “and” operator that helps to link multiple media queries Brian! I had been meaning to look around for this and then boom! Was just looking at some of the blog posts on the StudioPress website and a lot of gems here. I’m sold: 100% exclusive Genesis development!
+1 to being 100% Genesis development!
Been trying to do this, but other tutorials didn’t mention that you needed the view-port tag. Thank you Brian.
I’m loving responsive design. I just hate when you have a client that has a weird monitor size that the responsive design doesn’t work for. Then I feel like I’m designing for the one lunkhead who uses a 14″ inch monitor or something.
Do what the internet does, which is basically insist that they upgrade. Same thing when supporting older versions of IE. At some point, folks have to pony up and get with the times.
How very timely. I’m working on a site right now and am having trouble triggering an “intermediate” size. I have one version of the header for full-width, a middle-sized one (that’s not appearing) and a mobile-sized one that comes up at the right size browser width. I can’t figure out what I’m doing wrong!
Test Site (this link will only work for the next week or so)
Here’s the CSS I’m using for the middle size:
https://gist.github.com/8555c064e90b2b08cad2
What am I doing wrong? (Btw – this is the news child theme)
Jeni,
Check you style sheet. Line 2684 should be ‘.header-image #title a’ not background.
Thanks, Alan. Worked like a charm.
I appreciate you!
Thumbs up for crowdsourcing!
Hi Brian
I’m using the original Minimum theme, which is not mobile responsive.
If I add the viewport meta tag to my functions.php file and then the various pieces of CSS to my CSS file would that be all I have to do to make Minimum 1.0 responsive?
Yep, that’s pretty much it.
Obviously adding in the styles to display nice, etc might take some work.
Eh… I’ll give it a try.
Thanks for posting this one.
Amazing post,
I agree with you that Chris Coyier really nails down Media Queries, and CSS-Tricks is an invaluable resource to anything related to the web. I’ve only recently started messing with the genesis-specific functions, and it is amazing how powerful they are. I’d love to see more info on mobile-responsive design on your blog.
Also, what’s the ETA on Genesis 1.9, i’m excited to see the new features in action?
Enjoying your posts very much lately, your design focus is moving in an interesting direction.
Thanks Donnacha, appreciate that. I really enjoy blogging about things I learn, and since I’m deep in the heart of research for design-related things for Genesis, it’s fresh in my head. Since I’ve started to write about design stuff, I decided to create a category for that and now have a Design blog page.
Hi Brian,
Regarding your comment re adding a responsive.css file in Genesis 1.9. Does that not go against the optimizing practice of reducing http calls?
(Y’know, coz not everyone is on Synthesis Hosting!)
Yeah, it kinda does – but some folks prefer the tradeoff of having a separate style sheet. Honestly, an extra http call shouldn’t affect a site that gets minimal traffic no matter what the server environment. Sites like Mashable and other viral types are the ones where performance really matters.
As general rules I would always suggest….
– stay device agnostic, set break points where the design breaks, not where a device is positioned
– style mobile first, the first media query should be the absence of a media query
– use min-width and work up from mobile rather than max-width and working from desktop.
That is what they say. Genesis themes right now are done the other way, so I guess they will evolve as responsive design does.
This all looks great, Brian. Any tips on how to apply this for the Sleek Genesis child theme? I don’t want to switch themes if I don’t have to, but I’m no advanced programmer either.
Obviously, the code you provided here is a starting point. But I definitely have issues with image resizing, widgets, etc.
hmmm, this is not working with custom build genesis themes
The responsive function you speak about in this article will be added in 2.0 rather than 1.9 (as indicated here), right?