Responsive Web Design: Advancing your Design to the Web

A fascinating journey into the world of responsive web design
4.3 (2 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
65 students enrolled
$19
$75
75% off
Take This Course
  • Lectures 26
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course 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!

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and three video courses jQuery UI Development, Learning Object-Oriented JavaScript, and Mastering JavaScript, all for Packt Publishing.

What are the requirements?

  • HTML and CSS

What am I going to get from this course?

  • Get an in-depth knowledge of media queries—the heart of responsive web design
  • Create advanced design strategies for different devices, aspect ratios, and resolutions
  • Work with the Twitter Bootstrap framework to build effective designs
  • Make your design backward-compatible and expand support to IE9 with HTML5shim
  • Enhance the user experience using relative measurement types
  • Stay up to date with all the future developments in web design and discover CSS4 media queries

What is the target audience?

  • Are you an existing web developer familiar with HTML and CSS, who is ready to take on the future of web creation using responsive web design? Then this is the course for you!

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Getting Started with Media Queries
01:59

This video will offer the overview of the course.

04:08

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.

06:56

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.

03:58

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.

08:30

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.

Section 2: Moving into Responsive Design with Media Query Expressions
04:20

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.

07:32

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.

07:22

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.

06:27

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.

03:40

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.

Section 3: Advanced Design Strategies
12:28

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.

07:56

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.

07:57

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.

05:38

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.

04:38

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.

Section 4: Working with Responsive Frameworks
07:36

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.

03:57

Let’s get to know the basics of how Twitter Bootstrap works.

05:32

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.

06:02

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.

05:56

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.

07:16

Learn how to change the color themes in the Twitter Bootstrap library.

Section 5: Media Queries Level 4
04:01

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.

11:38

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.

02:23

In the future, it is very likely that we will be able to create our own media query rules.

01:51

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.

02:03

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course