Home Web-development Responsive Web Design with jQuery

Responsive Web Design with jQuery

5 (1 reviews total)
By Gilberto Crespo
This course has been retired. Check out the alternatives below
    What do you get with a Packt Subscription?

  • Instant access to this title and 7,500+ eBooks & Videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
Access now Or Sign In
  1. Exploring Responsive Web Design
    • 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 <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
    • 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
Responsive Web Design with jQuery
Unlock this book and the full library FREE for 7 days
Start now