Jeremy Thomas

A better Android "Complete action using"

2015-03-21T00:00:00+00:00

When opening a specific type of link, Android prompts you to choose between several apps. It’s the mobile equivalent of the desktop “Open With…“.

For example, when tapping on a Airbnb link, this modal appears:

The key part of this modal is the bottom part, where 2 options appear:

Always: subsequent taps on similar types of links will always open the selected app.
The modal won’t appear again.
Just once: the link will only open in the selected app this time.
The modal will reappear next time a similar link is opened.

The problem with this approach is that any action requires 2 taps: selecting which app to use and how subsequent taps will behave.

As a result, choosing the permanent behavior is as easy as choosing a one-time behavior. If a user chose “Always” by mistake, he’d have to dig deep into the phone settings to undo his error, which will also clear the app’s behavior regarding other types of links.

A less error-prone approach

To simplify the opening of a link and to prevent any permanent decision, the modal should look like this:

How it works:

No app is selected by default.
Tapping on an app will open the link in that app.
Choosing that app as the permanent choice requires 2 taps.

The one-time action is quicker as it requires only a single tap.

Although defining the permanent action requires to tap at the bottom and then in the list, opting for a less straightforward approach is deliberate, as it prevents easy mistakes.

If a user wishes to choose an app as the default one, he’d have to actively decide to do so.

An alternative to infinite scroll

2014-11-04T00:00:00+00:00

Lavalamp.js demo

To infinity but not beyond

Whoever initially implemented infinite scrolling was probably well-intentioned. The fundamental idea is clever: accelerating the process of finding what you’re looking for by eliminating any hurdle. No need to load a whole new page, nor to take any action at all. The browsing experience is seamless.

But also endless. The flood of results can be overwhelming. The page scrolling can drastically slow down. Retrieving your previous position can be challenging. Bookmarking is almost impossible. Keeping a sense of space (and time?) is troublesome. There’s too much, too quick.

Although some of these issues can be circumvented through technical and layout tweaks, the underlying question remains to know if infinite scroll is necessary at all. Etsy dropped infinite scroll after making the wrong assumption that users wanted both more results per page and faster results. Probably the incessant flow of results prevented the user from taking any decision at all, and led him to forget what he was looking for, or why he started browsing the page in the first place.

A mobile paradigm

The infinite scroll UX paradigm has found its way in many interfaces, especially on mobile. It’s probably due to users (including me) being lazy: swiping (for scrolling) is more convenient than tapping. It’s a more natural, less demanding gesture.

It does makes sense for feeds (Twitter, Facebook) because they only require one page, and are meant to be consumed in one direction primarily. It’s less convenient for search results though, where there’s a sub-page to be accessed, and where the uncertainty to end and probablity to alter your navigation are both higher.

What about a regular pagination? Next and Previous buttons are mandatory, but displaying pages on a mobile device is less of a requirement, or should at least not be interactive.

Simplifying the flow

Some of infinite scrolling’s assumptions are correct, but need to be reduced and/or altered to fit a mobile device’s needs:

speed up the browsing experience by remaining on the same page
unburden the DOM from past results
maintain the possibility to navigate to the previous page
provide the user with a sense of completion by displaying a milestone (the Load next button)
keep the user focused by requiring his action to navigate
design a seamless experience

Demo: http://jgthms.com/lavalamp.js/lavalamp.html

When tapping the “Next” button, an animated element covers up the viewport, remains fixed on top (while the new content is loaded and the page scrolls back up), before it shrinks to match the “Previous” button and then disappear.

Source: https://github.com/jgthms/lavalamp.js

Chrome's black scrollbar bug

2014-06-04T00:00:00+01:00

Have you ever encountered a black scrollbar like the one below?

If so, you might wonder where it comes from. For the last couple of months, I’ve been experiencing this issue on a regular basis, without actually understanding why it occured, so it was difficult to find a workaround.

In my case, it only happened in Chrome on my Macbook Air. Although refreshing the page fixed the problem, I wanted to find out what triggered it in the first place.

And then it occured to me.

I’ve been using a Logitech mouse since February. At times, when working with a colleague, I would unplug my mouse, grab my laptop, and sit at his desk. That’s when the black scrollbar would appear.

The viewport will be 15px less wide with the mouse plugged in

When using a mouse, Chrome renders a fixed scrollbar that’s 15 pixels wide.
When using the trackpad, Chrome uses an “overlay” scrollbar, that doesn’t take up any space, and only displays the scroll handle when interacting with it.

Unplugging the mouse while visiting a page in Chrome would remove the fixed scrollbar and replace it with a black rectangle.

Order and hierarchy in menus

2014-05-19T00:00:00+01:00

While using Chrome on Android, it occured to me its menu carried a behavior that’s recurrent in many interfaces.

Chrome Android's first menu screen

Apart from the Back, Forward, and Favorite buttons, all the other items appear identical. But apart from their visual similarity, their respective position determines their importance ; a higher position denotes a more significant role (especially when using the useful one-swipe-only interaction).

It’s therefore natural to find the ‘New tab’ button in 1st position. But the others buttons’ relative position?

New incognito tab is seldom used but is 2nd, though its position is probably due to its resemblance with New tab
I never used Other devices but it’s 4th
Same applies to Print (7th), for which I can’t see any reasonable use case (printing a web page and via a phone?)
The more useful Request desktop site (considering the poor state of dedicated mobile websites) is buried third to last
Settings are second to last

Re-arranging the order of these buttons is a good step towards a more usable interface.

Going further in providing a quicker and better experience, I wonder why all buttons provide the same interactive area while they don’t carry the same importance. I assume it’s due to the less error-prone touch interface. But it makes sense on desktop, especially for people not well acquainted with keyboard shortcuts:

On a side note, hiding the menu while interacting with Back and Forward is bad UX, considering they’re often used repeatedly in a row.

CSS interview questions and answers

2014-04-29T00:00:00+01:00

While browsing through my starred GitHub repositories, I noticed an interesting one I had forgotten about: Front-end Job Interview Questions.

Only once have I had to provide a CSS layout for a job application. But I also happened to rate candidates based on a CSS exercise I set up when Steaw was looking for additional Front-end Developers.

I thought it’d be both entertaining and stimulating to try myself at a fictitious interview based upon the CSS-related questions of that repo. I’ll play by the implied rules: answer directly, without putting too much thought into it, write as I’d speak, and leave the potential mix-ups or innacuracies I’d drop in such a situation.

TL;DR: I agree, it’s long. But it reads quickly considering I wrote it quickly.

Describe what a “reset” CSS file does and how it’s useful.

It’s meant for cross-browser consistency. Basically, each browser provides its own user-agent stylesheet that acts as the default one if no stylesheet is present. So you have default font-sizes, margins, colors, paddings… They’re all slightly different for each browser. So instead of fighting with these differences when writing your own CSS, you just “reset” them as much as you can. It’s like a solid foundation on which you can define your own styles.

I’ve usually used either Eric Meyer’s CSS reset, or the Yahoo one. I just copy paste it on 1 line and forget about it. Recently, I use an HTML5 one that I found somewhere, and that works quite well. It’s a usual “set it and forget it”.

Describe Floats and how they work.

Ah, floats… Probably the least understood CSS property. It’s hard to handle it because it not only affects the element you’re targetting, but also the surroundings: the parent, the siblings, the following elements…

What it does is “push” an element to the side you’ve chosen, either left or right. That’s why you don’t have a float: center. It’s simple to understand and see how it affects the targeted element. But the issues come from the surroundings: a parent with only floated childs will have a height of zero, as if the children weren’t there. The text that follows a floated element will be wrapped around it. If you have float: left, the text will use the remaining space on the right, and then the one remaining below. Visually, it looks like stairs. But if you inspect it, you can see that the element containing this text is actually behind the floated element. So, it feels weird.

The thing is, a float will take an element out of the flow, a bit like position absolute or position fixed but not exactly. I say not exactly because the surrounding elements are mostly aware that the floated element is still there (they will wrap around it), but the parent won’t.

The float is directly related to the clear property, which reintroduces the floated element in the flow, by placing a cleared element after the floated one. There are other clear techniques, like putting a float or an overflow visible on the parent, but it only delay the issue. So I usually use a cleared element.

Describe z-index and how stacking context is formed.

z-index is for visual depth. Because some elements overlap, because some elements are nested within each other, there’s a natural visual depth that builds, where you can see some elements on top or behind other ones.

The natural depth depends upon a couple of things:

if an element is nested within another one, then it shows up on top of its parent
if a sibling comes after another sibling, it’s on top as well

Position absolute or position fixed will mess with that: they’ll show up on top regardless of their tree position. Well, sometimes… I’m not sure. But because it’s sometimes a burden to move elements in the HTML tree, or because the depth behavior can be unreliable, you can use the z-index property to make sure how elements will “stack” upon each other (when they overlap obviously). By the way, you need an element to be positioned (relative, absolute, fixed) for the z-index to work.

The z-index value is relative. So you can have one element with z-index: 1 and another with 2, and the latter will show up on top. Same thing would happen with values of 1000 and 4875.

What I usually do is regroup all the z-index values at the end of my CSS, in order to adjust the values according to the other elements’ values. I start with the highest value so that my selectors order reflects the visual depth order. Also, I put multiples of 100 as values, so that if I have to insert up to 99 elements between 2 others, without having to readjust all the other values. In practice, I usually insert 2 or 3.

What are the various clearing techniques and which is appropriate for what context?

The obvious one is by using the clear property, which can have values of none, left, right, or both (left and right). Another one is to float the parent element. Another I’ve heard of is put overflow: visible on the parent, or something like that.

In the end, I just rely upon the clear property, because that’s what it’s meant for. Sometimes I put it directly on an element, sometimes I use a dedicated class for that (the famous “clearfix”), and sometimes I use the :after pseudo-selector.

The thing is: the clear property does only that. You rarely apply it along with other properties. Sometimes, it can actually clash>

For example, you have a ul with lots of li’s that are floated left, have some height, some background, some padding… You target them by using a ul li selector (or .whateverclasstheulhas li), because you want to make use of the hierarchy selector and not but a class on each li.

Because the li’s are floated, the ul will have a height of zero. What do you do?

float the ul and put a cleared element after that?
use a clear on ul:after, and cross your fingers for browser compatibility?
put a clear on the last li?

In every case, the clear property will be used. But for the second option, it will clash with the styling of the li. So you’d need to reset that only for that cleared li. It’s usually a pain. So you either don’t use the hierarchy selector, or don’t use li’s, or just float the ul and add a “clearfix” div after that.

Because I often work with developers who just want some practical solutions, I have a .clearfix class in my CSS that does just that. It might be semantically irrelevant, but it get things done.

Explain CSS sprites, and how you would implement them on a page or site.

A CSS sprite is a big image containing several background images at once. It’s a collection of images combined in one big image. You choose the background image you want to show by playing with the dimensions of the element (which acts like a viewport) and the background position.

Advantages are:

bandwidth: you just have 1 HTTP request for one image, and the combined image is often lighter than separate images combined
rendering: as soon as the sprite is called and displayed once (and even cached), you can re-use it with other elements. Works well with the :hover pseudo-state. There’s no blinking.
maintenance: it’s easier in Photoshop or Sketch to export a single asset with everything

It’s not a new technique. I remember old games having sprites. Even Mario Kart 64 has sprites for the cars!

Because a sprite is an image that’s meant to be used on a lot of elements, I consider it a shared property. So I regroup all selectors that use the sprite, and but my CSS code on 1 line for that (with some text-replacement code just in case).

Sprites are often used with icons of the same dimensions. Although you can actually build a sprite for all the background images of your site, of various dimensions, it’s a pain to maintain. Plus: sprites are mainly used for non-repeated background images. I’ve done some with horizontally or vertically repeated (but not both) images, but it has its limits.

So I usually have only sprites for icons now. There’s a tool to generate the sprite: you upload a zip of icons with the same dimensions, set the offset, set a CSS class, and it generates both the sprite and the CSS background positions for each selector. It’s amazing.

What are your favourite image replacement techniques and which do you use when?

I stick to the one I first learned about: overflow hidden and a huge negative text-indent. I actually use -290486px because that’s my date of birth, so it acts like a CSS signature. It’s silly but considering you can put any value, why not make it a bit meaningful? Sometimes I Google it and find people who copy-pasted my code. I don’t mind: that’s what it’s meant for.

There are probably other image replacement techniques, but I never bothered to look for an alternative. I mean: this one has worked for years, and I know how to handle it.

How do you serve your pages for feature-constrained browsers?

I guess you mean all that vendor-prefixed properties? There’s this term, “progressive enhancement”, and its counterpart, that I don’t remember actually. It’s that permanent question: should I code for the older but still used browsers, and add some magic for the more modern ones, or make it look great for the modern ones, and fix it with hacks for the older ones?

I prefer the second approach. It’s more future-proof: eventually, the browser market will catch up and you won’t have to update anything because the hacks you implemented won’t be needed, and won’t even be actually called. Plus: it’s less frustrating. You can actually design stuff the way you want, make it both look better and with cleaner code. Then I test it on IE to see what’s going wrong, call an ie7.css file thanks to the MS conditional tags, and add some hacks there.

That’s for really basic CSS properties, that should be available in all browsers today. For more advanced or funny styling, I sometimes check the Webkit or Mozilla documentation to see what my browser is capable of.

I love caniuse.com by the way. Stupid designers will say it’s ugly. It’s actually very well designed: it’s quick, well documented, easy to read and scan, and it gets straight to the point. At a glance, I know if the CSS property I intend to use is supported or not.

In the end, if it’s a personal project, I won’t bother testing with IE. If it’s for a client, I’ll ask him to test. IE has come a long way, and considering I’ve had years of IE6 hacking, I’m glad IE 10 is getting there.

What are the different ways to visually hide content (and make it available only for screen readers)?

Well it’s the same image replacement technique I mentioned earlier: overflow hidden and text-indent -290486px. The text is there in the code, but doesn’t appear on screen. That’s another reason why I still use this technique: I’m pretty sure it doesn’t affect the screen readers or the SEO.

Have you ever used a grid system, and if so, what do you prefer?

