Nordic Design

Design, Music and Life, by Alex Lillo

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).

Improving your design process

I’m a big fan of learning from other disciplines to improve my design process. This week I found an interesting article on UX Booth: Engineering our design teams. If you’re a digital designer go and read it as you’re likely to find something to add to your routines.

The truth is that some of those things have been part of the design toolkit for a long time, just maybe few companies do it.

Quite often agencies (can’t speak for in-house teams, never been in that side of the industry) assign one designer to a project, and that person will have to deal with the production of wireframes, visuals, etc. This tends to be for cost reasons, but working in isolation makes it harder to achieve great results.

At Webcredible we use a more collaborative process, and that ends up improving a lot the quality of what we do. Here are a few examples:

Pair designing

No matter the size of the project, a designer will never be the sole consultant. Having somebody else to bounce ideas off is critical to have more and better ideas.

You want people with different skillsets as that will allow teams to view problems from different angles. For example, pair an interaction designer with a visual designer, a front-end, or a researcher.

I don’t know who did this first, but it’s definitely not a translation of the software’s world (pair programming), companies like IDEO have been doing this for ages.

Critiques

Informal critiques are always been an important part of our design process, but after reading UIE’s blog post Good, Bads and Dailies: Lessons for Conducting Great Critiques, I wanted to turn this into a routine.

Now we hold Webcriticals almost every Thursday. When a projects is about 50-75% complete, it’s time to gather feedback from a wider audience. The sole process of showcasing your work to your peers brings clarity to your ideas, and the quality of our work always benefits from this sessions.

Project retrospectives

Last thing you want is to forget all the hard learnt lessons, and end up doing the same mistakes again and again (though we humans are very good at it).

Agency life is fast-faced and often you’re dragged into a new project in a few days, but we strive to find time and do a retrospective. Those involved will be better prepared for future challenges, and lessons learnt are communicated to our peers via skill swaps sessions.

Agile’s retrospectives, combined with a Post-up game, are an effective way to capture what happened. But you don’t want that knowledge to stay on a few people’s heads (or worse, getting dust in a file). That’s why we hold regular skill swaps, 1-hour sessions to share a knowledge we have. Sometimes we talk about photography, meditation or cooking. And sometimes we discuss what we learnt in a project. It all makes us better designers.

Have you tried any of these activities? Maybe you use others that make your design process more effective? Find me on Twitter, I’d love to hear your thoughts.

Bye bye Foursquare, or how to save battery on your phone

Battery usage on a Nexus 4I’m not sure if this is a Nexus 4 issue, or happens to every Android device. But from time to time mine decides to stay awake, even if I’m doing nothing with it. Stopping Foursquare put the phone on sleep mode again, so if you have this issue try it, it may help.

I know of a bug on the Mail app that makes the phone stay awake whilst on the train. I suppose that as it looses and regains signal, the app enters in some kind of infinite loop trying to check the network and download mail. It means that unless I kill the app, every time I go see a client my phone is dead in an hour.

Some Fridays ago I was having some drinks with my Webcredible colleagues. Battery was doing fine, and I hoped to have some left to listen to music on my train back home. Then we moved into a pub, I checked-in on Foursquare and… zas, my phone turned into a heat emitting device capable of frying a steak. Battery was dead a few minutes later, something my wife didn’t appreciate.

So when my phone got into hot pan mode a few days ago, I decided to investigate a bit. As you can see on the screenshot, there was a drastic use of energy going home (1). That’s normal, as I was using Spotify and checking some news. Problem is, I got home, stopped using my phone at all, but it was still quickly draining the battery.

A quick charge later, battery was still draining at a ridiculous rate, so we checked what was running in the background. Foursquare was there pretty high on the list, even if I don’t use it at all. So I killed the app (actually uninstalled it), and as you can see (2) my phone went into sleep mode again. That’s probably what happened that Friday night, Foursquare kept running in the background in some kind of infinite loop.

