Responsive web design means making sure the content is appropriately viewable on all screen devices from desktops, tablets, smartphones and now wearable tech. As the screen gets smaller the design should get progressively less cluttered focusing on what is the most important information for the user.
The rise in smartphones of various screen sizes has made it imperative for you to make sure that your website is responsive. It deters from a positive user experience when the content of your website doesn’t adapt to its users. Viewing webpages should be made easy and being responsive is a step in the right direction.
For your website to be considered responsive it has to take advantage of these coding concepts. The first involves using a fluid grid which means that you size things on the web page based on percentages instead of rigid numbers–this way things are easily sized up or down based on the screen it is viewed on. The elements on your page also change in proportion to each other. The second is making the images scalable too so they can be viewed appropriately on any screen. You wouldn’t want a tiny image on a desktop or vice vera on a small device. The third is using media queries which are CSS rules for you website that can be set for different screen size ranges ensuring that your website will appear properly and is designed distinctly in the screen size range being accessed.
The concept of mobile-first has emerged from responsive and it means that the base design starts with the smallest screen size and is then modified for larger sizes. Since most content is consumed on smartphones this approach has grown heavily in popularity.