Chris Essig

Walkthroughs, tips and tricks from a data journalist in eastern Iowa

Quick tip: My approach to media queries

leave a comment »

Anybody who has designed responsive websites knows that styling them is a delicate balance. You want to get the most of out of both your desktop and mobile experiences, as well as everything in between. On top of that, you’re trying to hit a ton of moving targets: Mobile and tablet sizes are always changing in size so designing for EVERY platform out there is very difficult to do.

With CSS, you target particular screen sizes — and therefore particular devices — with media queries.  I’ve seen a lot of developers write media queries to target particular devices based on their screen size. For instance, you might write a media query of 768 pixels wide to target an iPad. Or write a query of 667 pixels wide for the new iPhone 6.

The problem is: What happens when a hot, new device comes along with new dimensions? And what you wanted to design for all mobile platforms is suddenly obsolete because it’s wider or taller than the last mobile phone you were designing for?

This is why I approach media queries like so: I write a media query for every 50 pixels and simply make sure EVERYTHING works on every screen size of any pixel width. I will then add styling to only those 50-pixel benchmarks.

For instance, if the font in the header of my webpage gets too large at 630 pixels wide, I will modify to make the font smaller at 650 pixels wide. If an image is too big at 425 pixels wide, I will make it smaller at 450 pixels wide.

I also include classes that hide and show elements at each 50-pixel width to make it easier to hide and show things on the page at given widths. So, for instance “hide-400” will be a “display: none” property at 400 pixels wide. The inverse is “show-400”.

So my stylesheet ends of looking something like:

/* Styles for mobile devices */
@media (max-width: 450px) {
	.hide-450 {
		display: none;
	}

	.show-450 {
		display: block;
	}

	.show-450-inline {
		display: inline;
	}

	.header-sub-header p  {
        font-size: 13px;
        line-height: 30px;
    }
}

/* Styles from mobile devices */
@media (max-width: 400px) {
	.header h3 {
		line-height: 10px;
		font-size: 14px;
	}

	/* Universal classes */
	.hide-400 {
		display: none;
	}

	.show-400 {
		display: block;
	}

	.show-400-inline {
		display: inline;
	}
}

/* Styles for mobile devices */
@media (max-width: 350px) {
	.hide-350 {
		display: none;
	}

	.show-350 {
		display: block;
	}

	.show-350-inline {
		display: inline;
	}
}

That way if I need to hide and show something, all I need to do is add the appropriate class to it instead of going into the stylesheet every time. Bootstrap does something similar with their responsive utility classes. My approach is just more granular.

Now there is still a larger question: At what pixel width do you turn on your “mobile view” of your website (if you have one)? I use 600 pixels wide as a benchmark because that’ll target most mobile devices and give you extra room to cover the next, new device that is sure to be wider than the last. Also, articles on The Gazette are 620px wide, so I figure anything less than that I can consider a “mobile device”.

But, of course, this is all up for friendly debate.

Advertisements

Written by csessig

November 20, 2014 at 10:03 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: