Nordic Design

Design, Music and Life, by Alex Lillo

Prototyping with CSS grid

Last week I finally took a deeper look at CSS grid, the new way of creating layouts supported by all major browsers since early 2017. Until now I had just used it for very simple grids, the image gallery kind of ones. An hour of reading later, I was amazed by its power and simplicity.

So what is it exactly? Is it like flexbox?

A key element of CSS grid is that it creates rows as well as columns. That makes the distinction between flexbox and grid very simple:

  1. Use flexbox for 1-dimensional compositions like rows or columns. E.g. tabs, your primary navigation
  2. Use grid for 2-dimensional compositions. Like defining a *ahem* grid for your content areas (header/sidebar/main content/footer, etc.)

How it works in a nutshell:

  • You define horizontal and vertical tracks, delimited by grid lines
  • You assign areas to use one or more cells created by the intersection of the grid lines, in whatever place you like, as long as it forms a rectangle (no Tetris shapes yet)

Example of css grid layout

(Image from CSS-Tricks CSS grid guide. You should totally check it out after you’ve read this)

A key consideration is that you don’t have to fill the grid. Think about it as the holes of your IKEA furniture. You can use them to put hangers and stuff on them if you want to, or leave the shell empty. With the added benefit that the tracks can grow with the content. It’s like having a wardrobe that grows as you put more clothes in it!

(Image from CSS-tricks)

CSS grid is so flexible that you don’t even have to assign explicit areas. Any child element of the grid will automatically use the next available grid space, from the top left corner (when writing in a western language). That means that you can perfectly layout an image gallery in seconds.

Then you can use CSS to reposition that content, maybe for another platform. This makes the separation of content and presentation a lot easier.

An example

Let me show you what I coded last week. Inspired by Jen Simmons’ Modern Layouts presentation, I wanted to create a layout for our intranet’s staff page that didn’t follow the standard main content + aside columns, but would rather use a more complex layout inspired by print magazines.

Start with the content

Having more flexibility to define fixed sized areas and flexible ones that use any available space, I started with chunks of content without a particular structure. Exploring what width and order were appropriate on different viewports to tell the story of that person, while trying to use a 1.414 scale to ensure all typographic, image and text elements were harmoniously related.

It was an iterative process to assess what seemed like ideal sizes for a given viewport size, and then how the different elements would adapt, what should maintain its size, what could flex.

Early concept of how chunks of content could be positioned:

Create your grid

Once I had a rough composition, I looked at what grid lines and areas would be needed. Time to get off Sketch and into the text editor. Turning those lines and areas into code was a bit of trial and error, but nothing you won’t understand in less than an hour.

#staffPage {
 display: grid;
 grid-template-rows: 10em 8em auto auto auto;
 grid-template-columns: 18.8333333333% 1fr 32.9166666667%;
 grid-column-gap: $baseline*2;
 grid-template-areas:
 "photo name links"
 "photo biog coached"
 "profile biog coachingRel"
 "quote quote coachingRel"
 ". experience coachingRel";
}

With the grid structure ready, adjusting the different breakpoints took literally minutes. Try to do that with a framework!

 @media all and (max-width: $medium-break) {
 grid-template-rows: 10em 4em auto auto auto;
 grid-template-columns: 18.8333333333% 1fr;
 grid-template-areas:
 "photo name"
 "photo links"
 "profile biog"
 "quote quote"
 ". experience"
 ". coached"
 ". coachingRel";
 }

The result

Once you understand how the grid works it’s very simple to create different types of layouts that would have been an absolute nightmare to code using floats, opening the door to thousands of ideas that would’ve been considered crazy just a few months ago.

Staff page on Webcredible's intranet

If anything, designers will have to work hard to get out of our comfort zone and start creating compelling layouts that get the most of the medium.

What can I do with CSS Grid?

If you are a UX designer with basic HTML and CSS skills, you can use CSS grid to quickly prototype responsive websites in code. Ignore frameworks, you don’t need them anymore.

For example, I really like what I call content prototypes, very low fidelity designs that help me assess the basic grid and visual hierarchy of the content, in code, using actual devices. CSS Grid is perfect for this and will make my life a lot easier.

Learn how to do it

A great place to start is Rachel Andrews excellent site Grid by example. She also has a book that is high on my to read list, Get Ready for CSS Grid Layout. And her talk in An Event Apart will give all the basic knowledge of how to use CSS grid.

Jen Simmons’ talks are an amazing source of inspiration too, and I plan to follow her recommendation and start paying more attention to print, getting ideas to create different compositions that elevate the content on the web, getting us out of the standard header + 2 columns layout that we’ve been using for the last 15-20 years.

What do you think, would you use CSS grid to prototype?

Git for designers

In recent years I’ve seen many designers prototype in code, but very few of them used any kind of version control. This is dangerous as the wrong change to your page structure or CSS may break something that was working, and make you lose a lot of time trying to figure out what happened. Even worse, you may think that writing code is too hard and fall back to a comfortable tool like Axure or Photoshop.

If that sounds familiar, I’ve got good news for you. Git is a very simple tool to use once you understand a few basic concepts. It also enables collaboration between teams.

Read more

Thanks for 20 years of sharing your thoughts

Jeffrey Zeldman’s site was 20 years old yesterday. His blog and his book helped me start a career as web designer, about 13 years ago. Disillusioned with university, I learned about visual design, html and css. I remember how his work blew my mind. A better Internet was possible.

