Designing best web pages is an art albeit less appreciated but highly demanded. I used a term best in a sense that the designed webpage meets the demand of the user and picks up a popularity.As the world, day by day is shifting into digitalization, it’s a high time, the designers took an approach to design responsive web design so that no matter which devices user want to browse the web from, they should feel way more comfortable to do so. The term responsive web design means the adaptability of the web pages on web browsing devices of varying dimensions like desktop, laptop, cell phones, tablets and so forth. Say, you own a small scale business and want to go online. Obviously, you’ll target the audiences from the wide range and guess what, your audiences will not just be using the laptops and desktops to browse your content but the tablets, phones and different miniature form of gadgets.There’s one fascinating article on web design written by John Allsopp titled “ the Dao Of web design”, in the dawn of 21st century. While I was going through the article, I couldn’t help myself admiring his sheer ability to predict the future of web browsing and a change of philosophy that lay ahead for the designers. The fundamental shift, from paper-based medium information to websites, he argues should benefit the user, irrespective of the browser she’s using, in a comfortable way. 

 

In 2012, when number of people browsed the websites from their phone browser than that from the likes of desktop or laptops, it was more like a wake up call for all the web designers out there, to brace themselves with a new philosophy for a responsive design of website which will erase all the constraints which were present in orthodox way of designing the websites. So, in this article, I’ll be talking about the easiest ways to create the responsive websites and also the need to do so in today’s fast-paced tech-world.

 

Basically following three factors are taken as ingredients while creating a responsive web design:

• Flexible layout
• Flexible media and images
• Media queries

 

Allow me, now to explain all three factors and while explaining, I’ll try my best to make you conceptually aware of it.

 

Flexible Layout:

When it comes to creating a flexible layout for your website, you need to remember a phrase- from pixels to percentage. Applying the pixels for the length and breadth of the page will give you the rigid framework, so, if you have designed a web page in accordance to the dimensions of the desktop browser, there’s no way that your customers will have the same experience if they use different devices. So, all you have to do is express the dimensions in a relative, proportional way so that you’ll obtain the flexible grid which will adapt itself depending upon the viewport, in any way, not hampering designer’s original proportions. There is a formula while designing a flexible layout, target/context = result and once you apply this in CSS, voila, you’ll get yourself a fluid layout. This sort of fluidity in the layout helps the users to view the content in his desirable font size, for example, you can assign the ratio to headings and the content size, subheadings and content size. So, breaking away the habit from pixels, you should really dig into the context which will make you aware of the proportion based relationship between element container. So, the first job of creating a flexible layout is the foundation of responsive web design.

 

Flexible media and images:

“A picture speaks a thousand words” is almost a cliche. Since websites are no longer just the online information hub but a virtual shopping center, it’s very important of designers to make the sites more responsive to increase the customer base. Remember the target vs context formula I stated above? Though we have a fluid grid which adapts itself, we still don’t have the flexible image. So, another piece of an ingredient is the flexible media. You know what, I often feel so disgusted when I see the disproportionate image size in some of the old-school websites in the mobile browser. So sad, they didn’t make it responsive. The easier way to correct this is by making a fluid image by letting the maximum size of an image to be equal to the dimension of the layout. Doing so, an image can retain any size within the layout irrespective of the viewport. You can apply the same technique to all kinds of media files in your website which will self-sustain in the flexible grid. Now, you see that the image size can adjust itself depending on the browser which lets the user to experience the content of your site comfortably.

 

Media Queries:

In CSS3, media query is a module offering the best fit for the media files and the contents of the web page depending upon the orientation of the viewport, viz. Smartphone screen vs laptop and so forth.  Though you have created the fluid grid and also the fluid media files, there’s always the looming fear that the website my crash in different browsers. So, by applying Media queries, without having to know the dimensions of the browsers, your website will always remain optimal.

 

Needless to say that the world is changing for better. With the leapfrog mindset, every aspect of technology is being advanced day by day, so you have to make sure that your website is going with that flow.