Now a day's, with unpredictable growth of smart-phone users, it becomes necessory that your business website should be mobile friendly to track more users and users can easily access your business website anywhere, anytime.
First talk about the term "Responsive" = Responsive means, you can see dynamic changes according to the device width in your website/layout.
Responsive = Responds according to the device width.
For making website responsive, you need to include viewport meta tag under the header section.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable="no">
viewport: Give instruction to the browser for the dimension of width.
width=device-width: width varies according to the different screen resolutions.
user-scalable="no": User could not play width the website by zooming out or zooming in.
Now, there is basically 2 ways to make your website responsive.
1:) CSS3 Media Queries : CSS3 introduce media queries, which helps you to assign particular css for particular width.
Tab Standard Width: 800px*1024px
Mobile devices width varies according to mainly brand names.
Generally Mobile Portrait width stands below 480px and Landscape width stands below 768px.
By the way it totally depends on the UI Developer, which width they personally prefer for making mobile friendly websites.
2:) Using Twitter Bootstrap: Bootstrap works on " Mobile first ". Purpose of behind developing a bootstrap, is your website should be mobile compatible.
Bootstrap Classes: Works on 12 grid structure.
col-lg => Greater than 1200px => Full HD { Large }
col-md => Varies 960px to 1200px => Desktop { Medium Layouts}
col-sm => Approx 768px => Tab { Small Layouts }
col-xs => For Mobiles { Extra Small Layouts }
You can know brief about Bootstrap from:
http://www.w3schools.com/bootstrap/
http://getbootstrap.com/
http://bootsnipp.com/
https://bootswatch.com/
http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description
3:) Using INK Framework: Here is another framework introduced "INK", similar to Bootstrap, which is used for making Responsive Websites Quickly using HTML, CSS and JS Structure.
INK works on 12 grid structure similar to Bootstrap.
Ink follow below classes:
First talk about the term "Responsive" = Responsive means, you can see dynamic changes according to the device width in your website/layout.
Responsive = Responds according to the device width.
For making website responsive, you need to include viewport meta tag under the header section.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable="no">
viewport: Give instruction to the browser for the dimension of width.
width=device-width: width varies according to the different screen resolutions.
user-scalable="no": User could not play width the website by zooming out or zooming in.
Now, there is basically 2 ways to make your website responsive.
1:) CSS3 Media Queries : CSS3 introduce media queries, which helps you to assign particular css for particular width.
Tab Standard Width: 800px*1024px
Mobile devices width varies according to mainly brand names.
Generally Mobile Portrait width stands below 480px and Landscape width stands below 768px.
By the way it totally depends on the UI Developer, which width they personally prefer for making mobile friendly websites.
2:) Using Twitter Bootstrap: Bootstrap works on " Mobile first ". Purpose of behind developing a bootstrap, is your website should be mobile compatible.
Bootstrap Classes: Works on 12 grid structure.
col-lg => Greater than 1200px => Full HD { Large }
col-md => Varies 960px to 1200px => Desktop { Medium Layouts}
col-sm => Approx 768px => Tab { Small Layouts }
col-xs => For Mobiles { Extra Small Layouts }
You can know brief about Bootstrap from:
http://www.w3schools.com/bootstrap/
http://getbootstrap.com/
http://bootsnipp.com/
https://bootswatch.com/
http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description
3:) Using INK Framework: Here is another framework introduced "INK", similar to Bootstrap, which is used for making Responsive Websites Quickly using HTML, CSS and JS Structure.
INK works on 12 grid structure similar to Bootstrap.
Ink follow below classes:
tinyfor screens widths up to 320px.smallfor screen widths between 321 and 640 pixels.mediumfor screen widths between 641 and 960 pixels.largefor screen widths between 961 and 1260 pixels.xlargefor screen widths above 1261 pixels.
You can know brief about INK from:
Thank you.
ReplyDeleteWhen I initially commented I appear to have clicked the -Notify me when new comments are added- checkbox and now whenever a comment is added I recieve 4 emails with the exact same comment. Is there an easy method you can remove me from that service? Cheers!
ReplyDeleteHi there would you mind letting me know which web host you're using? I've loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most. Can you suggest a good internet hosting provider at a fair price? Thanks a lot, I appreciate it!
ReplyDelete