Responsive Web Design with jQuery -- Table of Contents -- Responsive Web Design with jQuery -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 1. Exploring Responsive Web Design -- Understanding the concept of responsive web design -- Comparing responsive, fluid, and adaptive web -- Adapting the screen with media queries -- Mobile-first -- Using wireframe tools -- Exercise 1 - practicing mobile-first development in wireframes -- Summary -- 2. Designing Responsive Layouts/Grids -- Adapting the site using JavaScript -- Adapt.js -- How to do it -- Respond.js -- How to do it -- How percentage gives flexibility to the structure -- Converting pixel to percentage -- What is a responsive grid system? -- Responsive grid systems -- Fluid Baseline Grid system -- 1140 Grid -- Foundation4 -- Photoshop grid templates -- Setting up the meta tag of viewport before starting -- Exercise 2a - creating the layout design for wireframes -- Exercise 2b - using Foundation4 Grid to structure our website -- Summary -- 3. Building Responsive Navigation Menu -- Designing a menu by improving its usability -- Most-used responsive navigation patterns -- Top nav -- How to do it... -- Footer anchor -- How to do it -- The toggle menu -- The Responsive Nav plugin -- How to do it -- The select menu -- The TinyNav.js jQuery plugin -- How to do it -- Footer-only -- How to do it -- Multi toggle -- How to do it -- Toggle and slide -- How to do it -- The off-canvas menu -- The jPanelMenu jQuery plugin -- How to do it.

Exercise 3 - customizing menu using the toggle menu solution -- Summary -- 4. Designing Responsive Text -- Understanding and converting the text to relative units -- Relative unit - percentage -- Relative unit - em -- Relative unit - rem -- Improving your element dimensioning using the box-sizing property -- Customizing the font family for beautiful responsive titles -- Using Font Squirrel tool generating -- How to do it -- The FitText plugin -- How to do it -- The SlabText plugin -- How to do it -- Lettering -- How to do it -- The Kern.js tool -- How to use it -- Responsive Measure -- How to do it -- Exercise 4 - customizing the homepage title -- Summary -- 5. Preparing Images and Videos -- Basic image resizing only using CSS -- Using image breakpoints -- How the picture tag works -- Control of art direction for responsive images -- Focal Point CSS framework -- How to do it -- Alternative solutions for the tag -- Foresight - selecting the right image to display depending on the screen size -- How to do it -- Picturefill - the solution that most closely resembles the picture tag -- How to do it -- Responsive background images by using jQuery plugins -- Anystretch - stretching your background easily -- How to do it -- Backstretch - creating a responsive background slideshow -- How to do it -- Dealing with high-density displays -- How to do it -- How to do it using Foresight -- Making responsive video elements -- FitVids - a quick win solution for responsive videos -- How to do it -- Exercise - creating different image versions for featured homepage images -- Summary -- 6. Building Responsive Image Sliders -- Responsive image sliders -- Elastislide plugin -- How to do it -- Example 1 - minimum of three visible images (default) -- Example 2 - vertical with a minimum of three visible images.

Example 3 - fixed wrapper with a minimum of two visible images -- Example 4 - minimum of four images visible in an image gallery -- FlexSlider2 - a fully responsive slider -- How to do it -- Example 1 - basic slider (default) -- Example 2 - slider with carousel slider as navigation control -- Example 3 - carousel setting minimum and maximum range -- ResponsiveSlides - the best of basic slides -- How do to it -- Example 1 -- Example 2 -- Example 3 -- Swiper - performatic touch image slider -- How to do it -- Featured options -- Using the 3D flow style on Swiper -- Slicebox - a slice animation when using slide images -- How to do it -- Introducing touch gestures to user experience -- Implementing touch events with JavaScript plugins -- QuoJS - simple touch interaction library -- How to do it -- Hammer - a nice multitouch library -- How to do it -- Exercise 6 - creating an image slider using the Swiper plugin -- Summary -- 7. Designing Responsive Tables -- Responsive tables -- Expandable responsive tables -- How to do it -- Extending the plugin -- Stackedtables -- How to do it using the table from the previous example -- Horizontal overflow -- How to do it -- Header orientation flip -- Link to full-table -- How to do it -- Exercise 6 - creating a responsive table of prices using the FooTable jQuery plugin -- Summary -- 8. Implementing Responsive Forms -- Types and attributes of form inputs -- The autocomplete feature with Magicsuggest -- How to implement it -- The date and time pickers feature -- Pickadate - responsive date/time picker -- How to do it -- The tooltip feature -- Tooltipster - modern tooltip feature -- How to do it -- Responsive form using IdealForms -- How to implement it -- Exercise 8 - creating a contact form using the IdealForms framework -- Summary -- 9. Testing the Responsiveness -- Simulating a device using browser tools.

Using the Viewport Resizer website tool -- Using the Surveyor website tool -- Using the ScreenFly website tool -- Opera mobile emulator -- Tips for design testing of responsive websites -- Exercise 9 - let's test our website in different screen sizes -- Summary -- 10. Ensuring Browser Support -- Checking the features the browser supports -- CanIUse.com -- MobileHTML5.org -- QuirksMode.org -- Defining fallback -- Feature detection tools -- CSS Browser Selector + -- How to do it -- Modernizr -- YepNope.js -- html5shiv -- Polyfill implementations -- MediaElements.js -- How to do it -- SVG -- How to do it -- SVG as a background image -- SVG as the tag -- SVG as a simple tag -- Respond.js -- How to do it -- Summary -- 11. Useful Responsive Plugins -- Plugins for website structure -- Creating simple responsive structures using Columns -- Using Equalize for element dimension adjustment -- Implementing a card website layout with Packery -- Plugins for menu navigation -- Creating a side menu with Sidr -- Knowing about EasyResponsiveTabstoAccordion -- Adding flexibility to your menu with FlexNav -- Miscellaneous -- SVGeezy -- Prefix free -- Magnific Popup -- Riloadr -- Calendario -- Summary -- 12. Improving Website Performance -- Using a content delivery network -- Making fewer HTTP requests -- Using conditional loaders -- Consolidating and minifying resources (JavaScript and CSS) -- CSS Sprites -- How to create sprites using SpriteCow -- Reducing the size of payloads -- Progressive JPEG -- Image optimization -- Simplifying pages with HTML5 and CSS3 -- Testing website performance -- PageSpeed Insights -- YSlow -- WebPagetest -- Mobitest -- Summary -- Index.