Inside Out

So, I started thinking, and doing a little, mobile-first today.

As I described in my previous post, and as you can see by looking at this site, I’ve begun working on a simple theme for this site. But I didn’t start with mobile-first. I wasn’t ready. And, if you happened to visit this site on a mobile device over the last 24 hours or so, you would have experienced first-hand how little I had thought about your device.

But today was a new day.

Enhancing, Progressively

This evening I read Brad Frost’s Mobile-First Responsive Web Design and skimmed through Choosing between mid-width and max-width media queries. Pretty quickly, I decided to start thinking inside out from what I had done so far. IOW, I decided to take what I had in my theme, which was really desktop-first, and invert all my CSS so that my default styles were set for the smallest viewport.

I then progressively enhanced on that base and adjusted layout and font sizes based on just a few breakpoints.

I don’t think I’ve quite figured out how to properly determine breakpoints, but I do realize, based on today’s reading, that it should be based on the content – not the dimensions of my iPhone. So, I installed the Viewport Dimensions Chrome extension to determine the sizes where my design fell apart (BTW, I don’t know if it’s the best tool for this, but it served my needs today. Is there something better?).

My first problem point turned out to be 600px, which based on my default EM size, I determined that to be 37.5em. So, my first media query looks like the following:

@media screen and ( min-width: 37.5em ) { ... }

At this size, I formatted my main navigation. I don’t think I’ve clearly stated this yet, but I am using _s as the basis for this theme and it looks to me that is the size where _s abandons its button UI for the main menu.

My next breakpoint turned out to be around 760px or 47.5em.

@media screen and ( min-width: 47.5em ) { ... }

My design required a few slight adjustments in font sizes and spacing at this size.

The final breakpoint, where I decided I needed to switch from a 1 column layout to 2 was at 57em.

@media screen and ( min-width: 57.0em ) { .. }

That’s it. This all turned out to be pretty easy, so I’m assuming I must be way off on all of this. I don’t know, but if I am, let me know. I’d rather not make a complete fool of myself while I figure this stuff out.

Follow me on Twitter: @amelungc