Today, we're releasing the next installment of our series, Getting Started with Responsive Web Design in Drupal with me, your hostess, Amber Himes Matz. Up until this point, we've been focusing on making our site's layout more flexible and ensuring that our typography is expressed in relative units, not pixels. Now, we'll explore a newer feature of CSS that enables us to create blocks of CSS that apply under certain conditions, called media queries. We'll learn about viewport meta tags, breakpoints, flexible images and video, and a Drupal contributed module that provides mobile-friendly navigation. Here's the video line-up:
- Adding the Viewport Meta Tag to html.tpl.php
- Restoring the Natural Flow of Elements
- Adding Media Queries and Breakpoints to 960.css
- Configuring the Responsive Menus Module
- Flexible Images and Media with CSS's max-width
Next week, we'll wrap up this series and our case study and learn about refactoring our Views-based slideshow to be responsive, dealing with form and table elements in a mobile-friendly way, and making sure our header content isn't crowding out our content for our mobile users. Stay tuned!
Add new comment