I have mixed opinions about this, should you design for mobile first or desktop? I understand the pro’s for mobile first but it’s got it’s pitfalls too in my opinion. I would be interested in your views too so please leave your comments below.
So, if we decide we’re going straight in to the browser to start coding in the smallest @media then for one as designers we’re limiting our creativity right? Enter first pitfall – we have a smaller canvas, usually a single column, working the other way around eg. desktop first we’d be removing certain elements – in fact we are not removing them we are actually not starting with them, from a design perspective how confusing and limiting is that!
Designing to the smallest space has it’s sacrifices yes but, being so specific when you are working within the smallest @media means that we’ll be starting our main control there. This surely will mean a bloated set of css classes and id’s in the smallest @media right? Enter second pitfall – when starting with desktop its fairly easy to hide or display:none; on classes and id’s as you are moving down the scale however, going the other way means introducing more to your markup and in turn to your css, this means going back to your smaller @media and removing stuff in the same way. Now, because your main control is started in the smaller media and you’re going back to hide stuff you’re effectively bloating your css unnecessarily. Bearing in mind that you are also adding control in to your wider @media whilst all this is going on!
There you have it, I get the benefits of designing for mobile first but, I think it has it’s pro’s and con’s – I’m still leaning toward the designing for desktop first – convince me otherwise folks, what is your opinion? Please do leave your comments below…