Importance of responsiveness of an application in this digital era

Almost every person who uses technology now a days will definitely be using at least two digital devices with different screen sizes. There are a hell lot of devices with different screen sizes available out there in the market. So, it's very important for a developer to make sure that all his applications will respond to the different devices with different screen sizes.

Why to make it Responsive?

There a lot of reasons why you need to keep your application responsive and fit neatly in all screen sizes. It helps your application to look awesome in the small screens also. More people can access your application. You can earn more traffic.

What happens if the application is not responsive?

Now a days people are using more handy mobile devices over big chunky screens. Mobile devices are very flexible to use and you can access the internet from any where and any time and you can carry it in your pockets. This make the users to use mobile phone more than laptops or desktops.

If you as a developer don't develop your application which can run same as it do in the big screen devices you are loosing almost 60% of the traffic everyday.

How to make it responsive?

This is the era where there are hell lot of libraries and frameworks that makes the life of a developer very easy. There are so many developers who are developing awesome libraries and frameworks for developers. I list the most used one's below how you can make it responsive.

• BOOTSTRAP - Awesome library built by the twitter employees which is now trending technology for the responsive websites.
• CSS3 Media Queries - This is the most awesome feature added in the CSS3. And the Bootstrap which I mentioned above is also built with the help of CSS3 Media Queries feature.

These are the main technologies that are trending for the responsiveness in present days. But, we need to see what next!

CSS3 Media Queries

In the present days if you are a web developer, while developing, you need to concern about all the different screen sizes available in the market. There are hell lot of devices which are different screen resolutions creating a big headache for the developers. To accomplish this task generally what developers do is, using JavaScript and render different style sheets for different screen resolutions. But, still it's will become very big code and files become very large size. To avoid this there are Media Queries in CSS3. You just need to write them in your css file they will be written like this.

/*SmartPhone (Portrait and Landscape)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){

your styling goes here
}

/*SmartPhones (Landscape)*/
@media only screen and (min-width:321px){

your styling goes here
}

/*SmartPhones (Portrait)*/
@media only screen and (max-width:320px){

your styling goes here
}

/*Ipads (Portrait and Landscape)*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px){

your styling goes here
}

/*Ipads Landscape*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {

your styling goes here
}

/*Ipads Portrait*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {

your styling goes here
}

/*Desktops and laptops*/
@media only screen and (min-width:1224px){

your styling goes here
}

/*Large screens*/
@media only screen and (min-width:1824px) {

your styling goes here
}

I recommend you to research about them and learn more. If you don't want to use this there is another option out there that is BOOTSTRAP. Bootstrap is the Css and JavaScript library created by two employees in Twitter. This is the best option to create responsive webpages. you check out their documentation at www.getbootstrap.com