How to Make Your Website Respond to Different Mobile Devices

string-dIn the television show The Wire, one of the major problems the Barksdale organization faced was identifying and punishing thieves.

Early in season one, the character Stringer Bell approached one of his lieutenants (D’Angelo Barksdale), telling him that they had a snitch tipping off their stick-up crew.

Bell’s solution for identifying the thief was to withhold payment to the crew. The crew member that didn’t come asking for his money would be identified as the thief.

In trying to determine the unknown identity of their thief, Stringer and D’Angelo applied two elements:

  • A test
  • A set of conditions

Once those conditions were met — and the identity of the thief known — the punishment could be delivered.

When designing responsively our first goal is to identify the device our page is loading into. When we know the device, we can then impose our will onto the page and tell it what to do.

To achieve this, we apply tests and conditions which are called media queries.

What is a Media Query?

A media query consists — essentially — of a media type and an expression to check for certain conditions of a particular media feature.

The most commonly used media feature is width.

By restricting CSS rules to the particular width of the device displaying a web page, we can tailor the page’s representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution.

In the example below, in order for the rule to be applied, the browser must meet two conditions:

  • The media type must be “screen”
  • The minimum width of that screen has to be at least 1024px

Any browser that meets both of the conditions will have the css style font-size: 100% applied to the body class, like so:

@media screen and (min-width: 1024px) {
  body {
    font-size: 100%;
  }
}

Applying More Specific Conditions to the Target Device

Depending on the identity of your target device, you can vary the conditions and results.

Sometimes — like in the example above — you’re dealing with a large number of possible identities, and your conditions can hit them all.

Or, you can get a little more selective in your tests.

In season three of the Wire a soldier named Cutty had a pretty good idea of who’d been stealing from him, but needs to perform a couple tests to make sure.

In his case, the conditions were more selective: he watched the dealer and his girlfriend as they continually appeared in public sporting new clothes and new jewelry.

In this case, Cutty was chaining together the conditions that needed to be met.

We can do the same with media queries.

For example, you can target a particular mobile device and set different styles to render within in it depending on whether the device is being held in landscape or portrait mode.

You can chain those different conditions together like so:

@media screen and (min-device-width: 480px) and (orientation: landscape) {
  body {
    font-size: 100%;
  }
}

Targeting Specific Devices

Sometimes you know the exact identity of your target device and you want certain things to happen when your website loads within it.

Which brings us back to The Wire: Omar Little was a legendary stick-up man who robbed local drug dealers. Whenever he popped onto the radar, the scene usually ended up in a hail of gunfire.

Omar is very well known target.

Using a media query, we can target a specific mobile device, like an iPhone 4.

We know that it has a specific pixel ratio and uses a specific browser. With those specs in mind, we can set specific conditions to match that particular phone like so:

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  body {
    font-size: 90%;
  }
}

Here are sample snippets of CSS that you can use to target specific mobile devices:

/* 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 */
}

Further Media Query Resources

Comments

  1. Great stuff, Josh. I’m hoping this turns into a series.

  2. Josh, is this something that we could add to existing Studiopress themes right now just as you have it listed above? any recommendations? Thanks for this article.

    • Hi Charlie, you could add the sample media queries we listed and then put in your own css. The only recommendation would maybe be to start small – maybe target only phones and see how that works for you.

  3. Great Post Josh!

    We’re just in the planning phase of creating a mobile friendly website. This will help.

    Keep them coming.

  4. Josh, also is this what we can expect on the new Studiopress Updates with responsive design?

    • We are still working on that but more than likely we are going to start small and include just a few media queries and then work up from there.

  5. HI Josh:

    Excellent, clearly presented, very understandable. Thanks for another great article/tutorial!

    Rudy

  6. Josh, that is a good tutorial on how make your theme responsive. Is the team planning on integrating these codes as part of the framework so developers like myself can build child themes that are responsive themes.

  7. Great Post Josh!
    Thanks for posting.

  8. Any plans to include the responsiveness in the sample child theme? That’s what I use to start most of my projects.

  9. Hi,
    Thanks for the article. I am trying to figure out which child theme I want to get and I am considering Driskill and Prose, but I am wondering when Prose is going to be more responsive to mobile devices. Let me know. Thanks!

    • We don’t have a specific timeline for all of our themes but if you are needing a responsive theme right now I would pick up Driskill.

    • I have Prose today and I love it! I think you have done a great work creating a nice theme with a lot of nice features, it’s very easy for the user to create a nice customized blog. My dream is that I can upgrade to a more mobile responsive version soon, like Generate. :) Please hurry!! :)

  10. i think now no need for plugins:)

  11. How do these work with high-resolution devices like the Galaxy Nexus? Yes, there’s the rule for iPhone 4, but will that also work on similar high-resolution, small devices?