Mobile first design and mobile first development are different

One does not dictate the other

Despite having a couple years worth of responsive design and development under my belt, I discovering new things weekly…from conventions to code to visuals…it never ends and that’s the fun.

But all too often I have one of those “oh. duh.” moments where something finally clicks in light of a certain situation. Well, one of those situations happened on a current project that has be re-thinking everything I’ve done up to this point.

Mobile First is a wonderful thought process for designing with responsive in mind. In general, you design for the most minimal (phones) and think upward to the most lavish (desktop). Part of the theory being that if you can design something simple enough to work on a 3" screen, it will certainly work on a 24" screen, albeit with maybe a little more eye candy.

I think this is the best way to design. It limits your natural tendency to over-think an interaction or visual. However, up to now I developed web sites using the same thought process. Start small and work your way up.

Code-wise it made sense too. Your base is what is minimal and then you add on to that as your screen size increases. It’s an additive process rather than a subtractive one that has you overriding rules all the time. Every overriding rule feels like wasted bits and bytes, not to mention more maintenance headache. My gut reaction was “that’s bad.”

However, I’m now working on a project that has challenged that and it actually makes a little sense. Rather than coding mobile first, I’m coding desktop-first and whittling things down. Yes, this makes for extra code but it also has one (big) added benefit…it accounts for old browsers without much extra effort.

Mobile First coding means the base is essentially “phone mode” and that means older browsers that don’t support media queries get the phone version. In theory, this is fine since everything should be accessible either way but I started to think why not help those old timers along if all it takes is reverse-thinking?

I have to admit that prior to this epiphany I had a “heck with them” attitude, believing building a web site that had a less-than-optimal experience on older browsers was the nicest way to say “you need to upgrade.” Frankly, that’s still my attitude but in my current situation I don’t have any power to sway opinion so I gotta go with it. (Really, how is anyone on such an old browser having a good experience online?)

So Mobile First design is an inverted pyramid but Mobile First development can go either way. Bottom line, they don’t have to be in sync and that frees you to make better decisions that will better benefit everyone — customers included.