Shopify Expert Insights

E-Com Advice from our experienced in-house team

How do frameworks and grid systems work with the Mobile First approach?

Dorit Willenbrock asked:


"I'm just wondering - and maybe I have missed something, sorry for that in advance - but if I want to do a mobile first approach to redesigning my website, then I don't see how a default framework or grid system can work out. Sounds like the search for the perfect framework or grid system to match my requirements, all that analyzing and testing, wouldn't that be more work than just starting building mobile first...?"

Dorit,


If you don't have to use a framework, then don't. :) Sure, a framework has (someone's idea of) best practices baked in to it, but it also comes with a lot of overhead that you may not need for your project. If you're comfortable not using one, then good on you!


Mobile first just means that the base style of your website is for a 320px wide screen, and anything bigger than that is done in a media query. The only concession this requires is conditionally loading respond.js to add media query support to IE8. If you don't care about IE8, then skip this, but IE will always use your 320px base default.


Remember, the "magic" of responsive web design is committing to doing your CSS in percentages. The rest is just 5th grade math.