Creating a website requires using some form of design as a reference. It could be in our heads, in a mock-up or design tool. Our objective as developers is to translate this blueprint efficiently to HTML/CSS while taking into account responsiveness and accessibility. This is no easy task since there is a myriad of ways one could code a layout. One way to achieve responsively, pixel perfect websites is creating a layout model separating website items into sections, blocks, and elements.
This will be a three-part series. This first part will focus on how to create a layout model; the second on what is semantic HTML and its benefits; the last on how to create the layout with semantic HTML and CSS.
Without further ado, let's start!
Definition
Before I translate any design to code, I start to divide the page into sections, blocks, and elements. I define each of these as:
- Element. Is any tag or tags that stand as a unit. These are commonly a text, icon, link, or image.
-
Block. Is a container of one or multiple elements or blocks. It lacks logical meaning. Their main purpose is to organize elements through CSS properties such as
flexandgrid. Its main HTML tag is thediv. -
Section. Is a container of one or multiple blocks and has a logical meaning. There are many HTML elements that can represent this such as
section,article, orheader.
What We Will Analyze
Let's look at the next design. Credits to Bakhtiyar Sattarov.
Before we start to create our model, take into account that our main objective for creating a layout is to
Get the most efficient layout of sections, blocks, and elements possible. Not necessarily the least amount, but the one that allows a seamless responsive and accessible solution.
Creating a Layout Model
When creating a model, I like to identify sections first. One easy way to achieve this is to sort by its logical meaning within the site. In this case, we can see that we have items that could lead the user to other routes within the site, meaning it is a navigation bar. On the other hand, there's also a hero because it is the main attraction of the website. It brings the user to keep exploring and read what our content is about. Therefore we have two sections: a navigation bar and a Hero.
Once we have defined the sections, we proceed to identify the block or blocks that our sections will contain. To accomplish this we have to distinguish first its elements.
Recognizing an element is very straightforward since we have to look for any item that is a unit like text, icon, logo, label, or image.
Now that we have identified the elements all that's left is to define our blocks. Blocks are identified by determining what I call their CSS purpose or how they organize a group of elements. This organization could be of three types: flex, grid, or unnatural.
Flex Block
Flex is the easiest and most common. It lays objects in two dimensions, either in columns or rows. Likewise, elements can be centered and given some unified spacing like space-between, and space-around. Read more on flexbox.
Tip: When you see a group of elements with space between each other and they are either in a column or row, consider it a block that can use flex.
Grid Block
Grid is very straightforward to understand but hard to implement. It lays objects tridimensionally, the same as a matrix. This layout is especially good for galleries. Do note that you can implement the same layout in grid and flex but it will end up less compatible with browsers and sometimes harder to implement.
Tip: When you see a group of items organized in the form of a matrix, contemplate utilizing the grid.
Unnatural block
Finally, the unnatural block type is an item that uses an absolute, sticky, or fixed positioning. Normally it is anchored to the section (giving the relative position to section tag). They are easily discovered by noticing their awkward but perfect position.
Getting It Together
Now, that we have this information we can start identifying each block.
That's it! Once we have structured the page elements like this, you can translate it easily to semantic HTML and subsequently to CSS.
Conclusion
Creating a model is very important when we want to create an accessible and responsive website. It allows the developer to translate any design to HTML and CSS with ease.
This technique may seem daunting at first, however, with time you will be able to come up with these models quickly in your mind. It will seem as if you are laying blocks in a paper.
What do you think of this technique? Leave your comments below. See you soon in part two 👍💻
Did you know I have a newsletter? 📬
If you want to get notified when I publish new blog posts and receive an awesome weekly resource to stay ahead in web development, head over to https://jfelix.info/newsletter.
Top comments (5)
This might be out of scope for this post but I have a hard time with what you call the "unnatural" elements. For instance, a Modal; How does one "anchor" something that's positioned absolute like that?
In the case of a modal it is anchored to the document automatically. So you don't have to explicitly anchor it in a section.
I liked the article since it serves as an anchor to which I can use to identify and organise my thinking before I undertake a project, contrary to my current method of jumping head first and figuring things out when in knee deep in a catastrophe. Cheers!
A really good read for developers who lack the habit of following pattern during development. Bravo!
great article man,gave me a frame work to solve layout problems.will follow and like your content