Why and How to make a Website design Responsive

Posted on 15 May, 2017

SETU 2017! A day most waited throughout the year. This time it was quite more thrilling than exciting as I was one of the speakers and since I left my job as a tutor it was for the first time that I was going to speak in front of a crowd! But as soon as I was on the dice, I don’t know where the fear got evaporated. All I could feel was excitement and a true sense of satisfaction by sharing the knowledge I have, amongst the younger generation which will be helpful to them in making their career strong.

My topic for the speech is one of the most emerging and Talk of the town subject for IT geeks. I talked about “Responsive Web Design”. Well, most of the techies must have raised their ears hearing the hotbed topic “Responsive design” to know what are the new things in this. Yes, nowadays making your website responsive is an inevitable job if you want to be an efficient developer. Let’s see a short story about two friends and the conversation will surely make you realise how important it is to make your site responsive;

Once two old friends, Raj(a complete Techno-geek) and Jay(a professional CA) decided to meet each other in a restaurant. They were sitting in a restaurant and was talking about their works. Suddenly there was a change in weather and which is why Jay thought to check news through his cell phone. Jay surfed one of the news websites and tried to search the weather report. Looking at his puzzled face Raj asked the reason and Jay said, "Brother I don’t know why but the layout of the website is not properly visible on my cell phone. Content is extremely small to be legible and images are spread so largely that it is not visible entirely on one screen so couldn’t see it properly. Maybe there is a technical issue on my cell phone. Let me check it in my tab." While checking the website on his tab, Jay observed that the things are still not properly placed. Immediately the techno-geek, Raj realised that the website his friend is surfing is not responsive and asked his friend to switch to some other news website which is responsive. So here being a technical person Raj could find out the loophole and immediately asked his friend to switch over to some other website, similarly we are techies too and thus we should know what is a responsive website all about. Let's see what is a responsive website, some facts to identify it, the importance of it and the ways to make your website responsive.

From the story narrated above, we are now clear what are the consequences of a non-responsive website, but still, see the below two images wherein the one on your right is how it was visible in Jay's cell phone and the one on left is how it should look like;

If we want to describe the difference between responsive and nonresponsive website in layman's terms then the website accessed through mobile phone or tablet in which we do not require to zoom to enlarge the option and do not need to scroll horizontally to locate the option and then tap to select it, instead just need to tap the option by scrolling vertically is a responsive website.

Keeping your highly creative website non-responsive is like serving a paper dosa which extends the platter and making it responsive is like serving a paper dosa by cutting it and garnish as per the size of the platter.

In the most technical denotation, Responsive website is, “ the practice of building a website suitable to work on every device and every screen size, no matter how large or small the mobile, tablet or desktop is.”  It is like your design adopts the layout as per the size of the device, pictorial example of which is as below;

To make the website responsive in nature sometimes we need to collapse the options of the menu bar and make it a toggle menu. In fact, if you will notice some of the websites then they change the layout completely by altering the position of the images, resizing some of the fonts etc which makes it user-friendly. This may sometimes make a non-techie like Jay think that the coding and developing of the site are done separately and both the developers must be different;).

When we know what is responsive website the next important thing we need to know is the most common display sizes for which our website should work responsively. Let's see below bullets for the general sizes that responsive design aims at;

  • Widescreen desktop monitor

  • Smaller desktop (or laptop)

  • Tablet, iPad

  • Mobile phone

Now the question arises in our mind is, Why responsive design is so important nowadays? An answer to this is hidden in an another question i.e. How many of us Do Not uses a mobile Smartphones? The answer to this will not even in two digit number. The importance of a responsive website is right there in the answer. Nowadays using a smartphone is just like brushing your teeth with Colgate. Everybody regardless of the class, gender or profession uses  Smartphones or tablets. And the last 6 months have changed the scenario of using the internet in the phone like never before in the Indian society with the introduction of Free JIO net. None of us accesses our laptop nowadays unless an urgency or we are at work, we all uses our mobile phone to access the internet which emerges the need to have the responsive website. See the below graphical trend in the usage of internet through mobile phone in comparison with laptop/desktop;

If you will study the graph above you will realise that the usage of desktop/laptop has diminished like anything since past few years because of the introduction of affordable android cell phones. Initially, the internet usage was only done through desktop and if we do not have a desktop, a cyber cafe was the only option. But nowadays things have changed drastically and the smartphones have become the sole choice to access the internet. Thus having responsive websites have become inevitable.

