Guidelines to Make your Site Responsive

A responsive website is that which renders the elements on the page with respective to the screen resolution. Making a responsive design is easy though, but needed to taken care of. Let’s see what are the elements that are to be taken care of while designing a responsive design.

Websites or blogs have layouts. Any layout of a website or blog contains a Header, Content, Sidebar and Footer in general. All these sections of the layout are placed in a Outer-Wrapper. Content and Sidebar are placed in Content-Wrapper and Footer is placed in the bottom of the layout. Confused? you no need to. The terminology I used here will be helpful for you while writing the responsive code.

You can use the code below and add up your sections according to your needs.

@media screen and max-width1024px
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 960px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 500px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 420px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 320px)
{
ADD YOUR CODE HERE
}
@media screen and (max-width: 800px)
{
ADD YOUR CODE HERE
}

You can add as many different resolutions as you wanted. The code in a particular resolution block will render your website accordingly. Writing a responsive code need an idea of CSS.

For e.g., I’m writing responsive code for screen resolution of 420px.

@media screen and {max-width:420px}
{
#header{width:180px;}
.sidebar-wrapper{display:none;}
}

You can write your own CSS in the respective blocks to make your website or blog look decent and tidy.

Remember the following guidelines while writing a responsive code:

1. Use percentages instead of pixels for the ‘width’ and ‘height’ attributes.
2. Render the sizes of header and body for mobile phone resolutions.
3. Reduce the font sizes for small resolutions.
4. Remove the sidebar wrapper for mobile phone resolutions. You can choose to keep it for iPad and tablet screen resolutions.
5. Make the footer spread to 100% for the handheld device screens.
6. Use default fonts for the tablets and smartphone screens. Using particular fonts may not show up the text or might take long loading times.
7. Use Google PagSpeed Insights to optimize the website for mobile.

Did I miss anything? comment it below, I will add it up immediately.