Issue 17 of Web Design Readings—Flexbox, Lazy Design

Hey there,

This is issue 17 of Web Design Readings. I paused (again) for 3 weeks because I was on vacation in the lovely Scandinavian cities. In this week, we show the elegant of flexbox and explore the laziness of recent web design trend.

UI: Lazy Design

I don’t know why every one is putting a large banner at the top of their web pages. I always think web site should present the important content at the top of the page, instead of a not-too-meaningful, actually often meaningless, large image, or video.

As “Dear web designer, let’s stop breaking the affordance of scrolling” stated:

“Big picture + arrow down = lazy design”

“When you squint your eyes and tilt your head, don’t a lot of these products look awfully, well, similar? Don’t they look pretty but, at times, a little dull?”

Also in the long read of this intercom essay “Has Visual Design Fallen Flat?”:

“When you squint your eyes and tilt your head, don’t a lot of these products look awfully, well, similar? Don’t they look pretty but, at times, a little dull?”

CSS: Start using flexbox today

We can start using flexbox nowadays. If you have not started exploring this new layout feature, the “Using flexbox today” is a quick-start guide.

Flexbox is not just a replacement of the float. Flexbox can actually solve the layout problems that we face by using the current CSS technologies. The website “Solved by Flexbox” shows how flexbox archive layouts in an elegant way.

I wrote a cheatsheet of flexbox for quick reference to help you get started.

Note: Do you know that float was originally designed for image to be wrapped by text. It’s not designed for layout.

Service: Mapbox

I mentioned a map customization Snazzy Maps in issue 14. Here is another map service MapBox that I’m taking a close look at.

JS: Put your script after the content by default

We should put the script tag after our content. It usually means putting them just before the closing of the body tag, by default.

The reason is that browser stops loading when it encounters a script tag. If we put the script after content, we let all the content loads and displays before we pause the loading for the script tag. Moreover, we usually access the HTML elements inside our script. This means wherever we place the script, we still need to wait for the content to be loaded.

There are, however, rare cases that the script needs to be executed before the browser loads the content. We put these types of script in the head tag. For example, the following MixPanel instructs web designers to put the script before the closing of the head tag.

Mixpanel screenshot

You can find more on this script placement discussion in Yahoo’s developer guide.

That’s all for this week’s readings. Thanks for reading.

Best Wishes,
Thomas Seng Hin Mak