Recently, I’ve been boning up on the principles of mobile first and responsive web design. I’ve read Ethan Marcotte’s book, Responsive Web Design and also almost through with Luke Wroblewski’s book Mobile First. So far, I’ve built two websites using responsive techniques and let me tell you, all the reading in the world doesn’t prepare you for actually building something (and writing your very first media query). Reading about ‘best practices’ is one thing, but doing the (sometimes boring) work that involves formatting content and photos helps you discover your own best practices.

One of those ‘discovered’ best practices is this…

When there are many photos on a webpage that support the content, but aren’t absolutely necessary – it’s OK to choose not to display them on smaller screens. For example, on a recent project, I was finding that some photos were specifically referenced in the content and were vital to understand the content, but others were stock photos that were just niceties, but not necessities. For those non-vital images, I removed them on smaller screens to allow for a more concise reading experience.

Simple idea that sounds like a no-brainer, but it was a minor break-through for me.