Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 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; Chapter 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 percentageWhat 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; Chapter 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
Exercise -- creating different image versions for featured homepage images
Foresight -- selecting the right image to display depending on the screen sizeHow 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
The select menuThe 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; Chapter 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 generatingHow 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; Chapter 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
0
8
8
8
8
8
Responsive Web Design with jQuery follows a standard tutorial-based approach, covering various aspects of responsive web design by building a comprehensive website.""Responsive Web Design with jQuery"" is aimed at web designers who are interested in building device-agnostic websites. You should have a grasp of standard HTML, CSS, and JavaScript development, and have a familiarity with graphic design. Some exposure to jQuery and HTML5 will be beneficial but isn't essential