What is Responsive web design ? - A Beginner's Guide

Responsive web design

In today's digital age,there are more mobile platforms and devices emerging in the market. Therefore making our websites accessible to all the clients is very important. As web developers we have the responsibility to develop websites which is adaptable to web platforms and devices of all variations.. An approach of making our websites customer-centric, interactive & adaptive and at the same time providing rich user experience is responsive web design.

Why Responsive web design ?

1) Increasingly traffic is from mobile users to the websites and you cannot afford to lose customers because of poor mobile design.
2) Better mobile user experience. Think for mobile rather than just converting desktop version to mobile.
3) Chances are there to be penalized by Google for running duplicate sites for mobile and desktop.

How to start with Responsive web design ?

Websites designed should be clutter free across all devices ranging from handheld devices like smartphones and tablets and desktop. Websites should be consistent enough across all platforms like android, iOS, Blackberry…etc.

Challenges for responsive web design

When setting up a responsive website, we need to think about

a) adapting the layout for a relative smaller width,
b) hierarchy of information present in the website,
c) Graphic elements like images, SVG and animations

Prototyping for mobile design

Designing a prototype for the mobile design should be the initial step towards implementing responsive websites. It will clutter our doubts and give us an clear idea of how the website will look like in a mobile devices.
Using CSS or CSS Framework, we can adapt the layout of the mobile screens, which will discuss in our next article
The stakeholders of the website should decide what are all the information we are going to retain for the mobile design and how we are presenting it. Not necessary that all the contents should be squeezed into the small screens of the mobile. Also, it is not compulsory to show the elements how it has been in the desktop way. We need to think for a mobile based approach and come out with a clever idea.

Fonts in responsive screens

The typography plays a major role for voicing out your brand. What if the custom font which you have purchased looks elegant and apt in Desktop’s Firefox browser is broken in an Apple device?
The big headline should not look the same in mobile screens. It may be perceived to be too bold and hard for the users.
Globally to your site, font sizes for h1 to h6 tag and paragraph tag should be fixed for desktop devices and comparatively reduced for tablet and mobile devices.

Grid layout in responsive screens

The three column grid layout we have used for products page should be adjusted accordingly in a smartphone.
Layouts which are stacked above on another gives a better look rather than retaining the three column layout as that of desktop making the user to scroll the devices and look for content. It tends to irritate them and you may loose a engaged customer.
Apart from stacking the grid layout, you can also rearrange the content order. thanks to flex-box order for the generosity.

Touch interactions in mobile screens

When you plan and design websites you should think about the way we use mobile. We navigate in a desktop through a click and in mobile it is through touch. We should keep in mind that the tap – small touch point on the screen friendly and not confusing to the user.

For example,

If two or more links are arranged in an order. Spacing between them should be reasonable so that the touch or stylus do not accidentally touch on the other adjacent links causing confusion to the user.
Responsive design are easy to achieve and can make rich mobile experience. There are many CSS frameworks like bootstrap which will reduce our development time and give a neat look.
Also read next article - How to make your site responsive

To Summarize,

Subscribe to Creative Technocrayts for free and be a part of growing community.