These days, optimizing your website for the many different mobile devices users rely on is a must. To do that, you need to approach the website design and development process in a new way, with an eye on creating user-friendly responsive design sites. In this class, you’ll walk away with an understanding of what responsive web design is all about. From the different types of mobile-enhanced design methods we can use (think adaptive or responsive design to name a few), to actually diving in and building a responsive site. You’ll learn what media queries are and how to use them effectively. You’ll also explore the good bits of HTML5 and CSS3, learn about responsive images, video, text, as well as some of the ways to test our responsive pages. This info packed course will get you up to speed quickly, and you’ll finally be able to not only say that you know what responsive design is, but be able to create one!
In this workshop, you'll learn:
- Understand the different methods for creating a better browsing experience on devices
- Learn about the great tools out there for making your responsive design happen
- Create a responsive design from the ground up
- Understand the different ways to start a responsive design (including popular frameworks like Twitter Bootstrap and others)
Who should take this course:
- Print designers making the leap into web
- Web designers who want to be able to design responsibly (pun intended)
- Front-end developers looking to finally get it done
- Those of us that interface with developers or designers who want to understand what responsive design is
Lesson 1: An Introduction to Responsive Design
- Video 1: Welcome to the course!
- Video 2: How the example files work
- Video 3: What is responsive design and why do we need it?
- Video 4: The different methods of mobile optimization
- Video 5: What are CSS media queries?
- Video 6: Understanding mobile first design
- Video 7: What are fluid grids?
- Assignment 1
Lesson 2: Build Your Responsive Design
- Video 1: Methods for planning (workflows)
- Video 2: Explore the starting HTML5 page and CSS
- Video 3: Understanding what a viewport is and setting the viewport meta tag
- Video 4: Adding the main layout elements
- Video 5: Adding basic media queries (and discussing breakpoints)
- Video 6: Testing your design
- Video 7: Starting with text
- Video 8: Adding hosted fonts
- Video 9: Inserting responsive images (placed and background)
- Video 10: Understanding responsive navigation
- Video 11: Adding navigation and making it responsive
- Video 12: Adding HTML5 video
- Video 13: Making that video responsive
- Video 14: Inserting a responsive JQuery slideshow
- Video 15: Exploring other responsive frameworks
- Video 16: Bye!
- Assignment 2
These workshops are self-guided, "offline" versions of our online workshops at HOW U. You receive the same curriculum and supplemental materials, but you do the work completely on your own, making them an ideal choice for students who truly want to work at their own pace
In contrast to our online workshops, where class is "in session" for a specified period of time, there's no set time line for an independent study class, you could approach it as an intensive crash course, pick it up on weekends over several months, or whatever works best for you.