Only with Bootstrap actually. In general, I don’t like grid systems because they transfer the styling from the CSS to the HTML, and my Golden rule is to respect a division between the content (HTML) and the layout (CSS). For example, I’d rather have .button-signup and a .button-upload, and combine them in a selector, rather than having a .button-primary used in both cases because I’d have to dig into the HTML to change the styling, and that’s not the point of CSS.

So for a grid system, you’d have things like .col-3 and .col-9 for a sidebar and a “main”, in a 12 columns layout. First, the styling is in the HTML. Second, what if you want to put that sidebar on the right and not the left? Well you’d have to modify your HTML structure, instead of changing 2 words in your CSS.

Also, when coding a responsive website, you’d be stuck with 2 columns in this case. You can’t go from 4 to 3 to 2 to 1 column, depending upon the space available. You’d have either 2 or 1 column.

In the end, I use a grid when I use Bootstrap, but only because Bootstrap comes with tons of other stuff.

Have you used or implemented media queries or mobile specific layouts/CSS?

Yes, a lot. I love it. It’s like a challenge actually. At first, I was just playing with it and thought it was magic. I’d design my desktop website, finish coding it, and then add some rules to make it decent on mobile.

Nowadays, I try to go the “mobile-first” way. It’s quite easy: you just follow the HTML flow. But then the desktop layout can end up feeling like a watered down version of what you could have achieved if you’d started with that version first.

In any case, I really enjoy media queries. I tend to stick to min-width and max-width though.

Also, I’ve had issues with synchronizing these media queries values with the ones I use in jQuery. For some reason, some browsers include the scrollbar in the calculated width, some others don’t. So it can be tricky to trigger the responsiveness in both you CSS and your jQuery.

Any familiarity with styling SVG?

SVG directly in the HTML code? Not so much. I’ve seen some people playing with the path and fill attributes, and animating it. It’s quite fun. What I like is that you can write the colors in CSS, and avoid color profiles issues! That’s really interesting.

I’ve had SVGs in image tags as well. Had color profile issues so I try to avoid that now.

I haven’t tried SVGs much in CSS background-images.

The best use of SVG I’ve found is icon fonts. There’s Icomoon, which is an app where you can upload your SVGs or choose existing one, and generate an icon font. And of course there’s Font Awesome, which is really convenient. In both cases, what I like is the fact that I can use text CSS properties to style the icons: font-size, color, text-shadow, line-height, vertical-align… And because it’s vectorial, it looks great at any size. It’s perfect for Retina screens for example.

How do you optimize your webpages for print?

I don’t, really. I think I only wrote once a CSS for print specifically. I don’t even remember how to do it. Maybe a media query? Or an attribute in the link tag? Something like that.

What are some of the “gotchas” for writing efficient CSS?

I have a few that I’ve developed over the years. They’re quite personal, but in any case I don’t think there’s a real standard for writing CSS.

Here are a few rules I follow:

I write my CSS in line. I must be part of a very small minority. The thing is: I absolute love information density. I want to see the CSS structure in front of me, so I make use of the all the horizontal space. When writing 1 property per line (as everyone), it’s easy to read the properties. But I don’t care about the properties: I know them. I want to read the selectors. So I have one set of properties per line, with 1 or multiple selectors. Sometimes I put selectors on several lines, sometimes not. Depends.
to be able to scan my properties quickly despite the fact that they’re on single line, I put them in alphabetical order. It works pretty well with time. I know roughly where to look to find a margin or a width or a text-transform.
group shared properties with selectors. If several elements share a same set of properties, you could have dedicated class, or repeat yourself, or use a mixin. What I do is just list all the selectors that share this set. Then, I can have specific styles for each of these selectors. Way better than having a dedicated class.
I only use classes. I keep ids only for jQuery stuff. CSS priority is hard to graps, and ids are powerful selectors. They can take over the styling quite easily. To avoid headaches, I just use classes. Ids are meant to be used for unique elements. But nothing prevents from using classes like that. There’s no semantic in CSS. So use .header instead of #header, and you’ll avoid priority issues. Especially true when having #nav li, because if a li has #nav-home, you can’t use just #nav-home and it’s stupid because it’s an id selector, so the uniqueness should work. But it doesn’t because #nav li is stronger. So you have to do #nav #nav-home, which looks really stupid.
Here’s how I order my styles: reset, fonts, generic tags, shared properties, common elements (that appear on every page), elements, elements in context, colors (background, borders included), z-index, animations, CSS3 vendor-prefix stuff.
I use a tab to show a variation of the styling of an element.

What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)

I tried both SASS and LESS, but never managed to integrate them in my workflow. The things I wanted to use them for is variables mainly. But I found that regrouping selectors works way better for me. One thing is that I can change the single value in the Chrome Inspector and see it changing live everywhere.

Also, mixins look nice. But in the end, I feel it’s an overkill to have a separate tool for something as simple (but not easy) as CSS. I’ve written my CSS and HTML in Notepad++ for years, even without auto-completion. This has helped me find ways to write my CSS efficiently, by regrouping stuff, by keeping the HTML structure clean and light, by having a clear flow in my CSS, by keeping a tidy namespace as well.

So preprocessors might just be for developers looking for writing efficient CSS for them. But that’s not for me. I like the static feel of a text editor and a browser.

How would you implement a web design comp that uses non-standard fonts?

If it’s a Google Font, just use a link tag, with the minimum amount of fonts necessary. I never used Typekit. I’ve often used a font-face generator online. I then put it in a seperate CSS file because the code can be quite long. Also: I try to keep the same font-family name for the various styles and weights. It’s easier for example to change the font-weight rather than the font-family.

Explain how a browser determines what elements match a CSS selector?

Well I guess it’ll start by looking for the generic tag selector, then the class, then the id. (I won’t talk about inline styles or CSS in the head). Also, some properties are inherited. But some elements don’t inherit stuff (like links who don’t inherit the color). Then you also have to take into account a multiple part CSS selector, like with 2 classes. Which one takes priority? But that’s beyond the scope of the question I think.

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

The box model basically determines how much space an element will take on the screen. It includes the height/width (applied or generated), the padding, and the borders. The paddings and borders are usually set. The height/width is often flexible, and is determined by the inner text or child elements.

If you want a different box model, just use IE6 and delete the doctype. You’ll trigger Quirks mode. It’s like the new box-sizing: border-box. I’m not used to that. I’m used to the content-box, where the width doesn’t include the paddings nor borders.

What does * { box-sizing: border-box; } do? What are its advantages?

It’s the IE6 Quirks mode: if you set a width, and add paddings and borders, the total width won’t change. It’s the innerwidth that’ll adapt.

Advantage? You can play with the paddings and border values without worrying about expanding your box. Very convenient for column layouts. And you can mix percentage and pixel values, so you don’t have to rely on a child element for the padding.

Disadvtange? Well, I’ve spent 7 years designing with the content-box model in mind, and now it seems he border-box model is catching up. I feel like dealing with IE6 again. But apparently, I’ve heard that the W3C always wanting to make the border-box model the standard. So I guess it’s a good idea to get acquainted with it right away. Bootstrap uses it, and my HTML5 reset uses it. And the browser compatibility seems ok.

List as many values for the display property that you can remember.

Ah well, block and inline. The 2 big ones! list-item, which is quite useless. none, table, table-cell, table-row.

I’ve been using table-cell a lot lately. Two things it does well is vertical-align, and taking up all the horizontal space (although you need table and table-row for that). It’s like designing with tables, but with only the good parts (and the correct semantics).

What’s the difference between inline and inline-block?

Ah, forgot about inline-block in the previous question. Well, inline-block is like the best of both worlds (or the worst). Main difference with inline is that you can actually set a height and width on the inline-block. And you can still use text-align center on the parent to center these!

So inline-block is like a mini block that you can insert in text. It’s like an image basically, which is the most hybrid HTML element.

What’s the difference between a relative, fixed, absolute and statically positioned element?

Static is the default value. The element stays in the flow. Relative is almost like static, but with some tweaks. It also stays in the flow (which is the magic part), but you can use left/right/top/bottom to actually offset the element, without the other elements being aware of it! It’s like movement in disguise. Also: you can use the z-index. And also (very important): it acts like a point of reference for absolute-positioned child elements. Absolute takes the element out of the flow. So the other elements act like it’s not there. That’s why absolute elements appear on top. Then the first positioned parent acts like a reference point: you can use left/right and top/bottom to position the element, like on a grid axis. One trick is to provide values for the 4 properties, keep height and width to auto, and you have a perfect flexible overlay! Fixed positioning is like absolute, but the reference is the body, or the viewport actually. Usually used for headers, but is also perfect for overlays, because fixed elements don’t scroll.

What existing CSS frameworks have you used locally, or in production? (Bootstrap, PureCSS, Foundation etc.)

Bootstrap only. Used it for a few projects only recently. I think it’s great for web apps, because you don’t care about semantics, you just need a workable interface that works well on most browsers. And in this case, I’m in a “Just make it work” state of mind, so I don’t care about writing/rewriting my HTML for building my layout.

What I do is have an override.css to alter the Bootstrap elements, and have a specific.css for additional classes.

What I mostly like about Bootstrap is the grid system, the form elements (really great implementation), the basic responsiveness, the JS plugins, the buttons that work everywhere.

For a quick dashboard, or a simple WordPress theme, I’d use Bootstrap because I want to gain time. But for bigger projects, I have my very own way of writing CSS and imagining its structure, that I’d write everything from scratch. It’s more flexible for maintaining, and it also allows me to design more complex layouts.

Have you played around with the new CSS Flexbox or Grid specs?

No.

Wikipedia redesign

2014-04-27T00:00:00+01:00

It’s a common thing among designers to provide a so-called “unsolicited redesign” of a well-known website and write about it. Here’s my humble attempt.

As you would have figured, it’s just a screenshot. I didn’t change anything because there is nothing to change. Or at least, not enough to prompt a complete graphical overhaul.

“It’s about content, stupid!”

Wikipedia is probably my favorite website. I like to imagine it as the epitome of Sir Tim Berners-Lee’s vision when he created the Web: a collaborative tool to gather and share knowledge freely.

An open encyclopedia? Accessible online for free? But most importantly, editable by anyone? “That’s crazy, it’s never gonna work.” The ability to easily insert false information embodies the usual criticism you would encounter, but actually acts like a fraudulent proof-of-concept of Wikipedia’s doomed premise. The thing is, there is in the long run no incentive to alter Wikipedia’s content and degrade its integrity. The collaborative authority will prevent it anyway.

As a result, Wikipedia’s main, and sole, purpose is to deliver content. It’s a database of information, 95% of which is text, the not coincidentally “T” in HTML.

The TL;DR of the links it references

You usually don’t read Wikipedia: you scan it. Well, it is a website, and with it comes the usual browsing behavior. Any redesign that crushes the information density is missing the primary use case: looking for a specific bit of information in a well-structured page full of text. It’s a starting point that provides a condensed overview.

There are studies about how each line of text shouldn’t exceed 70-80 characters. I hope Wikipedia never blindly sticks to that rule. I want the data, the text, the hyperlinks, the sidebar summary, the hierarchy in the layout.

And whenever I do read a page in full, the design never bothered me. I actually didn’t see the design. I wasn’t aware of it. And that’s actually the point.

The “fairy tale” mockup

You’ve seen it in all redesigns already:

the Facebook news feed with gorgeous friends pictures
the ad-less IMDB
the content-curated Wikipedia page
the huge screen/no border iPhone concept
the image-heavy “2560x1440 optimized” airline website

In the latest Wikipedia redesign concept, the homepage uses a grid of high-quality images as its primary content. Why high-quality? Well, they’re mostly pictures, either aesthethically pleasing or immediately identifiable. It’s easy to dismiss the text when choosing pictures/paintings of Steve Jobs, Virgina Woolf, Horatio Nelson, Nelson Mandela, Henri VIII…

I guess Wikipedia mention them every month, right? What about the content that’s on Wikipedia right now?

The Alt US 40, and the sundial solstice declination lines for different latitudes. Not "good enough" for mockups, but probably more interesting.

Sure, let’s drop the substance, or alter it enough to fit our needs. It works for me, in my context, on my screen, it should be fine, right? Well, that’s not designing. That’s cheating. You’re skewing the content’s use, perverting its value.

I wouldn’t hire you

So you wanted to show off your Photoshop skills? And you chose one of the top 5 websites? Surely nobody thought about it (both the project choice and actually redesigning Wikipedia).

Why Wikipedia? Because you often stumbled upon it and thought “Urgh, it’s so ugly!”? If so, you weren’t using it. You were looking at it. That usually happens with clients and their feedback. And it’s tiring.

I understand you want to build a stunning visual portfolio, and relying upon a familiar brand will trigger a better (or bigger at least) response.

But you’re missing the point of designing websites. And if you provide a Wikipedia redesign only to dismiss everything that made its success, and insert your own version of Dribbble’s latest trends, then you’re probably not worth hiring because you’re incapable of analyzing the core purpose of a project and tackling real-world problems.

Want some UI ideas? Make a todo app, a weather widget, I don’t care. It’s overdone, but at least you can focus on the eye-candy without killing the purpose.

And don’t call yourself a UX designer. You probably don’t know anything about UX. I know I don’t. Changing the color of a button to attract the eye is not UX. Whitespace is not UX. Oh, and not distinguishing visited from non-visited links is definitely bad UX.

So yeah, I wouldn’t hire you. But what do I know? I’m just a designer.

Why and how I divided my articles by season

2014-03-05T00:00:00+00:00

I just wrote an article about why I chose SVG and CSS rem in this blog’s latest redesign, an article in which I mentioned having divided my articles by season.

Visual hierarchy and relevant information

With any kind of interface, I like being able to visually scan the overall layout, like having a macro overview of the content that’s being displayed. That’s the main reason why I write single-line CSS rules: it helps visualize the selectors hierarchy rather than the properties of a single selector.

Anyway, I started by grouping my articles by year. But considering I’ve only been writing on this blog for 2 years, and that each year averages 15 posts, the information density was not high enough to quickly scan both the frequency of my writing and a particular article’s time period.

I could have divided my articles furthermore by month. But in that case, the information became both:

