Some tips of what do you need to make a responsive web site

#css

#responsive

#web

#design

#seo

#responsive web design

#rwd

Today with the grow access throw mobile devices, it makes necessary to find ways to make your web site content accessible throw smartphones. Begging at this point born the adaptive and responsive web design.

Progressive Enhancement

In each change of mobile device(the breakpoint) the Progressive Enhancement add functionalities to the web site following the capacity of the hardware. An example is: In a mobile you couldn't play with all jquery plugins but in a tablet you can play more and in a Desktop you are 'god'. Technically you keep your main project clean an functional in all devices.

Graceful Degradation

It's when we made a web site focused only on desktop and add mobile support after. Using Graceful Degradation we are removing features till we get the mobile.

Mobile First

We first think about the mobile and keep adding functionalities till get the desktop, follows the same way of Progressive Enhancement with a short name.

Layout

The basis of your project is the Grid, and keep in mind that you are goung to use only one column for mobile devices and keep growing to 2 or 3 on tablet and 4 to 12 on Desktop.

Keep everything adaptable

Starting from your web site images. Keep in mind: images must be huge but no heavy! and try to made align texts. Base your layout on % when get the Tablet view and keep for mobile.

Units: EMs, PXs and %

This is important! EMs are scalable, don't lost quality and are adaptive. PXs are fixed, its not a good idea when you made something responsive. and % are scalable, nor adaptive.

Development

The secret are on brakpoints(The size of the screen) there are to much frameworks you can use for this like: Zurb Foundation and Twitter Bootstrap. Or develop a brand new one like i did: Scrath Framework .

Responsive and SEO

Using the good practices of a clean code following the SEO patterns in your project, your are going to have a good PageHank. You must think about it at the begging of the project! using the corrected words on text and organizing everything.

For more tips and tutorials: www.kuklinski.com.br