Day Two: Mobile First
If you visited yesterday's blog post on a mobile device you may have noticed something odd:
The 'Order Pizza' button looked awkwardly small. The text wrapped.
Crestfallen, I realized that I broke one of my favorite rules: design for mobile first.
Now, I'll acknowledge that 'mobile first' shouldn't be the rule for all sites or web apps. Context matters.
We've recently seen products that were previously mobile-only native apps expand to accomodate users with web app offerings. (Oh hey, Instagram.) And, there's something very romantic about content designed for a specific widths and heights. (Oh hey, Wes Anderson using three aspect ratios for Grand Budapest Hotel.)
This is a simple blog. Until I have analytics data to suggest otherwise, I want to present content assuming that you're on a device with a small screen, and I want to adjust the design if you're reading on a larger screen.
With this in mind, today I updated my CSS media queries to
@media only screen and (min-width : 600px)
Now the default CSS styles are designed for small screens, and special styles are applied if you're on a viewport that's greater than 600px wide.