Modern Web Design Demystified

Lesson 5 of 37

Responsive Vocab: Floats, Flows, & Images

 

Modern Web Design Demystified

Lesson 5 of 37

Responsive Vocab: Floats, Flows, & Images

 

Lesson Info

Responsive Vocab: Floats, Flows, & Images

We're gonna use these terms floats and flow a lot. And so, we're going to take a minute to step back and say, "So, what, how, what is, they both sound like smoke on the water, I don't know. (audience laughing) Fire in the sky." Flow. One of the most subtle pieces of working in the browser that we looked at before, in it's simplest format. When I sqeeze that text and it pushes down, that's flow. That's flow in action. So if I were to have containers that had content in them and another container, each of those containers would begin pushing off of each other. So there's a natural push mechanic inside of browsers, and that's how content reflows once you change size. That's how that bumping and squeezing, this is why having a background in sculpture, having a background in sort of thinking in objects, helps me begin to understand layout convention. Now floats just break everything, but they're also our key to success. So floats break the flow. There's a flow happening with this primary ob...

ject. This one page flow. It's pushing everything down. When I create new objects, if they're block level objects, they're gonna render one right after the other. If I give one of those objects a float property, it's gonna get unseated out of the page flow, and just float. That's cool. Float up to the top, and to the left or right depending on where I declare it to go. It's gonna break out of the flow border and it's going to allow us to have columns. Again, getting into the technicalities of these ideas, I'm less interested in, and I'm more interested in you sort of understanding, again, at the sort of really baseline level. There are these metaphors in place, and this is how we begin to sort of understand how the objects on the page relate to each other. So when I'm working responsively, you can quickly add up floats and flows and begin to push and pull parts of your layout against each other. Yeah, and I think the other thing to add is that you'll notice as we're talking about kind of the floats and the flow, that there's this natural gravity within the browser. Everything wants to go up and to the left, right? So if you kind of think of that. That's your starting point, then it's all about control. And so using and embracing the natural flow, and then having another level of control with floats, really starts to give you that level of control. And that's, as a designer, what you want, right? That's how we're kind of making this a much more kind of engaging experience, by just starting to be able to control that. So here's another quick demo. Thing one and thing two. They're in the same flow. Right? I'm squeezing the browser. This container pushes that container. On a big browser, if I had a key called to action, I could not put it in the second container 'cause once I get to a smaller device, my sign up button is now pushed too far down on the screen. I can't put it there. Again, with a simple property, so both of these objects I'm calling panel, and they will receive the attributes that I'm giving them here. So again, the same attributes we gave before. Let's change this to 50. So now, they're floated. What was one singular flow has now become two parallel flows. So now on larger screens it makes more sense to have multiple columns, so I don't lose this object. It's now floated up and to the side. Excellent. So let's just jump back here. Floats and flow, playing nice together. Responsive images. This is it. I'm out. I'm done. (audience laughing) That's the whole thing. Responsive images. I think there's more. Max width 100%, I'm gonna go home now. (Andy laughing) But it truly is as simple as this to make an image responsive. All images in your browser, in a specific website, as long as part of your base reset, and this is fairly standard at this point, but I want you to sort of see that this isn't baked in, you tell all the images to have a max width of 100%. And that means they're going to conform to the size of the browser. But, there are some issues with this. One of those issues is this image, the big eight by 10 glossy, that's the wrong measurement for sure. Wrong width, too. Wrong width, wrong medium. (Andy laughing) And this, mobile compress image, are the same size. That can't be good. There has got to be another way to do this. So as a designer, you should know that as your job, you're going to actually be preparing multiple resolutions for images in your websites. You won't just be handing off one image and saying, "Good luck. I'll see you later." You're gonna have to have a conversation with your developer at some point. Find out what those two sizes are and you're going to process those images and work in tandem with your developer to make sure... It's not a one-size-fits-all solution anymore. So that's the first problem with responsive images. The second problem with responsive images is every website now has these big glorious images at the top. Sites like medium.com really made this popular, and they're great. They tell a really evocative story really fast. They're above the fold. They communicate with lots of people. Pictures do jobs that words can't do. They cross cultural boundaries. They're amazing. But when I shrink it, it looks short. (Jesse laughing) So that's a problem. The solution is again, you're gonna have to prepare another cropping of that image for smaller screens. This is not a rogue decision you're going to assume to take on. You can bring the suggestion to the table, but you should just know it's not a one size all proposition. So let's real quick go back to our example of responsiveness in the browser. I have commented out an image and I'm gonna drop my image back in. I love that picture. And so, here's my picture, and you see it's not playing nice. Look, the text, it reflows. It's playing nice, but this image. (Jesse mockingly groans) It doesn't play nice. Just reduce it down to max width. Same image. One property applied to that image. Now when I shrink my window, everybody's on board! We've got responsiveness! It's reflowing, everybody's playing nice. Again, my job's done. Let's go home. So that, quite simply, is how you get columns and images playing nice together in responsive land. The last piece, and probably the most complex, 'cause there's not an immediate metaphor for it, are media queries. So media queries are events that happen in the browser. And so these events are gonna check for a specific condition to take place and create the safety zone of styles. And only within this safety zone of styles, if that browser condition is met, you get access to these. Otherwise, they're hidden. They're secret. And so there's history for this, precedence for this is print queries. So all websites, when you hit print, have, should have this standard. We're gonna strip styles out we don't need. Why do I need a button when I print out a website? On my piece of paper, the button doesn't do me a whole lot of good. Navigation, site navigation, doesn't do me a whole lot of good. How do I navigate this piece of paper? So we learned to remove this we don't need. Same idea with responsive, going from mobile first. Modern media queries start small and as we grow, we nest those nice to haves and those extra features in those media queries. This is what a media query looks like. Again, traditionally, when we first came up with them, we had desktop first media queries, 'cause all websites were already built for desktop, and so we need to capture and contain the smaller screens within a media query. Now, since we're building them from scratch, from start, we're starting mobile first, meaning we're gonna build for smaller screens first and then add. So again going back to our example here, I have put this column event inside of media query. See? It's like baking the chicken before the cooking show. So on larger screens, in 800 pixels and above, I have two columns. But beneath 800 pixels, my columns aren't there anymore. I've taken those rules and hidden them. Hidden them away. So nobody gets to see them unless they show up as 800 pixels and then these rules start to emerge and then I begin to tell a bigger story. Jesse? Yeah. Quick question for you. Sure Just to kind of set a little bit of the foundation here. What's the difference between HTML versus CSS? Right? Kind of a foundation question. We've been talking a lot about Sure. Sure. media queries and things like that. We're starting to see it in Yeah the code, but I see the two columns. So maybe you could just explain really quick the difference between HTML and CSS. How many people here have done any amount of HTML or CSS previously? A little bit. One, two, three, four. Three? Cool. Do I count? Sure. Man, I know. It's like you're not even there. (hosts laughing) HTML is a browser standard. This is your content. This renders in the browser. This is what the browser is actually seeing in line. This is the semantic structure of your content. It's giving emphasis and meaning to the content. CSS is an external sheet that lives somewhere else and gets piped in and styles that content, gives it properties like size and color, measurements and width. This is also where you put your media queries. So again, your actual content exists primarily in text form, in an HTML document. And CSS files are external files that are linked to the HTML file that pipe in styles. And it wasn't always that way. Yeah. That separation that happened, really kind of allowed for all kinds of new types of progress to me made within this medium. It really allowed for a lot more control. Content is now separate from layout and style.

