Published using Google Docs
Transcript: Designing for a Viewport
Updated automatically every 5 minutes

BYU-Idaho Online Learning

Video Transcript

Designing for a Viewport

[Multiple speakers]

[Displays a woman talking to the camera, labeled and titled “Jen Simmons, Mozilla Designer + Developer Advocate”] 

Jen Simmons: As I've dug into what we're going to be doing with CSS Grid and these other new tools for CSS layout, I've been contemplating the fact that we are designing inside a viewport.

[“The Viewport”]

Jen Simmons: From a whole new perspective, whether you're designing a site, or the moment when your sight is on a mobile screen, or a desktop screen, or whatever kind of screen, everything on the web is being seen through a viewport through this frame.

[Displays image of a phone, then a picture of a street with posters glued to a wall]

Jen Simmons: Other kinds of work don't have that kind of frame. These posters for instance, on the street in Berlin, you see the entire poster all at once. And the job of this poster, as I'm walking along, is to grab my attention and get me to turn my head. As I look closer and closer, those posters are competing with other posters and they're using things like visual hierarchy and going to different elements of graphic design to grab my attention and try to get my attention on to that poster in a way from another poster. As I get closer, and things that are smaller that have less visual hierarchy come into view, it doesn't really matter where something is on the top of the poster or the bottom on the left or the right, that's irrelevant. What matters in this situation is what's big, what grabs my attention, and then what kinds of things are smaller, and they become the second, and third and fourth thing that I look at.

[Displays a poster for a jazz concert with small colored squares in front of a man playing the trumpet. Each square has different things written on it that cannot be made out.]

Jen Simmons: In this poster, that's true as well, I can look at the whole poster all at once. I can see Winston Marsalis playing jazz, I see that those pink boxes are kind of like notes of jazz music, the logo for the jazz festivals at the bottom of the page, which is perfectly fine in this situation. In some ways, these pink boxes, these notes that kind of feel a little bit square to me a little bit mechanical, I get the idea of jazz. It's interesting. I took this example and I put it into a webpage, and I can see it here, and because of the viewport Well for one, it doesn't make sense for the logo to be at the bottom that makes no sense. But the experience of seeing Winston Marsalis his face first, and then the trumpet is revealed. And seeing a few of these pink boxes and seeing more of them revealed, in a way it makes this work more musical, it kind of conveys the idea of jobs a little bit better, I think.

[Screen returns to display Simmons speaking to the camera, then an Amazon webpage, then later a PDF that has the entire Amazon webpage on it in it’s true aspect ratio.]

Jen Simmons: In either case, there's just a difference between designing the poster outside the viewport and designing it inside of your port. We kind of know I think most of us have a muscle memory of like exactly how far do you need to scroll to get there to the reviews on amazon.com, right? We experience the amazon.com product pages through a viewport as a consumer as somebody who shops on that site. But no one ever thinks of the entire page all at once. No one ever imagines what would have been like to be the developer receiving a PDF from the folks who designed amazon.com product pages. But so often in our industry that is, in fact, how we plan our pages. It's how we plan what we're going to do, we draw the entire diagram, we kind of think about it all at once, when we're in our meetings, we look at PDFs. Who experiences amazon.com, like this drawing here? In fact, if you ask people how big the page is I think almost none of us would actually understand how big that page actually is. Instead, we tend to draw these designs in static when we use programs that are static, whether it's something like Photoshop or something like sketch, it's the same result. We draw them as if they are the aspect ratio that somehow magically fits onto letter sized pieces of paper, or legal in the US like somehow we just expect that our web pages are going to fit onto pieces of paper and that the PDF is a good way to send these documents around when it's really a mismatch. Really what we should be doing is thinking about the experience through time and the experience of having this page scroll through the viewport. What does it mean to have that kind of a frame? What does it mean to see one thing and then wait till a little later and see something else and wait till a little later and see something else? So I've been asking myself, how is it that we might want to change our process of designing? How is it that I might want to think about my layout? And rather than drawing an entire page and imagining a new layout, what kind of tool could I use, especially a low fidelity tool? It doesn't take a lot of work, some kind of something quick and dirty when I'm drawing on a piece of paper and pencil on a piece of paper, what is it that I could be drawing to help me imagine this series of experiences through this series of frames through time? And I realized, Oh, this is not the only medium that has this kind of experience. The film industry has been doing this for a very, very long time. And they use storyboards to plan out shots and to plan out what they're going to shoot on a film. These days, of course, there's a lot of pre visualization software and a lot of 3d animation stuff. But before any of that was invented, filmmaking would use paper and pencil. And they would draw out frame by frame by frame, what it is that would make up the sequence of shots and the sequence of, of moments for the camera in order to tell the story. And they figure out are we in fact telling the story that we want to tell? What shots do we need? Are we missing any shots? Do we really need to have a close up and a wide shot, or can we just get away with one or the other? Low fidelity, low cost, not anywhere near the kind of million dollar per hour budget that a lot of feature films have to figure it out ahead of time. I think we could be doing the same thing with the web. We could be planning out not just the top of the page, not just what's above the fold, but we could be planning out what goes on further down the page and imagine it inside a viewport. Sometimes, the reason that we do get so obsessed above that, above the fold frame is that it's the easiest one to talk about. It's easy to talk about what the website looks like when it first loads. But we could also be talking about what the website looks like when you've scrolled halfway down, or when you get to something else further along in the experience through time.

