Issue 5 of Web Design Weekend Readings

Hi readers,

Hope you have a remarkable weekend. Last week we discussed several CSS patterns. This week we focus on the content-first web design.

There are different trendy libraries and frameworks for web design recently. We are building fancy single-page websites, one-page web applications, mobile applications and a lot more. While we are taking the web design into a new era, I would like to use this email to remind us the important of showing content over design. The links in this week may not be new, but they are all important and worth a read again.

Content first

The web is all about presenting content.

Stephen Caver wrote an essay “Progressive enhancement is about the content” last year. It states clearly that the goal of making website is to make the content available to all readers.

Progressive Enhancement is about content and ensuring that we allow our users the right—not the privilege—to access it.

The techniques we employ for Progressive Enhancement will change as technology advances, but our goal to distribute content as widely as possible will not.

Actually this is never a new topic. 6 years ago, Aaron Gustafson published an essay “Understanding Progressive Enhancement” on AListApart.

Peanut analogy.

Aaron used the peanut analogy to explain that we should take care of the content first, then we add the styling and scripting afterwards.

Making sure your markup conveys the greatest level of detail about the content it wraps around is essential to offering a basic experience to these users.

Example of Enhance experience progressively

Take my work as example. I created an example of web app that shows animated transition effect between scenes. The scenes are DOM elements and the animation transition is done in canvas.

Hash anchor between content

Hash anchor between content

The HTML is designed to be used without any JavaScript and fancy transition effect. All the links between content are based on the hash anchors. User can still view and link to different part of the content with neither canvas support nor JavaScript support. When JavaScript detects the support of canvas, it replaces the hash links and takes over the control of the DOM elements and the canvas transition.

Canvas-based transition controlled by JavaScript

Canvas-based transition controlled by JavaScript

Design with Content, not Lorem Ipsum

Content is important. It’s so important that we should use realistic content in our design process. Without content, the design is just decoration, according to Jeffrey Zeldman’s tweet.

Content precedes design. Design in the absence of content is not design, it's decoration.

— Jeffrey Zeldman (@zeldman) May 5, 2008

The book from 37Signals also shared the same vision in the chapter “Use Real Words”.

Dummy text means you won’t see the inevitable variations that show up once real information is entered. It means you won’t know what it’s like to fill out forms on your site. Dummy text is a veil between you and reality.

Shall we override browser behavior?

Adding effects to the browser scrolling has become a trend recently. Web designers often chose to customize browsers’ default behavior to archive their designs. In my opinions, we should preserve browser behavior as much as possible because that is what readers have been using for decades. That’s why changing the scrolling behavior is called Scrolljacking:

You’re forcing users to scroll their mouse in order to advance pages. You’re changing an established concept of scrolling into something else – From “Stop scrolljacking” by Aaron Hunt.

Jordan Koschei’s essay “Why Scrolljacking is a Problem” shows you the difference of replacing scrolling and enhancing it.

Good interaction design makes the user feel like they’re in control. It doesn’t change up behaviors, especially default behaviors, just because it “looks cool.”

Changing default behavior also means writing more code. More code means harder to maintain and more bugs to confuse the readers. The following is another quote from the Getting Real book about Less Software:

Each time you increase the amount of code, your software grows exponentially more complicated.

The post, Let the browser handle your UI logic for you, from Parse blog explained the benefit of using the default browser behaviors, such as radio and checkbox, to build the UI components.

When we build new UI components for Parse.com, we follow a simple strategy: use the most similar browser element as a starting point.

An example in the post makes use of the radio and checkbox to create a file selector, without any JavaScript involved.

You’d be amazed by how many complex elements boil down to the radio button’s select-one-of-many behavior.


We discussed lots of basic HTML thing in this letter, the reason I’m talking about this fundamental thing is because we are so easy to forget it during the design process.

We are building more and more JavaScript based web page. We are using more dynamic techniques to animated the content, adding fancy styles, creating interactivity by overriding browser behaviors. When we keep adding functions, we need to make sure the essential thing, content, is still accessible by all our readers.

Thank you very much for reading my weekly post. Please don’t hesitate to contact me for any questions and feedbacks.

P.S. You received this email because you signed up the newsletter on makzan.net.