Free Sample
+ Collection

Responsive Web Design with jQuery

Gilberto Crespo

With so many varied devices browsing the Internet, websites need to react correctly to many different situations. This book will show you how to use JQuery plugins to build responsive websites quickly, accurately, and easily.
RRP $26.99
RRP $44.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781782163602
Paperback256 pages

About This Book

  • Learn to swiftly design responsive websites by harnessing the power of jQuery
  • Get your responsive site ready to meet the device-agnostic world
  • Display highlighted content in a carousel and implement touch gestures to control them
  • Understand the mobile-first philosophy and put its concept into practice

Who This Book Is For

"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.

Table of Contents

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
Using wireframe tools
Exercise 1 – practicing mobile-first development in wireframes
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
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
Alternative solutions for the <picture> 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: Ensuring Browser Support
Checking the features the browser supports
Defining fallback
Feature detection tools
Polyfill implementations
Chapter 11: Useful Responsive Plugins
Plugins for website structure
Plugins for menu navigation
Chapter 12: Improving Website Performance
Using a content delivery network
Making fewer HTTP requests
Reducing the size of payloads
Testing website performance

What You Will Learn

  • Design responsive layouts for Grid systems
  • Analyze and choose the correct responsive menu navigation
  • Implement a mechanism to display the right image depending on the device requesting it
  • Use working designs and their code after tailoring them to your needs
  • Optimize your tables to display their information better
  • Implement responsive form elements
  • Build a responsive carousel slider including a touch function
  • Test your site thoroughly

In Detail

Owing to the different types of devices that offer Internet browsing today, responsive web designing has become a booming area. The heightened use of CSS3 and JavaScript libraries such as jQuery has led to shorter responsive web design times. You can now create a responsive website swiftly that works richly in any device a user might possess.

"Responsive Web Design with jQuery" is a practical book focused on saving your development time using the useful jQuery plugins made by the frontend community. Follow the chapters, and learn to design and augment a responsive web design with HTML5 and CSS3. The book presents a practical know how of these new technologies and techniques that are set to be the future of frontend web development.

This book helps you implement the concept of responsive web design in clear, gradual, and consistent steps, demonstrating each solution, and driving you to practice it and avoid common mistakes.

You will learn how to build a responsive website; right from its structure, conception, and adapting it to screen device width. We will also take a look at different types of menu navigation and how to convert text, images, and tables so as as to display them graciously on different devices. Features such as the carousel slider and form elements will also be covered, including the testing phase and the measures to create correct fallbacks for old browsers.

With "Responsive Web Design with jQuery", you will learn to create responsive websites quickly by using CSS3 and the incredible jQuery plugins. You will also learn to save your time by tailoring solutions created and tested by the community.


Read More