BOLOGNA-TRICKS & Mobile First

I set out to practice replicating a mobile page today, and ended up choosing this screenshot from CSS-TRICKS as a model:
Screen Shot 2014-01-10 at 10.06.00 AM

This proved to be a great homework assignment for a couple reasons (other than getting that damn pig positioned!). First, it got me thinking small. It is hard to anticipate how easy it will be to use media queries to design a full page layout once you have everything itty bitty in place. I kept wanting to just make a full screen version and go from there. This would be a mistake for a few reasons. If I were actually designing this site from scratch myself, mobile first (itty bitty!) would keep me focused: What is the most important content? Which images will actually contribute to enhancing that content? Do I even need images? You know, no filler.

It also throws you into responsive design, whether you like it or not. That itty bitty layout is not going to be acceptable on a tablet or full computer screen. The main issue here was creating a media query that lined all the navigation boxes up across a larger screen.

In addition to all that it was a lot of fun, I mean, look at that face! I suppose the next step is designing one of these guys myself.

Screen Shot 2014-01-11 at 8.43.21 AMScreen Shot 2014-01-11 at 8.42.51 AMScreen Shot 2014-01-13 at 9.03.25 AMCheck the full code out here.

I also enjoyed this article from Design Shack on this topic.

Happy mobile firsting!