Flexible Layouts—A Vice around a Zombie’s Head

20.06.2017 |

Episode #5 of the course Responsive design: An undead introduction by John Rhea

 

At the dawn of the zombie resistance movement—i.e. the internet—all layouts were flexible, mostly because we didn’t know what we were doing.

Text flowed all the way across the screen, and things were wondrous … unless you liked to read or be aesthetically pleased. So, we began to hem things in and provide structure.

Soon, we were using inflexible tables for layout and optimizing our screens for the screen size du jour. When you could pin down screen size to one of about four or five sizes, this was excellent. But now, there are more screen sizes than people on the earth (possibly an exaggeration).

You’ve got iPhones at two different sizes, iPads at three more, a watch thingy, and Macs at like, four additional sizes, and that’s just the current line from one company (which has probably multiplied since this was written). Throw in Android, which can follow any hardware maker’s whim, the complexity of the Windows ecosystem with its decades of legacy screens, and Microsoft’s mobile offerings, and that’s more screen sizes than zombies in the horde currently attacking your department store turned fort.

This is where a flexible layout comes in. Instead of setting your elements to a fixed size, you can create a layout that squashes and stretches based on the size of the screen.

The secret sauce for this zombie-decapitating process is percentage widths. If you have a main section and a sidebar section (using the <main> and <aside> tags, respectively), you can set them in your CSS to a percentage of the width. For instance:

main { width: 67%;}
aside {width: 33%;}

Then, no matter what the screen size ends up being, the main will be 67% of its parent’s width and aside will be 33%. And you can use percentages on parents all the way up the document, so the main can be 67% of the page as a whole.

 

MAXimizing Your Zombie Destruction (or, Making Your Site Readable)

Sometimes, a long string of text can be hard to read because your eye can’t track between where the last line ended and the next begins.

In order to prevent this, we can use another CSS rule called max-width. It stops an element from becoming wider than the maximum you set. For instance, to prevent the main and aside tags from going wider than 1000px combined, we could say:

main { width: 67%; max-width: 670px;}
aside {width: 33%; max-width: 330px;}

Or, we could set their parent element (the element these two are nested inside) to a max-width of 1000px. In general,you should try to keep your text columns from 45 to 90 characters in size. Much shorter than 45 characters, and the zombies win because your eye jumps too quickly between the end of one line and beginning of another. But if you go longer, we have the problem described above, where your eye can’t track from the end of one line to the beginning of the next, and of course, the zombies win.

Keeping your layouts flexible while preparing for worst cases is a great start on creating responsive design, but sometimes we need a more specific tool to poke the zombies in just the right way. That tool? Media Queries. Coming up next.

 

Recommended book

Learning Responsive Web Design: A Beginner’s Guide by Clarissa Peterson

 

Share with friends