PacktLib: Responsive Web Design with jQuery

Responsive Web Design with jQuery

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

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

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

Designing Responsive Tables

Responsive tables

Expandable responsive tables

Stackedtables

Horizontal overflow

Link to full-table

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

Summary

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

Summary

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

Summary

Ensuring Browser Support

Checking the features the browser supports

Defining fallback

Feature detection tools

Polyfill implementations

Summary

Useful Responsive Plugins

Plugins for website structure

Plugins for menu navigation

Miscellaneous

Summary

Improving Website Performance

Using a content delivery network

Making fewer HTTP requests

Reducing the size of payloads

Testing website performance

Summary

Index