Pixel Perfect Layouts (3 Part Series)
Creating a website requires using some form of design as 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 are a myriad of ways one could code a layout. One way to achieve responsive, 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 a do, let's start!
Before I translate any design to code, I start to divide the page in 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
grid. Its main HTML tag is the
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
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.
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 bring 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 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 is very straightforward to understand but hard to implement. It lays objects tridimensionally, 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 to browsers and sometimes harder to implement.
Tip: When you see a group of items organized in the form of a matrix, contemplate utilizing grid.
Finally, the unnatural block type is an item uses an absolute, sticky, or fixed positioning. Normally it is anchored to the section (giving relative position to section tag). They are easily discovered by noticing their awkward but perfect position.
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.
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 👍💻
We're in this together
Level up every day