Issue 15 of Web Design Readings—typography, ES6 JavaScript, CSS quantity selectors and minimal viable product

Hi readers,

Here is issue 15 of Web Design Readings. In this week, I share links with typography, ES6 JavaScript, CSS quantity selectors and a discussion of building minimal viable product.


I have expressed the important of copywriting in web design in my past issue. This week we look at the typography. Why typography? iA told us web design is 95% typography:

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography. —iA.

Where to learn more about typography? I recommend this online book Practical Typography. You can find everything you need to know to get typography right.

If you’re currently working on web copywriting, I suggest you at least read the hyphen and dashes and quotes section in the book.

CSS Quantity Queries

The Quantity Queries for CSS essay from A List Apart shows how we can use current CSS selectors to perform quantity queries. By using the techniques in the essay, we can apply styles only when the element count matches specific number, or when the element count is greater or smaller than the specific number.

Demonstrating nav showing 2 items, 3 items and 4 items with different font size

I created a demonstration on how this technique can be used in navigation. The font size is smaller when there are more items in the list. Imagine when the navigation items are controlled from a CMS and we have no control on exactly how many items there will be. This technique allows us to control the styles of an unknown amount of items.

ES6 to ES5 compiler

I was a fan of CoffeeScript. But recently I’m moving my projects to use ES6-based JS compiler. Google traceur is one of my current ES6 to ES5 compiler option—simply because CodePen supports it.

What’s supported by the ES6 compiler? Well, basically it supports most of the ES6 new features.

I also checked out other ES6 to ES5 compiler. Babel, the former 6to5, looks promising too. But actually there should be not much differences when choosing ES6 compiler, because they should all support the standard ES6 syntax.

Minimal Viable Lovable Products

Last week I came across this essay: Forget MVPs, startups need to create minimal ‘lovable’ products. The author discussed that product shouldn’t only be minimal viable. It should also be lovable by customers when the product gets launched.

The author mentioned that minimal viable product may be functional but not easy enough to use. Or the product is functional but full of buggy features that requires lots of time to fix after the product launch.

This reminds me what the book Getting Real taught me.

We do need to get the product up and running in a short time, because “Running software is the best way to build momentum”.

The Interface First chapter tells us that by designing the interface before programming, we can keep interface easy to use.

We start with the interface so we can see how the app looks and feels from the beginning. — Interface First, Getting Real.

The keywords here is “feels from the beginning”, when we design the product and feel the product, we’re actually building the product to be lovable.

The author in the Minimal Lovable Products also mentioned that feature requests will overwhelm the team. That’s why we should forget feature requests because the requests just don’t matter.

I linked several essays from the Getting Real book. Because this book already addressed the issues of executing a bad MVP. That’s why I highly recommend reading and repeating this book many times.

Thanks for reading Web Design Readings. Your reading and sharing becomes my momentum to keep on writing. If you think my links and posts worth your time, please share it to more people.

Best Wishes,
Thomas Seng Hin Mak