Responsive Web Design and how it works?

What do you mean by Responsive Web Design?

This is an approach that suggests designers’ design and develops in a certain way so that it responds to the nature of the user, the environment he is using, and the platform he is using. This approach utilizes a flexible set of images and layout with the help of strong media queries. As your audience will be switching from their desktop to android, the website will be changing its resolution depending on the size and abilities of the script.

What is the concept behind the Responsive Web Design?

Just like architecture, a web design must be responsive enough to adjust quickly, as it won’t have custom remedies for specific types of users. As web designs that are responsive need an abstract level of thinking. But one shouldn’t mistake web design to be only used for adjusting screen resolution or resizing images. As it gives us a new approach to understanding design.

Image

One of the biggest issues that need to be solved right now is better working with images when it comes to web design. You will find a varied list of techniques that you can use to resize images properly and can be easily completed. If no other width-based image overrides this rule, then almost all images load in its real size of the viewing area. You have to make sure that the utmost width of the image is a hundred percent of the width of the browser so that it becomes the same percent narrower in respect to the image. However, you can’t declare the dimensions of the image in the code but you can let the browser resize them as and when necessary. It’s an easy and simple way to resize the images by using just the following CSS command:

image{max-width:100%};

The image on our website in first image and second changes as the size of the screen changes

Media Queries

At times due to needing extreme size changes, we have to change the whole Layout by adding a new stylesheet or with the help of CSS media query. This won’t be causing any issue as most of the styles will be as it is, while only a few of the stylesheets will take the new updates on and move around the elements and the dimensions. Suppose if you take an example, you have one main style sheet that will be used to define all the elements that add structure to the sheet. A CSS media query looks like this:

@media only screen and (min-width: 480px) and (max-width: 1200px) {

/*CSS rules that will be applied to mentioned screen sizes*/

}

Font Size

Imagine the font size you see on your mobile phone is also used for your desktop. Only way you can comfortably read that text is if you put your desktop screen in your lap, which as you may assume is not practical. Always keep in mind to change the size of font corresponding to the change in screen size.

Font size difference in Mobile (on left) and Desktop (on right)

Scalable media

Use media like images that doesn’t lose their clarity when size of the screen is increased. As you see, most of the images starts to distort when they are zoomed beyond a specific size. The solution for this is using SVG (Scalable Vector Graphics) format images. SVGs, unlike JPGs and PNGs, remains intact even if screen size changes.

PNG image on left with 100px and on right with 200px

Content Abstraction

It’s quite reasonable to make all the elements present in your webpage shrink so that it fits everything present in the website when your screen gets smaller in size. However, reducing the size of the elements present on the screen when screens get smaller isn’t the best option. You can utilize practices like better navigation by throwing light more on the content, and using lists instead of a large number of columns for mobile browsers.

Innovation, Creativity and Change | Visit us: www.rapidfork.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store