Responsive design – accomplish unique desktop and mobile layouts with media queries and html

10th October 2013
All posts

For front end web development I’m always thinking of three designs at once: mobile, tablet and desktop. Dealing with different layouts between these views is one of the many things I like to systemise.

The biggest html changes occur between the largest, tablet, and smallest, mobile, screen sizes; with the layouts sometimes changing almost completely between the two. This makes sense because what works on a larger screen rarely works on a smaller one.

Sometimes a web design only handles mobile and desktop layouts, so I choose tablet as my breakpoint instead of mobile and assume tablet view is the same as mobile view, just wider.

Media queries and html

If I combine media queries with showing and hiding html in a smart way I can stay true to a good design by simply duplicating the html I want to control, editing each individually, then showing one and hiding the other when necessary. This is the same concept as show/hide with jQuery and/or javascript, just without the javascript.

Here’s the css code for an element that only shows on desktop but not mobile or tablet screens:


.tablet-hide {
display: none;
}
@media screen and (min-width: 768px) {
.tablet-hide {
display: block;
}
}

And then the css for an element that’s supposed to only show on tablet and desktop but not mobile:


.tablet-show {
display: block;
}
@media screen and (min-width: 768px) {
.tablet-show {
display: none;
}
}

I find this really useful. What other media query plus html techniques do you employ to satisfy the more complex design layouts you’re given?

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with Rails, Python, and ASP.net/Umbraco back end frameworks.