Jeremy Thomas

Mega should have a confirm password field

2013-02-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-02-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-02-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.

Firefox's wrong textarea resizing

2012-09-13T00:00:00+01:00

We, as web designers, tend to dread styling textareas (I know I do). The line-height adjustments can be tricky, the font-family is never inherited, the scrollbar has to be taken into account and padding can mess things up as well. Furthermore, making a textarea graphically appealing can be challenging, considering the sometimes tricky background styling reactions. So we either go for a minimalist textarea (plain background color, no border), or venture to design a gorgeous 3D shadowed rounded gradient-colored textarea box that is meant to look desirable but not necessarily usable.

When Google Chrome came out 4 years ago, among the top-located tabs, omnibar and dazzling speed, what new feature that struck me was the default ability for a textarea to be resized at will by the user. It was a small but oh so useful little innovation that proved to be a huge improvement in user experience.

If we didn’t choose to go for the simple minimalist styling, chances are any resizing of the textarea was doomed to break our design. Should we then define a resize: none on our textareas and risk infuriating our users? Definitely, no.

Luckily, CSS 3 support spread quite quickly and allowed us to resort to its new fancy properties and style shadows, rounded corners and gradients dynamically, without using any fixed image.

Firefox was keen enough to implement textarea resizing as well. But here’s the problem: Chrome (by default) only allows users to expand the textarea, from whatever size the designer initially coded. On the other hand, Firefox also allows users to reduce the textarea size. As far as I know, I’ve never encountered a user who was eager to reduce the size of a textarea. Quite the opposite actually: designers (myself included) often implement ridiculously small textareas to fit in their layout, which brings the user to feel restricted by this decision.

One workaround is to set both width and min-width (as well for height) at the same value to prevent further reduction. But I wish Firefox was smart enough to include this behavior as a default.

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.