PacktLib: Responsive Web Design with jQuery

Responsive Web Design with jQuery


About the Author

About the Reviewers


Exploring Responsive Web Design

Understanding the concept of responsive web design

Comparing responsive, fluid, and adaptive web

Adapting the screen with media queries


Using wireframe tools

Exercise 1 – practicing mobile-first development in wireframes


Designing Responsive Layouts/Grids

Adapting the site using JavaScript

How percentage gives flexibility to the structure

What is a responsive grid system?

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


Building Responsive Navigation Menu

Designing a menu by improving its usability

Most-used responsive navigation patterns

Exercise 3 – customizing menu using the toggle menu solution


Designing Responsive Text

Understanding and converting the text to relative units

Improving your element dimensioning using the box-sizing property

Customizing the font family for beautiful responsive titles

Exercise 4 – customizing the homepage title


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

Alternative solutions for the tag

Responsive background images by using jQuery plugins

Dealing with high-density displays

Making responsive video elements

Exercise – creating different image versions for featured homepage images


Building Responsive Image Sliders

Responsive image sliders

Introducing touch gestures to user experience

Implementing touch events with JavaScript plugins

Exercise 6 – creating an image slider using the Swiper plugin


Designing Responsive Tables

Responsive tables

Expandable responsive tables


Horizontal overflow

Link to full-table

Exercise 6 – creating a responsive table of prices using the FooTable jQuery plugin


Implementing Responsive Forms

Types and attributes of form inputs

The autocomplete feature with Magicsuggest

The date and time pickers feature

The tooltip feature

Responsive form using IdealForms

Exercise 8 – creating a contact form using the IdealForms framework


Testing the Responsiveness

Simulating a device using browser tools

Opera mobile emulator

Tips for design testing of responsive websites

Exercise 9 – let's test our website in different screen sizes


Ensuring Browser Support

Checking the features the browser supports

Defining fallback

Feature detection tools

Polyfill implementations


Useful Responsive Plugins

Plugins for website structure

Plugins for menu navigation



Improving Website Performance

Using a content delivery network

Making fewer HTTP requests

Reducing the size of payloads

Testing website performance