Art Direction for the Web
W

hen I began building websites the idea of viewing it on a mobile device wasn't thought of or even possible. If there was any thought given to various display resolutions it was mostly solved by adding percents to the containing columns of a table and nesting that table within a table set at a maximum width with the most common resolution. I think that was about 1024 x 768 but it might have even been 640 x 480.

By the time it started to become necessary to code websites for mobile devices most of the work I was doing was backend in PHP or hooking up features in Javascript. I was aware of using CSS to make websites mobile friendly but, it wasn't really on my radar as I didn't generally need to do it.

In recent years however, my career has on occasion pulled me more into a full-stack roll and it's become more necessary for me to utilize mobile capabilites when building pages. Unfortunately, while I am capable of building websites that function on multiple devices. The code tends to be a bit clunky, requires way to many media queries and still tends to break.

So, I began digging into Grid and Flex. I like Flex more than Grid. I am sure that both have their place but, Flex to me is intuitive. It's easy for me to visualize a structure and code it out and it doesn't take much effort to keep things looking good at multiple resolutions.

I received an excerpt of the book Art Direction for the Web from Smashing magazine in an email and decided it would be useful to attempt to reproduce the examples.

This website is the result. The menu displays the original from the article.

Art Direction for the Web