Responsive Web Design Tips – You Should Follow

Responsive web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop version.Now the number of people who are using the tablets and mobiles to browse the web are increasing.

Hence a web page layout should be adaptable for all the view port of the device in which the visitor views the webpage. Some of the tips and tricks for the designers to keep in mind when they design a responsive webpages are given below. This will be a prefect resource for responsive web design tutorial in web.

First we should look at a website with responsive layout for inspiration and could analyse what all the things that are followed in it. In web there are lots of good responsive websites. for example Cuelogic Blog 🙂 .

We have really worked on its flexibility.

STEP 1: RESPONSIVE VIEW PORT

The website uses a responsive viewport. Usually the web page is displayed in a wider manner. So specifying a view-port will make the width to fit the device in which the page is viewed.

STEP2: RESPONSIVE IMAGES

Making the height and the width of the images to auto is best for responsive webpages( % should be used).

Also make sure always using a compressed image. Because images of 5mb or above are produced when captured from digicams.It will take time to load in mobile internet. Hence make sure you compress the image before you use it in the website.

Some of the sites found in the web

http://www.imageoptimizer.net

http://jpeg-optimizer.com/

STEP3: MOBILE NAVIGATION MENU

Navigation menu for mobile should be redesigned when the page is viewed in a smaller width.You could see how the menus are re-aligned in cuelogic blog when the width is reduced.

STEP4: RELATIVE POSITIONING OF ELEMENTS

Every element in the html is relative to another. Thus it is much flexible when the browser width gets changed. In the cuelogic blog header menu and body parts positions are relative. That gives the flexibility for the body parts to get aligned below in each other when the width is reduced.

STEP5: RELATIVE FONT SIZE AND USAGE OF PERCENTAGE

Instead of using px for the font sizes em is used .Thus the font size reduces relatively when the fond size of the header or some other html element reduces.Percentages should be used instead of px. Eg instead of setting as 1000px, 100% or 90% should be set based on the requirement. Thus the website scales based on the width.

STEP6: MIN WIDTH AND MAX WIDTH WITH MEDIA QUERIES

Min-width and Max-width should be mentioned in the CSS along with the width.Thus imposing a constraint for the widths are better suited for scalability for its width.media queries should be added with the min-width or max-width as condition to display certain elements.

Media queries are so important for a responsive css design.

@media screen and (max-width:320px)
{
    .main-menu{ display: none }
}

In the above code we are making the main menu, main menu getting disappear when the display device width is below 320px.By this we way we provide a better readability of the content in mobile devices.

If you have any more suggestions to be added , feel free to comment below.