Take this
course

Software Development / Web Development

Responsive Web Design: Advancing your Design to the Modern Web

A fascinating journey into the world of responsive web design

Description

The modern web puts the user at the center of all activities. With 100s of different devices out there, web designers must up their game and develop sites that work for TV, mobile, and print, and large as well as small screens. The modern web is based on responsive websites that adapt to the user and their needs. Today websites reach far and wide from computers, TVs, printers, and e-books to mobile devices. The old way of building websites doesn't work anymore and we need to move to a responsive web design strategy to keep up with the changing world.


This video course walks you through all the steps involved in building responsive designs with ease and will upgrade your skills as a web designer.


We will start off with the basics of media queries, which are the key to responsive design, and creating custom layouts based on output type. You’ll get a deeper understanding of responsive design, how to plan for it, and how to work with various media query expressions and features. You’ll learn how to design for multiple devices and resolutions, and optimize for media types including print, screen, mobile, desktop, and more. In addition, you will also become familiar with central responsive frameworks, such as Bootstrap, and will become able to tackle responsive design challenges using effective design strategies.


Finally, we will look at the future of web design and discuss CSS4 media queries, which were still in the planning stages when this course was being developed. These are not supported yet by browsers, but will give us a glimpse of what lies ahead to help us understand the possible future for media queries.


This video course is the ultimate guide to responsive web design that will give you all the knowledge and skills needed to create fully responsive designs for the modern web!

Full details

