CSS Element: how the Onion uses grids

Not only I enjoy reading few joke stories on the Onion when I feel down, but also I like how the website uses grids to organize its materials very simple and clean.

Screen shot 2013-09-25 at 8.28.22 PM

As soon as a reader enters the main page of the Onion, one can define two bigger columns and a smaller column in the center. But right below the main story of the day (in this screenshot, a story about President Cruz), the left section of the website is divided into two narrow columns, making the whole page to have four columns instead of three columns. I think it’s a good use of grids to grab the viewer’s attention: one would automatically look at the main story with a big photo on the left, then naturally scroll down to read smaller headlines.

Screen shot 2013-09-25 at 8.30.39 PM

When scroll down a little more, a reader should see this horizontal navigation bar. This bar in the middle of the website definitely differentiate from the page’s general columns, which are vertical. Such contrast would work well to grab the readers’ attention once again.

Screen shot 2013-09-25 at 8.30.09 PM

After the horizontal navigation bar, it’s back to good old 3-columns. Unlike the initial look of the page, the bottom of the website sticks with clean and straight three columns.

Overall, I really like how the Onion used the grid system. I like that its columns are simple and straight, but adds a little twist by mixing 3-columns and 4-columns, and adding horizontal bar in the middle of vertical columns. Such simple look helps the readers to navigate the site easily and to find stories they want to read more effectively.


One response to “CSS Element: how the Onion uses grids

  1. It is a nice critique, but I think this blog assignment should be about CSS tech.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s