Wednesday, 24 June 2020

Build Responsive Layouts with Media Queries

You take a lightweight WordPress theme, hand-craft the basic homepage layout, fill the content blocks with a couple of responsive plug-ins, save it, test it on your phone and tablet and... the layout breaks. In today's world of mobile first, the layout answer is... how to build responsive layouts with media queries.


Media queries is/are not new techniques in HTML and CSS, but now that Internet Explorer is pretty well dead and we have standards-compliant browsers on everything from phones to tablets to laptops, media queries can now be relied on to consistently layout web content according to the screen real estate available.

As long as you can edit or append custom styles to a style sheet, you can fix the layout issues that come not just with small screens but the shift from landscape to portrait mode. The question is what sizes to use?

Media Query basics

In your style sheet, you just need to set a basic condition for the selected screen width:

    @media media type and (condition: breakpoint) {      // CSS rules    }

where the media type (all, print, screen or speech) is for this purpose, 'screen' and at its' simplest becomes:

    @media screen and (width: Npx) { }

nesting your style rules within the brackets.

The width parameter can be any allowable declaration in CSS including a single specific width, min-width, max-width or a range using min- and max-:

    @media screen and (min-width: 320px) and (max-width: 480px){ }
  
There's enough flexibility there to create rules for just about any size device up to and including your home cinema.

Choices, Choices


So what sizes do we use? Are there common media sizes? How many do you specify to cover the most devices?

Thanks to the lovely people over on Tutorial Republic, I picked up a good list from one of their CSS tutorials on media queries just to save some time and cover common sizes.

What that gave me was:

    /* Smartphones (portrait and landscape) ---------- */
    @media screen and (min-width: 320px) and (max-width: 480px){
    }
    /* Smartphones (portrait) ---------- */
    @media screen and (max-width: 320px){
    }
    /* Smartphones (landscape) ---------- */
    @media screen and (min-width: 321px){
    }
    /* tablets, iPads (portrait and landscape) ---------- */
    @media screen and (min-width: 768px) and (max-width: 1024px){
    }
    /* tablets, iPads (portrait) ---------- */
    @media screen and (min-width: 768px){
    }
    /* tablets, iPads (landscape) ---------- */
    @media screen and (min-width: 1024px){
    }
    /* Desktops and laptops ---------- */
    @media screen and (min-width: 1224px){
    }
    /* Large screens ---------- */
    @media screen and (min-width: 1824px){
    }

  
This is not an exhaustive or authoritative list. If you run a web search on standard media query break points, you will get about 27 million results offering different opinions. CSS-Tricks gives you a breakdown of display sizes, or viewports for all sorts of devices across the leading manufacturers, just to show how impractical it is to cater specifically for every single one. And that's just this week.

Rather than try to target @media rules at specific devices, it is more practical to base them on your desired layout. By gradually narrowing your  browser window you should find the natural breakpoints for your content. Crucially, this will be different for every site. As long as the content flows well as the browser changes dimensions, you should be able to find a set of break points to work reliably on any screen size.

You might decide that your layout works well with only two or four breakpoints. As long as it degrades gracefully (old term), that may be all you need. The content should be your guide.

On Firefox and Chrome you can drop into Developer Mode and resize the layer for mobile devices to see what works. Be aware that these modes use best efforts based on leading common sizes and may not accurately represent what you will see on a physical device.

Practical Application

For the site in question, it is important to make sure that all the layout directives are moved into the style sheet and not left as inline styles. Inline takes precedence over CSS and will override any @media rules. It is advisable to put your media queries at the end of your CSS file so they are not overridden by any following rules.

Since the plug ins populating our content blocks are already responsive, 'all' we need to do is define the @media rules for the content block layout to achieve a satisfactory content flow on mobile.

For this particular page, there are four blocks: books, news, blog and portfolio. At full size, these roughly sit in four quarters of a page. On a phone, they need to flow full-width, in order.

The first cut needs more testing but currently declares the following:

/* Smartphones (portrait and landscape) ---------- */
    @media screen and (min-width: 320px) and (max-width: 480px){
        .bookdiv{
            width: 100%;
        }
    .newsdiv{
            width: 100%;
        }
    .blogdiv{
            width: 100%;
        }
    .portfoliodiv{
            width: 100%;
        }              
    }
/* Smartphones (portrait) ---------- */
    @media screen and (max-width: 320px){
        .bookdiv{
            width: 100%;
        }
    .newsdiv{
            width: 100%;
        }
    .blogdiv{
            width: 100%;
        }
    .portfoliodiv{
            width: 100%;
        }      
    }
/* Smartphones (landscape) ---------- */
    @media screen and (min-width: 321px){
        .bookdiv{
            width: 100%;
        }
    .newsdiv{
            width: 100%;
        }
    .blogdiv{
            width: 100%;
        }
    .portfoliodiv{
            width: 100%;
        }
    }
/* tablets, iPads (portrait and landscape) ---------- */
    @media screen and (min-width: 768px) and (max-width: 1024px){
        .bookdiv{
            width: 56%;
        }
    .newsdiv{
            width: 43%;
        }
    .blogdiv{
            width: 100%;
        }
    .portfoliodiv{
            width: 100%;
        }
    }
/* tablets, iPads (portrait) ---------- */
    @media screen and (min-width: 768px){
        .bookdiv{
            width: 646px;
        }
    .newsdiv{
            width: 532px;
        }
    .blogdiv{
            width: 48%;
        }
    .portfoliodiv{
            width: 48%;
        }  
    }
  
/* tablets, iPads (landscape) ---------- */
    @media screen and (min-width: 1024px){
        .bookdiv{
            width: 646px;
        }
    .newsdiv{
            width: 532px;
        }
    .blogdiv{
            width: 48%;
        }
    .portfoliodiv{
            width: 48%;
        }
    }  
/* Desktops and laptops ---------- */
    @media screen and (min-width: 1224px){
        .bookdiv{
            width: 646px;
        }
    .newsdiv{
            width: 532px;
        }
    .blogdiv{
            width: 48%;
        }
    .portfoliodiv{
            width: 48%;
        }
    }

  

Several of the @media rules work out to the same dimensions which will be something to experiment or cut with a little more testing. RC 
   

No comments:

Post a comment

At least try to be nice, it won't kill you...