Curriculum

  • Getting Started with Media Queries
    The Course Overview
    This video will offer the overview of the course.
    2:00
    What Are Media Queries?
    Media queries were introduced in HTML4/CSS2 as a way to support the growing ways via which we consume data online. Media queries enable us to serve up the same data but change the way it is presented based on the parameters that are within our control. • Explore the different media types • Learn how to design sites in a media-rich world • Start from the scratch or we tweak for medias • Look into the case of mobile first
    4:09
    Media Queries "Hello World"
    There is no better way to start showcasing media queries than by showing them in action. In this video, we will learn how to define different CSS files depending on the type of media. • Understand the two ways that can be used to define media queries • Learn the reason behind why we set the media queries file wide • Have a look at an example of media query for print and screen implementation
    6:57
    Media Queries Within a CSS File with the @media Rule
    There are two ways to define media queries. The first is to define it for a full file, as we explored in the last video. In this video, we will take a look at the second way of defining the CSS media query rules. • Learn how to define media queries within a CSS document • Understand when to use the first and second metho
    3:59
    Media Query Rule Combination
    So far, we have treated every media rule as a standalone independent. There are many scenarios where we will want to define a rule based on a match of a few filters. In this video, we will learn how to create advanced media rules with the help of the "and" operator. • Learn more about media queries as connectable items • Have a look at the "and", "not", and "only" operator • Check out the teaser to the next step related to expressions
    8:31
  • Moving into Responsive Design with Media Query Expressions
    What Is Responsive Design?
    Responsive design is a design that changes and adapts to the user dynamically. This type of design helps us create sites that look great on many devices and has many different usages. • Learn what static design is • Learn what adoptive design is • Learn what liquid design is • Learn what responsive design is
    4:21
    Optimizing for a Specific Device
    CSS media queries enable us to filter out devices based on a set of parameters. We previously saw many parameters that were hard-set as "yes" or "no". We will now move away from Boolean expressions and move into a rich world of values, starting with the width and height expressions. In this video, you will learn how to work with expressions. • Learn how to define media query expressions • Combine multiple expressions • Design for a specific device (such as an iPhone X)
    7:33
    Creating Responsive Designs with Size Ranges
    With hundreds of different resolutions and settings, it would be impossible for us to create a specific design for every single device on earth. For us to design a design that doesn't target one specific device or resolution, we need to be able to define ranges of acceptable parameters. • Understand what responsive designs are • Learn how to create responsive designs • Learn how to work with the min/max prefixes
    7:23
    Mobile Responsiveness
    Just by planning and designing your site to make it responsive, it will look better and will be more useful for users. The next step is to customize and improve the flow and layout for mobile output. • Think mobile when designing responsive designs • Get introduced to mobile view ports • React to mobile orientation
    6:28
    Backward Compatibility
    There is a limit to how far in history we will be able to support our layout, but there are some things that we can do to extend the support to an older browser. • Make the base design to work on all fallbacks • Expand the support to IE9 with HTML5shim • Conduct testing, testing, and testing
    3:41
  • Advanced Design Strategies
    Thinking Fluid
    A good fluid design starts with a good strategy that can be used to pick the measurement types that need to be used in an HTML/CSS project. In this video, you will get to know the different CSS measurement types. We will then showcase a plan on how to make almost any design fluid ready. • Learn the different CSS measurement types • Check out the difference between the absolute and relative measurement types • Understand which measurement type should be used according to the situation at hand
    12:29
    Creating a Site That Responds to Itself
    It's nice to have small elements change, but many times, when users make a screen larger or smaller, they like to see the content size scale as well. Let’s learn how to use the relative measurement types to enhance the users' experience with our site. • Understand the vw and vh measurement types • Make font sizes grow dynamically with CSS • Make things backward compatible
    7:57
    Optimizing Based on Device Resolution
    When it comes to providing the best experience to users and cutting down on costs of bandwidth on your server, nothing comes close to the topic that we will cover in this video as regards its importance. Instead of reusing assets on all screens, a better strategy would be to provide content based on the resolution. • Understand why resolution matters • Learn how to work with the resolution media queries • Plan a resolution strategy that is effective
    7:58
    Designing by Aspect Ratio
    When we think about web design, we normally think in pixels or even in percentages, but if we really want to take advantage of users' screens, we need to know the aspect ratio of their screens. • Understand why we should care about the aspect ratio of a user’s screen • Find out the aspect ratio of the device • TV rules (scan)
    5:39
    Talking about Color and Grids
    In this course, we mastered the usage of responsive design and media queries. In this video, we’ll spend a few moments talking about all the topics that we didn't practice in this course. • Design by color (the color, color-index, and monochrome) • Check out fixed font devices (grid)
    4:39
  • Working with Responsive Frameworks
    What Are Responsive Frameworks?
    Responsive frameworks or web development frameworks cut down the need for developers to build their own starting point. The libraries usually are very rich and provide common developer needs quickly and with limited effort. • Understand what the advantages of working with frameworks are • Have a look at what the disadvantages of working with frameworks are
    7:37
    The Twitter Bootstrap
    Let’s get to know the basics of how Twitter Bootstrap works. • Have a look at the features of Twitter Bootstrap • It has a grid-based design • Have a look at its popularity
    3:58
    Understanding the Twitter Bootstrap CSS Rules
    At the heart of Twitter Bootstrap is a rules library that enables us to cut down on development time. In this video, we will understand the foundations of how to work with the Twitter Bootstrap CSS rules. • Explore the CSS rules that do things • Follow the documentation • Override with custom CSS
    5:33
    Adding Components
    Twitter Bootstrap has components that enable you to improve and expand the features available in the base library. We will learn how to leverage the Twitter Bootstrap components library. To leverage interactivity, we need to include the JavaScript plugins. • Understand what components are • Learn how to integrate a Twitter Bootstrap component • Have a look at JavaScript and Twitter Bootstrap
    6:03
    An Example of a Grid Layout
    Twitter Bootstrap is a responsive framework that enables you to quickly create grids. We will see the basics of how to work with the grid layout. • Split the grid into 12 columns • Assign four grids for the display sizes (xs, sm, md, lg) • Learn how you can mix and match layouts
    5:57
    Changing Themes with LESS
    Learn how to change the color themes in the Twitter Bootstrap library. • Understand what LESS is • Learn how Bootstrap uses LESS • Have an understanding of how to compile your own style colors
    7:17
  • Media Queries Level 4
    The Future of Media Types
    Which media types will stay and which media types are likely to leave us? The answer might surprise you, but it will change the way you develop today if you want to be ready for the future. • Keep the print, screen, and speech and remove the rest • Move to a feature-based approach • Learn how to prepare for the future now
    4:02
    Moving into Media Features
    There is a shift in the way CSS is going to manage media types, especially with a long-term goal of getting rid of media types altogether and focusing on media features. Although the list of features is far from finalized at this stage, it can help us understand how to get ready for the future. • Focus on shifting to the media features • Explore the Screen/Device dimensions media features • Display Quality and Color media features • Have a look at the Environment media features (the light level) and Scripting Media Features(scripting)
    11:39
    Creating Custom Media Queries
    In the future, it is very likely that we will be able to create our own media query rules. • Create custom media queries • Learn how to create a custom media query • Understand how to use a custom media query
    2:24
    Media Query Operators
    You already know how to work with the "not", "only", and "and" operators, but is there any new operator around? You guessed right. There is a high likelihood that a new operator will be introduced—the "or" operator. • Look back at the "only", "not", and "and" operators • Explore the "or" operator
    1:52
    Working with Media Query Ranges
    Until now, when you wanted to define a range, you had to use the min and max parameters, but in CSS4, there is a good chance that ranges will be introduced. • Understand that the min and max parameters are still here, but they might be deprecated over time • Learn about the range operators • Have a look at some final thoughts
    2:04

Skills

  • Bootstrap
  • Responsive Web Design

Similar Courses

More Courses by this Instructor