The basic concept of responsive web design and coding, we must know.

The website trends changing rapidly, all web designing companies are following the trends and websites that can be used for any devices, such as mobile, tablets and PC desktops. While, the concept of responsive website design is not a new one, but the core concept need to be followed all web design companies.

The responsive and user friendly website are more popular nowadays, since mobile and tablet users are growing globally, the usages of responsive coding is necessary for any web designer.

There are 10 common concepts that can be followed to become a responsive web designer as follows:

Set a viewport

First thing first, you can set a viewport inside your head element using meta tag. This makes easy to understand the browser that the website is using viewport for responsiveness.

Make design Simple and attractive

Website that are simple to use and provide all the information related to the business, services or product, makes user to stay and engage in the website. The core thing is to make simple is to have all the information in the right place where it should be more visible to users and responsive design make it more simple. Here are some points that can be used to make website simple:

  • Make your code clean
  • Let the user have option to see the exact information they search inside your website
  • Do not use JS, Flash that can issue your page loading time.

Use Media Quires

Media quires make your life easy while coding for responsive design. Media quires are based for width, what your users screen size that can be defined using media quires. Using media quires in right way can make you’re your website full responsive and user-friendly. It can be defined for any size of screen, such as mobile, tablet, PC desktop and more.


Focus on breakpoints make responsive design more easy. For example; using breakpoints for desktop view you can set your three columns per row to be displayed and for smaller screen size you can set one column for per row, so that user can have easy access to view information’s differently.

Images need to be responsive

We must take care about our images responsiveness because images are the best way to engage our website visitors. Use vector images rather than raster makes our work easy. By using vector images, it can zoom-in or zoom-out, but the images quality are remains same.

Using grid system

Grid system is the best solution for responsive website designer. There are many CSS frameworks out there, which we can be used. For example; Bootstrap, Foundation are the most popular CSS frameworks. These frameworks have in-built CSS properties and classes that can be used for our grid layout.

So, I have mentioned some of the major points that need to take care while coding our responsive design. As we go deeper inside responsive design, we will get more ideas that can be vary and flexible to use.

About the Author

Bidur Acharya, a web designer and Developer from Nepal. He is working as a web designer and developer, since 2012. He has a great knowledge of responsive web design and also Search Engine Optimization.