O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive Web Design with jQuery

Book Description

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.

  • 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

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.

Table of Contents

  1. Responsive Web Design with jQuery
    1. Table of Contents
    2. Responsive Web Design with jQuery
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Exploring Responsive Web Design
      1. Understanding the concept of responsive web design
      2. Comparing responsive, fluid, and adaptive web
      3. Adapting the screen with media queries
      4. Mobile-first
      5. Using wireframe tools
      6. Exercise 1 – practicing mobile-first development in wireframes
      7. Summary
    9. 2. Designing Responsive Layouts/Grids
      1. Adapting the site using JavaScript
        1. Adapt.js
          1. How to do it
        2. Respond.js
          1. How to do it
      2. How percentage gives flexibility to the structure
        1. Converting pixel to percentage
      3. What is a responsive grid system?
        1. Responsive grid systems
          1. Fluid Baseline Grid system
          2. 1140 Grid
          3. Foundation4
      4. Photoshop grid templates
      5. Setting up the meta tag of viewport before starting
      6. Exercise 2a – creating the layout design for wireframes
      7. Exercise 2b – using Foundation4 Grid to structure our website
      8. Summary
    10. 3. Building Responsive Navigation Menu
      1. Designing a menu by improving its usability
      2. Most-used responsive navigation patterns
        1. Top nav
          1. How to do it...
        2. Footer anchor
          1. How to do it
        3. The toggle menu
          1. The Responsive Nav plugin
          2. How to do it
        4. The select menu
          1. The TinyNav.js jQuery plugin
          2. How to do it
        5. Footer-only
          1. How to do it
        6. Multi toggle
          1. How to do it
        7. Toggle and slide
          1. How to do it
        8. The off-canvas menu
          1. The jPanelMenu jQuery plugin
          2. How to do it
      3. Exercise 3 – customizing menu using the toggle menu solution
      4. Summary
    11. 4. Designing Responsive Text
      1. Understanding and converting the text to relative units
        1. Relative unit – percentage
        2. Relative unit – em
        3. Relative unit – rem
      2. Improving your element dimensioning using the box-sizing property
      3. Customizing the font family for beautiful responsive titles
        1. Using Font Squirrel tool generating
          1. How to do it
        2. The FitText plugin
          1. How to do it
        3. The SlabText plugin
          1. How to do it
        4. Lettering
          1. How to do it
          2. The Kern.js tool
          3. How to use it
        5. Responsive Measure
          1. How to do it
      4. Exercise 4 – customizing the homepage title
      5. Summary
    12. 5. Preparing Images and Videos
      1. Basic image resizing only using CSS
      2. Using image breakpoints
      3. How the picture tag works
      4. Control of art direction for responsive images
        1. Focal Point CSS framework
          1. How to do it
      5. Alternative solutions for the <picture> tag
        1. Foresight – selecting the right image to display depending on the screen size
          1. How to do it
        2. Picturefill – the solution that most closely resembles the picture tag
          1. How to do it
      6. Responsive background images by using jQuery plugins
        1. Anystretch – stretching your background easily
          1. How to do it
        2. Backstretch – creating a responsive background slideshow
          1. How to do it
      7. Dealing with high-density displays
        1. How to do it
        2. How to do it using Foresight
      8. Making responsive video elements
        1. FitVids – a quick win solution for responsive videos
          1. How to do it
      9. Exercise – creating different image versions for featured homepage images
      10. Summary
    13. 6. Building Responsive Image Sliders
      1. Responsive image sliders
        1. Elastislide plugin
          1. How to do it
            1. Example 1 – minimum of three visible images (default)
            2. Example 2 – vertical with a minimum of three visible images
            3. Example 3 – fixed wrapper with a minimum of two visible images
            4. Example 4 – minimum of four images visible in an image gallery
        2. FlexSlider2 – a fully responsive slider
          1. How to do it
            1. Example 1 – basic slider (default)
            2. Example 2 – slider with carousel slider as navigation control
            3. Example 3 – carousel setting minimum and maximum range
        3. ResponsiveSlides – the best of basic slides
          1. How do to it
            1. Example 1
            2. Example 2
            3. Example 3
        4. Swiper – performatic touch image slider
          1. How to do it
            1. Featured options
          2. Using the 3D flow style on Swiper
        5. Slicebox – a slice animation when using slide images
          1. How to do it
      2. Introducing touch gestures to user experience
      3. Implementing touch events with JavaScript plugins
        1. QuoJS – simple touch interaction library
          1. How to do it
        2. Hammer – a nice multitouch library
          1. How to do it
      4. Exercise 6 – creating an image slider using the Swiper plugin
      5. Summary
    14. 7. Designing Responsive Tables
      1. Responsive tables
      2. Expandable responsive tables
        1. How to do it
        2. Extending the plugin
      3. Stackedtables
        1. How to do it using the table from the previous example
      4. Horizontal overflow
        1. How to do it
        2. Header orientation flip
      5. Link to full-table
        1. How to do it
      6. Exercise 6 – creating a responsive table of prices using the FooTable jQuery plugin
      7. Summary
    15. 8. Implementing Responsive Forms
      1. Types and attributes of form inputs
      2. The autocomplete feature with Magicsuggest
        1. How to implement it
      3. The date and time pickers feature
        1. Pickadate – responsive date/time picker
          1. How to do it
      4. The tooltip feature
        1. Tooltipster – modern tooltip feature
          1. How to do it
      5. Responsive form using IdealForms
        1. How to implement it
      6. Exercise 8 – creating a contact form using the IdealForms framework
      7. Summary
    16. 9. Testing the Responsiveness
      1. Simulating a device using browser tools
        1. Using the Viewport Resizer website tool
        2. Using the Surveyor website tool
        3. Using the ScreenFly website tool
      2. Opera mobile emulator
      3. Tips for design testing of responsive websites
      4. Exercise 9 – let's test our website in different screen sizes
      5. Summary
    17. 10. Ensuring Browser Support
      1. Checking the features the browser supports
        1. CanIUse.com
        2. MobileHTML5.org
        3. QuirksMode.org
      2. Defining fallback
      3. Feature detection tools
        1. CSS Browser Selector +
          1. How to do it
        2. Modernizr
          1. YepNope.js
          2. html5shiv
      4. Polyfill implementations
        1. MediaElements.js
          1. How to do it
        2. SVG
          1. How to do it
            1. SVG as a background image
            2. SVG as the <svg> tag
            3. SVG as a simple <img> tag
        3. Respond.js
          1. How to do it
      5. Summary
    18. 11. Useful Responsive Plugins
      1. Plugins for website structure
        1. Creating simple responsive structures using Columns
        2. Using Equalize for element dimension adjustment
        3. Implementing a card website layout with Packery
      2. Plugins for menu navigation
        1. Creating a side menu with Sidr
        2. Knowing about EasyResponsiveTabstoAccordion
        3. Adding flexibility to your menu with FlexNav
      3. Miscellaneous
        1. SVGeezy
        2. Prefix free
        3. Magnific Popup
        4. Riloadr
        5. Calendario
      4. Summary
    19. 12. Improving Website Performance
      1. Using a content delivery network
      2. Making fewer HTTP requests
        1. Using conditional loaders
        2. Consolidating and minifying resources (JavaScript and CSS)
        3. CSS Sprites
          1. How to create sprites using SpriteCow
      3. Reducing the size of payloads
        1. Progressive JPEG
        2. Image optimization
        3. Simplifying pages with HTML5 and CSS3
      4. Testing website performance
        1. PageSpeed Insights
        2. YSlow
        3. WebPagetest
        4. Mobitest
      5. Summary
    20. Index