tablet and phone website layout design - which to make first?

Question

I have a project which requires the development of a mobile site which works on both smart phone and tablet devices. I have read much about mobile design, concepts of "mobile first", responsive design, etc. One thing I have not seen covered is discussions on work flow, particularly at the layout design phase.

What I am not sure about is whether I should focus on the wireframe model for the phone site layout first, and then work on the tablet layout once the phone layout is finished? Or is it better to work on developing both phone and tablet wireframes concurrently? Which method is less problematic in the long run?

Answer 1

It really depends on how many of these you've done before as well as your designer.

Some designers need to work on the desktop first and bring everything down from there, it's just what allows them to be be more creative.

Having said that you're better off looking at going mobile first. I've seen a lot of responsive projects run into issues around linearising the large desktop content areas down into a tablet and mobile layout while still maintaining brand recognition and a synergy between the designs (yeah, I used 'synergy').

It helps if you're able to get your hands on REAL content for the site so you know exactly what you're dealing with. Use a framework like Bootstrap or Foundation to rapidly prototype some ideas with the real content and test to see what does and doesn't work.

When it comes to designing, try and design things in modules. Check out Style Tiles for hints on how to design with that workflow.

Best advice is do what works for your team, you will make mistakes anyway so even if you ignore everything I've said keep it in the back of your mind. Use real content, prototype/test early and don't be afraid to go through a few iterations.

Oh and finally, if you do go Desktop first design, display: none; is not a suitable solution for your content problems later on.