Jeremy Thomas

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 a single page with CSS animations, keyframes and a full-size background cover

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 use 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

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.

Microsoft.com is not a website

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

The new Microsoft.com is a success. There has been much praise about its responsiveness, its simplicity and its clarity. Well-deserved praise I must say, as the design led by Trent Walton’s agency Paravel is very well-thought.

Problem is: it’s not a website. It’s a portal.

Considering it’s a single page (and I’ve done a couple myself), I can hardly call it a website. Wikipedia itself calls a website a set of related web pages.

Definitions aside, I have yet to find a link on MS.com that ends up on a page using the same layout. I’ve tried the navigation menu, the big slides, the footer links… I wasn’t able to stay on the same website (which would have turned it in one actually).

Clearly, the role of a navigation menu is to provide hierarchy, offering a snapshot of the sitemap, but most of all act as a guide to refer to throughout our navigation. What’s the point in providing a menu when actually using it makes it suddenly disappear?

Here are the 2 options:

build a full-scale Microsoft website that is consistent throughout its products
make Microsoft.com look like what it really is: a portal

Obviously, the latter is not recommended, considering how portals are outdated and not user-friendly, and considering the great design MS can now work with as a solid base. So, I’ll wait for a complete rebuild of their website(s). And I secretly hope it’s already in the pipeline.

The Microsoft.com redesign currently looks like a great step forward, but it’s not as long as it remains half-baked as it is. And providing a ‘Feedback’ button may be a hint of what not to do.

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

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.

Jeremy Thomas

Tap a little higher on Windows Phone

Designing a single page with CSS animations, keyframes and a full-size background cover

CSS background cover

CSS animations on hover effects

The bordered circle

The full colored disc

No hover event for animations

Positioning elements on the background cover

Positioning the tooltips

CSS keyframes

animation-name explained

animation-fill-mode explained

animation-delay

Wrap-up

How iOS 7 can still end up looking

iOS 7, gradients, and usability

Gradients

Usability

You know good design when you use it

Target blank is for laptop and Mac users

Adobe Kuler's analytics make it unusable

I just want to visit your website

Path is destined to grow slowly

Facebook: the ultimate gathering

A new Facebook account?

Path: a potential alternative

Path and its users: 2 conflicting objectives

Why HN doesn't need a redesign

A functional focus

A community filter

The big picture

The 3-states follow button

The 2-options toggle button

Don't use dropdowns for a few items only

SoundCloud's UX is confusing

Lost in context

‘There’s a track playing??’

Lack of controls

Mega should have a confirm password field

I18N and keyboard shortcuts

There are 3 levels of administration

The creator’s administration

The insider’s administration

The public administration

Update bookmark

Quick Bootstrap Design

Bootstrap of course

Colors: be consistent

Positioning: the Holy grid

Size: it’s hierarchy

Fonts: not that important

Images: a great feature

Gradients and shadows: avoid them

Secret: be subtle

Iterate

Examples

A designer’s take at a programmer’s problem

Organized Gmail Inbox

2do

Admin

E-commerce

Contact & Friends

Newsletter & Notifications

Reminder

Wrap-up

The Grey Period

Amazon

GMail

GCalendar

GReader

WordPress

Digg

Firefox and the perfect address bar

When a designer programs

Microsoft.com is not a website

iA Writer's new document

CopyPasteCharacter is unusable

Remember login, not password

Twitter OAuth 'See your password'