Responsive Designing Tips and Plugins

Responsive Design Planning

A common snag in the responsive planning process comes when choosing what device widths to design to..

http://bradfrost.github.io/this-is-responsive/patterns.html http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning


Meta Tags
Supported Meta Tags , Apple-specific meta tags are described here..

https://developer.apple.com/library/safari/documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html

Media Query
The orientation media query , Media queries will become extremely important in the near future, when we have to build websites that work on any device resolution from 300px to 1280px or more.

http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html

For Example we can use between these pixel in media queries:

239px - 319px
320px - 499px
500px - 767px
768px - 959px
960px - 1023px
1024px - 1199px
1200px - 1280px
1281px - 1350px
1351px - 5000px

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

CSS Media Queries for iPads & iPhones

Mobile Device width and heights and pixel ratios


Image Resizer

This jQuery plugin makes it easy to have images resize horizontally and vertically to fit the available container width.

http://responsiveimages.org/#implementation
http://www.html5rocks.com/en/mobile/high-dpi/#toc-bg

http://code.google.com/p/jquery-imagefit-plugin/

For Retina Images:
http://www.kylejlarson.com/blog/2012/creating-retina-images-for-your-website/
http://www.sitepoint.com/css-techniques-for-retina-displays/
http://imulus.github.io/retinajs/

Lazy Load Plugin for jQuery
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. 

http://www.appelsiini.net/projects/lazyload

Top Popular jquery plugins
Very Very most usable resource of Jquery plugins...

http://www.jqueryscript.net/popular/

http://speckyboy.com/2014/12/08/jquery-plugins-2014/

Browser Hacks
Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS

http://browserhacks.com/

Custom Elements
An exciting feature of the HTML specification that’s been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

http://blog.teamtreehouse.com/create-custom-html-elements-2
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/


Units
As the web continues to grow, the demand for new solutions will also continue to grow. Therefore, as web designers and front end developers, we have no choice but to know our toolset, and know it well.

http://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573
http://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems--webdesign-12321


Icons
http://modernuiicons.com/


Responsive Table
http://johnpolacek.github.io/stacktable.js/
http://codepen.io/dudleystorey/pen/Geprd