Dear designers, love your developers because they’ve learned display grid – and you’ve done it too

Depending on your journey as a designer, you may be used to the freedom that graphic media allows: to create overlaps/overlays or to elaborate compositions and grids that fill all the paper with pretty organized photos and texts. However, why is it so hard to build a web page with this same freedom? Fortunately the capacity to build these layouts have been improving and what’s best: it is so simple that you can start using it right now!

How the web layout works

All the options mentioned above make sense when applied on static medias where all copies will be the same, for example, books and magazines. But on the web things usually work differently: there are infinite device sizes, pages need to load quickly, while being accessible for screen readers and you need the developer’s ability to build everything that was drawn in Sketch or Photoshop, using the minimum possible amount of code so it can be reusable as much as possible.

Having this structure in mind, it is easy to mentally picture the largely-adopted 12/16-column grid in order to build responsive websites and define the transition from desktop to smartphone browsers. However, there are still big limitations (such as the fact that the HTML order directly interferes in the content visualization), resulting in a big and complex amount of code. There are some CSS frameworks that try to solve the grid problem, the most famous are: BootstrapFoundationFlexbox GridLost Grid. But let’s see the written code in these frameworks:

<div class="row">   <div class="col-xs-6">.col-xs-6</div>   <div class="col-xs-6">.col-xs-6</div>  </div>  <div class="row">   <div class="col-xs-8">.col-xs-8</div>   <div class="col-xs-4">.col-xs-4</div>  </div>  <div class="row">   <div class="col-xs-4">.col-xs-4</div>   <div class="col-xs-4">.col-xs-4</div>   <div class="col-xs-4">.col-xs-4</div>  </div>

In addition for having to import a considerable amount of code, these structures are usually unreadable and in practice there are always some exceptions that the framework can’t solve. This was a battle won by pure CSS.

Read Full Article

Leave a Reply

Your email address will not be published.