Contents Magazine – Ethan Marcotte’s Content-based Responsive Web Design Genius

30 Apr 13, Kelly N. Wilson

Responsive web design is not just about making websites that shrink or expand according to the size of the browser window. There’s a lot of thought and consideration involved in making it as user-friendly as possible.

For some websites illustration is THE thing. For yet others, content is king. And speaking of content, we’ve got the most practical, user-friendly magazine website that beats any other we’ve seen so far – Contents Magazine. With Ethan Marcotte – father of responsive web design – as the online publication’s creative director, you can’t really blame us for expecting more out of this website. And boy, does it deliver on that expectation!

Some Typography To Get Impressed By

Whatever your screen size, the readable, clear typography of website makes sure that the content is never compromised.

Some Typography To Get Impressed By

Some Typography To Get Impressed By

Notice that the font style is clear and easily readable, even on a smaller screen. This is not usually true of curvy fonts or those focusing more on style and presentation. Also, for a content-based website, having the text against a white background is really the safest and best way to go.

Who Says Looks Have To Be Compromised For Content? Design-Enhancing Illustrations Work Up The Magic

Though it may be minimalistic, the illustration for this website has been strategically planned, nonetheless. It wraps around the content, making it look better. But it’s not too bold and dark or falls over the content, meaning that the reader is not distracted – a pleasant reading experience overall.

Who Says Looks Have To Be Compromised For Content? Design-Enhancing Illustrations Work Up The Magic

Even as you read through an article in the magazine, the illustration would not interfere with the text. In fact, even if a part of the illustration spills over the text on the desktop screen, it goes away on smaller screens where readability can be much more affected by distracting text.

Who Says Looks Have To Be Compromised For Content? Design-Enhancing Illustrations Work Up The Magic

Readers Are Saved The Frustration Of Horizontal Scrolling – The Enemy Of Mobile Web Browsing

If there’s one thing mobile internet users hate the most, it has to be horizontal scrolling. Contents magazine knows this well, and that’s why the text flows in a single column which is sprawled across beautifully and widely on a laptop or desktop screen, and wraps into a single vertically- scrolling column for a narrower screen.

Readers Are Saved The Frustration Of Horizontal Scrolling – The Enemy Of Mobile Web Browsing

Simple Navigation Is, Indeed, A Cherry On Top

What good will an extensive and complicated navigation be for a magazine website anyway? That’s why we really appreciate Content Magazine’s simple 4-element navigation menu, which shrinks into a single tab for the smaller screen.

Simple Navigation Is, Indeed, A Cherry On Top

So what do you think, people? It’s simple, and yet so effective. Now, if you’ve got some RWD to do for an information-heavy, content-based website, you know where to get your inspiration from, eh?


Leave a Reply