We all hear this word “responsive” in web design domain a lot nowadays. People highly recommend and go ga-ga over the importance of using responsive design. But newbies in the fields of professional blogging and webmastering often take a bit of time to get hold of all this buzz about what is a responsive website and how to develop one.
People often create their websites themes based on a image file (e.g. PSD). While all the website designs begin as an image, one should be very careful that their design conform to the principals of responsiveness and are mobile-friendly. Let’s take a dip into the subject and find out all about this issue.
Well, the responsiveness of a website refers to its ability to adjust display according to the device it is being seen on. Gone are the days when most of the people used to use desktop PCs –now there are all sorts of devices out there. Desktop, laptops, netbooks, tablets, mini tablets, e-book readers, smartphones and not-so-smart phones! Phew! Too many not to be concerned about!
All these devices have their own specific screen sizes and resolutions. A “rigid” website will not be able to adapt to (or lets say, respond to) the varying screen sizes. Appearance of horizontal scrollbar in browser is one of the most noticeable sign that the website is not responsive.
Website theme should be responsive and mobile-friendly.
In contrast, website with a responsive theme will be able to adapt and will make sure that the content is easily readable of any screen size.
Not really. A responsive theme will adjust display with the primary aim that the content of website could be used by the visitor. To achieve this goal, the website may hide some of it’s accessory components (like sidebar) and change size of other components (e.g. images, fonts etc.)
It is pretty easy to know how responsive is your website’s theme. Just open it on different sizes of computer monitors and mobile phone screens. If you see your website alright and all the content is readable, your website is responsive. If you do not have different kind of devices for testing your website, you can also use online test for responsiveness.
The general answer is that yes it is very important. But before you make a decision to do a makeover of your website to transform it in a responsive one –you should look at your web traffic data. From this data, try to find how much traffic your website is receiving from mobile devices. Usually websites are designed to be used on desktop / laptop –but if you’re getting significant traffic from devices like tablets / mobile phones –you should see how your website is looking on such devices.
At present, Asian websites are receiving an average of 27% of their traffic from mobile devices. This percentage would be much higher for websites in the areas like Europe and Americas because there mobile devices are relatively much more popular.
You’ll be surprised that responsiveness can be easily achieved using only CSS. Current CSS standards allow you to stylize your website for different screen types. This means that you can have separate CSS rules for different screen sizes. For example:
@media screen and (max-width:320px) {
.primary-sidebar { display: none } //hide sidebar when screen size is 320px or less
}
@media screen and (min-width:1024px) {
body { font-size: 12px } //set font size for screen sizes bigger than 1024px
}
Such customized CSS rules will control the look of your website depending upon the space available on screen.
If you decide to go for responsive design for your website or blog, you can expect to have the following advantages:
- Traffic will increase on your website because mobile device users will be able to use it and may decide to return for new information. If mobile users can not use a website’s content –they will not come back!
- If you use advertisements on your website for earning money online –your revenue may increase because a responsive website will be able to nicely show ads on mobile devices also.
- You will not need to develop different versions of your website or blog for different platforms. This will save time on maintenance as well because more versions demand more maintenance time.
- If you develop more than one versions for different types of devices, you face the danger of Google indexing duplicate URLs. Different URLs that point to the same content are called Duplicate URLs. Google puts a heavy penalty on duplicate URLs believing that the content too is duplicate. Responsive website design protects you from such a penalty.
- You would not need to worry about correct agent detection because the same website will work for all the browser agents.
- URL sharing on social media websites will become easier because every page on your website will have only one URL associated with it.
There are no significant disadvantages of responsive design except that the extra CSS rules might increase the size of CSS file and as a result download time will increase. But with faster internet becoming available all over the globe –I don’t think this poses any real problem.
In responsive design, different images are not used for different screen sizes. Instead, the same image gets resized through CSS to fit on the device’s screen. So, mobile devices will also have to download the same high resolution images that are served on desktop connections.
Now, we know that the responsive design may put a little extra burden on mobile internet connection, it is important that you‘re able to test how fast your current (responsive or non-responsive) design is working. The best online tool to test this out is PageSpeed from Google. This tool can score your website both on desktop and mobile devices.
Most of the Google’s websites are now responsive. For example, Chromebook website uses responsive design. But the Google is a pioneering company of anything related with Internet. As more and more other businesses are recognizing the importance of responsive design, websites are shifting to this new paradigm. Look at the websites of Wendy’s restaurant chain, inbound marketing company HubSpot and newspaper Boston Globe to get some inspiration.
Yes, there are many major websites that have not yet embraced responsive design. The examples include CNN and BBC. These are massive websites and a complete redesign to incorporate responsiveness may require significant investment. That could be the reason why these media houses are yet to go responsive.
No, it is not really expensive. If you own a website/blog based on WordPress, there are a lot of responsive themes available. The default theme of WordPress (i.e. TwentyThirteen) is also designed to be responsive. Most of the free themes offered by WordPress and Blogger are responsive. But if you are using a third party theme -you need to check its responsiveness.
Leave a Reply