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?