The next point which makes it mandatory to have a responsive website is ranking on Google. Google, a search engine for which sometimes people hire a consultant to reach on the top list of the search result and to be on the first page, considers your website only if you have a responsive website. Well, to know the in-depth about the ranking system please visit the blog, " Google RankBrain - What is it and How to tackle it?" by my SEO-Champion Colleague Shetul Majithiya. To just give you glance, as per the ranking algorithm of Google and in fact many of the search engines, they do not accept the non-responsive websites and even Google warns through Search Console if your website is not responsive. 

If you are a real techie then now you must be thinking that why responsive website in the era of app?! Well, let’s have a practical test then. Download Myntra, Amazon, Flipkart, Shopclues, wish etc in your cell phone. Also download WhatsApp, Facebook, Snapchat, IMO, Twoo etc. What happened to your mobile now?! Hanged?! So this shortage of space in our cell phone makes us unable to store every required app. Thus it gives a thrust to the need of a responsive website.

Every business from small to extra large always need an app to strengthen the market value but making their website responsive is having an equal importance which will convert their potential customer to buyers.

If we talk about small or say start up businesses then, their app will not be downloaded by many users because of their not so popular name. Though one need to have an app since initial days which can increase the visibility but they could not risk their business by just having an app, they need to have a responsive website too. Most of the service based or rarely used product sites like software development, matrimonial site, a specific restaurant, railway booking etc are such things wherein everybody may not waste their space by downloading an app but just use mobile site whenever needed. Thus like this, every business venture may it be a start-up or a giant need responsive site.

I am going to narrate two case studies of giants of the market who are being at this level is conscious about their presence in both ways, as in App and in the website;

Facebook :

The social media platform who is a pioneer in the field and most of all human being residing on this earth have their account on this social media too have realised that if it will solely work on an app they may lose members who have to delete few of the app due to low storage capacity. If we think practically, there are about 80-85 % of Facebook users who are so addicted that they have an app in their mobile despite low storage. they will delete other apps but not this one. The other 15-20 % are those who use it during their office hours for social media promotions of their company through their office desktop/laptop or the elderly people who are at home and due to low eyesight prefer to use Facebook through the desktop or laptop. The remaining class of public are assumed to be the user of Facebook through their Mobile phone but not in app. Though the percent will not surpass 10-12, Facebook, a pioneer and the most successful platform till date have given the importance to their mobile site. Just imagine the importance responsive website holds.

Myntra :

A well known online shopping space with a wide customers took a decision to eliminate their website and trade through an app only which gave them a huge loss and thus has to re- alter their strategies and have to be adopt both the ways of having a website(responsive of course!) and an app to bloom into the competitive world.

The final discussion which is the most important part of the movie called Responsive website is How to make your website responsive?

Making your website responsive there are many aspects and you have to study many things in depth to master it but there are three basic and inevitable things you have to perform. You should have good hands on Javascript, HTML and CSS as responsive website can be developed by these three things. The major three aspects which are the essential elements to make your website responsive are;

Viewport :

The viewport is the user's visible area on a web page. It varies with the device and will be smaller on a mobile phone than on a computer screen. To do this you have to use a meta tag as;

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0,">      

Flexible Layout :

To make your layout flexible which adapts as per the size of the device then your need to see the padding, margin and most importantly you should keep your width in percentage(%) format.

CSS Media queries :

It uses the @media rule to include a block of CSS properties only if a certain condition is true;

1
2
3
4
@media only screen and (max-width: 500px) {
    body {
           background-color: lightblue;
    }}                   

So it’s time to complete my blog and getting back to my coding work, it was really a unique experience to jot down the speech in words here. Do comment below if you want to know any further details about this interesting topic. Sayonara!!


Nimita Gajera , Sr. Magento Developer

SETU

About Emipro

Being an emerging leader in IT market since 2011, Emipro Technologies Pvt. Ltd. has been providing a wide range of business solutions in Odoo & Magento. We are pleased to have a large pool of contented customers with our meticulous work in the domain of ERP & e-Commerce. Our customers are companies of all sizes ranging from startups to large enterprises who realize that they need a professional internet solution to generate revenue streams, establish proper communication channels, to achieve desired goals and streamline business operations. [....] Read More

Our writings seems informative ?

Subscribe for our SETU and get more amazing stuff directly to your inbox!

Post Your Review

X

Your Review has been posted

0 Comment(s)