This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.
CSS layout for designers
I’m going to do a series of workshops about code for web designers. The goal of these workshops is to teach some essential basics about how HTML and CSS work to people who currently design stuff for the web in tools like Photoshop. After these series I don’t expect them to write production code, but I expect them to be able to solve certain design problems in the browser. I’m going to start with explaining semantics. Then I’ll teach them how to style texts, how to do good typography. After that I’ll teach them all those fabulous selectors we have. They’ll learn how to make animations and transitions, and how to apply bling with shadows, border-radius, gradients, etc.
Layout
So far so good. These are all relatively easy to explain. The thing I’m a bit concerned about is layout. What should I teach them? Should I teach them how to use hacks like float and display:inline-block? This is how most of us still create layout today. But is it really necessary to teach people who learn CSS today how we used to create layout in the past? The reason I’m asking is because layout with CSS is hard. It is very hard to explain to somebody who’s relatively new to CSS how floating works. Why you need to clear them every now and then. And I’ll need to explain overflow. Have you ever tried that? That’s hard!
Inline-block
It’s easier to explain display:inline-block. Designers will not like the space between inline-block elements, but they’ll probably learn it much faster than floats, and they’ll be able to make a simple layout in no time. So if I have to choose between float and inline-block, I consider to ignore floats. But I’d love to hear your opinion on this.
The future is here, right?
Float and inline-block are hacks. We needed those hacks, but today we have flexbox. Do we still need them? I’m not sure. If we won’t be needing them in the near future, I’m not sure if I should teach them to people who start with CSS today. What’s the point? Remember that these people will not write any real production code, they need to be able to solve some design problems in a realistic environment, the browser.
Do they even need to learn this stuff?
Flexbox has an incredible amount of possibilities, which makes it pretty hard to fully understand it. It’s even harder to type the correct code to make it work. Now the question is: do people really need to learn how to write this code, or do they need to learn how to use tools that generate this code for them? With flexbox, as with CSS gradients, I tend to think the design community might be better served with excellent tools, rather than with knowing how to type a complex syntax — I’d love to be proven wrong though. But are there any real good tools out there? For instance, is Flexyboxes good enough, does it cover all options? Or is Gridset the kind of tool we need?
For now I will definitely teach them how to type layouts with CSS. I’m not entirely sure yet what I’ll teach them exactly or how. I hope your comments will help me in finding the right answer here.
I don’t know if you should skip floats/inline-block, but IMO Gridset should definitely be part of the workshops. I think it’s an ideal tool to get designers and front-enders to work closer together on lay-outs and to stop the use of all those boring 960 grids we/I still see way too much.
I’m concerned teaching them flexbox first might negate the importance of content order and structure.
It’s important they understand how elements ‘flow’ and can break flow. Inline-block helps with that.
And I agree with Rik. Content should be the starting point. After the content hierarchie is defined, front-end + design/IO should work together on the layout of that content. Gridset seems to be an ideal tool for that, allowing for easy prototyping.
Pim and Rik, I agree with you, of course. The workshop will be about giving shape to content on the web, not about making pretty pictures. We’ll talk about content structure, semantics, hierarchy, order. But we will need to talk about layout too. That’s what this post is about (-:
First of all, show them where we came from. Give them context on tables and why they’re bad. Show them floats and how difficult it is. Show them inline-block and tell them how idiotic the ±4px margin is. Finally, show them where we’re headed: flexbox.
I feel that if you have the context of all these layout modules, with all the pros and cons, you will be able to make a choice as a new designer which one you want to learn. If you want to build something for production, you might want to put some effort in learning floats. If you want to make quick mockups just so you can “feel” what happens in the browser, they can use flexbox in a modern browser.
I never went to design school, so I don’t know what a class would look like. I do know that I only learned to write code by actually writing code. The students who are motivated will put in the effort to learn these layout systems in their own time. I feel like you should teach them the context, and let them find their own way.
Closing remark: being a good designer is insanely hard and takes a LOT of work. But this is also why we are paid well, can work for awesome companies and make a difference on the web. The path with the least resistance always goes downhill, so make sure they’re glad the path they are on is difficult ;-)
Good luck!
Definitley don’t skip the basic layout techniques like float/clear/display. Having done a HTML/CSS workshop for beginners myself lately I know that its really hard to explain all the “hacks” we use all the time but in the end its really worth it.
Tool like Gridset are great, but I really don’t like the idea to start with teaching how a tool works rather than explaining the techniques behind.
Interesting question I’m struggling with too. I’m teaching CSS as well and this is the approach I’m taking now:
I suppose you’ll talk about inline-block when you’re teaching the basics of the box-model. It’s easy to show them how to do simple lay-out with inline-block then. They’ll be able to do quick designs with that in no time.
Depending on the time you have I’d teach them ‘float’ just for the purpose it was invented for.
Then show them how web designers had to (mis)use float to do flexible design as there was no real alternative all those years. Tell them why. Show them how hard it is and tell them there’s an easier way now. (Don’t let them code it themselves, just show it?)
Then teach them how to work with flex-box. As you say yourself I don’t think there’s much value in teaching a technique that will probably fade away in the next couple of years. If however they do need to know how to do layout with floats, they’ll remember you talked about it and they’re more than likely know where to find links and more information on that.
(I talk about abs/rel… positioning too.)
Thanks Thomas. I think your approach is clever. Inline-block is indeed easy to understand and good to solve easy problems with. It’s a good technique to get them going.
Maybe I’ll just offer them an extra day long flexbox workshop (-: I think it’s too complex to teach in this context.
2 things:
I don’t think you should focus on old techniques and how we (mis)used them. That’s fine for an in-depth course, but for an introduction I’m afraid you’ll only confuse them.
Considering the fact that this course is not supposed to result in production-ready code, I’d look at things like Bootstrap and its grid system. Personally, I’ve never ever used a grid libary/tool, but I guess it’s the quickest way to get results fast.
Plus absolute positioning, still one of the most underused techniques.
Thanks Lennart. I think we both agree on the old techniques part. I’m not really sure about Bootstrap though. But to be honest, I don’t know its approach to grids, so I shouldn’t have an opinion. I might take a look at how they do it.
Thomas mentioned positioning too. I will obviously pay attention to it. It’s an essential technique, no doubt about that.
I would say for now, for these people, flexbox is a bridge too far. Yes, the old techniques are (partly) hacks and they’re outdated, but we still need them. And since they’re not supposed to learn production-quality code, just teach them what’s easiest. Perhaps even Zurb Foundation is an option. It’s a pretty fast way of doing responsive prototypes.
I agree with Maaike, learning these people how to prototype with a tool like Foundation or Bootstrap will probably get them much further than learning them to understand how everything below the surface works. In the end, is it about communicating ideas and those tools are becoming better at that every day. If one of the students wants to dive deeper, they still can.
Progressive enhancement for education? ;)
Interesting discussion. I’ve given quite some workshops lately and it’s always hard to decide what to teach. What you’re explaining can’t be too easy, and it can’t be too hard. It has to strike a balance between the time spent on the subject during the workshop and what the students get out of it.
Since it’s 1 day and it’s for non technical web designers I would tend to agree with Xavier and Maaike.
Teach them how to work with Foundation or Bootstrap and what is behind a modern CSS framework. This will help people get results fast and “make a website” – feel like they accomplished something in 1 day.
The more curious ones will go research the code behind it. I think it’s also very important to show what the frameworks do and how they can help.
I think I wasn’t clear on an important detail: this is a series of five workshops. Each workshop is four hours long, and I’ll give them over a period of five weeks. Each workshop consists of a lecture, a discussion about a few articles they have read, and plenty of time to practice the new theory. I’ll give them assignments to do at home too. This is not an informative one day workshop.
And if you are mainly going to use a framework or preprocessor and decide to leave out all the CSS intricacies don’t call the workshop CSS layout for designers. I think you should be more specific and include the actual framework/preprocessor in the workshop title so attendees won’t have the wrong expectations when attending your workshop.
Even so, I still believe it is more useful to teach them about the basics of semantics, what responsive web design is, and what the specifics of web design are versus print design. It is more useful to tech them how to think and how to look at the web, rather than teach them specific technological hacks. And then skip straight to a tool that allows them to prototype their ideas quickly, which will make for a very useful idea communication tool in their later lives.
@Albert, the series ofworkshops is not called “CSS layout for designers”. Layout is just a part of one of the workshops.