Question: I need to create a responsive layout, but I'm confused on how to start. I've looked up and found many resources, but it's all very overwhelming. Can someone point me in the right direction on how to get started? I can build a html/css website, but have never done anything in regards to mobile. 

A few questions:
1) I've read you should build for mobile then move up, is this correct?

2) Should I start off with a template (or a grid, is that the correct term?) If so, any recommendations? (I've found some, but apparently I can't post links due to lack of rep)
This is the basic setup of the layout: <http://oi57.tinypic.com/2en0rdf.jpg>

3) Can you recommend any tutorials or tools that are a must?

4) What's the best way to test the layout? I've come across a couple (can't post links due to not having not rep

5) I've read about people using bootstrap, but I've used it in past projects and it seemed a little bloated. Although, it could be a good starting point?

Thank you.

Answer: 
> 
> 
> > 
> > 1) I've read you should build for mobile then move up, is this correct?
> > 
> > 
> > 
> 
> 
> 

Yes, it is much harder to take a complicated desktop layout and convert it to a simpler mobile layout than vice-versa.

> 
> 
> > 
> > 2) Should I start off with a template (or a grid, is that the correct term?) If so, any recommendations? (I've found some, but apparently I can't post links due to lack of rep) This is the basic setup of the layout: <http://oi57.tinypic.com/2en0rdf.jpg>
> > 
> > 
> > 
> 
> 
> 

Yes, to start I highly recommend you go with a framework like [Bootstrap](http://getbootstrap.com/) or [Foundation](http://foundation.zurb.com/) which have responsive grids.

> 
> 
> > 
> > 3 && 4) Can you recommend any tutorials or tools that are a must? What's the best way to test the layout? I've come across a couple (can't post links due to not having not rep
> > 
> > 
> > 
> 
> 
> 

The best tool is a browser that you can slowly resize and watch how the elements rearrange as you resize it. There are also websites that will display your page at different device widths. For example <http://quirktools.com/screenfly/>.

> 
> 
> > 
> > 5) I've read about people using bootstrap, but I've used it in past projects and it seemed a little bloated. Although, it could be a good starting point?
> > 
> > 
> > 
> 
> 
> 

Yes, [Bootstrap](http://getbootstrap.com/) or [Foundation](http://foundation.zurb.com/) or any other framework out there is a good starting point. Look at how they do responsive layouts and use that to learn from.
1: I build for 1080p widescreen and move down. Everyone I know has a different opinion.

---

2: You can do a template, but you don't need one. In general, templates make things easier, but limit your control over your site, and your flexibility.

---

3: Two free ones:

<http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design>

<http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design>

---

4: With Media Queries, you can do initial testing by resizing your browser, which is great. Final mobile testing will need to be done with an emulator, or an actual smartphone. You need to decide also if you want to support pre-4.0 Android.

Another good resource is <http://browsershots.org/>. It's free, and will show you your site in a massive range of browsers.

---

5: Bootstrap ... the same implications apply for part 2. Makes your life easier but limits flexibility.