Nordic Design

Design, Music and Life, by Alex Lillo

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.

I Microcongreso sobre estándares web, RubyOnRails, podcasting, y buzzwords en general

La gente de The Cocktail y Simplelógica está organizando para el viernes 6 de mayo el I Microcongreso sobre estándares web, RubyOnRails, podcasting, y buzzwords en general. Ver su web para más información.

Ya podría ser este fin de semana, que estaré en Madrid, porque promete ser muy intersante. ¿Alguien monta algo similar en Valencia? Que me queda más cerca, en Castellón ni lo digo porque es imposible, me temo.

↑ Back to top