irrelevant: there is no big difference in October and November for example
too precise: I would have needed to include “empty” months, those during which I didn’t write anything

The natural compromise was to use seasons instead, which, combined with the yearly-based division, could convey a better overview of an article’s time period.

The added benefit was the opportunity to include colors in the interface, which strengthened the ability to visually scan the chronology. (I actually used 4 of Sketch’s default colors, to which I applied a 48% opacity).

Playing with Liquid templates

Because this blog is hosted on GitHub Pages, I could not tweak Jekyll’s source code. But it was not necessary, because the Liquid templating language was enough to generate the relevant HTML code.

When looping through the articles, I have access to all the data I need, especially the date. It was just a matter of conditional tags that allowed me to extract, for each article, both the year and the season. This Stack Overflow answer helped a lot.

The resulting code is quite ugly. But it doesn’t matter because it works. I have no concern about my code’s performance because, after all, Jekyll is a static site generator. It just has to run once in a while, as long as the generated HTML is correct.

By the way, I used months and not particular ranges (like 21st of December - 21st of March) to decide which season an article belonged to. Winter overlapping 2 consecutive years would have been difficult to handle. Plus, this season division is just a visual aid.

Affix.js for scrolling purposes

I wanted, for each set of article currently displayed, to show the associated year-season information constantly. I used Bootstrap’s excellent Affix.js plugin in order to fix the relevant time period at the top of the viewport, until it reached the next time period.

I realized afterwards that I didn’t write during 2 seasons in 2012. Never noticed that before. So I guess this interface reached its objective, at least for me as a reader.

SVG and CSS rem for responsiveness

2014-03-02T00:00:00+00:00

I’ve redesigned this blog 9 times since I launched it in 2012. The latest version is focused on simplicity, both visually and content-wise. I’ve dropped the portfolio, the music section, the colophon, the “small talk”, and the filter labels. And I’ve divided my posts by season (I’ll explain why in another post).

The fact that I’ve been using Sketch for 2 weeks now has quite affected both my design process and the final result.

Images: SVG instead of Retina

Sketch makes it very easy to export assets. It can automatically trim transparent pixels, provide a Retina version, and export all slices at once.

I actually started going the “Retina” road, by exporting @2x versions of each image and implementing the retina.js script. But color profile and pixel-rendering issues led me to choose SVGs instead.

SVGs are:

lighter: it’s just code
infinitally scalable: they keep their sharpness at any size
reliable: no color rendering issues
imperishable: I don’t have to export them again if I want to change their display size

Logos

For example, my logo is really simple: a circle with some overlapping rectangles.

Scaled at 150*150px

It’s the perfect opportunity to try out SVG instead of PNG, especially considering Sketch makes it just as easy to export in that format.

Other images used in this design overhaul include client (Microsoft, Sony…) and technology (HTML 5, jQuery…) logos, for which a SVG version was easy to find (I’d like to thank Wikipedia for providing most of them).

Fonts and Icons

Considering that fonts are made of Bézier curves, they are infinitally scalable as well. They’re usually the only elements of a webpage that keep their sharpness when increasing the browser’s zoom.

Icon fonts combine the benefits of vector assets and CSS font properties, especially size and color.

Being concerned about loading efficiency, I built my own icon font with the very useful Fontello.

Custom icon font built with Fontello

CSS rem: responsiveness with font-size

CSS 3 has introduced a new unit: rem (which stands for root em). Jonathan Snook wrote about it:

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root-or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

I’ve used em for a long time, especially for margins and paddings. Spacing elements relatively to their font-size helps readibility and maintenance. I also use unit-less line-height values (like “1.5”) which are relative as well.

As Snook’s article explains, the problem with em is that it’s cascading. Having for example 1.5em on both <ul> and <li> will cause the latter to be 36px instead of 24px.

In the end, it’s hard to keep track of what the rendered font-size actually is.

rem for height / width / margin / padding

em can be used for CSS box properties as well, but considering its unreliability, rem is a better option.

How it works is:

You define a font-size value on the root element html
You refer to this value when defining height, width, margin and padding
You can then modify the root value and resize your whole layout instantly

So instead of having width: 960px you would write width: 60rem, or margin-top: 2rem instead of margin-top: 32px.

Elastic grid system

I came up with a simple grid system where each column would be 3rem and each gutter 2rem, resulting in a 58rem container width.

It’s called “Elastic” because it’s relative to the font-size (the term apparently comes from Dreamweaver).

Media queries

My default rem value is set to 20px. Considering my body full width is 58rem, it equals to 1160px.

As a result, I added a responsive breakpoint where I only redefine my rem value:

@media (max-width: 1159px) {
  html{ font-size: 16px;}
}

And that’s all there is to it. All heights, widths, margins, paddings, font sizes, and especially SVG images (whose heights are set in rem as well) adjust themselves to this new value. It’s basically like setting your browser’s zoom at 80%.

For this responsive breakpoint, I went from about 25 lines of code to only 1.

Mobile layout

I only have a second breakpoint at 929px which basically triggers a mobile-friendly layout. Although less relevant, rem values still come into play.

The main benefit here comes from the SVGs, who render very sharply on my phone. And I don’t have to worry about Retina and non-Retina screens.

As for all versions of my blog, the code is available in my GitHub repository.

Send a login token via email after failed attempts

2013-11-28T00:00:00+00:00

Yesterday, I signed up for Covoiturage.fr, a carpool website. I had to provide my name, email, phone number, but no password, which was weird. After completeting the quick process, I was sent a verification email which also included an auto-generated password. I didn’t use it because clicking the “Validate your email” button automatically logged me in for that one time, and I was able to send a private message like I wished to.

A few hours later, I got a notification email telling me I had received a message. I clicked on “View the message” and was sent to the website, which prompted me to login, considering my temporary session had expired. I tried using a usual password but it obviously failed, since I hadn’t provided one and had forgotten about the auto-generated one.

Almost instantly, I received this email:

It gave me the ability to instantly connect to the website by using this single-use access token. I was both pleased and surprised to receive such an email: I just wanted to see the reply to my private message and didn’t want to bother finding and copy-pasting the auto-generated password, logging in to the website, and changing my password to an easier one.

There are some issues with the whole process:

I couldn’t define my own password at sign up
I was sent a login token after my first failed login attempt
It can encourage using this login method rather than the usual one

But despite these 3 small quirks, the login token made sense in this situation:

A carpool website is not a site you daily visit, but rather use on a punctual basis. So you’ll probably end up forgetting your password anyway.
Time is important: there are a limited number of seats and you need to react quickly. The login token made me gain valuable time.
Carpool users are probably mainly non tech-saavy, and are thus not good at managing passwords and/or coming up with a strong one. A login token might add a layer of security.

I ended up providing my own password but I understand why this login feature was implemented in the first place. If you’re developing a web app, you should consider providing an email access token after several failed login attempts. But, like anything, it should make sense in your context and shouldn’ be implemented in every case.

Another reason why target blank is still widely used

2013-11-27T00:00:00+00:00

I’ve always hated the target blank feature. Whenever I click a link that unintentionally opens in a new tab, it feels like an intrusion on my liberty to interact like I wish to, and even feels like my browser is taken as a hostage. Ok, it sounds as an overkill to put it that way, but users actually can open links in new tabs ; target blanks just remove the choice to do so. The worst are links of the same domain that open in a new tab (luckily, it’s very rare). In any case, target blank links can end up populating your browser with dozens of unnecessary tabs.

The reasoning being implementing them is to prevent the user from leaving your site. Actually, the user does leave your site, but you hope that, while closing tabs and eventually stumbling again upon your site left in an inactive but open tab, the user will eventually resume his browsing or at least remember where he initially came from.

Most users probably do the same thing as me: close this tab we’ve forgotten about and just move on. So, does the target blank fail to fulfill its sole objective? Not really. Leaving a tab inactive but open probably still counts as a visitor present on your site, and will show as such in any implemented analytics script. And I guess ‘Visit duration’ can act as an interesting leverage in any advertisement-focused decision.

Why I'm still uncomfortable using my iMac

2013-10-13T00:00:00+01:00

I bought my first Mac two years ago, a brand new (and relatively expensive) 27 inch iMac. The main reason behind my purchase was my wish to turn it into my primary music production setup. I intensively use Ableton Live (for recording and writing) and Logic Pro (for mixing). Since then, my iMac has proved to be a very reliable and fast computer for my musical needs. Mac OS’ UI and core features are very pleasant as well: Spotlight, Finder’s column view, Time Machine backups, keyboard controls, screen captures… Apple’s own software is also of great use: iTunes works way better than Windows’ counterpart, iMovie is incredibly easy to handle, and iPhoto has proved very useful. My iMac has also become my programming computer considering how easy it is to install Python, Ruby, Rails, Node.js, Git…

As a result, I’ve been inclined to turn my iMac into my sole workstation, the one I’d turn to for any computer-related task, no matter how casual or insignificant: browsing the web, checking my mail, watching videos, designing websites, playing games… But I still naturally settle for my older 2-screen Windows 7 desktop computer. I wondered why, and came up with the following reasons:

The iMac mouse

Simply put, the Magic Mouse, is different. It’s Apple’s attempt to improve, or at least disrupt, one of the most basic interface device. The thing is, there is a learning curve, which is unusual for an invention that has only been slightly altered for the last 30 years. But I decided to give it a chance, considering its interesting interactions with Mac OS, like the multi-touch gestures it provides.

Scrolling

Scrolling on a Magic Mouse is a vastly superior experience than on any other mouse I’ve encountered. It’s probably why Apple has even horizontal scrolling play an important part in many of its app and web interfaces. But I think the Magic Mouse actually loves scrolling too much…

Countless times I’ve triggered scrolling when all I wanted is click an element. (Funnily enough, this also happens in iOS). For example, trying to click a small web link usually ends up in scrolling (and not even triggering the link), or trying to select an element in Photoshop ends up in zooming out.

Because both a Magic’s Mouse surface and scrolling area are indistinguishable, scrolling is often an unwanted command that can’t be easily avoided.

Secondary click

The Magic Mouse doesn’t provide a true secondary click button. As a matter fact, the primary click button is huge, spawning across the whole width of the device.

The lack of secondary click isn’t new: Apple always favored a Ctrl + Primary Click to trigger context menus. But requiring both hands for such a basic and widely adopted feature always seemed peculiar and truly a usability issue. Browsing the web while copy/pasting text, opening links in new tabs, or launching the web inspector, becomes a two-handed task that prevents my left one from holding a phone conversation, having a drink, scratching my head, or just plainly resting.

I just need that secondary click, a real one.

Acceleration curve

With all these hardware-related mouse issues, why not simply buy a new one? I could, and it would offer me a true right-click, a real scrolling wheel, and even a third-click. But still, it wouldn’t solve the biggest issue encountered with any Mac OS mouse: the acceleration curve.

I’ve always been confused by Mac OS’ pointer movements. I could never explain what exactly was the cause of my discomfort. Some say it’s the acceleration curve, some say it’s lag, some don’t even feel any annoyance. For what it’s worth, I really believe it’s the curve. The cursor speed difference between a rapid mouse movement and a slow one is truly bigger than on Windows. And it becomes even more distinct when moving a Mac Mouse very slowly.

I never understand how designers using Photoshop on a daily basis can feel comfortable with these pointer movements. I always have trouble selecting a precise amount of pixels or moving an element around.

Anyway, there is something odd about pointer movements in Mac OS. And no matter what tweak I’ve tried or setting I’ve adjusted, it’s still there.

As a result, I still decided to stick to the Magic Mouse because it’s connected to a habit field: the moment I touch a Magic Mouse, I instinctively know that the acceleration curve will be different, the scrolling sensitive, the secondary click fuzzy and the third one lacking. My hand subconciously tells my brain to adapt to this new context. This provides me the ability to easily switch back and forth between my iMac and my Windows desktop without any reconfiguration period.

Keyboard shorcuts and discoverability

I love the iMac keyboard, especially because it’s a chiclet one which reduces the distance and amount of effort to press a key. I also like its weight, its design, and its OS controls.

Because any designer or programmer’s computer is his primary (and often sole) working device, he will intensively make use of keyboard shortcuts. Any time spent learning or configuring a shortcut is a profitable investment in future hours of time saved and improved workflow.

But triggering a keyboard shortcut on a Mac is a hassle. Almost all of them require the oddly placed Cmd key. It’s located right under your palm, and I instinctively use my thumb to press it. I got used to it. But for more advanced shortcuts, you need to considerably bend your fingers to reach the Alt and Control keys, ending up pressing them with your nails instead of your skin, creating an unstable contact that sometimes end up in your finger slipping away.

Shortcut keys are configurable: you can modify their assignment, which is like altering their physical position. But there’s still that Function key that monopolizes the best spot for a shortcut key: the bottom-left corner.

Here again, I could buy a new keyboard, with better-located Ctrl, Alt, and Fn keys, assign them correctly, and spend hours scratching my head wondering how this software’s shortcut is meant to be triggered on this particular keyboard. But I’d probably lose the Mac OS keyboard controls, and it’d still not solve the following problem.

Keyboard combinations

Considering the amount of keyboard shortcuts available in more advanced softwares and the amount of keys on a keyboard, most keyboard shortcuts are combinations, i.e. a number of keys meant to be pressed simultaneously. There are multiple levels of combination:

1 shortcut key + 1 letter: Cmd + S, Cmd + C, Cmd + V…
2 shortcut keys + 1 letter: Cmd + Shift + S, Cmd + Alt + P…
3 shortcut keys + 1 letter: Cmd + Alt + Shift + S (‘Save for the web’ in Photoshop)
4 shortcut keys + 1 letter (very rare though)

Because there are 4 shortcut keys, and because you can press a different combination for each level (besides the 4th level), you can for example in the 2nd level, have either Cmd + Alt or Cmd + Shift or Cmd + Ctrl. If you then attach a letter to each of these combinations, you have multiple shortcuts for the same letter. In the end, there are a lot of keyboard shortcuts available.

Well then, what’s the problem with combinations?

The problem is exactly what I just showed: besides the fact that some combinations are a physical pain to trigger, there are too many of them. For each software you’ll use, you’ll need to learn and memorize them. And if not implemented, you’ll have to configure them and make sure you don’t override any other shortcut, especially system-wide ones.

