I've been noticing a trend lately involving Mobile First Design—which is a way to approach Responsive Web Design in a way that focuses more on Mobile (as compared to Desktop), or at least the it puts the considerations of Mobile before Desktop.
As Lawrence Allen puts it:
Mobile First Design is embracing the constraints of mobile interactivity that allow you to deliver innovative experiences/capabilities of devices and modes. It allows you to focus on content and prioritize accordingly.
I actually think this is a good approach to design, and has the benefits of getting you to take a good look at all viewport sizes. However, when it comes to implementing design with HTML/CSS, I don't agree with everything Mobile First Design advocates are saying. I think it's beneficial to think of the Desktop first when coding up the design.
Graceful Degradation
First of all, I've seen "Mobile First Design" implemented where the mobile design is the default. Meaning if you have a browser that doesn't support media queries, you're served up the mobile CSS, and you're looking at a mobile layout stretched to 1000px. They call this "graceful degradation."
However, I think that it's a little more graceful to serve a 960px website by default so that those unsupported browsers get the best possible experience.
I realize that support for media queries is pretty good, making this a relatively moot point.
Tree Branch Effect
Another pro of implementing Desktop first (which is not to say you familiarize yourself with both the Mobile and Desktop version before starting) is what I am calling the Tree Branch Effect.
Imagine a tree with a bunch of branches stemming off of the trunk. And a lot of those branches fork or split into smaller branches and those branches fork into smaller branches and so forth. Think of the Mobile design as the trunk on this tree.
There's only so many ways you can take a Desktop arrangement of elements and put them in a Mobile layout. Think of how easy it is to find your way from the tip of one of the branches (Desktop design) and find your way to the trunk (Mobile design). This is because you don't come to any forks; all "roads" lead to the trunk.
If you take it the other way and start at the trunk (Mobile) and try to move to a specific branch tip (Desktop), then taking even one wrong branch fork and you'll end up at a completely wrong branch!
I realize that you typically have a map in the sense that you have both the desktop and mobile designs, but it is just easier to intuitively go from Desktop to Mobile in practice.
Effect of Tree Branching on Styles
Another related consideration—more than just visualizing the layout—is the ability to write styles efficiently for the layout. If you start with the more complex layout of Desktop, it's easily to override those in steps as you working your way down to smaller screens.
In a more natural way, when going from Desktop to Mobile, styles will better inherit from the larger sizes. Each step down is a further simplification of the last step rather than each step getting more and more complicated as you go, as you might find when going Mobile to Desktop.
Conclusion
I realize that this is all pretty subjective when it comes to visualizing Mobile or Desktop first, so some people are probably going to disagree on a lot of what I said, and that's fine. Maybe some of you will have read those other articles which left you with a weird feeling that that's maybe not quite right, and you'll think my approach is a better/easier one.
I do want to note that a lot of this boils down to using either max-width or min-width in your media queries. I'm simply making the argument that max-width makes more sense.
I do plan to write a follow-up about how I specifically implement my media queries and approach Responsive Web Development, but I think I've said enough for one day!