6h 1m – Intermediate
Following the concepts introduced in Responsive Design Fundamentals, senior author James Williamson demonstrates the practical applications of responsive design and shows how to enrich the appearance and behavior of your website across multiple devices. First, discover how to plan your design and take advantage of CSS media queries to create multiple layouts. Then make your site navigation respond to changing screen sizes with CSS and jQuery, and display media like images and video fluidly. Plus, discover how to take advantage of mobile capabilities like touch events and HTML5 forms to enhance the experience of mobile visitors. James also shows how to effectively manage resources and optimize the performance of your site.
Topics include:
Creating mockups
Structuring page regions
Defining default styles and media queries
Building desktop, tablet, and mobile layouts
Structuring and styling menus
Dynamically replacing menus
Creating a responsive image gallery
Adding phone functionality
Testing responsive sites
Introduction – 9m 38s
Welcome – 1m 6s
Using the exercise files – 1m 59s
Supporting older versions of Internet Explorer – 2m 56s
Exploring the finished project – 3m 37s
1. Planning Responsive Designs – 47m 3s
Content planning – 11m 21s
Creating mockups – 10m 38s
Planning responsive UX – 7m 24s
Structuring page regions – 6m 46s
Structuring content for multiple devices – 10m 54s
2. Building Responsive Layouts – 1h 18m
Controlling the viewport – 4m 59s
Defining default styles – 11m 18s
Determining content breakpoints – 6m 49s
Defining media queries – 7m 41s
Building the basic desktop layout – 8m 5s
Building the basic tablet layout – 6m 30s
Building the basic mobile layout – 5m 3s
Refining desktop layouts – 10m 25s
Refining tablet layouts – 9m 59s
Refining mobile layouts – 7m 49s
3. Responsive Navigation – 2h 0m
Defining a responsive navigation strategy – 5m 43s
Structuring basic menus – 7m 7s
Styling basic menus – 10m 29s
Using CSS sprites in menus – 7m 53s
Structuring complex menus – 9m 42s
Using jQuery for menu behavior – 9m 34s
Responding to changes in screen size – 4m 41s
Minimizing menus for small screens – 9m 31s
Expanding submenus through touch – 5m 42s
Replacing hover styling with touch – 12m 3s
Resetting menus for large screens – 7m 17s
Preventing conflicts – 5m 28s
Providing fallbacks – 5m 5s
Dynamically replacing menus – 5m 39s
Converting menus to select elements – 9m 3s
Converting select elements to menus – 5m 27s
4. Creating Responsive Media – 56m 59s
Creating fluid images – 11m 10s
Making video fluid – 6m 47s
Using CSS in place of images – 9m 52s
Image gallery overview – 3m 8s
Structuring a responsive image gallery – 4m 47s
Controlling gallery styling – 11m 43s
Adding image gallery functionality – 9m 32s
5. Enhancing Sites for Mobile – 16m 24s
HTML5 form inputs – 4m 30s
Adding phone functionality – 6m 16s
Adding home screen icons – 5m 38s
6. Managing Resources – 28m 20s
Modernizr and Respond.js overview – 5m 32s
Loading resources with Modernizr – 10m 10s
Conditional resource loading – 8m 56s
Testing responsive sites – 3m 42s
Conclusion – 4m 10s
Additional resources – 4m 10s