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

Design

Jonathan Peck
Jonathan Peck
6,472 Points

Converting to responsive...

What's the best practice? I have a site that isn't on a grid system I am starting to work on making responsive. Should I...

a.) add a grid to it.

b.) try to make it responsive without a grid being added.

c.) start over again.

-Thanks

13 Answers

Caroline Hagan
Caroline Hagan
12,612 Points

In addition to Damians advice... I choose not to opt for grids and have built responsive websites without them.

Although i have dabbled in https://gridsetapp.com/ which allows you to specify grids for different 'viewport' sizes if you wish and you can customise the style tabs to something relevant to you/the project.

I also build 'mobile-first' rather than taking an existing site and 'responsiv-fying' it. This way you can start with one column, and add columns as your content requires it at break points :-)

Damian: Frameworks are quick, but always know how to do it from scratch. It will help whenever you get asked to change another framework around.

James Barnett
James Barnett
39,199 Points

Grids are merely a layout and are not a required design element.

In my mind the goal is to make the user experience as awesome as possible with as many devices as possible.

Media queries, flexible images & responsive typography all help do that.

Converting your site from non-grid, non-responsive isn't that hard actually. Take a look at some of the frameworks which offer all of these features combined (Bootstrap or Foundation from Zurb).

Make a new responsive site based on a grid with some basic text to reflect how your site "should" be laid out. Once you have the basic gird down, copy and paste your content over. Finally adjust for responsiveness and how it will affect the elements on your page.

If you are using a programming languages like PHP or Ruby/Rails it will make life easier because of their templates functions.

Happy to help if you need anything further :-)

I should have mentioned that the Foundation framework has a "mobile" feature built in. As you build with the grid it will adjust for the mobile features automagically :-)

Jonathan Peck
Jonathan Peck
6,472 Points

Sweet, I haven't really sniffed out Foundation yet. I also have a slight desire to not use a framework to build responsive sites, but everyday I am leaning that way. I should probably just sit down and learn one of those all the way and then start using it. Then someday maybe I'll stop using one. ;) Thanks for all the help!

Agreed. However if you don't know HTML/CSS/JavaScript well enough to do everything from scratch a framework is a good way to get up and running. Once things are running the way they should be you can go back and work through the framework to understand how it works internally and re-write or customize it to your needs.

@Damian I can see how frameworks are very appealing, especially to back-end developers who may not work as much with markup and CSS. I look at some of the stuff that they do and marvel as well. I think that going forward, the roles of everyone on the Web design and development teams are going to be a lot more cross pollinated than they were in the past.

I also started learning Web design right as Responsive Web design was breaking news, and right before projects such as HTML5 Boilerplate or 320 and Up were brand new. As a result, I haven't really worked with frameworks like Bootstrap yet. I kind of learned how to build a couple sits, and then I was straight into building them responsively.

I know I have a ton to learn yet, and there's no teacher like experience, but I feel more comfortable writing CSS than I do any other language. Learning how HTML, CSS, and Javascript to a degree all fit together make deciphering the frameworks that I have had to fix (think allegedly responsive themes off ThemeForest) a lot easier.

@John - You make a great point that back-end devs really leverage frameworks heavily to get the job done in order to not fiddle around with the minutia of hand coding HTML/CSS. Experience is definitely key to learning, which is what makes this site so great :-)

@James Good typography is one of the biggest fixes that we can make that benefits usability.

@Damien if back-end devs are more prone to use frameworks to ease the learning curve, I would say I am just as guilty of being a cut and paste coder for inverse situations. Photoshop designers are really going to have to integrate as well. As long as each team has enough talent to cover the bases, I suppose it all works out in the end.

I am learning so much right now o_o