Columns are for desktops, rows are for mobiles

On some level, it's fairly safe to assume that most people will view your work in portrait mode on mobile. This means that you effectively have one column, and every element in that one column is in a full row extending perpendicularly to the column's direction. Paragraphs should always flow vertically (instead of horizontally in horizontal columns), and it's not an awful idea to rotate bar charts 90º so that your bars aren't squished in one narrow horizontal row. Much like the preceding WSJ lottery probabilities graphic, make use of the infinite vertical space you have to scroll.

On the desktop, however, a single paragraph spanning the entire horizontal width of the display is very hard to read as it requires the eye to move back and forth quite a lot. Using columns is often preferable, as it not only makes better use of the horizontal space, but also improves readability. Form elements, in particular, often look much better when grouped into columns.

The good news is that flexbox makes it really easy to switch the orientation of groups of elements, provided you don't have to support older versions of Internet Explorer. If you aren't using flexbox already, take the effort to do so; it will make your life so much easier (at least once you figure out how to use it).

Want to learn flexbox the fun way? Try out Flexbox Froggy, a game that teaches you how to position elements using flexbox and frogs, at http://flexboxfroggy.com/.

Still find flexbox hideously frustrating? You're in good company. Try out Flexbox Grid, which uses Twitter Bootstrap-like classes to create responsive grids using flexbox, at http://flexboxgrid.com/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset