Last spring, I was elected to be ONA Mizzou’s social media coordinator. As part of my position, I maintain ONA Mizzou’s Twitter and Facebook, and I regularly search the web for interesting articles on digital media. Every week, I always find myself on Nieman Lab’s site. The site, based out of Harvard, always has current and interesting articles on new media. I enjoy reading Nieman Lab’s content, and I also think the website’s design is effective.
Although Nieman Lab publishes a slew of daily content, the breathable design of the website makes articles easy to read. I wanted to inspect the site’s CSS elements to see if I could use some techniques from the site. The first thing I noticed about Nieman Lab’s site is its use of inline styling. I opened the external stylesheet for the site and found style rules for only seven classes. I also found a stylesheet for the site’s type, filled with a series of crazy long URLs. The rest of the site’s style elements are found in the HTML code.
For example, I inspected the orange pull quote box at the top right of the homepage and found CSS code for the element on the same line as the element’s class. Simple CSS like background color and padding was used to style this element. I found this same approach to styling in other elements. I scrolled down the page and inspected an image with a headline and sub headline underneath it. The image was floated left and given a width of 100%, relative to the other objects on the page.
The more I inspected the website, the more confused I became. One style rule is written as style=”color:white !important;”. Many CSS styles were repeated for each element. Each different class had to repeat style rules like font family and color. Large sections of the site’s code were commented out. Overall, it seems that the website is unnecessarily weighed down in code. Although the design works in practice, the code could be simplified on the backend with one cohesive stylesheet. Unfortunately, I didn’t gain many CSS ideas from this site because I was so confused by the CSS setup. However, I have learned a few examples of things to avoid when trying to create a site that is light in code.