There are two type of people in this world

A. Who have adopted responsive wed design

B. Who are loosing

Responsive web design has now become the standard web design rule as per Google and those websites who will circumvent this rule will face a major loss in the search rankings and consequently in business. I guess shifting to category A is a wise move which business owners should immediately adopt. Now, due the fear of Mobilegeddon many of web business owners have opted for it, but yet they were unable to achieve perfection in their responsive designs. For this reason, it is advised to invest in a suitable mobile development service, instead of giving it a try on your own. However, there are certain pro tips that can help you polish your skills and ensure a surefire design. In this article, I have summarized some of the major tips which will help you to get perfection in your responsive designs.

1. Responsive Navigation Menus

image1

Attaining a proper navigation is one of the most crucial things in responsive web design. This is because of the proliferation in the devices we have today. Websites deliver completely different navigation on different screen sizes. Wherefore, it is a very crucial point for the web designers to pay heed to. While designing menus for small screen you must be very cautious about its proper functioning. Drop down menus are a better approach to follow if you are designing for mobile users. This is one of the most pragmatic option to give your website a mess-free look to your website.

2. Media Queries

image2

The biggest misconception prevalent among the web designers is that the media queries work as speed retarders. However, you should know that media queries play a crucial role in providing a better user experience. So, you can use as many of them as you need in order to give your website the best look and feel for the delivering an optimal user experience.

3. Flexible layout for highly responsive sites

image3

Flexible grids basically use columns for organizing the content of a website and relative width so as to easily get along with the viewport size. In order to get highly optimal responsive sites you need to adapt fluid grids. Plus, using the right media queries will further enhance your websites performance.

4. Min-max-height & min-max-width

You can easily keep your images or other elements of site from getting too large or too small by utilizing the min-max height and min-max width when you know minimum or maximum sizes of the platforms or browsers used by your target audience. Elements such as banners look good at 100% width, however these elements can be really heavy so as to get the elastic images which fits on devices of all screen sizes and resolutions. This is where size restriction seems so easy.

This further helps to makes max and min sizes easily while application.

<div class=“container”>

<img src=“pictures/pic_a.jpg” class=“max-min” />

<img src=“pictures/pic_b.jpg” class=“max-min” />

<img src=“pictures/pic_c.jpg” class=“max-min” />

<img src=“pictures/pic_d.jpg” class=“max-min” />

</div>

.container { width: 600px; }

.container img { width: 25%; height: auto; }

.max-min { max-width: 150px; min-width: 75px; }

5. Overflow: hidden.

In order to get optimal responsive design you can easily use hide overflow. This is a very nice trick to use which is not specifically meant for responsive web design only. You can use overflow of hidden on the containers you wish to clear in lieu of applying clearing divs. For easy application of clearing , you can make a class which would be a better option than writing an extra div .

<div class=“container overflow-hidden”>

<img src=“pictures/pic_a.jpg” class=“max-min” />

<img src=“pictures/pic_b.jpg” class=“max-min” />

<img src=“pictures/pic_c.jpg” class=“max-min” />

<img src=“pictures/pic_d.jpg” class=“max-min” />

</div>

.overflow-hidden { overflow: hidden; }

.container img { float: right; }

6.Use breakpoints for screen sizes

image4

In order to be very specific in development you can break the common screen resolutions into 6 major breakpoints.

  • Smartphones of First generation with <480px in portrait mode

  • <768px for advance phones and portrait ipads

  • for devices bigger than this >768

  • <320 px stylesheet for devices of low resolutions

  • > 768 px < 1024px rule for landscape of tablets and iPads

  • >1024px stylesheet for desktops

7) Responsive images are a must

image5

After making breakpoints for your screen you need to make the images responsive too. You can also make breakpoints for pictures as well, but do make sure that there is no issue related to bandwidth. All you need to do is to adjust the width:

(1) 100% width – img { width:100%; }

(2) 100% width, perfect to the size of file – img { max-width:100%; } .

8) Relative sizes are in

Now as we know that we are designing everything which is fluid. In order to add relativity to your design you can add a unit at the top and make others inherit it. You need to define a master container which can either be fixed or changeable in size. Then you need to compute dimensions of its children such as size, margin , padding and many more in percentage.

9) Meta viewport meta tag.

image6

There are mobile browsers which can skim the high resolution desktop view smoothly and fit it into small screens. Though, being an incredible feature seems to be bit a problematic for responsive design. In order to let the browser use the original size of the website you can use viewport meta tag. By setting it to the device width size , it automatically sets up the browser which can adopt the real size of the device.

10) Style sheets in one column

Arranging the style sheets in a column is one of the best way to adjust to low screen resolution. All you need to do is to override the width of the column to the mobile stylesheet. Apart from this all you need to do is to fix the broken dimensions such as margin , padding etc. if any.

I hope this might help! Feel free to share your thoughts!