Responsive Web Design: Some Tips And Tricks

In today's era 80% of all online adults are smartphone users. That means most of the customers are on Smartphone. For this we need a website which can be work proper on desktop and mobile. It can be possible using a Responsive design.

Responsive web design is an approach to web design aimed at crafting websites to provide optimal viewing experience, easy reading and navigation with a minimum resizing, panning and scrolling across a wide range of devices (from Large Desktop Screen to Mobile Screens).



A responsive design can be integrated into your existing website or can incorporate into a new website.

Here I am sharing some tips and tricks for developing a responsive design:

1. You should use a simple DOM structure. Simple DOM means simple layout. Divide your whole website into proper sections (Header, Left/Right panels, footer etc.).
   
   
2. Media Queries, these are the styles which are used in CSS to adjust the content based on the width of the screen. We hide and display the content, image using media queries. We can hide everything in mobile for same desktop website using media queries.
   
   
3. Always remember you have to have right media query breakpoints for standard screens. Otherwise webpage will break differently in different devices. Some common Breakpoints styles:
   
   
   
   
4. Use Box Sizing effectively, it helps you control the size of your <div></div> even while resized.
   
   
5. The max-width, min-height, max-width, min-width properties limit the maximum and minimum width and height of the html elements (Images, Text Boxes, etc.)
   
   
6. Font size units: If you are developing a zoomable website then one thing is sure your fonts may lost if you have used font size in PX unit. So here we should use ems.
   
   If we use font-size: 1em, it means we are telling the browser to set the font height to the same height as the parent element default height.
   
   
7. Try to give the height and width size in %, it allows content to adjust automatically to the available screen size.
   
   
8. Always avoid Orientation. @media screen and (Orientation: portrait/landscape). Not a good practice and effects on many screens.
   
   
9. In code more jQuery bindings means heavier DOM. Which effects performance and response. So Use less jQuery bindings and use plain JS.
   
   
10. We know mobile devices do not scroll the content like a simple desktop browser. The momentum and kinetic scroll that your phone provides for apps is not provided for browsers. To use this, we need to add this css: webkit-overflow-scrolling:touch;
    
    Use the points carefully in your webpage, you will be able to create a good responsive page. For more tips and tricks stay tuned for next article.