Basic responsive tutorial

[bluelogic]

Ive been designing websites for over 14 years and made the transition from tables to css to html5 but making a site responsive eludes me.

Ive tried frameworks like bootstrap but find them hard to customise

anyone know an idiots guide to the nuts and bolts of the css i need and a separate resource on how to approach the design?

Ive heard about mobile first and the opposite, degrading a 'web' site but would like to get my head around the principles involved in layout.

but more importantly a basic guide to responsive across mobile, tablet and web.

thanks
mark

[Snookerman]

There are thousands of tutorials on responsive design so you are better off googling it. If you want a really simple idiot's guide, here you go:

1. Use media queries to serve different css code based on the size of the screen/device.

2. Change stuff like widths, image sizes and the position of elements to adapt to the different sizes.

3. Resize your window for simple testing of the different designs.

[molendijk]

This may interest you. See also this.

[adammorgany]

I am using 960.gs for my client to have responsive mobile design. To know about the 960 CSS framework you can visit at 960.gs

[CChawps]

I'm currently working with jQuery Mobile, it works very well with smartphones, tablets etc. You don't have to know jQuery to use it, just add data-roles to define the different sections on the page.