Class Description

Online web design is not just about choosing fonts, colors, and layouts. The days of throwing a static visual comp over the wall are ending. Designers are now encouraged to work side by side with clients and developers. In Modern Web Design Demystified you’ll learn how to communicate with developers and collaborate with your clients in order to design websites that function as well as they look. You’ll learn about: 


  • The fundamentals of responsive web design
  • Working with Clients to identify and prioritize goals
  • How to communicate with Developers
  • Best practices for project workflow
 
In this online web design course, Andy and Jesse will share real world case studies to help you understand exactly what goes into creating and launching a website from the ground up. They’ll tell you about the tools they use and offer tips on working with everyone from the coder to the client.

High-quality web design is complex, but it gives businesses and orgs the opportunity to really connect with their users. Learn the ins and outs of the entire web design workflow process in the Modern Web Design Demystified course.


Bonus materials include: 
  • Sample Dev Tickets
  • Responsive HTML Wireframes
  • HTML Pattern Library
  • Sample High Resolution Visual Comps
  • and more! 

Reviews

Junko Bridston
 

I worked with Andy when he was a Creative Director at Funny Garbage, a design studio in New York City. I found him to be knowledgeable​, articulate, and lovely to work with. I learned so much from him at the beginning of my career. In response to a previous comment: it seems silly to dismiss this class because Andy wears t-shirts with his blazers. If you think leaders only wear suits and ties, then maybe this class isn't for you. But if you want to learn from someone with loads of experience and a friendly manner, I really recommend it. You won’t be disappointed.