Responsive Web Design with jQuery Review
If you’re looking for a plethora of plugins, scripts, shims to add responsiveness this book is for you, but be prepared to figure out the differences yourself. The book is written more like a reference book with short examples and brief explanation of many jQuery plugins.
I read the title several times after reading the content and can say that it is not the best fit. My initial thinking led me to believe this would be more about coding with jQuery, however this is not the case. The book is geared more for web designers that do not code with jQuery. Most of the examples include jQuery with little explanation so you can get similar information available in the documentation of the individual plugins. Possibly the worst part is that the author rarely distinguishes pros and cons of individual plugins doing nearly identical tasks. There’s a lack of diagrams and screenshots so you have to implement the examples to see how they work. On the other hand the author also lists many tools available via websites for wire-framing, placeholder creation, pixel conversions, and grid systems.
I would recommend this book for web designers that know html, css, jquery syntax and want to make their static designs responsive, elastic, or fluid with high browser compatibility. Without knowledge of jQuery basics it’s difficult to customize the plugins made for responsive design. Near the end of the book there is mention of performance and ideally you want the minimum amount of http GETS to load your scripts. However with all the plugins available your design will easily accumulate 7+ js files.
You won’t become an expert in “responsive design” nor will you know how the plugins really work behind the scenes, but it’s a good place to start.
Responsive Web Design with jQuery
Available at http://www.packtpub.com/responsive-web-design-with-jquery/book
Here are some of the better resources from the book:
CHAPTER 1
Wire-framing with wireframe.cc
CHAPTER 2 – Layouts
Conversion tool – http://responsv.com/flexible-math
Grid systems
Three-column folding layout
fluidbaselinegrid.com
Uses Nomalize.css to fix browser inconsistencies
1140 Grid
cssgrid.net
12-columns up to 1280px
Gutters based in percentage
Foundation4 – http://foundation.zurb.com
Mobile first, Normalize and Modernizr scripts, limited IE8 support.
Image Place Holder Generator
http://placehold.it/
CHAPTER 3 – Menus
The decimal code ☰ is a symbol to represent menus because it shows a symbol with three lines.
” \0025Bc” (down arrow) and ” \0025C0″ (before arrow)
Toggle navigation js – responsive-nav.com
Converts UL OL lists to drop-downs for small screens – tinynav.viljamis.com
The jPanelMenu plugin, http://jpanelmenu.com is a lightweight JavaScript solution which hides the menu
CHAPTER 4 – Typography
Font size unit conversion tool – http://pxtoem.com
Scale text to full width of parent element – http://fittextjs.com
Individual letter control – https://github.com/davatron5000/Lettering.js
Kern.js is an online tool that matches perfectly with Lettering.js because it offers
a great interface between clicking-and-dragging.
CHAPTER 5 – Images and Videos
Focal Point cropping with CSS – https://github.com/adamdbradley/focal-point
Selecting the right image to display – https://github.com/adamdbradley/foresight.js
This engine is used to change the suffix of the filename.
Picturefill is a JavaScript plugin for responsive images which uses the span tag. Picturefill natively supports HD (Retina) image replacement. – https://github.com/scottjehl/picturefill
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block-level element.
https://github.com/danmillar/jquery-anystretch
For background slideshows https://github.com/srobbin/jquery-backstretch
CHAPTER 6 – Image Sliders
Elastislide, FlexSlider, ResponsiveSlides, Swiper, and Slicebox.
Touch events QuoJS – touch library https://github.com/soyjavi/QuoJS
extra options at http://quojs.tapquo.com/
Hammer is a jQuery lightweight library for multitouch gestures with only 3 KB when gzipped.
https://github.com/EightMedia/hammer.js
CHAPTER 7 – Responsive Tables
FooTable with extensibility, hide less important columns with data-role properties and breakpoints
https://github.com/bradvin/FooTable
http://fooplugins.com/footable-demos
Stackedtable is a jQuery plugin that offers another option for our responsive table which is available to download from
http://johnpolacek.github.io/stacktable.js/
Horizontal Overflow – http://zurb.com/playground/responsive-tables
CHAPTER 8 – Responsive Forms
Autocomplete with Magic Suggest for drop-downs – http://nicolasbize.github.io/magicsuggest/
Responsive calender Pickadate – http://amsul.ca/pickadate.js/
IdealForms – build html5 forms with validation and keyboard support – https://github.com/elclanrs/jq-idealforms
CHAPTER 9 – Testing the Responsiveness
Viewport resizer tool – http://lab.maltewassermann.com/viewport-resizer
Breakpoint tester – http://surveyor.io
Screenfly – https://quirktools.com/screenfly
Compatibility Chart for HTML5, CSS3 – http://caniuse.com OR http://mobilehtml5.org/
CHAPTER 10 – Browser Support
Polyfilles are plugins, or shims, that enable the use of new or future technologies in older browsers, e.g. web sql databases, CSS3 transformations etc.
yepnope (bundled with modernizr) is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.
https://github.com/SlexAxton/yepnope.js/archives/master
CHAPTER 11
Calendario is available at https://github.com/codrops/Calendario
Create sprites using SpriteCow – http://www.spritecow.com
PNG compression – http://pnggauntlet.com
Speed Test for Mobile – http://mobitest.akamai.com