One of the popular contemporary topic among web design and development is responsive layouts web design. Responsive layouts allows the web designers to design attractive websites which are device friendly and thereby increasing the number of users or audience of the website. Users can view the same website through wide range of devices such as PCs, Smart phones and tablets. Responsive web design technology is an art which gives convenience to users and gives better aesthetics to websites on different devices. Responsive design offer many advantages over non responsive layouts. Some of the major advantages are:
Adaptive to Multi-devices
As the numbers of mobile devices are fast increasing and probably is going to exceed the human population, the usage of mobile devices is never going to decline. Users started accessing websites through different devices and they expect the same user experience and functionality. They can be very easily achieved by using Responsive layouts or with the help of responsive web design. Responsive layouts are multi device adaptive i.e. responsive layouts adapt to screen of the device such as iphone or tablet and website can be easily accessed and browsed with it.
Easy Modification and maintenance
With the advent of responsive web design, using different websites with different urls for mobile devices and PC is becoming outdated. Responsive layouts are used so that there is no need for keeping a sub domain for mobile devices making it easy for maintenance and modification.
Better Conversion Rates
With the type and number of devices used for accessing the website increased, with the marketability of website is increased, business or sales of goods and services of the website will be increased. There is more chance of converting the mere visitors of website to customers. There by it can boost the sales
Better User experience
Multi-device adaptive or responsive design will enhance the user experience. When the user is accessing the website through different device, with a properly designed responsive layout, there will be no chance of any design issues which will affect the usability of the website and the user can have good overall experience irrespective of the device with which is browsed. Responsive wed design also responds with the change in browser window width, hence it is one of the main reasons for naming it so.
Improved Website performance
With all these advantages of responsive web design, the whole website performance will be increased which will aid to the goal and functioning of the website.
One of the major disadvantages of the responsive web design is that it might make the page load slower. Though it enhances SEO and Google supports it, the site ranking won’t be negatively affected without responsive web design.
Converting a fixed width, non-adaptive site to a multi-device adaptive or responsive site is not an easy task. This process might take good amount of time required to development the website. It can vary from from 40% to 100% of the time taken to develop the web site. This process of converting fixed with to responsive can be done comparatively easier with the help of JQuery and its plugins. In the web, there are a lot of JQuery plugins which help us to optimize the website and aid in converting a fixed width site to a responsive website. With the help of JQuery plug-ins flexibilities of responsive web design can be achieved.
The basic logic behind the jQuery plug-in are checking for the dimensions of the document or window and making necessary changes to style of elements such as altering the width, hiding and showing elements etc.We may need to change the size of images in pages or image slider or even change the size of fonts used in the website.
An example for developing a simple and basic jQuery plug-in that adds a responsive feature to website is described below:
Open a new file in editor and type the following:
(function($) {
$.fn.beflexible = function(){
return this.each(function(){
$(window).on("resize",function(){
var origHeight=697;
var currHeight=$(window).height();
var em=Math.round(7*(currHeight/origHeight));
var emstring=em+"em";
$(".style").css("font-size",emstring);
});
});
}
}(jQuery));
Save it as “jquery.fontsize.js”.Save it in the same location where .html file is residing.
Add the following <script type="text/javascript" src="jquery.fontresize.js"></script>in the <head></head> tags.
Also add the following in the head of document:
<script type="text/javascript">
$(document).ready(function(){
$("#yourid").beflexible();
});</script>
Add the following inside <body></body> tags
<div id="yourid" class="yourstyle">Hello,how are you?</div>
Save the document. Open the page in browser and Resize the window and see the changes. That’s it!
Thank you for reading and please share your valuable comments.
