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.
This video will offer the overview of the course.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Let’s get to know the basics of how Twitter Bootstrap works.
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.
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.
Learn how to change the color themes in the Twitter Bootstrap library.
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.
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.
In the future, it is very likely that we will be able to create our own media query rules.
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.
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.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.