Re: How to: Mobile-first designs/dev

[Alen]

One of the things that is absolutely required when starting any mobile first project is content. So figuring out what you want to communicate, then laying that out by sketching low fidelity mockups will help tremendously. You want to think about each breakpoint and what the context might be, then progressively enhance experience.

As for what content comes first, that is totally up to you and your requirements; or what you/client thinks is important for your viewers/customers.

Also one thing to keep in mind while designing/developing is modularity. Things that you see yourself doing over and over probably need to be refactored. For example you might have a component that is called widget, the widget can contain recent posts or event dates, design could be different for both but the container (component) behaves as expected for both within the layout. This way you get a lot of reusable code, mobile-first approach is strong on performance so refactoring and keeping things tidy is important. Avoiding frameworks with a lot of bloatware helps as well.

While developing, I like to focus on particular feature, finalize the look I want, and make it work across the different breakpoints. Then I’ll move to a different feature. For example I’ll work only on top header/navigation, once it’s completed, I’ll move to working on the content. Etc.

Hope that helps,

Alen