I’m sure there are other apps that do exactly the same, so if you have this issue and don’t use Foursquare, simple go to Settings > Battery, check what’s using it and kill it. Quite likely that is some app checking your location or trying to sync information.

Air traffic visualisation

The guys at NATS (UK’s traffic control provider) have created a beautiful video showing what happens in the UK airspace in 24 hours.

Airspace navigation and traffic control is a fascinating topic, something that very few are aware of, but that keeps all the planes flying securely and on time(ish).

Via Microsiervos (in Spanish)

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:

 

UX is a way to measure a product’s quality

You’ve probably heard/asked the question many times: What is User Experience? Ask it to a 100 people, and you’ll get 100 different answers.

If you look at the job roles in the industry, UX is related to the user research and design of digital products, in particular websites and mobile apps. So it’s understood as a discipline, like Graphic Design or Project Management.

User Experience (UX) involves a person’s behaviours, attitudes, and emotions about using a particular product, system or service. User Experience includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency.

(Quote from the Wikipedia)

I don’t think User Experience is a discipline, but a way to define the quality of a product.

I’ve said many times that UX happens whether you want it or not. It’s like quality, can be good or bad. You take care of many details and that increases a product’s quality.

When you design a product, you may create a great User Experience, that’s a quality that defines it. But you’re never doing UX. You’re designing to create a great UX.

You can study a product’s User Experience, though, so in that sense UX is more related to research than design. The understanding of an audience’s behaviour and needs, the study of a user journey, the different touch points your customers interact with your business, all that is the study of a particular User Experience. It’s the ammunition you use to create something better.

If you’re creating something, if you’re solving a challenge and exploring new solutions, you’re not UX’ing, you’re designing.

On swarms and squares

If you’re one of those that like to check-in at every place you go, you’ll know that now foursquare has a dedicated checkin app, Swarm. The old app is now all about exploring the city.

As every time a popular service changes, the Internet has gone nuts. People has started to publicly state that they are about to stop using it. Like if anybody cared.

Why so sad?

Apparently they don’t like the product decisions at Foursquare. I suppose that’s fine if you work for them or own shares on the company. I can see a shift this size affecting the app usage. But for a mere mortal like me, well we’re just a merchandise for them to trade.

Personally, I don’t care about them splitting their functionality in two. Actually, I’ve always found the recommendations side of the app pretty useless, so that angle won’t be missed from Swarm (if I’m looking for a nice restaurant nearby, one that’s 9km away from me is not helpful, thanks).

And I quite like the way they’re transitioning from one app to two. I’ve found the process quite smooth, even if Swarm is quite different from Foursquare. So I’m enjoying the transformation (and taking screenshots of it, you never know if a client will need something similar in the future).

Ultimately, people don’t hate change, they just hate when you change things for the sake of changing. Maybe the new Foursquare will be so amazeballs that everybody will agree that the move was genius. Maybe the app will fade, become irrelevant and be sold/close, like gowalla, who knows. But in the end, it’s Foursquare’s decision. Disagree if you want but, why so emotionally?

Extra ball

That guy complaining about the horror that is their forced Swarm app install, works for Facebook. A company that forced users to install their Messenger app if you wanted to keep chatting with your friends. But probably that was ok. </irony>

2nd Battle of St Albans re-enactment

Living in the British countryside it’s easy to find little fairs and celebrations about all sorts of things. Last week the Medieval Siege Society remembered the 2nd Battle of St Albans, so it was the perfect opportunity to take my camera out and photograph something different than my daughter.

medieval lady

The battle took place on Bernards Heath in 1461, as part of the Wars of the Roses. More info about it on the wikipedia.

It's a hard life

Apparently the First Battle of St Albans (1455) marks the beginning of the Wars of the Roses. So if I they ask me that type of questions when I request the nationality, hopefully I’ll get this one right!

A few more photos on my Flickr set.

↑ Back to top