What’s the solution to combinations?

Keyboard sequences

Instead of pressing multiple keys at once, just hold a shortcut key while pressing letters one after the other, in a sequence. For example, in Sublime Text, toggling the sidebar is done by holding Cmd, pressing K, then pressing B.

Sequences and combinations are not mutually exclusive. And sequences are not Windows or Linux exclusive either. But what makes Windows (and maybe Linux, I don’t know) superior in that domain is keyboard shortcuts discoverability.

The Alt key in Windows both highlights the menu bar, and underlines certain letters (generally the initial). This underlining hints at the fact that you can press that letter to trigger the related submenu. Furthermore, it’s a multi-level feature: after having pressed a letter while holding Alt, the submenu appears and highlights letters for these sub-elements. (By the way, the letter list is reset at each level so that you can use the same letter in different submenus). If a submenu holding another sub-level is opened, it will highlight its letters as well.

A quick gif example (in French):

The 3 states are:

1. No key pressed
1. Alt key pressed and held
1. Letter ‘i’ pressed and the submenu opens, highlighting new elements

In this case, I wanted to crop the viewport (‘Recadrer’). Although I know this shortcut by heart, I don’t actually need to learn it: I just follow the letters. Alt + I, then C. If I use such a sequence shortcut a lot, I will eventually learn it. If I don’t and just want to trigger a Photoshop function I rarely use, I can easily browse through the menus using only my keyboard.

I have Photoshop on my iMac as well and really miss these kinds of sequences that are applicable across all Windows apps.

Window management

I’ve been accustomed to using 2 monitors, at work and at home. Firefox or Chrome on the left, Sublime Text on the right, and Photoshop across both sides (canvas on the left, some tools on the right). I don’t have a 2nd monitor for my iMac. I could set up one, but:

I lack the space to
I would need an equally or closely sized monitor to maintain a certain balance

Although the Mac OS interface is single-task oriented, the screen real estate isn’t. Apart from Photoshop or Ableton Live, you don’t launch apps in fullscreen on a 27 inch monitor. Text-oriented apps such as a web browser or a text editor can not be efficiently used when a single line of text comprises hundreds of characters.

So you end up resizing your windows half the width of the monitor. And this in turn, creates another issue: windows keep randomly stacking up across the viewport. I’m unable to find a decent position for them, probably because the positions and dimensions are up to you, and thus their number incredibly large.

I’ve tried using Spaces but I couldn’t get accustomed to it. I need my windows to exist within my viewing area, and not have theme figuratively disappear beyond the scope of my monitor. Besides, I hate the movement Spaces triggers when switching back and forth between apps that aren’t in the same Space.

Although I’ve tried some window management utilities, I couldn’t find one that suited me well. Maybe BetterSnapTool that I discovered recently will do the work, considering it replicates Win 7’s Aero Snap (and even seems to improve it).

An Apple laptop is okay

Weirdly, I have trouble using my iMac, but I don’t using my MacBook Air. It probably resides in the fact that:

a laptop has no mouse
its single and small screen is more suited for single-tasking
I can launch my apps in fullscreen

Plus, Mac OS 10.7 is really well suited for multi-touch gestures. Opening my MBA triggers a habit field upon a limited environment for better oriented work.

Some (and maybe most actually) people have perfectly managed and embraced their Windows-to-Mac transition. Maybe having spent more than 10 years solely on Windows has hindered my iMac adoption, the mouse movement issues being the main culprit. I’d like to focus on one particular OS, but my designing and casual needs require a Windows environment whereas my musical orientations entail a Mac one. And if it wasn’t for my many third-party proprietary software needs, I’d probably give Linux a shot as well.

Tap a little higher on Windows Phone

2013-07-23T00:00:00+01:00

I recently purchased a Nokia Lumia 620. I owned an iPhone some years ago, but when it got stolen, I didn’t feel the need to have a permanent internet access anymore. But recently I figured that owning a smartphone is ultimately benefitial, as long as you prevent yourself from installing any casual game or aimlessly browsing the web.

Anyway, I’m still very familiar with iOS. After I lost my iPhone, I purchased an iPad 1, an iPod Touch, and recently an iPad Mini. I still consider iOS the best mobile OS available, in terms of responsiveness, usability, and global appeal.

Like anything new though, I am pleased with my Windows Phone. Great hardware, live tiles, predictive typing, decent default apps (especially the Nokia GPS), iTunes-free administration… Apart from the radically different design approach, the recurrent issue I still encounter with my Windows Phone is to tap too low. If I want to tap on a link, I usually end up taping the one right below. I figured that WP’s taping area is calibrated exactly on its location, meaning that, in order to tap on a link, my thumb has to cover it completely. On iOS, the calibration is slightly different: you need to tap a little below the link, which actually prevents your thumb from hiding the link you’re trying to interact with.

I don’t know which approach is the best but switching from one device to the other still yields some unexpected behavior.

Designing with CSS animations

2013-07-11T00:00:00+01:00

For almost a year now, I’ve had this 4-letter domain: jt.ms

I’ve only recently started using it as quick URL shortener so that, if anyone asked me (in real life) the address of my blog or my SoundCloud profile, I’d tell them “jt.ms/blog” or “jt.ms/music”, rather than a slightly longer URL. But I also wanted this domain to act as a tiny portal to some of my websites and as a simple profile for my musical aspirations.

So I decided to quickly design one, and use the opportunity to have fun with some new CSS features.

CSS background cover

I remember when I had to settle for jQuery to fill a webpage’s background with a full-size image. Luckily enough, CSS 3 implementation has come a long way and the background-size property is nowadays pretty well supported.

I just had to figure what image to put. And that’s what actually triggered the whole redesign process. I had an instant vision of what picture to take: an overview of my desktop setup. I guess it’s a designer’s thing to showcase his working desktop (the same way a developer would sometimes list his Vim/Emac plugins or discuss his favorite coding practices…). Anyway, I felt it was an appealing way to convey what I do as an aspiring music producer.

So I semi-randomly placed my gear, opened Ableton Live and launched a fake recording session to light up the whole thing. I took a few pictures, and the last one looked good enough. I launched Photoshop and applied a script I had saved some time ago and it turned out pretty well.

The background-size property is incredibly easy to implement:

