Basic Principles of Responsive Web Design

Azhar Iqbal July 2, 2020 0 Comments

There are multiple screens on which a website can be browsed. The simple solution to the problem of effectively loading a website on variant screen sizes is nothing but a Responsive Web Design (RWD). A Responsive Website automatically adjusts the configurations when it is opened on a mobile screen or a tablet or a desktop. But RWD is far deeper and involves applications of certain principles. These are assimilated below:

Fluid Grid

Fluid Grids provide a flexible structure to your website using relative units like percentages based dimensions rather than pixels. Websites have always been defined in terms of pixels as they were traditionally browsed only on desktops but now with the advent of smartphones and tablets, a website can be easily searched on them. A website appears in a large format on a desktop screen, whereas the size shrinks as we switch on to a smartphone. Due to this it is better to build responsive websites on the basis of the grid system.

The fluid grids flow naturally within the dimensions of the screen displaying the content without any adjustments for different screen sizes. Under this, the maximum size of the layout for the design is specified and then the grid is divided into columns. Then each element is allotted a proportional width and height on the basis of percentage rather than pixel based dimension. So, when the screen size changes, the elements adjust themselves to the screen size.

For example, if a desktop screen has 4 columns next to each other, it will be portrayed in a narrow display when presented on a smartphone screen. But with the help of fluid grid system they will be placed on top of each other forming a single column.

Fluid Images

Images should also be able to adjust themselves within the specifications of a fluid grid. This can be done by adding a single line of CSS code: {max-width: 100%}. This notifies the browser that each image can be as large as the specified value and can never be stretched. If the parent container in which the image is nested up is smaller than the pixel value, then the image should shrink itself accordingly.


Breakpoints allow the layout of the content to change at predefined points. Generally, it is advisable to add a breakpoint at a stage where a sentence breaks. Major breakpoints should be chosen wisely when the layout changes significantly. For example, if a mobile layout occupies 100% of the browser width when stretched to a desktop size, then there would be left some unfertilized space. Hence, while switching to the desktop screen the content should be rearranged in a presentable manner. Here comes the use of breakpoints.

Mobile or Desktop First

This approach involves designing a website for a smartphone first and then taking it upwards to tablets and desktops. Mobile devices have more features and applications like GPS, touchscreen etc in contrast to desktops. Even the designing part has to be done with utmost vigilance as there are limitations on sidebars and other peripheral content as well.

Joshua Johnson has put it articulately, “With a mobile first view point we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly as needed depending on the platforms that can handle them well.”

So, when we first deliver to the lowest common denominator i.e. the mobile user and then expand our branches further, we are able to satiate the users in a better way.

Web Fonts v/s System Fonts

Although the Web Fonts look stunningly stylish yet each of them needs downloading and if a major chunk is employed, it will take a long time to load the page. On the other hand, system fonts are lightning fast and the hold-ups are not involved in their application.

Bitmaps v/s Vectors

Bitmaps are images constructed by the use of pixels. By zooming in a bitmap image, individual pixels are visible which build up an image. Bitmap graphics can easily be edited by changing the colors of individual pixels using programs like Adobe Photoshop.

On the other hand, vector images are not based on pixels patterns but are constructed by mathematical formula involving lines and curves that can be combined to create an image. These are edited by fabricating such lines and curves using Adobe Illustrator

Now, the clash between the two can be solved by ascertaining certain factors like if your icon has got some fancy stuff and lot of details then it’s better to use bitmaps. For this use, a jpg, png or a gif as these are well supported on the web.

Vectors are tiny in size as they just store the mathematical formula that make up the image. For vectors, the best choice would be an SVG or an icon font. The drawback with vectors is that these are not well supported online and some old browsers don’t even support it. So, you must make your decision wisely.

Nested Objects

On a webpage, there are a lot of elements that are dependent on one another and these must be controlled in an effective manner. For keeping the structure understandable and clear, it is commendable to wrap these elements in a container. Pixels are the static units that can be of great help in this regard. Wrapping of elements can be useful for the content that you don’t want to scale like logos and buttons.

AboutAzhar Iqbal
Azhar Iqbal is an entrepreneur, eCommerce Solutions expert and web Programmer who is best known for creating top notch websites/Mobile apps and helping clients to grow their revenue. In the last few years, his digital products got best seller recognition on worldwide famous platforms like Codecanyon and Envato. He spends most of his time solving complex performance issues in eCommerce sites and learning new things to experiment later.

Leave a Reply

Your email address will not be published. Required fields are marked *