Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

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??