[Screen displays 3 instances of a page that shows Wood texture, Rust texture, Leaf texture, and Rock texture in a 2x2 grid. On is the aspect ratio of a phone, one a tablet, and another a computer monitor. Narrator changes the aspect ratio of a prototype of the page, causing the image to change in a way that remains clear and all in view.]

Jen Simmons: Here's a drawing that I did, really these are screenshots, of three different experiences of the same layout. Without doing a prototype without getting to the more complicated part of the work, I could kind of work out in my mind or work out on paper for a person that I want to run the idea past and get their approval or get their feedback. I can very quickly convey the idea that this webpage, the layout of this content, would work in such a way that it would morph and change shape, depending on the amount of space in the viewport. And then here is a prototype where I went ahead and said, Okay, well, that's the idea that I'm going for. Let me put together some CSS, sort of the second stage, first storyboard, second stage, prototype, and experience the ideas through a viewport in order to see whether or not it actually really works. How is it that I'm able to do that kind of layout? How is it that I'm able to do a layout that understands all four edges of the page and change the size and shape based on the viewport? Well, I'm using viewport units, I'm using alignment properties. And I'm using grid, especially the fact that CSS Grid has rows and you can define rows. I have a couple of examples that I've actually made other videos about these examples, walking through them and showing how they work where the layout responds to all four sides of the page, and respects the fact that we're working inside of a viewport. Here's another example. I'm measuring these things in Viewport units placing in sizing elements based on the size of the screen. We're working inside of this viewport. It actually reminds me of the very first time I picked up a 16 millimeter film camera, it was a bolex camera, it shoots black and white film kind of a very old camera. It's very different from picking up a cell phone and shooting video on a cell phone. Our cell phone lenses are really wide, so when you pick up that kind of video camera, it grabs a big chunk of the world. And it lets you film kind of what's happening over here and over here all at the same time so you can get your somebody's soccer game or something. This kind of camera though, they have much longer lenses and they really pick up a very narrow slice of the world. And I remember the first time I picked up this bolex camera and I had to shoot a two and a quarter minute film and it was to you know in a couple days And it felt like I was looking through a toilet paper tube and trying to figure out how do I shoot this scene that I've planned where this person is going to come out of the door and go down the sidewalk down the steps to the car, like how in the world do I keep her inside this frame? It seems so hard. Framing is a big part of learning how to do filmmaking. It's a big part of the very beginning of the evolution of filmmaking. filmmaking, of course now is over 100 years old. But at the very beginning of the first few decades one of the things that filmmakers talked about the most and helped each other learn as that medium was just getting off the ground, was “How the heck do we use the frame of a camera to capture the story?” There's all kinds of ways between using a long shot and a medium shot and a close up and cutting between a close up and a long shot. There's an entire language of filmmaking that evolved in the beginning of the 20th century. Now here we are 100 years later, and that filmmaking language has gotten unbelievably complicated, using things like dollies and cranes, steady cams, moving the camera the whole time, as well as cutting from one shot to the next when I was in film school, and I was trying to learn that kind of cinematic language and figure out how to use it as a filmmaker, this course the Hollywood camera work was this amazing resource, it really kind of blew my mind, and I wanted to show you just a very short clip from from one of the early videos to kind of explain how it is that technical choices have artistic result or have a an impact on how people experience the story that we're giving them.

[Screen changes to a 3-D animated scene where a camera is moving toward a man sitting at a desk]

Narrator: The close push is one of the most useful and expressive moves we can do and there are good reasons to use it. In most scenes. It's tempting to do slow pushes as often as possible because of the production value, but it's when we stick to motivated pushes that we bring out the story. Most people choose when to push intuitively, but will Try to put words to that by suggesting the close pushes are for meaningful moments. Most of what goes on in this scene is, of course, not a meaningful moment. Here the red man is talking about something that has no meaning at all, maybe the pizza he had for lunch. But let's do a close portion anyway. As he talks about the double cheese crust and the extra layer of pepperoni, the push assigns meaning to the situation, even if there isn't any. But a close push is extremely powerful when we intend to show that something is meaningful. As we push it on the mound, we know that whatever is happening has special meaning something is important or significant, or that something is going on, even if we don't know what it is. This by itself is a great use for the close push because it creates questions and participation and it tells us we need to pay extra attention.

[Screen returns to Simmons]

Jen Simmons: What does it mean for the web to develop that kind of filmic language in our use of the viewport? What is it to like, make a web language to have a kind of a language of the web and the way that we use layout, the way we use graphic design on the web that's unique to us that's different than print and different than film, but somehow really conveys intentionally lets us intentionally convey the kind of meeting that we want to have the kind of story the kind of feeling and the kind of brand, whatever it is that we're trying to communicate to our users. What does it mean to have a reading experience with a frame where things move in and out of the frame? It's very different from a book or a magazine. What does it mean to have an interaction experience in and out of a frame? A lot of apps of course, ignore the scrolling in the viewport by simply fitting everything inside the frame. It's easier to do when you simply are designing an app for one use case like for a phone. But what does it mean to use the web with the intention of the web where the same interface works on many different devices and many different kinds of interfaces, many different kinds of input and output devices. What Does it mean to craft an interaction experience when there's a frame? I think the viewport is something we want to be thinking about as the web evolves into the next evolution of what it becomes the next 10 years, the next 20 years. How is it that we're going to use the viewport to truly create work that's of our medium

[End of Video]