Responsive Web Design with jQuery
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
-
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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Ensuring Browser Support
- Checking the features the browser supports
- Defining fallback
- Feature detection tools
- Polyfill implementations
- Summary
-
Useful Responsive Plugins
- Useful Responsive Plugins
- Plugins for website structure
- Plugins for menu navigation
- Miscellaneous
- Summary
-
Improving Website Performance
- Improving Website Performance
- Using a content delivery network
- Making fewer HTTP requests
- Reducing the size of payloads
- Testing website performance
- Summary