How to: Mobile-first designs/dev

[Chester]

Hi.
I would like to know some workflow, tips/tricks about this.

How do you start your design if you’re planning to go for the “Mobile-first” approach later in the development? Do you design the mobile look first also then from tabs, to etc, to desktops?

Also what if I have a slider on my desktop design, and I start coding using mobile-first, where will I put the code for the slider? Will I put it somewhere at the bottom so the more important content comes first(mobile-first, right?) and then position it later?

I’m really confused about this.

Thank you so much.

[croydon86]

Great desicion to start adopting a mobile-first approach.

My personal workflow consists of sketching out wireframes of the layout at different breakpoints, and then taking this into Photoshop and mock up the smallest and largest layout, or more depending on how complex the breakpoints get.

These mock-ups are not pixel-perfect, but enough to give me to get creative and establish the design elements of the site.

Regarding the slider, there are loads of ways you can do this including hiding/conditionally loading, etc, but the best in my opinion is to use a responsive slider which also allows you to slide with your finger on touch devices, loads of these around nowadays.

You want to try and use the same content for both small and large screens.

The order of code on your page should depend on your content, not neccassily the visual order, however these normally are the same thing. A good way to start is coding the mark up first (no CSS), so you can concentrate on semantics and the structure of the page. This will be what screen readers/assisted devices will see/read and will be responsive by default, and then progressivly enhance with CSS.

Hope that helps

[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

[Author]

Posts