html { 
  background: #0c031e url(jt.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The browser will take care of the redimensioning and make sure that the whole background is always covered by the image, while maintaining its aspect ratio, especially if it doesn’t match the browser’s window one.

CSS animations on hover effects

I only had 4 links to insert on my page:

my personal blog: jthom.as
my SoundCloud profile: soundcloud.com/jgthms
this blog about design: jgthms.com
a JavaScript-generated mailto contact link

The 3 websites’ main color turned out surprisingly complementary.

I quickly settled for simple circles. For the hover event, I recalled Svbtle’s Kudos button and its animation when submitting a vote. I discovered a GitHub repo that implemented this functionality. I took only some part of the client-side code, especially the CSS transitions. The jQuery code came down to a adding/removing a class.

CSS animations are great, but you can’t trigger them on a :hover event. So you need to use jQuery to add/remove a CSS class on the element you want to trigger a different animation on, and define this new animation within a new CSS block that refers to that new CSS class.

Ok, let’s use an example. Here’s the HTML code of my links:

<a>
  <strong>music</strong>
  <em></em>
  <span></span>
</a>

The <a> is the container
The <strong> holds the text (and doesn’t move)
The <em> is the bordered circle that shrinks down on hover
The <span> is the full colored disc that expands on hover

Only the <em> and the <span> are actually animated.

The bordered circle

Here’s the code for the <em> taken from the GitHub repo I mentioned above (and for the sake of readibility, I removed all vendor-prefixed CSS properties, but you should use them in production):

a em {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  height: 94px;
  left: 50%;
  margin-left: -48px;
  margin-top: -48px;
  position: absolute;
  top: 50%;
  width: 94px;

  transform: scale(1);
  transition-duration: 500ms;
  transition-property: transform, background-color;
  transition-timing-function: ease-out;
}

Ok so the first 9 lines are purely for styling and positioning (I especially like the border-radius: 50%, a nice find).

The transform property defines the initial state of the <em> element.

The transition prefixed properties define how we’re going from the initial state to the final state (which I’ll write later):

duration: how long does it take to go from the initial state to the final state (and vice-versa)
property: what CSS properties will be animated. The default value is all. I don’t think defining only the ones you want is for performance reasons, but rather to prevent animating properties that don’t animate well, or that you don’t want to animate (font-size, margins, positions…).
timing-function: the easing of the animation. The default is linear, but the ease-out is more interesting. Here’s a easing cheat sheet to visualize how the different functions look (though in CSS, only a subset of them are available).

The full colored disc

The <span> element is hidden at first, and expands when hovering the link.

a span {
  background: #D4C4C2;
  border-radius: 50%;
  height: 96px;
  left: 50%;
  margin-left: -48px;
  margin-top: -48px;
  position: absolute;
  top: 50%;
  width: 96px;

  transform: scale(0);
  transition-property: transform, background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
}

The code is almost the same (I deliberately posted both CSS blocks in their entirety for the sake of this article, but feel free to refactor your CSS in production, as I did myself). There are 2 differences:

the styling (a disc instead of a thin circle)
the initial state (the scale is set to 0 instead of 1)

No hover event for animations

As I said earlier, you can’t trigger animations on a hover event. So you need to modify the DOM to trigger a new CSS block in which you’ll set the final state of the animation. The easiest way is to add a CSS class to the hovered element. In jQuery, it’s as easy as:

$('a').hover(
  function() {
    $(this).addClass('active');
  },
  function() {
    $(this).removeClass('active');
  }
);

Nothing complicated. We now need to write the new CSS block related to this new selector we’ve been given.

.active em{
  transform: scale(0);
}

.active span{
  transform: scale(1.125);
}

And that’s it! The thing circle (<em>) will disappear, and the colored disc (<span>) will expand to 112.5% its size. You can set that value to whatever you want, but making it bigger than the circle is a nice effect.

Positioning elements on the background cover

Ok, my page was actually finished, but looked quite empty, and rightfully so, because that’s how I meant it. But I wanted to add something else: tooltips across the image. Shouldn’t be too difficult, right?

The thing is, my image is not an <img> tag with well-defined dimensions, but rather a background-image that’s resized according to the window’s dimensions, but not exactly. What I mean is that, in order for the image to completely cover the background while maintaining the image’s ratio, it needs to follow the window’s resizing according to a function. What function is that? Well, I found the answer on StackOverflow: ‘What’s the math behind CSS’s background-size:cover’.

How it works: you calculate the window’s ratio and compare it to the image’s ratio (mine is 3/2). According to the result, the height or the width of the image is set to the window’s, and the other value (width or height) is calculated to keep the image’s ratio.

So I set up a <div> that has the exact dimensions of, and is exactly positioned as the background-image. I resized my window a few times to understand how the browser actually redimensionned the background-image and figured out how it worked.

Here’s the function I quicky wrote:

var a = $('div');

Position = function() {
  windowHeight = $(window).height();
  windowWidth = $(window).width();
  windowRatio = windowWidth / windowHeight;
  if (windowRatio > 1.5) {
    a.css('top', (windowHeight / 2) - ((windowWidth / 1.5) / 2));
    a.css('left', 0);
    a.css('height', windowWidth / 1.5);
    a.css('width', windowWidth);
  } else {
    a.css('top', 0);
    a.css('left', (windowWidth / 2) - ((windowHeight * 1.5) / 2));
    a.css('height', windowHeight);
    a.css('width', windowHeight * 1.5);
  }
}

Depending on the window’s ratio, the <div> is resized and positioned to exactly cover the background-image. Of course, most of the time, the window’s ratio is not equal to the image’s one, so the <div> will be either wider or taller than the window, and that’s what we want.

Positioning the tooltips

Because the background-image (and thus the <div> as well) keep their aspect ratio no matter what, I just had to position all my tooltips using percent values and voilà! I styled them like the other links (because they’re links as well) and made the text fade in on hover. It’s funny to see these tooltips disappear beyond the viewport when resizing the window because it’s not common for an HTML element to not appear in the viewport.

CSS keyframes

I also added some introduction animations using keyframes. For example, here’s how the 3 main links “introduce” themselves:

a {
  animation-duration: 1000ms;
  animation-fill-mode: both;
  animation-name: one;
  animation-timing-function: ease-out;
}

Looks exactly like the transition prefixed properties, with 2 new important properties: fill-mode and name.

animation-name explained

This property lets you define the name of the keyframe function that will be called. You need to write this function separately. Here’s the one I use for my main links:

@keyframes one {
  0% { opacity: 0; transform: translateY(-24px);}
  100% { opacity: 0.29; transform: translateY(0);}
}

So my 3 circles go from hidden (opacity: 0) to semi-visible (opacity: 0.29), and also move up 24px. 0% is the initial state, and 100% the final one. You can add more keyframes if you want.

But what happens before and after the animation?

animation-fill-mode explained

To understand this property, you need to understand how a keyframe animation works. There are 3 states in an animation: before, during, and after. The “during” state is the easiest to understand because that’s the animation. That’s what the keyframe function is for.

So what style is applied before and after the animation? Well the default style is applied. And here, my links have a default opacity of 0.29. But let’s set that to 1 for demonstration purposes.

So the full animation goes like:

before: opacity = 1
animation start: opacity = 0
animation end: opacity = 0.29
after: opacity = 1

It’s not a problem if the animation starts directly. But I actually set up a delay on the 2nd and 3rd of my main links. So they start visible, then disappear, then fade in slowly.

That’s where the value of animation-fill-mode comes in:

none (default): the before and after states have the default style applied (1 here)
forwards: the after state has the animation end value (0.29 here)
backwards: the before states has the animation start value (0)
both: it’s forwards and backwards combined

So if you put “both” (and that’s what I recommend), it means that the styles you’ll define in the keyframes will be applied before the animation starts and after it ends.

So the corrected animation goes like:

before: opacity = 0
animation start: opacity = 0
animation end: opacity = 0.29
after: opacity = 0.29

This way, you’re sure that the animation will run smoothly, no matter what delay you’ve put before, and no matter what default style would have been applied after.

animation-delay

Here’s the delay property I was talking about:

#life { animation-delay: 0;}
#music { animation-delay: 500ms;}
#design { animation-delay: 1000ms;}

So the first link starts its animation right as the page is loaded (so there’s technically no “before” state). The following links start theirs half a second after the previous one.

Wrap-up

CSS animations are really easy to implement and rather well supported across the different browsers. For this single page, it makes sense to make use of them because:

it’s a single page
there isn’t much content
it’s more a showcase than an actual website
it’s rather unobtrusive because there’s almost no interaction possible

So be aware to use these CSS animations sparingly.

How iOS 7 can still end up looking

2013-06-13T00:00:00+01:00

The new iOS 7 icons made most (if not all) designers cringe. They don’t criticize the decision to head for a flatter (but not completely flat) layout but rather the execution. The acid unpleasant visual result is probably due to the fact that Jony Ive put Apple’s marketing team in charge of iOS 7 icon design.

Each team in a large company has a different single goal. Marketing needs to sell, developers need to make things work, designers to make things beautiful and usable. If 2 of these goals are assigned to the same team, there is a purpose conflict. You can not refine one aspect of your work without the fear of damaging the other. So you end up in a gray area where none of your 2 goals is completely fulfilled.

iOS 7 is still in beta, so there’s still time to polish the shipped product, and it’ll probably happen:

The look and feel of the icons and other new UI bits are likely to change significantly as the iOS 7 beta proceeds.

After Apple unveiled the new iOS 7 design, I headed for Dribbble because I knew designers would rapidly come up with dozens of alternatives, which ultimately turn out as more than decent solutions to a real issue.

iOS 7 is a big disruption in Apple’s interface history. It can be a big leap forward as long as refinements are made. We weren’t used to Apple shipping a half-baked product. Luckily there’s still time to polish it and respond to the collective roar of the design community, though historically large companies seldom alter their decision based on people’s discontent (Xbox One?).

iOS 7, gradients, and usability

2013-06-11T00:00:00+01:00

I must say, I was very surprised by Apple’s iOS 7 unveiling. I’m a designer (though not a great one) so I’m usually first concerned about how it looks and my first thought was “It looks terrible.” And apparently, I’m not the only one. Of course it’s hard to have a complete valid judgment without having held an iPhone with iOS 7 in your own hands. But I remember being delighted by the first iOS’s screenshots back in 2007. It was a great start and a solid base to increment on, hence the light changes in a span of 6 years.

iOS from 2007 to 2013 (source: thetechblock.com)

Gradients

I’m more concerned about the gradients. iOS 7 isn’t exactly “flat”. The icon gradients yield a subtle sense of depth. But they look clumsy. I once wrote:

Nowadays, I tend to avoid gradients because it’s so easy to mess it up. It’s not only about choosing 2 colors, it’s about eveything that happens in between.

You can obtain decent looking gradients with only 2 color stops (one on top, one on bottom), but designers usually mix several gradients or create more complex ones to achieve a much better result.

If I were to copy the Spotify icon, I’d start with a simple 2-stop gradient. But the result wouldn’t be as appealing, because there’s more involved: a light glare on top, some inner shadow, and probably other subtle elements. Even the embedded shapes have gradients and inner shadows applied to them. That’s what it takes to make a good icon.

Settling for simple (and probably easy) highly saturated gradients has seriously harmed the visual appeal of iOS 7.

Maybe going “full flat”, with just solid colors, would have been a better choice (as I said, it’s easy to mess up gradients).
Maybe if the white icons that cover these gradients had been incredibly designed, these gradients wouldn’t have mattered. But the icons as well look as first draft mockups. I know it because I’m very bad at designing icons and they usually end up like that.

Usability

But who cares how it looks as long as it’s easy to use?

Apart from these icon gradients, most of iOS 7 is completely flat. There’s been much (rightful) criticism towards the flat design trend that’s spreading across the web, notably for its usability issues. iOS, like the web, is interactive. So any hindrance to a user’s interaction is a usability issue. Flat elements are known to lack affordance: they fail to imply any functionality. The problem is that all elements only rely on solid colors and basic shapes to convey several (and usually not complementary) informations:

importance (a title, a secondary element, a label, a paragraph)
state (on/off, active/disabled, in progress…)
capability (is it a button? a notification? an ornament?)

If you restrict yourself to only 3 simple elements (color, size, shape) to convey all information for each element of your interface, you’ll face many graphic crossovers and lack differenciation.

There’s also been some concern about the use of a thin font (Helvetica Neue Light) and its readibility. I think there isn’t much to discuss about right now because it will greatly depend on the screen’s resolution.

But what people are most concerned about in terms of usability is the Control Center.

Many lines, no gradients, light shadows on the slider handles. What is interactive? What’s not?

The 5 top buttons remind me of my post about the 2 options toggle button: it’s either on or off. But does the button actually display the current state (on or off) or the possible action (turn on or turn off)? Well, the answer is within the sliders: the white part shows the current level of the lightness or volume. So I guess a top button being white means it’s on because it’s its current state.

There also may be concerns about the heavy use of thin lines to represent both progess bars, area dividers and icon borders. But I guess such a heavily used feature as the Control Center will only require a few minutes to get accustomed to.

You know good design when you use it

There’ll be many posts like mine, discussing a not yet available OS, criticizing its aspect and speculating on its usability, only to end up uttering some rapid conclusions about a software a multi-billion dollar company developed. But Apple says it best on its iOS 7 page: “You know good design when you use it”.

Oh well, it’s just a phone.

Target blank is for laptop and Mac users

2013-06-04T00:00:00+01:00

For more than a decade, my main computer has been a regular PC tower. Alongside Windows XP as my default OS, I’ve become well acquainted with the 3-buttons mouse. Whether for gaming, text editing, or just browsing, the middle click has supplanted the right one as my second most used button.

Due to my job as a web designer, I spent most of my time switching between Photoshop, Notepad++ and Firefox. For the latter (as for any browser), the middle-click became such a natural habit in my browsing process that I feel impaired by its lack.

When I purchased an iMac for my music production needs, I decided to hang on to its unusual Magic mouse. Although clumsy with it at first, I considered it required some adaptation that would eventually lessen my frustration over time. I felt using this mouse validated my decision to follow the “Apple way of things”, but I still enabled the quite uncanny right-click.

The lack of middle-click was hard to get accustomed to. Opening a link in a new tab required either Cmd + click or Right click + navigating the menu. I couldn’t browse the web like I used to: solely with my right hand, leaving my left one free for drinking, eating, or smoking.

Browsing Hacker News or any link-filled aggregator required some more involvement from my side. It’s not exactly a burden, but rather a small inconvenience. The only website that actually became easier to browse is Designer News. As a front-end developer and heavy web user, I loathe the target blank feature. I’ve always been an advocate of a tolerant user experience by avoiding any unwanted disruption, no matter how small.

But with a Magic mouse, or with any regular laptop trackpad really, the target blank feature becomes less an annoyance and more a satisfaction. And considering how, allegedly, most designers use a Mac (and especially a MBP), I wonder if that’s the reason why a site like Designer News has implemented the target blank.

Although I tend to use my Mac more, and have started to make some web design work with it, I still wouldn’t impose any kind of browsing interference on my users.

Adobe Kuler's analytics make it unusable

2013-05-30T00:00:00+01:00

Adobe just released a new version of their color tool Kuler. I was surprised though to stumble upon an empty page:

I tried to disable Adblock Plus, but what finally did the trick was to enable Omniture, which is basically Adobe’s own analytics. Ghostery rightfully blocked this script because it’s nothing more than yet another useless plugin.

It’s the first time I visit a website that becomes unusable because of a blocked analytics script. Well, I guess I won’t be visiting Kuler anytime soon.

I just want to visit your website

2013-05-20T00:00:00+01:00

Alongside Adblock Plus, I used to run the NoScript Firefox add-on to prevent malicious sites from messing with my browser but mostly to prevent any useless social or analytics script to load. It was until I found out about Ghostery which is less restrictive (and maybe less secure) but gets the job done: maintain some kind of privacy while browsing the web.

For any website visited, Ghostery displays a temporary window that lists the different trackers blocked. I’m amazed by the number of scripts some sites try to load.

Here’s The Verge tracking results:

Ghostery results for The Verge

Apart from SoundCloud and Typekit, I block all external sites. I’ve always considered the web to be about content: read articles, look at images, watch videos, etc. Nothing else.

If I’m browsing your website, any sharing feature or analytics script might seem useful to you, but it won’t make me visit you more often, or even less either. I’ll come back if your content is worth it. Ultimately, what I want is just to load your website because that’s all I’m interested in.

Path is destined to grow slowly

2013-05-03T00:00:00+01:00

Like millions of people, I’ve had a Facebook account for years. I don’t remember how many “Friends” I have, but it’s obviously many more than its true state. In the last year and a half, I’ve only logged in twice to my account (once to post my album, once to post a Daft Punk remix). But apart from that, I haven’t had any activity or even read any story from my news feed. I also deleted hundreds of pictures, dozens of “Liked” pages, and unnecessary profile informations (including my birthday). I eventually changed my password to a 100 characters-long random string to prevent myself from logging in back too easily.

Why such apparently drastic measures?

For one thing, I browsed Facebook far too often. I used to always keep it open in a tab and checked it regularly on both my iPod and iPad. Logging myself off only kept me away for a few hours. It felt, as it probably does for a significant percentage of its users as well, as a fierce and resilient addiction, a giant sucking hole destined to waste my somewhat precious time and ravage my already fainting productivity.

But on a more substantial note, I wasn’t eager to remain stuck in the persistent circle jerk, fueled by self-centered and shallow interactions, to which I heavily contributed and for which I have myself to blame as well.

It may seem like an overkill to completely shut myself out of a popular social experience that I could have approached differently and kept in my control. But this digital lockdown has easily succeeded in its single goal: keep me away from Facebook.

Facebook: the ultimate gathering

Apart from my close friends, my Facebook contacts also included my extended family, former work colleagues, long lost schoolmates, various encounters from foreign countries, short-lived relationships, as well as a wide network of mutual friends.

This diversity of channels is mainly due to Facebook having become the de facto corner stone of a web-based identity and ultimately the personal v-card commonly held by any 13-40 years-old connected being, and especially anyone I’ve been familiar with.

A new Facebook account?

Creating a secondary Facebook account, to selectively include a few “designated” friends and family members whom I’m keen to be informed about, has crossed my mind but I’ve dismissed this decision as an unworkable option. It would have led to some confusion, displeasure, and probably questions from “excluded” friends about why they’re not part of my newly-created network. Plus, a Facebook account is nowadays part of a whole “social” package that is sometimes hard to avoid misusing.

It would have eventually resulted in a one-sided experience, where I’d read everyone’s stories but not contribute any or to any. Not a dreadful option, but not what I was looking for.

Path: a potential alternative

Path has been on my radar for quite a while. An almost private social network, for just friends and family? A well-branded iOS app with a clean intuitive interface? Sounds good.

The UI element was an important factor because I’d have to convince my mostly non tech-savvy friends and family members to use Path alongside their usual Facebook account.

Path embodied exactly what I envisioned in a post-Facebook social experience, focused on quality and intimacy. I personified the perfect target market, as I was probably in a similar state of mind as Path’s founders when they imagined their product, looking to fill the following need: “A Facebook-like experience without its inconveniences”.

Why I never actually subscribed to Path isn’t related to the multiple privacy concerns it spawned among its users (because I was unaware of them) but to the “internet socialization” needs I lacked since I quit Facebook.

Path and its users: 2 conflicting objectives

I’m convinced that those who ultimately choose Path as their primary social network consider it as a reboot of their digital interactions. They wish to escape the Facebook tangle they’ve generated and rejoice in a brand-new healthy network they could control.

The best (and maybe only) method to fulfill that goal is to limit yourself to a small number of contacts. Path itself provides a 150 contacts limit but I’d argue that 30 is well enough for such a network. I myself intended to have only 10 contacts.

But how would Path grow if every user followed such a behavior? It’s not really a chicken and egg problem: people (like me) wouldn’t wait for a significant amount of users to have subscribed before subscribing themselves because you don’t care about how many users Path has. You’re not here to meet new people. Quite the opposite really: you’re here to interact with people you already know and are especially close to. You only need a few of your friends and family members to join, and you can tell them directly. A quick email, a phone call, or just while chatting in person. “Hey, there’s this cool service, for just you and me. We should join.” I know I would have used Path intensively even with 2 or 3 friends only.

Path is meant to grow very slowly. It’s like trying to fill a pool by filling it up with drops of water, but that’s how Path is designed to grow. If you position yourself as the private social network for family and close friends, you can’t expect people to gather new users by the dozen because it’s the exact opposite that led them to join your service in the first place.

Why HN doesn't need a redesign

2013-03-07T00:00:00+00:00

I don’t exactly remember how I discovered Hacker News. My account is 1295 days old, which means I subscribed on August 20, 2009. HN’s homepage on that particular date was filled with stories about _why’s disappearance which, in retrospect, is probably the event that led me to HN in the first place, considering I was learning Ruby at that time.

Anyway, I eventually created an account and stuck around. I first wondered why it was called Hacker News because at that time, the word still wrongly carried a negative connotation for me. Reading through pg’s articles, I understood what Hacker actually meant.

Visually, the site’s design felt slightly austere but it didn’t bother me. I loved its straightforward approach: only links and text. That’s hypertext at its core. No avatars, no background-image, no rich color palette, no custom font, no stylish elements. But most of all: a high density of information. I’ve always been more comfortable with having everything layed down before me, whether it’s a digital interface or objects on my desk.

A functional focus

Two days ago, the HN Wishlist appeared on HN’s front page. It unsurprisingly spawned some discussion about HN’s design. The 3rd most upvoted wish is Refresh the visual design.

As a designer, I can understand such a desire. But it misses the point: the web is about content, and HN is one of the few websites that has remained entirely focused on this notion.

A user browsing a news aggregator is here for 2 things: clicking links and reading/writing comments. Skimming through dozens of news on HN proves to be very efficient considering the links density and the lack of futile elements.

A community filter

Maintaining what most people consider an antique layout actually prevents newcomers who can’t see past the surface from deciding to join the community. The design also de-emphasizes the value of a user’s profile. I believe both features have indirectly helped HN’s community develop what it is often praised for: high quality discussions.

On a related note, the ability to collapse/expand comment threads is something some people wish for. But I fear it would give too much weight to top-level comments, and diminish the core of a thread: the discussion it generates, in which counterarguments and additional details prove to be equally or more important than the comment they’re replying to.

As a side effect, whenever I decide to contribute to an HN thread, I find myself wondering for a few minutes if what I’m about to write is adding any value to the discussion. If so, I mull over the idea I’m about to develop, carefully construct my sentences (looking through dictionaries and French/English translation sites) and avoid posting too radical statements.

The big picture

It may sound far-fetched to say that HN’s design directly impacts how users will contribute to the site but it’s actually all related. The orange header, the light yellow-grey background, the small font-size, the lack of graphics… They all amount to a bigger scheme that reflects both the mind of the site’s author and the profile of its community members.

A design is more than a visual signature: it carries the raison d’être of a website. And I’d be sceptical if HN’s design suddenly changed because it’d necessarily imply a deeper mutation.

The 3-states follow button

2013-02-27T00:00:00+00:00

After having discussed the 2-options toggle button, I started thinking about another multiple options button: the follow button.

One of the most famous ones is the Twitter one:

From left to right: not following, following, following:hover

What’s interesting is that, by default, when you’re not following the person, the button shows the possible action: ‘Follow’. But becoming a follower will subsequently cause the same button to hold the current state (‘Following’), and only unveil the new possible action (‘Unfollow’) if you hover it.

GitHub makes use of a similar button to watch repositories:

From left to right: not watching, watching, watching:hover

The implementation is different because the button always displays the possible action, never the current state. It’s both:

less obvious: you need to understand that seeing ‘Unwatch’ means you are watching the repo.
less visually communicative and appealing: the same grey layout is used for both watched and unwatched states, defining no distinction between the two.

I think Twitter’s execution, by mixing both action and state, is more intelligible.

The 2-options toggle button

2013-02-25T00:00:00+00:00

I’m always confused by these kinds of switch buttons:

It takes me a couple of seconds to figure out if the button is displaying the current state (‘On’) or the possible action (switching to ‘On’). In this case, it’s meant to show the current state.

The use of such a toggle button requires:

having 2 options only
the 2 options to be mutually exclusive

The best known implementation of this button is actually the Play/Pause button:

It actually works in the exact opposite way: the button displays the possible action. Because we’re so well acquainted with this play/pause action, we’re always aware of its implied current state.

As a matter of fact, it makes sense because Play/Pause are actions, not states. The triangle and two-bars icons are read as ‘Play’ and ‘Pause’, not ‘Playing’ and ‘Pausing’.

That’s why the On/Off toggle switches display the current state: they are meant to be read as ‘It’s currently On’ and ‘It’s currently Off’, not ‘Switch to On’ and ‘Switch to Off’.

But it’s still unclear and not obvious. If you’re designing a web app, just use checkboxes. Or even better: Yes/No radio buttons.

Don't use dropdowns for a few items only

2013-02-23T00:00:00+00:00

Dropdowns (or select boxes) are an easy way to implement a considerable list of options in a small amount of space. A typical use would be a list of countries, or a list of years.

But using a dropdown for fewer than 5 items seems an overkill.

Consider this interface element in iTunes:

Using a dropdown requires clicking the dropdown and navigating in a defined (and sometimes narrow) area. It also hides the options from the user until he actually clicks it.

Considering the amount of space surrounding the dropdown, and the few number of options available, I’d suggest using that space to display the 3 options directly.

Firefox also makes use of a dropdown in a 2-options context:

This implementation is actually more prone to errors: you can accidentally restart your browser while trying not to. Some Windows security or antivirus updates often make the same mistake (and unwillingly restarting your computer is much more infuriating than just your browser).

I guess Firefox could have used the dialog box space to display the ‘Not now’ option:

It doesn’t look like a big issue after all, but it’s the kind of small details of UX that tend to be overlooked (or overthought) and could be easily fixed for the sake of clarity (in terms of information and usability).

SoundCloud's UX is confusing

2013-02-17T00:00:00+00:00

Update: it looks like SoundCloud finally delivered.

I’m going to copy/paste what I’ve said about SoundCloud in a previous comment:
I love SoundCloud.

I remember how it was difficult for people like me to upload their music on the web in order to share it. The only viable option was the MySpace music section (which required a different MySpace account). Even renowned artists used it. But the music player was just a single feature among the whole MySpace package, and the resulting experience for both the uploader and the viewer was unconvincing.

SoundCloud filled a need: upload your music easily, and doing just that. The uploading experience is fluid. The player is great, easy to share, with a nice sound quality.

But their UI is confusing. Here’s a simple question: what is this?

Hard to tell isn’t it? It’s actually the waveform of the track currently playing in SoundCloud. And although waveforms are prominent in SoundCloud’s interface, this tiny version makes little sense until it starts to fill itself up and you notice a progress in time. But it’s still hard to understand it’s clickable and brings you back to the currently playing track.

Lost in context

Ever since SoundCloud launched its latest version, it acts like some kind of radio: tracks will play endlessly. The choice of tracks though, is defined by where you launched the first track from. It can be the home stream, a set, the dedicated track page… You need to remember where you began because the context will define your playlist.

I usually navigate through 4 contexts:

the Home (it’s the main Stream which aggregates tracks from people you follow)
a Profile (a user’s page)
a Set (a user-defined collection of tracks)
the Dedicated page (which also lists related tracks)

Depending on the context in which you’re launching your first track, your playlist will be different. What isn’t obvious though, is what happens after you’ve listened to the last track. Because SoundCloud wants you to listen endlessly to their tracks, it will continue to play something even after having reached the last track of a set for example. But that something is hard to guess. I’ve told them about it: when I send people a set of mine to listen to, I don’t want them to hear anything but that set. But after having reached the end of my set, SoundCloud will play a track I’ve liked, or a related track, or something else, which might confuse people into thinking it’s part of my set and thus a track I’ve made as well (although it’s not).

What I’m trying to explain might sound confusing, but that’s because it is confusing. Even I, with some knowledge of how the site works, don’t know for sure what my current playlist looks like, and why this particular track is currently playing.

Because you can navigate through the website without interrupting the track currently playing (thanks to the HTML5 History API), you can end up on a page where you see your track playing but in a different context. For example, you can start a track on the homepage, navigate through a set containing that track, and still see it playing. It’s totally normal: it’s the same track, but in a different context. But this can misguide you into thinking the next track will be the one right below in the set, whereas it will actually be the following one in the homepage where you launched your first track.

The only way to know in which context your track is playing is to click the waveform icon in the top right corner. But it won’t necessarily tell you what’s coming up next.

‘There’s a track playing??’

The main problem with SoundCloud comes down to this fact: people don’t know that a track is currently playing in their browser.

I’ve had a couple of friends complain about not figuring out how to stop the music coming from their browser because they didn’t understand that tracks kept playing endlessly in SoundCloud. I had actually sent them a link to a track of mine, and they rightfully thought that pushing the Play button would only play the track once, and only this track. So they switched back to another tab and were confused as to hear something coming out of their speaker after a few minutes, without knowing where it came from. It’s reminiscent of Flash-powered websites which auto-start music upon visiting their page. Clearly: it’s a bad thing.

I understand it’s hard to ask SoundCloud to stop them from playing tracks indefinitely (although it shouldn’t be the expected behavior of a Set or a Dedicated track page). But they should at least notify the visitor about it.

When navigating back to your SoundCloud tab, unless you clearly see a “Pause” button displayed prominently, it’s impossible to know that the sound is coming from this tab. The tiny waveform in the header is clearly not helping, and finding the “Pause” button among the other numerous orange buttons of the page can be tricky (and requires that you’re currently on a page where the track is displayed!).

Yes, there’s a “Play” icon in the title bar, but being not interactive and not obvious either, it’s quite helpless.

Lack of controls

Because SoundCloud acts like a radio (or a media player), it should display the regular controls you’d expect from such a setup: Play/Pause, Forward, Backward, list of tracks.

The Play/Pause is visually only available by navigating to a page where you can see the track playing. Of course, the little waveform in the header is the quickest way to reach such a page, but as I said, it’s not an obvious control. You can also use the spacebar, but playing/pausing a track is not a spacebar’s expected behavior in the context of a browser.

Forward/Backward controls are the ones I miss the most.
The Backward button can be useful to navigate back to a track you want to play again, or to know which one you’ve just listened to. There is currently no way to know this.
If you’re listening to a track, the only way to skip it is to manually choose another one. Sometimes, I just want to hear the following track but it requires navigating back to the context and launching the next track. It’s not much of a trouble, but could be easily avoided by displaying a forward button in the header. As a matter of fact, a playlist exists somewhere in memory. Why not displaying it and/or making it interactive by implementing Forward/Backward buttons?

SoundCloud acts like a media player but doesn’t provide the interface that should come with it, and this gap leaves me, and probably many visitors, confused.

Mega should have a confirm password field

2013-01-20T00:00:00+00:00

Mega launched yesterday. I actually had to send a 30Mb file to a friend, but he told me that Dropbox was slow for him. Plus, my Dropbox was still uploading 25Gb of pictures that I had added the day before.

Anyway, it was the opportunity to try out Mega’s cloud storage system. So I decided to sign up:

I filled the fields quickly, but then realized 2 things:

Is the “Your name” field actually your username as well? Just in case, I changed it.
There was no “Confirm password” field. So I cleared that field, and retyped my password carefully.

Upon receiving my confirmation email (establishing the fact that I had typed it correctly), I tried to login, but was prompted with the message “Invalid password”.

I looked for the usually available “Forgot password?” link but it wasn’t present. So I went to the help section and found the paragraph “I have forgotten my password. Can I reset it?”:

Unfortunately, your MEGA password is not just a password - it is the master encryption key to all of your data. If you lose it, you lose access to all of your files that are not in a shared folder and that you have no previously exported file or folder key for.

I learned 2 things:

It’s not a password, it’s an encryption key (which may have led me to choose a different pass)
It can’t be changed.

The rule here is that, if a password isn’t modifiable (or resettable), make the user confirm it. I’m now left with an account (linked to a specific username and email) that I can’t use.

I18N and keyboard shortcuts

2013-01-05T00:00:00+00:00

Although I’m French, I usually install the English version of every software I use, the main reason being that it’s almost always the latest version available, which includes the latest features and bug fixes. Plus, looking for help online usually results in answers in English.

The only issue I have is with keyboard shortcuts. I use an AZERTY keyboard. The differences with a QWERTY one aren’t exclusively about keys position. For example, all numbers require using the Shift button to type them. It’s not much if I’m editing a text, but it becomes an issue with keyboard shortcuts.

To zoom in with Firefox, you need to type ‘Command +’. It’s probably easy on a QWERTY but it’s impossible with an AZERTY: the ‘+’ sign requires pressing the Shift button. So if I try typing ‘Command Shift +’ or ‘Command =’ (which is the sign below the ‘+’ one), it doesn’t work (and might even trigger another event).

I haven’t tried the French version of Firefox, and I guess it’s more suited for AZERTY keyboards. But I believe that choosing a software’s language shouldn’t be related to one’s keyboard layout.

There are 3 levels of administration

2013-01-04T00:00:00+00:00

For every web application, there is an administration to design. Its complexity and ease of use depends on who is meant to interact with it.

The creator’s administration

If you’re a developer running your own blog, chances are you have thought about creating your own little engine to publish articles. It may not be easy or convenient way to use, but as you are the engine’s creator, you’ve established a system that suits you and nobody else. James Hague’s 6838 bytes Perl script is probably not suitable for anything else than his website, but it’s not an issue because that’s the script’s sole purpose. I myself have developed a static website generator in PHP. The code is terrible but it does exactly what I intend to, and any issue I’d encounter with it would be my own fault.

The insider’s administration

There’s a learning curve with those kinds of admin. It can either be an admin developed by someone you know, or one that is not exactly user friendly.

For example, let’s imagine I own a clothes store and ask you to develop my shopping website. The admin can be anything you want, as long as I know how to use it. The key here is that I’m in contact with you, so even if the admin isn’t obvious to interact with, you can teach me. Plus, you can adjust some design elements for my convenience. Anyone else trying to use my admin would feel slightly lost, but that’s not a problem because the admin was meant for me and I was taught how to use it.

Jekyll’s administraion can also be considered an insider’s one. It’s not used by non-developers because it requires some computer knowledge. You either need to know Ruby if you host your blog on your own server, or know Git if you’re using the GitHub pages. Designing your own layout isn’t easy either. But if you take some time to go through the docs and learn how to achieve what you want, you’ll end up with a system that suits you well.

The public administration

It’s everybody else’s admin, for the non tech-savvy users.

The best example is WordPress.com which hosts around 60 million sites. Most of its users are probably non-technical people who chose to subscribe to WordPress.com because it offered an easy and free way to host their blog, and they wouldn’t know how to do it otherwise.

For a long time, WordPress.com provided the same admin as WordPress.org, but they’ve updated it for the general public.

It’s the most difficult administration to design, because it is used by millions of people who have to figure it out on their own. The publishing experience needs to be seamless, and you have to take into account your users’ unexpected behaviour and the common mistakes they can make.

The real key is to test profusely and receive feedback from common users. But in the end, you’ll still have to cut short and take some design decisions on your own.

Update bookmark

2012-12-31T00:00:00+00:00

A web bookmark is a kind of skeuomorphic element where a physical object is used in a digital context to elumate the same function. But whereas a web bookmark saves a location, a physical bookmark saves a progress. Both aren’t exactly used the same way, because you rarely change the URI of a web bookmark, whereas you constantly update the location of your thin marker while reading a book, only to remove it when you’ve reached the end.

I wish there was a way to update your web bookmarks. For example, I’ve started watching online the Seinfeld episodes from the start, and to keep track of my progress, I need to write a note about which episode I’ve watched last. I’ve also been reading Learn Python The Hard Way, and I need to write down which lesson I’m at. I could keep track of my progress by relying on the color of visited links, but most websites don’t implement the a:visited CSS feature. And although I could use Firebug or the WebInspector to set a color for those links, it’s still a debious way to save a progress.

There is a Firefox add-on called Update Bookmark which seems to implement that feature, but it hasn’t been updated since 2008 and doesn’t work with the latest Firefox.

It wouldn’t be hard to develop such a feature (as an add-on or natively in the browser) but I wonder if I’m the only one considering updating my bookmarks from time to time.

Quick Bootstrap Design

2012-12-21T00:00:00+00:00

There was a recent post on 24ways.org that explained How to Make Your Site Look Half-Decent in Half an Hour. It was made by a programmer and aimed towards programmers. The final result wasn’t universally well received because it probably didn’t meet most programmer’s expectations. I’m a designer, and the final result didn’t appeal much to me. But still: the article wasn’t about the end result, it was about the process.

I used to work with a very talented programmer. He was comfortable with numerous languages, could build both web and desktop applications, automate tasks across different types of databases, manage our homemade servers, work on AI algorithms… It probably wasn’t that difficult for him, but he did things my mind couldn’t grasp. One day, he had to design a small interface for a tiny web app that monitored our servers. The whole point of the app was to be usable, not even good-looking. But still: he didn’t know how to design it. He asked for my help and so I threw up a quick web interface. He liked it and thanked me. I told him that it really wasn’t much and that he probably could have figured it out himself. But then he said to me: “I don’t understand graphic design. I don’t understand how you designers can come up with something so quickly. I could spend days on designing an interface and not even come close to what you did. I just don’t get your craft.” That’s when I understood how honest he was, and that he really couldn’t envision an interface, even a simple one. And that’s probably what most programmers go through.

Anyway, here’s my take on designing a site, and it’s aimed at programmers.

Bootstrap of course

It’s not a surprise that Anna Powell-Smith used Bootstrap as a foundation for her design. It’s solid, and provides interesting examples to begin with. But the real key is that it’s just code. As I’ve said before, Bootstrap defines much of its design in the HTML code. And though it doesn’t keep the dichotomy clear between HTML and CSS (one for content, one for layout), it’s easier for programmers to play around with HTML code than CSS code.

So let’s use this example as a start and tweak it.

Colors: be consistent

Probably the hardest part for programmers in designing a website is to choose colors. Although they don’t choose colors, they use them on a daily basis in their IDE, and some color schemes are really gorgeous. Actually, it’s a good resource to choose colors from because IDE colors schemes provide consistent palettes with different tints that go well together. And because programmers probably don’t use Photoshop, we’d better choose a color palette and try to stick to it.

You could browse the thousands of palettes on ColourLovers or Adobe’s Kuler but even I get overwhelmed by the quantity available. So I often stick to one of them: Solarized. This blog uses its colors, and I’ve really learned to like it because it prevents me from looking to long for decent colors. Solarized is like a designer’s Bootstrap: it’s a solid base you can use as start, and modify along the way if you want (I rarely do).

If you don’t like Solarized, try to use your favorite IDE color scheme. Or steal a color palette from a website or app you like. For example, 53’s app Paper has 4 default palettes to play around with. I particularly like the first one:

2 dark colors, 2 light colors, 2 ‘fresh’ colors, and black. Add white to it and you have 8 colors to use for different purposes.

Here, apart from the white background, I’ll use the Solarized color palette only. What’s especially useful are the 6 different tints of grey, which aren’t exactly grey but slightly blue. It’s a common design trick to use these blueish grey tints, because they’re not as boring as grey without being to prominent.

Positioning: the Holy grid

The 960 grid system is well-known among web designers. It’s supposed to provide a framework for quick prototyping, by establishing some dimension rules in a 960 pixels-wide layout. Although there now also is a 1140 grid system, the 960 one is still very relevant. And for a programmer, it can be really easy to use because it’s based around numbers. You can divide the 960 width into 12 or 16 columns, with a 20 pixels gutter. Furthermore, Bootstrap provides HTML code for a 12-columns grid system. You just need to add some classes to your divs.

For the sake of this article, I’ll leave out the responsive 1170px-wide container and stick to the 940px-wide one. One reason for that is that making your site extensible to 1170px requires to adjust some elements along the way (spacing, background images, font size) because the content will stretch out horizontally instead of vertically, and this will disturb the balance of your layout.

Size: it’s hierarchy

I like Jason Fried’s way of saying it: The Obvious, the Easy, and the Possible. Some elements should be ‘Obvious’ and stand out: the titles. They provide a quick map of the page, by defining the part they’re the heading of. Then there’s the ‘Easy’, like subtitles, navigation, forms or call-to-actions. It’s things people will read or use, but not always. Finally, there’s the ‘Possible’: all the rest, like reading the full description of a feature, or using the footer links.

For example, the logo shouldn’t be ‘Obvious’, but ‘Easy’ or even ‘Possible’ because it’s present on all pages and people know how to use it. It’s a common mistake to make the logo too big.

Colors are also meant to provide visual hierarchy, but getting the size right is 3/4 of the job. Boostrap offers 6 heading levels, plus a Hero unit for showcasing key content, and a Page header for extra emphasis.

The Hero unit used as example is already well furnished in terms of hierarchy. I’ll just tweak some font-sizes.

Fonts: not that important

I love Arial and Georgia. A sans-serif and a serif font, both considered ‘web-safe’. A programmer trying to find a nice font would be as helpless as when trying to find nice colors. Even designers like me often spend too much time in Photoshop scrolling through the hundreds of fonts they’ve installed, just to end up less certain than before.

But like with colors, you can stick to a font you’ve already seen somewhere and particularly like. If you really want a different font for your headings (and only for your headings), try Google Web Fonts’ most popular: Open Sans or Droid Sans, which are different but not outstanding.

Here I’ll just Arial. If you get it right with Arial, it’ll be easier to use a different font in the future.

Images: a great feature

If you’re building a website for your app, try to include images. Even screenshots provide a nice touch. They disrupt the ordinary visual flow that a full-text website has. For example, if you’ve hired a designer to design your logo, take the opportunity to make it stand out. Or if you’re selling an iPhone app, just use an iPhone with a screenshot.

I’ll use the Firefox logo as an example. It’s big, colorful and highly detailed. It’ll add depth to the page.

Gradients and shadows: avoid them

Gradients are very hard to handle. A designer can spend hours messing around with colors just to get a gradient right. The thing is, a 2-color gradient isn’t about choosing 2 colors, it’s also about everything in between. If you add the fact that there are millions colors to choose from, the possibilities of a gradient are endless and a programmer would probably not be able to settle for one.

Shadows are quite similar. It’s mostly a 1-color gradient from opaque to transparent. The common error is to make shadows too prominent. They should provide depth without being noticable, and that’s not an easy task. It’s like adding reverb to a mix: add some until you notice it, and then lower it down.

Anyway, that’s why I don’t have gradients or shadows on this blog. I’m tired of spending hours in Photoshop just to come up with something half-decent.

In my example, I stripped out the shadows and gradients of Boostrap’s default design by overriding some background and box-shadow proprerties.

Secret: be subtle

So, if you don’t use gradients, shadows or original fonts, what’s left? Here are some details you can work on:

Rounded corners: the border-radius CSS property is well adopted and it provides seperation between elements. It also increases the affordance on buttons (that’s why I don’t like Metro’s buttons).
Line-height: it’s one of the details that can quickly make your website look cheap if used wrong, especially too small line-heights. But slightly too big isn’t much better. That’s why I don’t like readings Posterous blogs: the line-height is 20px for 12px size text, so the ratio is 1.66. For content, just use 1.5. For headings, 1.1 is fine. It’s easy to forget setting the heading’s line-height because they oftent have only one line of text.
Text-shadow: this might be the only kind of shadow that can be used without too much difficulty. But still, use it scarcely. Every browser which supports text-shadow also supports rgba. So instead of putting a full white text-shadow, try to use 0 1px 0 rgba(255, 255, 255, 0.5). For dark shadows, 0 1px 2px rgba(0, 0, 0, 0.25) looks decent. Also, don’t use a dark shadow if the text it’s set upon is darker than the background. Use a light one instead (and vice-versa when the text is lighter than its background). It’s you’re not sure, don’t use it. In my example, I actually removed them.

Iterate

Even a designer won’t come up with a perfect design the first time. I’ve readjusted the design of this blog multiple times, going from a rough layout to a more consistent one. Just finish your website and consider it ‘Version 1.0’ and get some sleep. The next day you’ll notice some subtle adjustments you can make: that title is slightly too big, the spacing here isn’t right, that button lacks contrast…

Examples

I played with Bootstrap’s Hero example and added my custom CSS. The only image used is the Firefox logo. All colors were taken from Solarized’s color palette. You can click the image to see the live demo.

Bootstrap Solarized

The same Solarized colors can be used to design a dark layout. Programmers are mostly familiar with this kind of color use in their IDE. It’s also a nice way to make your website stand out.

Bootstrap Solarized Dark

I talked about the app Paper and how it provided lovely color palettes too. The app is meant to draw sketches so the colors aren’t exactly supposed to fit together in terms of contrast and text readibility but still, it’s fun to play around with. I used the red color as the main background. It’s a bold decision, especially for a programmer, to use such a saturated color as the dominant color, but I like websites with a well-defined identity.

Bootstrap Paper

As I said earlier, if there’s a color palette you like, try to use it. There was this Nike ad that I really liked. It’s full of different colors and gradients, but I just picked a few of them and created a 8-color palette out of it.

Bootstrap Nike

A designer’s take at a programmer’s problem

I’m not a programmer but I tried to think like one in writing this article. I wanted to point out how easy it was to come up with a decent website just by quickly tweaking a Bootstrap template. I’ve often come across articles about programming that were aimed at designers, so I tried to do the opposite. If you have any question or remark, feel free to contact me. Any kind of feedback is appreciated.

Organized Gmail Inbox

2012-12-10T00:00:00+00:00

I’ve often read about how email was broken. Maybe it’s because I only receive about 10 mails per day or because GMail’s interface with some plugins suits me well, but I’m actually very happy with it. But when Google forced me to switch to their latest interface, my labels’ colors became a bit messed up and I decided to use the opportunity to reorganize my inbox flow.

I set up a simple rule to follow:

Every incoming mail must hold one of the predefined labels.

The first part of this rule states that each mail should hold one label, and only one. It’s the least organization an inbox should provide, without cluttering it too much.

The second part enforces a fixed number of labels in order to avoid creating ones on the fly for each new mail. You can still create new ones, but not without making sure it’ll be heavily used in the future. Here’s my list:

Apart from the Notes label (which synchronizes with iOS’ Notes app), the 7 other labels, along with sub-labels, should be able to organize every incoming email.

2do

The 2do label is a meta one. I use it to tag mails that are currently important and require further actions. I use the GMail ‘Multiple Inboxes’ feature to have a second inbox above the regular one, filtered with only 2do mails. These are for example mails I need to respond to, a shipping process to keep track off, a due payment…

Using keyboard shortcuts, it only takes a few strokes to make a mail show up in that special inbox: j/k-o-l-2 and ‘Enter’.

Admin

This one is for administration stuff: bank, health insurance, taxes, (un)employment processes, various subscriptions… Actually, there is a sub-label called Inscription (Subscription) with which I tag every new membership mail, the ones where they send you a welcome message along with your login information (and sometimes even with your password in plain text…). Anyway, it helps me keeping track of any service, real or online, to which I’ve subscribed. Sometimes, I wonder “What was that website I’ve subscribed to again?” or “What’s my login again?”, and this sub-label helps me answering these questions.

E-commerce

This label is for anything shopping-related. The 3 most important sub-labels here are:

Commande (Order): whenever I order something online, the mail goes here. It’s usually a mail stating that my order was successfully processed.
Livraison (Shipping): right after receiving an order confirmation mail, I often get a second one dealing with the shipping details. I then apply a 2do label to it until the product has arrived at home.
Facture (Receipt): this sub-label holds all transaction receipts. It is different from the Commande one as it’s usually receipts of digital purchases: Steam games, phone bills, domain renewals…

The Apple and Voyages (Trips) sub-labels are more specific: iOS purchases and trip reservations.

Contact & Friends

These two go along as they work pretty much the same way. The way I use them depends on the sender’s identity:

Friends: it’s someone I know. I have sub-labels for specific friends or group of friends.
Contact: it’s someone I don’t know who contacted me via a webform. I also organize its sub-labels for clients of each of my web design projects.

These labels are used for mails sent from companies.

	To me only (private)	To me among others (public)
From a company	Notification	Newsletter

Newsletters are just what they are: informations mails to which I have subscribed and are sent to many people.

Notifications are everything else sent by a company. It’s usually just a small mail telling me that I have received a private message, or that a credit card or domain is about to expire, or that someone responded to one of my comments.

I keep seperate sub-labels for notifications from Dribbble, Facebook, Twitter…

Reminder

I have 2 kinds of reminders:

Calendar: these are notifications sent by Google Calendar. I use them for events, deadlines, and birthdays. For example, 3 days before each birthday I receive a mail about it, along with a ‘pop-up’ the day itself.
Self: these are the mails I send to myself. It’s a quick way to notify myself of something when I don’t have access to some other tool, or when I need to send myself a small file. I heavily use this feature on my iPad when I encounter a website I like.

Wrap-up

With this setup, and with the use of GMail filters, every email in my inbox holds a single label (except when I also add the 2do label but it’s just temporary).

For the several months during which I have used this organization, I haven’t felt the need to create new labels, nor to think too long about which one to apply. And I don’t know how it would scale up with much more mails to deal with, but I don’t think it’d be too difficult to handle.

The Grey Period

2012-12-08T00:00:00+00:00

Ever since Google launched its redesign, I’ve been wanting to point out a design direction that many websites seem to take: killing colors.

Amazon

GMail

GCalendar

GReader

WordPress

Digg

Are the newer versions prettier? That’s for you to decide. But overall, they seem to lack depth and hierarchy.

I actually loved the Digg V3 design and it inspired some of my work. Many colors were involved but they were complementary and appealing, and the spacing was perfect. And I was able to recognize the website right away, and not take a second to wonder ‘Is this the good one?’.

Concerning GMail, I don’t know if it’s the cheap-looking buttons (that really look like a web designer’s first encounter with CSS3 border-radius and gradients) or the lack of depth the page holds, but it really doesn’t captivate me much. I remember Doug Bowman’s work on recreating the GMail buttons in 2009. A lot of thought went in the process, and it showed. The buttons felt like buttons. They were easy to read and easy to spot. (By the way, I loved Stop Design’s previous layout).

A lot of the websites mentioned are actually apps. Maybe avoiding colors is a design’s silent protagonist: it helps the user identify itself with the website. No color, no obvious identity, just you and the app.

But even Apple seems to be heading towards that direction.

Left: Mac OS 10.6 Snow Leopard. Right: Mac OS 10.7 Lion

Like gradients and shadows, it’s easier to mess up a color palette than sticking to greyscale. Compared to the 16,777,216 hexadecimal codes available, 256 shades of grey is quite fewer parameters to handle but you can’t really do much with them.

Choosing grey is actually not choosing.
Maybe it’s a fear of committing your design to a real identity.
Maybe it’s a well-thought decision to offer a clean layout.
Maybe it’s just easier.
Or maybe it’s just a trend. I honestly hope it is.

Firefox and the perfect address bar

2012-10-25T00:00:00+01:00

Google Chrome has spread the concept of the Omnibox: merging a browser’s URL bar with the search bar. Type anything, and it’ll access one of these 5 sources:

Search Engine
Bookmarks
History
Apps
Related sites

It works as most address bars nowadays, and even adds 2 features:

being a Google product, Chrome has the exclusivity of holding the Google Suggest feature directly in the address bar
Chrome “learns” new search engines. Repeatdly using a search field on a website gives it easy access by pressing Tab.

But I still prefer the Firefox address bar. It already works as a search engine: any query will end up as a Google search.

What about other search engines? Firefox is shipped with a default search bar with Google, Yahoo, Amazon… But the address bar can work as a substitute considering the well-known feature “Add a Keyword for this Search”: right-click any search field and add a keyword for it to make it available in the address bar by typing <keyword> <query>.

Whereas Chrome’s search engines add themselves automatically after a few uses, it has to be done manually in Firefox. It can help defining really short keywords for any search engine. I’ve got g for Google, i for Google Images, w for WikiPedia, d for the Free Dictionary, fr and en to translate from/to French to/from English… It just takes some organization and memory to make full use of this feature.

But what I love most about Firefox’s address bar is its incremental search. It looks through the history and bookmarks (and bookmark tags) by using keywords separated by spaces:

local + project name = access a project on the localhost
blog name + admin = access the admin area of a remote website
tw + username = access a previously visited twitter profile
ny + wri = access a NY Times article about writing you’ve already read but don’t remember the exact tile
iph + desi = access all bookmarks tagged ‘iphone’ and ‘design’

It really comes in handy when trying to find a page you’ve visited but only remember part of the title or the url. Type a few keywords (or even partial keywords) and the result list will narrow down rapidly.

Chrome works slightly that way too but provides a maximum of 6 results, and favors the search too much over the bookmarks and history. But it shouldn’t be a surprise considering the identity of its author.

When a designer programs

2012-10-07T00:00:00+01:00

Launching a website requires mainly 3 parts:

Graphic mockups
HTML/CSS static templates
Development

My work consisted of the first 2 parts exclusively. How did I call it? Web Design.

But how do you call someone who does only HTML/CSS?

In English, it seems to be mostly called Front-End Developer, though it doesn’t involve any programming skill.
In French, we have a word for that though: Intégrateur. It’s precisely the process of turning graphic mockups (PSD’s mainly) into HTML/CSS static templates, nothing else.

So, can I consider myself a Developer? Absolutely not.

What I love about CSS, and what made me good at it, is that my mind can encompass all the properties and values possible. There isn’t much theory to learn, so you’re left with only a small set of tools. It’s the multiplicity of their interactions that is powerful.

But when looking at a programming language, I’m overwhelmed by the vast amount of documentation one has to acquire. All the functions, parameters, obligations, special cases, syntax considerations, possible errors, alternative directions…

A designer’s first encounter of some kind of programming is often jQuery plugins or PHP WordPress themes. How’s that for a bad start? It’s mainly just looking at unintelligible code and trying to figure out why it doesn’t act exactly as you wish and how you’d like to tweak it a little bit, only to end up breaking the whole thing.

That’s how you end up with online forums bloated with unanswered questions following the pattern:

“I just downloaded X plugin but it doesn’t work and I don’t know why. Please provide me the full functioning code to copy/paste, without me having to actually understand the process.”

I’ve seen it, and I may have done it, but I wasn’t eager to stay in the fog forever. So I picked up some programming tutorials, about Ruby and Rails. I held a daily blog about my progress. Though it lasted for some months, I never got serious about it, probably because I never used it.

Lately though, inspired by many readings about programming, I still wanted to build stuff. Anything, for the sake of having crafted something. So I took up the programming language I’ve encountered most, PHP, and built:

a html scraper that backups the pages I’ve liked with Instapaper (because I have doubts about their permanence)
a static site generator (inspired by James Hague’s 6838 bytes Perl script)
a script to download all the images of an online presentation (that weren’t actually allowed to be downloaded)
a contact form for my personal page (easily spammable actually)
a filterable events viewer for the LondonOlympics, parsing a json I found at NBC.com

My code is terrible. It’s mysterious variables entangled with non-DRY functions, waiting for an error to show up, and probably causing memory leaks everywhere. I often have trouble reading back my code and decide to restart from scratch. Still, it works(!) and I feel a sense of achievement that probably every programmer has encountered.

But, I know it’s terrible code, and I know that making it work doesn’t make it good. I personally wouldn’t share any of my code (considering “The first rule of code reuse is that the code needs to be worth re-using.”) and wouldn’t charge any client for it either.

And I believe the mere existence of bad programmers spawns from the lack of self-criticism concerning this kind of projects. As a result, I’ll remain publicly not a programmer until I become a decent one.

iA Writer's new document

2012-03-16T00:00:00+00:00

iA Writer for iPhone just came out. 0,79€ for both iPhone and iPad (that I plan on upgrading to iOS 5) apps? Instant download!

I haven’t used it intensively yet but one thing that really bothered me (or at least surprised me for its lack of common sense) is that taping the “+” icon to create new document does just that. And I mean only that: it adds a new .txt file called “Document” but doesn’t open it.

In what context would you want to create a document without the intent to actually begin writing in it ??

I personaly don’t plan on filling my iCloud space with empty 0.1kb-sized documents.

CopyPasteCharacter is unusable

2012-03-12T00:00:00+00:00

I used to love CopyPasteCharacter because it provided me special but useful characters that are hard to generate (especially since I mainly work on Windows).

The ones I sometimes used were:

→ right arrow
“ double quotes
♥ heart
♫ notes
≠ different

among others. But because I primarily write in French, my text contains a fair amount of accents: è, à, û, ô, î, and also ç, which are very common. My issue was with the capitalized version of these characters, even though a French keyboard (AZERTY), through its different layout (which modifies a dozen of keys) gives access to more popular French characters.

So, whenever I needed a À, Ç or É, I navigated to CopyPasteCharacter where these 3 characters (among others) were directly provided on the home page.

The website’s new disposition has killed this workflow because the characters are now divided in sets. The problem is that the default set (called Our favorite set), although nice-looking, consists of a lot of unnecessary characters. A pencil? A doubled male sign? A conical taper? An asterism???

Anyway, I’ve got 3 options now:

browse for a character, but the “Alphabetical order” is full of noise.
search for a character, but it’s a slow process and usually results in the same amount of noise.
create a set. Oh dear… Another login… And I often need those special characters when I’m not at home.

Maybe I’m the only one annoyed by this new setup. It’s just that I used to be only two clicks away from copying the character I needed, while now it has become a dreadful process.

Remember login, not password

2012-03-06T00:00:00+00:00

I wish browsers would prompt me, not only to remember my password (which actually remember both login and password), but also my login only. The thing is, I don’t mind having my login stored in my browser (and consequentially giving other users potential access to) because it can be (and sometimes is) publically known.

The problem I encounter is due to my quite common name: Jeremy Thomas. I’m French, but this name is not only common in France but in English-speaking countries too, which are more prone to hold early users of web apps, and thus early subscribers.

So I have to fall back on one of my nicknames, based upon my first: boomshanka (which is also widely-adopted). These are boomy, boomybx, bbx…

But again, username choice is often constrained by:

availability (jthomas, jeremythomas, jeremyt… always taken)
character count (boomy, bbx or jt, is almost always too short)
special characters (spaces, underscores)
required characters (like numbers, rare though)

So, among dozens of websites, I end up with a dozen of different logins which I would like my browser to remember, without compromising the security of having also my passwords stored.

Even the solution of forcing users to use their email as login isn’t viable because it’s terribly long to write.

Twitter OAuth 'See your password'

2012-03-01T00:00:00+00:00

I love OAuth. I love it because I tend to register with many different usernames, many different passwords (and variations of them), many different emails (with GMail’s dot trick), so I end up spending more time logging in than actually signing up.

To efficiently use OAuth, you need a service to which you’re constantly logged in. Twitter is one of them. And because it’s widely adopted among users, it’s widely adopted among developers setting up an authentification system for their web app.

OAuth not only provides access to your account, but different levels of access. And although OAuth seems more secure and rapid than an old-school sign up, I still read what the application I’m granting access to can do with my Twitter account.

What often strikes me when I authenticate via Twitter is what the third-party application can’t do:

I read these bullet points as:

things this application (bitly) can do
things this application can’t do but could have asked permission to

So, is this ‘See your Twitter password’ a global confirmation that no application could ever see your Twitter password, or is it only this application’s authorization setting? The latter would feel terribly unsecure.

Tumblr and the source problem

2012-02-28T00:00:00+00:00

Tumblr is more a community than a blogging engine.

If you’re registered on WordPress.com, chances are you write a blog. Whether you’re a literature fan, a passionate photographer or a technology enthousiast, you produce content for others to read. And those readers aren’t necessarily (and probably aren’t) registered to WordPress.com because consuming this content doesn’t require to be. You either subscribe to the RSS feed or visit the blog daily. You’re a visitor.

Tumblr holds the same features, but adds two new ones:

the Dashboard
the Reblog

The Dashboard is like a homemade RSS reader: you follow Tumblr blogs and find them aggregated on your Tumblr home page. It’s a consumer feature. The only difference with a regular RSS reader is that you’re limited to Tumblr blogs. But because there is that second feature, users don’t feel the lack.

The Reblog is quite particular: you produce content on your blog without producing any. I considerer it a product because although your blog will publish it as a duplicate, any visitor of yours will probably only see this version and will consume it as though you were its creator. So Reblogging is production after consumption: you’ve seen something on a Tumblr blog, you republish it on your own. It’s not a simple link: it’s a complete new post.

The only difference with a normal post is the presence of a source link (usually preceded by the word “Via”). This source link is the Tumblr post from which this Reblog comes from, but it’s not necessarily the original post. And when, after having clicked half a dozen of “via” links you finally end up on the original post, you still don’t know the source. Why? Because posting on Tumblr doesn’t require to. This attitude is emphasized by the use of the bookmarklet, which grabs any image of the current page and uploads it anonymously on Tumblr’s servers.

So when I find a beautiful picture of which I want to find similar ones, and I finally reach the source, I still don’t know where it comes from, because the source according to Tumblr is the original post, not the content’s origin.

Solarized Jekyll Theme

2012-02-24T00:00:00+00:00

Update: as I’ve modified my design since, this post isn’t as relevant as before. But you can check the design in the repo.

As I’ve decided to design this blog without any image nor CSS 3 fancy feature (gradients & shadows particularly), I had to come up with a perfect color scheme, pleasing to read and visually balanced.

There are millions of predefined color palettes available to download. And I’m bad at browsing and taking a quick decision with a whole world of options ahead of me.

So I had to find that one particular color theme that makes you forget all the others and regret not having found it before.

When looking for a performant JavaScript syntax highlighter, I discovered the exceptional highlight.js (auto-detects the language, needs only 2 files) which provides a handfull of color styles. And one of them instantly caught my eye: Solarized.

Its tagline reads as:

Precision colors for machines and people

Precise, it is. Balanced, too. And gorgeous, hell yeah! It’s a color palette meant for terminal and gui applications, and works incredibly well as a theme for IDEs & text editors.

Why not make use for it in a blog theme?

Bootstrap is for programmers

2012-02-21T00:00:00+00:00

I am no programmer.

My work as a web designer consisted of graphic design and HTML / CSS templates. I never used any framework or IDE: I wrote every line using Notepad++. This light setup forced me to be very efficient in my HTML markup and CSS syntax.

In HTML, I used the fewest tags possible, or should I say, necessary. Classes were used with parcimony, but provided enough flexibility for the programmer who would use my code. Names used for classes described the content, not the style applied.

I was committed to follow the golden rule:

HTML is for content
CSS is for layout

Frameworks such as Bootstrap fail at keeping this dichotomy clear. Some examples:

.span4 and .offset4 to define column widths and column margins
.navbar-fixed-top to apply an alternate style for the top bar
.table-bordered for a table with borders
.form-horizontal for a float left with right-alined labels
.tabs-left .tabs-right .tabs-below classes

All Bootstrap’s classes aren’t weighted with style instead of content description. Buttons are quite well implemented. Variations use function, not color: .btn-primary .btn-info .btn-warning.

Anyway, let’s not overlook the purpose of Bootstrap: quickly build a website, through HTML blocks and classes, without having to write one line of CSS. Everything is defined in the HTML. If you think about it, programmers merely generate HTML code, and never touch the CSS file. So providing full control, from content to style, through HTML only, seems evident.

If I had to launch a website rapidly, I could set it up quite quickly. But I’d still have to take some layout decisions: font, color, positioning, spacing, dimensions… And though I’ve done it more than a hundred times, it wouldn’t be straightforward.

So I’d set aside my wish to keep content apart from layout and use Bootstrap, because it’s incredibly well designed.