The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other How to: Mobile-first designs/dev Re: How to: Mobile-first designs/dev


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