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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS

Posted by Md.Atiquzzaman Soikat
Md.Atiquzzaman Soikat
20,416 Points

Best way to make a already created website responsive?

I know how to make a responsive websites,I also know how to make already created website to adaptive/responsive website.I just want to know what is the best process to create a non responsive website into a responsive website? Using media query or adding any framework to the website,is that a good idea?

I just want to know what experts do in this kind of situation.

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points
  • Step 1: add a grid
  • Step 2: convert px to ems or %
  • Step 3: add in media queries
  • Step 4: convert to using fluid images
  • Step 5: add mobile-friendly versions of any JavaScript on the page (like menus or slideshows)
  • Step 6: lots of testing
Md.Atiquzzaman Soikat
Md.Atiquzzaman Soikat
20,416 Points

Thanks a lot for your answer. Should I create a grid system or use a grid system like unsematic or something else.Is adding a css framework like bootstrap to already created site is a bad idea?

john vehr
john vehr
7,214 Points
john vehr
john vehr
7,214 Points

Step 1. bootstrap.

Step 2. No step 2.

Jaco Burger
Jaco Burger
20,807 Points
Jaco Burger
Jaco Burger
20,807 Points

As James said. And I'm sure my answer isn't the recommended way, but wouldn't it be easier just to redo it using the Bootstrap framework? It would be easy to adapt if it is just a normal html site. I've converted a lot of my older sites that way.

Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

I don't agree, john vehr:

Depending on a framework without considerate thought is a rather naive thing to do.

When it comes to making an already existing site responsive, content comes first. After all, that's hopefully the reason your site has been active all this time prior to your need to be responsive.

As a result, do proper content strategy and make decisions related to responsive web design based on the content and experiences your users have favored.

As a result, doing all such things should be agnostic as possible to an already existing framework.

  1. Create a responsive grid around your content, not force your content to fit a certain grid for the sake of doing it. That's disrespecting your own content. If necessary, do not be afraid to make a custom grid to allow your content to be responsively beautifully without the common problems of using a pre-made grid that doesn't fit the needs of your content such as visible 7s and so on.**

  2. Establish a style guide dictating the necessary responsive sizes different types of your content needs to be responsive.

  3. Make certain people own particular content being successfully responsive to make sure they adhere to the plan, and monitor why the plan is not being followed; don't be afraid to reiterate to make sure your content is represented well on a variety of devices.

Md.Atiquzzaman Soikat
Md.Atiquzzaman Soikat
20,416 Points

Thanks for your guideline.I never thought of creating responsive website based on content strategy,to think of it,it's the most important part,thanks again for sharing your insight.