Design encompasses more than writing CSS. In this video, explore some of the important concepts that every designer needs to master like responsive design, Flexbox, grid, and how approaches to design like BEM, OCSS, and Smacks have influenced design systems.
- One of the huge changes on how we approach web design came as a result of the explosion of cell phones and tablets. Designers had to radically change the way that we thought about web design. Now, when I design for newspapers, magazines, or really any other media, I always design for a fixed size. So, one of my first questions was always the size of the project. On the web, we don't design for any specific sizes. Almost every device has its own size and proportions. So, on the web, we design for flexible proportions. At certain sizes, the layouts have to completely change to accommodate both the size and the proportions of the device. Also, websites don't always have to show the same information in all devices. A methodology called Mobile First teaches that you should always seek to simplify what is being displayed, especially on smaller devices. One of the basic ways that you can control how items appear on the page is by modifying its display model. Every element on the page is displayed using a property called the display property, and that controls its size, proportions, and how they behave next to other objects. Now, there's a separate Positioning Model that controls how elements flow in relation to one another. The default mode is that objects appear in the order that the code was written, but they can also appear relative to other objects or have a position that is relative to the device. Next, Flexbox presented a huge leap on how designers approach web design. For the first time, containers were given the ability to alter dimensions to fit the available space. The last huge upgrade to how we approach design on the web is the Grid Layout system. It's a two-dimensional system that, unlike Flexbox, allows for careful control of both rows and columns. Now, as your CSS grows, there's another concern that you'll have to deal with, that's how to properly organize all your CSS. Designers on the web deal with this in a variety of ways, and you may hear names like OOCSS, SMACSS, and BEM. And although these names are different, they are a simple way of naming and organizing your CSS. Now, you can see how this works in the popular Bootstrap framework and how it names its card component. The main card is just called card, but there are other elements, like card-body, card-title, and card-text. They're inside the main card and help define its internal elements. Now, designing for the web is one of those things that has radically changed in just a few years, and the future is going to bring additional changes.
- Types of web developers
- Server technologies
- Getting web development training
- Choosing the right tools
- Getting a job
- Negotiating your salary