- Overview
- Transcript
1.2 Introduction to Responsive Web Design
Before we talk about responsive images, we need to get a bit of perspective on the whole deal; the best place to start is with responsive web design.
Let’s begin.
Related Links
1.Hello!2 lessons, 03:03
1.1Welcome01:20
1.2Introduction to Responsive Web Design01:43
2.Working With Responsive Images5 lessons, 26:19
2.1Images in Web Design04:36
2.2The Classic Approach06:33
2.3Art Direction01:48
2.4Using CSS to Selectively Show Images10:49
2.5The Ideal Solution02:33
3.Existing Solutions7 lessons, 44:50
3.1Introducing the `srcset` and `sizes` Attributes14:25
3.2Using the Picture Element04:38
3.3Using Multiple Image Formats05:19
3.4The Downside: Browser Support02:20
3.5The Solution: a Polyfill05:36
3.6Other Solutions07:27
3.7Performance Considerations05:05
4.Conclusion1 lesson, 02:34
4.1Final Words02:34
1.2 Introduction to Responsive Web Design
Before we talk about responsive images, we need to get a bit of perspective on the whole deal, and the best place to start is responsive web design. And responsive web design is a topic that's been discussed over the last couple of years. And I won't go into too much detail but if you really don't know what it is, or you just really want a refresh, go ahead and check out the lesson notes for some appropriate links. The concept of responsive web design was first nailed back in 2010 by Ethan Marcotte in an article for a list apart. You can find the link down below. There he talked about how we should think about building websites that adapt to the medium that renders them. In other words, instead of building a website for desktop and one for mobile, like people were doing in the past. We should build a single website that will adapt itself or respond to the device it's being displayed on. Either it's a mobile phone, smartphone or a desktop or a laptop. For example let's take a look at the tuts plus website. As you can see this responds really well to the view port size and it doesn't just resize elements, it moves them around to making sure you get the best experience possible. Now this website just like many other websites out there uses a lot of images. In fact, images are being used more and more nowadays. So, let's dig a little deeper.