Video description
Responsive design isn’t merely another technique. It’s a way
of building sites and applications that requires a fundamental
shift in approach. From planning to development, every aspect of
building for the web is affected. This video course starts by
explaining the three primary components of responsive design: fluid
layouts, media queries and responsive images. With a firm
understanding of those in place, we branch out and explore how
responsive design impacts workflow, how to maintain the hierarchy
of content, how to use feature detection to enhance the experience,
how to organize your JavaScript to play along nicely, how to
optimize responsive sites for performance—and more. Course
objectives and goals: This course arms its students with the skills
necessary to start building quality responsive sites today. By the
end of the course, students will know how to: Use fluid layouts,
media queries and fluid images to create responsive layouts Use
responsive image techniques to serve appropriately sized images to
a variety of devices Ensure that the hierarchy of content is
preserved across screen sizes Enhance the functionality of your
site with feature detection Improve the performance of your site
and avoid becoming another example of "fat" responsive design
Adjust your existing workflow to better accommodate multi-device
design and development Determine what devices to test on and how
Course Requirements: To get the most out of this course, you'll
need your favorite code editor and ideally a couple of devices to
test on. If you don't have a tablet and phone for testing, then
you'll want to get a hold of a simulator or use one of the many
device testing services online to follow along. You could,
theoretically, follow along by resizing your browser, but I highly
recommend against it—you'll get much more out of it by seeing how
things behave on different devices. User level: Intermediate
Table of Contents
What
Welcome
What is Responsive Web Design?
Why
Benefitting Businesses
Benefitting Users
Planning
Evaluating Advertising, Analytics, and Content
Considering Current Timing and Future Direction
Product
Preparing Wireframes and Mockups
Establishing a Style Guide
Testing
Design Workflow
Selecting a Starting Point
Adopting the Mobile First approach
Interacting with the Team
Fluid Layouts
Examining Layout Options
Adjusting Fonts
Using Layouts
Using Fonts
Media Queries
Accounting for Viewports
Structuring Queries
Adding Queries into Your Workflow
Setting Breakpoints
Improving Navigation
Responsive Media
Assessing Image Strategies
Responsive Techniques for Images
Making Responsive Background Images
Accommodating High Resolution Displays
Adjusting Videos and Advertisements
Responsive Content
Creating a Content Hierarchy
Prioritizing Content
Summary