2h 55m – Intermediate
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
Topics include:
What is responsive design?
Installing the Anaximander example theme
Deciding what screen sizes to target
Designing menus
Adding responsive images and video
Using CSS media queries to apply different styles
Handling sidebars on mobile displays
Dealing with footer widgets
Installing jQuery Masonry
Introduction – 4m 5s
Welcome – 1m 4s
Using the exercise files – 1m 27s
What you should know before watching this course – 1m 34s
1. Why Mobile Matters – 8m 36s
What is responsive design? – 4m 16s
The different faces of WordPress on mobile – 1m 55s
Exploring the finished Anaximander theme – 2m 25s
2. Starting with a Solid Theme – 9m 38s
Getting and installing the Anaximander theme – 1m 53s
Configuring basic theme options – 7m 45s
3. Design First, Then Develop – 23m 51s
Deciding what screen sizes to design for – 4m 11s
Thinking responsively: Designing for many different screen sizes – 6m 23s
Visualizing content realignment for better markup – 4m 35s
Designing menus – 4m 52s
Adding responsive images and videos – 3m 50s
4. Using Media Queries – 26m 8s
What are media queries and how do they work? – 4m 18s
Exploring CSS3, progressive enhancement, and graceful degradation – 3m 27s
Understanding best practices for media queries – 3m 57s
Creating a responsive frame – 5m 12s
Customizing media queries with the Chrome Developer Tools – 5m 28s
Taking device width into account – 3m 46s
5. Creating a Responsive Header – 11m 1s
Resizing the site title and the description – 8m 22s
Adding media queries to the header – 2m 39s
6. Creating a Responsive Menu – 11m 22s
Making the menu responsive – 3m 35s
Creating a different menu design for small screens – 7m 47s
7. Creating a Responsive Main Area – 19m 22s
Making a responsive single-post layout – 6m 11s
Making images responsive – 4m 37s
Making videos responsive by including FitVids – 8m 34s
8. Creating a Responsive Sidebar – 7m 45s
Making the sidebar responsive – 5m 10s
Hiding sidebars on mobile – 2m 35s
9. Creating a Responsive Footer – 7m 28s
Dealing with footer widgets – 5m 11s
Adding navigation links that return to the top of the page – 2m 17s
10. Adding a Responsive Featured Content Slider – 12m 54s
Using FlexSlider to create a responsive slider – 6m 2s
Creating a loop to show sticky posts in a featured slider – 6m 52s
11. Making a Responsive Index Page That Dynamically Reorganizes with Masonry – 24m 37s
What is jQuery Masonry? – 3m 41s
Installing jQuery Masonry – 4m 45s
Configuring the index page with Masonry – 7m 0s
Using CSS to finalize the Masonry layout – 6m 17s
Adding media queries to the Masonry index – 2m 54s
Next steps – 9m 11s
Exploring hidden features of the Anaximander theme – 5m 51s
Where to go from here – 3m 20s