Responsive design was a term coined by Ethan Marcotte. He have a blog which is the unstoppablerobotninja.com .
As you know in he coming years of internet, mobile users are going to
govern the revenue rates of publishers. The number of mobile phones in
developing countries are going in high rate and the number of laptop
rates are going down. You can read the economic times review about "Number of mobile handsets sold in India to reach 251 million units next year: Gartner"
by Indu Nandakumar, ET Bureau at Oct 11, 2012. The article says that
the number of Samsung mobile phones expected to sell in the 2013 is 251
million units.
Responsive design is always an added bonus to your website. Responsiveness increases click rate, reduces bounce rate and make your site attractive to visitors from different devices. How one can create a responsive design? It is not easy to create a responsive design yourself, if you are not a pro in it.
May be you have seen some codes like this;
I can share you some good article written about making your website responsive and some tools.
First to some good articles about responsiveness.
Responsive design is always an added bonus to your website. Responsiveness increases click rate, reduces bounce rate and make your site attractive to visitors from different devices. How one can create a responsive design? It is not easy to create a responsive design yourself, if you are not a pro in it.
on pc
May be you have seen some codes like this;
or like this
/* Default styles first then media queries */
@media screen and (min-width: 400px) {...}
@media screen and (min-width: 600px) {...}
@media screen and (min-width: 1000px) {...}
@media screen and (min-width: 1400px) {...}
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1400px)"These codes push the website to perform different layouts in different pixels.
I can share you some good article written about making your website responsive and some tools.
| on Mobile |
Tutorial 1
In http://learn.shayhowe.com/ i have seen article about RESPONSIVE DESIGN. I really like it because of the simplicity in the article. The article share a responsive website called the food sense and
its performance. It also talk about Flexible Embedded Media, Combining
Viewport Values, , Viewport Resolution, Viewport Scale, Viewport Height
& Width, Mobile First, Media Query Browser Support, Orientation
Media Feature, Aspect Ratio Media Features, Pixel Ratio Media
Features,Resolution Media Feature,Logical Operators in Media Queries
Flexible Grid and fixed grid.
Tutorial 2
This article is found in http://alistapart.com and it had about 103
comments.This article discusses asic things like what is media query
etc. You can view it here, MOBILE TO WEBSITE AND VICE VERSA
Other Tutorials
TOOLS FOR RESPONSIVENESS
You
need check the responsiveness of your website. For that you have to use
free responsive checkers available in the internet. For making your
work easy, i have collected the best free ones and made a list which you
can access here.
List Of Top 9 Best Responsive Website / Blog Checkers Online
Hope you got a clear image about the template and layout of the website.
The you can get how your website speed distribute in pc as well as mobile by going to this link.
Hope this helps. Subscribing ship me this for cool posts like this. You can also follow us on fb, twitter and Google plus.
Post a Comment