Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Mobile friendly websites - reverse designing

Any recommendations on the best way to take an existing website and make it mobile friendly? Max-width media queries? Completely redesigning to be mobile-first? Something else?

1 Answer

Mari Johannessen
Mari Johannessen
12,232 Points

I would say that this depends on how big the website is, and if you're going for a mobile version that looks the same as the main website (only mobile friendly), or if you're adding functionality to it when it goes to mobile version (if that makes sense). Media queries is probably the best way to go, because that makes it easy to customize it without having to go through the whole code. And it saves you some extra work as you don't have to redesign the whole page.

I would agree with Mari, it completely depends on how big and complicated the existing site is. Media queries would be great in theory but can also complicate the styles already in place (especially if the design contains absolutely no fluid elements). You could also look in to creating alternate layouts (this would be if the current website was to hard to re-design backwards). Alternate layouts isn't optimal but it can buy you time until you decide on how to approach future responsive design. Hope this helps!

Jonny Strange
Jonny Strange
6,412 Points

Mari, I'm trying create a fluid grid from scratch, but finding it difficult to calculate the margins, gutters and columns. Any ideas/suggestions??