Responsive Web Designing – Things to Know

Now a days the responsive web designing is popular because of different type devices such as smart phones, tablets, laptop, desktop are coming in the industry. It is not about the type of devices but the screen resolution changes whole site down if your site is not responsive. Responsive design adjust with the devices. Here i am going to talk about what areas you need to more focus on developing responsive design.

Mobile First

  • The major part of peoples are using smart phones rather than desktop. Take advantage for this behaviour, you need to primarily target mobile first strategy.
  • Make navigation menu simple and quick reachable.

Use Chrome

  • Chrome and mozilla have great development tool. I personally prefer chrome.
  • You can test your website with google Resizer.

Don’t Specify Height

  • Don’t specify height of the elements.
  • height: auto; is a good option.

Use % and em

  • Use % and em instead of pt, px.
  • The %  make website fluid layout, means that website resizable when the window is resized or change the resolution.
  • To adapt fluidity in better way learn how 12 column grid system works.
  • Don’t use pixels. pixels are the absolute unit and percentage (%) relative to the parent element.
  • Use em, It is scalable unit which used for fonts mainly. The em scalable with currant document font size.
  • CSS3 – have special units such as VH,VW, Vmin, Vmax. These are also relative units. Consider to opting these in your new website is good but support across browsers is less.

Design for 3 Resolutions

  • min-width: 768px – Usually used in smartphones
  • min-width: 992px – Smartphones and Tablets
  • min-width: 1200px – Desktop computersResponsive design

Use Media Queries

It works when the condition inside the @media query is true. Here is the small example below.

 

Jees K Denny

I’m Jees K Denny, a Web Developer and a Passionate Blogger from Pudukad, Thrissur, Kerala. You can get in touch with me In most of your social networks including Facebook , Google , Twitter etc.

One thought on “Responsive Web Designing – Things to Know

Leave a Reply