Getting started with responsive layouts

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

  3. Can you recommend any tutorials or tools that are a must?
    I’m reading through
    I came across this course (I don’t mind spending the money)
    It seems like it will be beneficial.

  4. What’s the best way to test the layout? I’ve come across and

Basic setup of the layout:

Thank you.

  1. Yes, this is generally the best way to go about it. Plan out exactly how your layout will look on a mobile at the smallest resolution, and then work upwards from there. Make sure everything is accounted for, as planning out your layout in a desktop view and then trying to squish it down to a mobile view will cause problems. Keep in mind that (generally) the only thing that will change from a mobile view to a desktop view is the CSS, the HTML will stay the same, meaning you need to structure it in a way that will work for both of your desired layouts. Of course you could use JavaScript to get around this, but you should avoid that where you can, especially whilst you’re still learning as it will complicate things.

For example, let’s say you have 2 divs on your page, which on a desktop view are organised into 2 columns, like this:

[div 1] [div 2]

On a mobile view, you might want to collapse those into 1 column with 2 rows, like this:

[div 1]
[div 2]

On the desktop view, it doesn’t matter if you declare [div 1] or [div 2] first in your HTML since floats would take care of the positioning. However on a mobile view where those floats are gone, whether you declared [div 1] or [div 2] first decides how they will appear on the page. Of course this is a simple example that would be easily fixed, just remember to consider all screen sizes when adding a new element, don’t focus on one and worry about the others later.

  1. I recommend against this. There are frameworks out there that make creating a responsive design much easier, but the problem is you won’t learn anything. You’ll become reliant on using that particular framework, and eventually you’ll find yourself in a situation where that framework won’t do everything you need it to, or you’ll start a job where you have to use a different framework. In both cases, you’re stuck. Do everything manually at first, and once you become confident in it, then move onto using frameworks. They should save you time, they shouldn’t accomplish things you couldn’t do yourself.

  2. The best way of testing a mobile layout will always be on an actual mobile device, and you should try to do that where possible before a project launches. During development though, most browsers now have built in tools for emulating mobile devices which work fine. They don’t always do it perfectly though, so keep in mind that you should try it on an actual mobile device before launching.

Go for skeleton framework…it will be easy to build and understand for mobile responsive sites…

and never go for templates…they are worst…and ur coding part wont be improved…

I know people advise you to start with the mobile and work upwards - and I know there are reasons for this such as getting the right and left columns to float correctly etc - but I have to admit that I still find it easier to design (as usual) for a PC and then to work downwards.

Certainly, starting out in responsive about a year ago, I found that I:

1 Got my site to scale up and down on the PC
2 Got media queries working so that I could make it fit onto the tablet and mobile sizes (and also add new styles if required to cover “breakpoints” where the design broke down with resizing and could change the font etc
3 Got the menus working so they would change when the width became a mobile/tablet

Once you go through those steps, you start understanding - step by step - how it all slots together and it doesn’t seem so daunting up front.

Good luck!!

I build sites on Wordpress and use themes so I just look for responsive themes and occasionally have to add some CSS customization using media queries. I’ve never coded a site from scratch that was mobile responsive but if I did, I would built the full site first with responsive in mind and then build the responsiveness second.

My strategy is to spend as little time as possible coding because it takes too long but I understand it’s required for some custom designs and applications.

If you know CSS, then reading about media queries will be a big first step in responsive design.

  1. Definitely yes, it will save you a lot of time

  2. Bootstrap is great way to start. You can only use it’s grid system or other responsive features (responsive images exmpl.) and do your own design.

  3. The best tutorial is to fire up your html editor and to start to play with some sample code

  4. Here is code, add it as bookmark and you can test any site for responsives:

javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width: 6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid #666; }</style></head><body><div class="wrapper"><div class="frame"><h2>240<span> x 320</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="240" height="320"></iframe></div><div class="frame"><h2>320<span> x 480</span> <small>(mobile)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe></div><div class="frame"><h2>480<span> x 640</span> <small>(small tablet)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe></div><div class="frame"><h2>768<span> x 1024</span> <small>(tablet - portrait)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe></div><div class="frame"><h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1024" height="768"></iframe></div><div class="frame"><h2>1200<span> x 800</span> <small>(desktop)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe></div></div></body></html>')