Thanks to him I discovered web standards, and its beauty led me to become a front-end developer and my first job, back in my hometown. I loved shipping sites and compared the code to some sort of modern poetry. But I didn’t stop there, I wanted to create better websites so I became a UX designer.

During the last 10 years I moved to Madrid, and then to London. I grew up as designer, and the ideals of an Internet for everybody stayed with me.

Now I do a bit research, a lot of interaction design and I still write code for fun, and that’s partly because of Jeffrey Zeldman. Thank you for everything you’ve shared with the world.

Prototyping a flyout responsive navigation menu without javascript

Off-screen navigation, flyout menu, navigation drawer, there are many ways to call this common pattern. It’s a great way to save valuable real estate on small devices, and most people is aware of it as many native apps make use of it.

There are hundreds of jQuery plugins out there that can help you achieve this pattern, but I’ve found a simple and clever way to make this work using only CSS, no javascript required. Kudos to Bev from @fofwebdesign for the code. All details and cross-browser code can be found on her Responsive CSS3 Multi-Level, Fly-Out Menu (no JavaScript) post.

What I’ve done is to turn the vertical left-hand navigation into a horizontal one, whilst keeping the left off-screen nav on small devices. As I only need this for prototyping I’ve removed the second navigation level, and most of the code meant for cross-browser compatibility.

In essence, I’ve made it really simple so anybody with basic HTML and CSS skills can use it.

TL;DR

See an example / Another example
Grab the code on codepen.io

(Resize the browser to check how it works on a small device)

How it works

You’ll need one container for all your content, and another one positioned off-screen for your navigation elements. The latter can be inside or outside the main container. Check the two examples above and you’ll see that it’s possible to place your navigation inside your container, or outside.

Lastly, you’ll need a checkbox (that we’ll hide from the viewport), and a label to select/unselect that checkbox.

responsive flyout navigation without javascript

The CSS will make your elements slide in when the checkbox is selected, and slide out when unselected, so no javascript is required.

The code

<input type=“checkbox” id=“main-nav-check”>

#main-nav-check {
position:absolute;
top:-9999px;
left:-9999px
}

The checkbox is not visible, but it is still important where it sits in your code.

You’ll also need a label to select/unselect that checkbox. And you can make it look like a navicon, or use an image if you want.

<label for=”main-nav-check” class=”toggle” onclick=”” title=”Menu”>&#x2261;</label>

As we’re using the ~ selector, the checkbox and the two containers we’re going to animate (menu and container) must have the same parent. In this case, all elements have the body as its parent.

body
|_ #main-nav-check
|_ #menu
|_ .wrapper

About the ~ selector – from w3schools:

The element1~element2 selector matches occurrences of element2 that are preceded by element1.

Both elements must have the same parent, but element2 does not have to be immediately preceded by element1.

So, how does this work? The CSS will check whether the checkbox is selected or no, and move the container (.wrapper, that in this case contains the menu as well), 13.75em to the right. And that’s exactly the width of your off-screen menu.

#main-nav-check:checked ~ .wrapper {
-webkit-transform:translate(13.75em,0);
-ms-transform:translate(13.75em,0);
transform:translate(13.75em,0)
}

No javascript required, just be careful to position the checkbox and elements to be moved as child (direct descendant) of the same parent.

Check the codepen here, and examples here and here (resize your browser to check how it works on small devices).

How long it would take us to hate Material Design?

I have to say that, right now, I love Google’s material design. It’s fresh, easy on the eyes, affordable enough, and has as little visual design as possible. The right middle point between the silly flat design, and the pompous skeuomorphism.

But as any trend, it will soon fade and people will hate it, make jokes about it. At least we designers will do it, we’re a bit nerdy sometimes.

In the meantime, if you’re building a website and want to quickly make it look nice and modern, here’re a couple of frameworks to materialise your design:

 

Responsive inspector for Chrome

A pretty cool extension for Chrome, that allows you to view what media queries a website is using, quickly view the specific CSS code for a particular breakpoint, resize your browser and take screenshots of the whole page at a particular size. Great for testing and for documenting!

Check the video for the features or download the extension on the Chrome Store.

Via Talentopoly.

Revisión de la accesibilidad – HERA 2.0

Desde hace pocos días está disponible la versión 2.0 de la herramienta online HERA, desarrollada por la gente de la Fundación Sidar.

Esta herramienta totalmente en castellano nos ayuda a realizar los análisis de accesibilidad de nuestras páginas web, no sólo dándonos la revisión automática (que es únicamente el punto de partida), sino guiándonos a traves de los puntos a revisar manualmente, y presentando informes del resultado.

Una gran ayuda para hacer la web un poco más accesible día a día.

FCKEditor 2.0 FC

Acaba de salir la Final Candidate de este editor WYSIWYG. El FCKEditor es una excelente opción para aquellos que quieran realizar su propio CMS‘s, contando con el apoyo de un editor avanzado capaz de añadir estilos, tablas, imágenes, ficheros, enlaces, etc. Podéis ver demos online y comprobar como funciona.

Es cierto que no genera un código muy correcto, y que es algo lento la primera vez que tiene que cargarse (sobre todo en el Firefox), pero resulta muy intuitivo y fácil de usar. Yo lo he utilizado en dos proyectos para personas con conocimientos mínimos de informática, y ambos lo usan sin problemas para poder incluir su contenido de una forma más presentable que no simple texto plano.

Personalmente esperaré a que aparezca la versión 2.0 final (prevista para junio), y comprobar que está rodada antes de actualizar mis páginas, ya que aún usando una release candidate, es suficientemente estable para usarla en proyectos reales.

↑ Back to top