Responsive web design – How to keep it simple?
Web designing was never a simple task. And now days intricacies have increased with increase in variety of devices. Also, being a good service provider you must take care of visitors coming to your website from different devices. So, it has become mandatory to have responsive web design.
For instance, if websites are designed keeping a smartphone in mind; design comes out completely compatible for mobile version, then it will surely run smoothly on other devices as well. So mobile users should come first. Here are some quick fixes that you should make to your website to be responsive.
Keep it simple
The simpler your design is the responsive it is. It is always good to use simple mechanisms like layout, navigation, menu options etc. Avoid having fancy javascript or flash. Do not use unnecessary absolute positioning, that would make the site adjustment complicated.
3 versions of web design
You should have minimum 3 versions of your web design that can easily accommodate on different screen sizes. Make sure you have chosen to keep important content visible on different 
screen sizes. 320px-480px, 480px-768px, 768px+ are preferable sizes to have.
HTML and content for different sizes
It is advisable to have same content and HTML for all sizes of resolution that you are going to design. This becomes sometimes tricky for the coder to do this, but it is very important to make the design adaptable for different devices
Defining column width
Using percentage to define column width would be good practice.
- xtra small devices use .col-xs-*.
- Small devices use .col-sm-*.
- Medium devices use .col-md-*.
- Large devices use .col-lg-*
Here, the asterisk character has to be replaced with the number to make column of particular width. This helps a lot with the responsiveness.
Flexible images
If you are designing different versions for different devices, you must define the size. Otherwise, use .img-responsive to make any image responsive.
Size of clickable area
For delivering a good user experience, it is very important to keep clickable areas of appropriate size. Whenever your website shifts from desktop to tablet or phone, the links should change into icons with at least 44px X 44px. Padding can be used around the link to expand the clickable area.
Website loading speed
Portable devices access internet via wireless networks or mobile networks. So it is very important to have swift loading speed of website.
- Minify stylesheets and script so that browser can parse them fast.
- Minimise http requests
- Reducing the image size
Scalable background images
The CSS3 specification has an attribute named background-size. It is used to define the size of background images. It can be a size in pixels, or it can use some of the reserved keywords. The cover keyword scale the background image (while preserving original proportions) to be as large as possible so that the background positioning area is completely covered by the background image.
html {
background: url(bg.jpg) no-repeat center center fixed;
-background-size: cover;
-background-size: cover;
-background-size: cover;
background-size: cover;
}
These are a few tricks that would help in making websites transit from one device to another seamlessly.
