We’ve updated Ångström to version 1.4 for you:

This is a clean-up update after not-so-smooth 1.3. We didn’t even come up with a codename: were too busy fixing everything that was broken.

Unfortunately, we had to remove the Today widget. We rushed to add it in the fall, but had really hard time making it fast and reliable. We don’t want gimmicks in our app, so for now, no widget. We will get it back as soon as we figure out how to make it up to our standards. Sorry.

Also: numerous improvements to input. When changing a unit from “meters” to “Moscow time”, 3,57 would turn into 3:34 before, will now be 3:57 (tried to be smart, but it was useless). 357msk will also be automatically be treated as 3:57 msk. You can also type 007 without a decimal point now, it will be interpreted as 0,07 or 0:07 depending on the unit selected. Less taps, we like that.

People with large iPhones 6 and 6 Plus, we will use your screen real estate better now.

The Ukrainian currency, Hryvnya is now included in a free unit pack.

If you are not yet using Ångström, you should:

Download in the App Store for free

I will later publish the stories from Barcelona, Tarragona, Valencia and Sitges. Now, several examples of graphic design of Spanish official bodies.

The symbol of Barcelona city hall:

Street prohibition sign with it:

Sometimes it is used on a “big B” label:

Museum of Picasso:

Red on black looks cool (above the entrance):

This one is probably a simplified version of the same:

The grilled variant of the “big B” is used on everything that has to do with garbage. Garbage can:

Garbage truck:

Ministry of home affairs and police:

Barcelona city council:

The symbols of city halls of Tarragona and Sitges aren’t too interesting (here to complete the picture). The symbol of Tarragona city hall:

The symbol of Sitges city hall:

The symbol of Valencia city hall:

On a manhole cover:

Government of Valencia is the coolest:

Just great:

The shield:

On a beach in Vinaròs:

The government of Catalonia:

On a police car:

On a tax authority building:

With all the symbols of Catalan councils:

Cities have many means of transportation with fixed routes: underground, trains, buses, trams, jitneys. This is ineffective. Some buses run empty because at a particular moment nobody wants to go where they go. Some directions are not served at all when needed. City administrations try to minimise these issues by carefully planning the routes, but this process is too inert.

This system should become dynamic.

You tell your watch where you want to go. The data goes to the special city software. The software analyses the data of the citizens in real time and comes up with the optimal current routes so that everyone gets where they need to. The watch then tells you when to leave home and taps your wrist when your bus arrives.

An auction system will emerge: the more you are willing to pay, the quicker the system will get you where you want.

The system will be open for new players. Some will be just drivers who have a spare hour (Uber). Others will anticipate a long-lasting demand and build a whole underground line. There will be a continuum of the means of transportation, from buses (spacious, rather slow, cheap to ride, popular) to taxis (compact, usually fast, expensive, custom). The will be no route numbers for buses as there are no for taxis.

The route-planning software will want to forecast the demand for its services. So it will request access to your calendar. At some point you will no longer need to tell your watch anything, the system will just know where you want to go.

If you don’t feel like sharing your calendar with the transportation system, that’s not a problem. It is just that the rides will be more expensive for you, as the planner will not have enough data for optimisation. The majority will prefer to share in exchange for a discount, as it does prefer giving up some privacy to get the free Google services.

Since there will be no place for transport officials in this system, they will oppose it vehemently.

Please welcome Likely, the nice social sharing buttons:

Why:

• looks good;
• Twitter, Facebook, Google Plus, VK (Russian thing) and Pinterest;
• any text or no text;
• two themes, for dark and light background;
• three sizes;
• Retina support;
• 18 KB (including icons).

Everyone should use Likely. Tell your friends to use Likely (i. e. by socially sharing its page). If you’ve switched to Likely on your website, drop me a line at (ilyabirman@ilyabirman.net).

In a browser, when you enter a website address and press Enter, the first thing you see is white screen — no matter how fast your internet connection is. When you launch an app on an iPhone, you see the app immediately — no matter how old your phone is and how slow the app is. The trick is that every iPhone app includes a screenshot of its own initial state. Usually it is the app’s first screen without any content.

The browsers could copy the iPhone’s behaviour to improve the perceived speed of the web. In addition to the real page, a web server could serve an HTML file with a temporary content to show while the real page is loading. We’ll call it loading.html, but it could be anything pointed to by a link tag.

When the user goes to a site for the first time, the browser loads it in a regular manner. But if it figures out loading.html is available, it downloads the file and saves it locally. When the site is open again, the browser renders loading.html immediately and then replaces it with the real content when it becomes available.

This is not caching: browser shows loading.html while, not instead of loading the real page. And it will reload this file when it changes, like any other resource.

The difference between nothing and something is huge: immediate feedback, even approximate, is one of the main things that make user interface great. Enter:

The following aspects of loading.html should be considered:

• External resources. It seems sensible to disallow usage of any external resources for the file. They defeat the purpose of the file: the browser should not spend any time loading images or fonts for this temporary screen (which, hopefully, will be visible for only a second). The browser could cache those, but this may become a debugging nightmare. Embed all the styles, scripts and images — or make do without them.
• File size. Since a browser should store this file for every site you’ve visited, the file should be small. Also, its loading should not tax the visitors who open your site only once.
• Interaction and continuity. Interaction with a page that can vanish and get replaced with another one any moment seems strange. At first I though that it should be completely prohibited: no links, no listening to JavaScript events. But then I thought, what if I put a site’s menu in loading.html? If a user clicks a link, the browser could switch to loading it (it, by the way, could have its own loading.html, see also Scope). But badly implemented this could be frustrating. Say, a user is typing a search query into an input of loading.html when it gets replaced with a real page. The browser must make sure the typed letters are not dropped and the caret position is maintained.
• Progress information. It would make sense for loading.html to want to display a spinner or a progress bar itself instead of relying on the browser. For this to work, the progress information should be available to it. A way to implement this would be with an event sent to the page, i.e. onLoadingProgress (in which case disallowing all events is not an option).
• Location. From the point of view of the scripts on the loading.html page, its location should probably be the same as for the real page it’s temporarily replacing (even though in reality, obviously, loading.html was loaded from another URL).
• Cookies and localStorage. These should probably be available to loading.html as for the real page also. A use case would be showing the name of the signed-in user right on the loading.html page.
• Scope. A loading.html page might want to specify the scope of real pages it works as a loader to: only the one it is linked to, a range of pages, all pages on the given domain name.
• Expiry. A loading.html page might want to specify its expiry date.
• The switch. When should loading.html be replaced by the real page? Waiting for the full page to load is surely not optimal. Perhaps, a browser should use the same heuristics it uses now to start displaying a page when following a link. But I would consider giving a loading.html-aware pages some additional control over it.

I don’t have experience with Offline Web Applications APIs, but going by the description, I assume at least some of the described behaviour could be implemented with them. It would, however, be too complicated for anyone to bother.

This feature will probably be abused by some designers to show splash screens and ads. That’s not a problem. On the iPhone, some apps also show splash screens, and though this sucks, in no way is it a reason to remove the feature (actually, if we remove every feature that has a capacity of being abused, we’ll remain with nothing).

I’ve long been concerned with how web pages look and behave during loading, as you may have guessed looking at Emerge.js (just updated, by the way). There is a lot we can do as front-end developers. But to make things significantly better, help from the browser vendors would be required.

Traditionally an underline was used for emphasis:

Some logos use it to look important:

Above, underlines are part of the message: they interplay with the letters, drawing the readers’ attention to the underlined words.

But the use of underline for links, especially in paragraphs of text, is semantically different from this classical use. Such underline should not be an obstacle for the reader who choses not to care about the link. The design should only hint at the option to click the link, not scream about it. In fact, the words should not change their meaning the slightest when the linking is removed (i. e. when the text is printed).

In Crafting link underlines on Medium, Marcin Wichary says that an “ideal” link underline would look like this:

But this is not ideal, this is exuberant. You don’t want to break one underline into six stubs with funny optical effects at the gaps. You want the underline to be modest and quiet.

This is not as bad as the new Safari rendering though:

Only four lines here, but they are thick as logs. And the vertical distance from the text is smaller than the white area around the descenders. Only a blind person could come up with this crazy design.

To make the text and the underline both clear, put them in separate visual layers (see Tufte’s Envisioning Information, Layering and Separation). Make them ignore the existence of each other:

Notice how this underline is very thin. It resembles a hair on a piece of paper.

Why not thicker? Again, because it is not a part of the text, it should not divert the reader. It should be as thin as possible, as long as you can see it (see Tufte’s Visual Explanations, The Smallest Effective Difference).

In his books The Visual Display of Quantitative Information (page 140) and Envisioning Information (page 46) Edward Tufte shows a stem-and-leaf plot of volcanos’ heights:

As Tufte says, this plot “constructs the distribution of a variable with numbers themselves”. Numbers to the left of the stem represent thousands feet. To the right, hundreds, for each volcano. For example, 17 | 92 represents two volcanos of heights 17 900 and 17 200 (rounded).

This diagram has confused a lot of designers.

Usually, in a stem-and-leaf plot the values to the right of the stem are ordered. In the Tufte’s example, however, they don’t look so:

13 | 47830

On his own website, Tufte answers a question about this oddity, emphasis mine:

In the late 1960s John Tukey made the stem-and-leaf graphic by hand from an almanac that showed the volcano heights listed probably alphabetically. And so after finding the range of the data, and settling on intervals, John simply wrote down the next signficant digit on the leaves. Nowadays we would ask to the computer to sort the leaves in each bin in order.

However this answer is doubtful. The order of digits does not look completely random. Notice these descending ranges:

This diagram is also shown in another book, William S. Cleveland’s “The Collected Works of John W. Tukey”, as found by my colleague Vadim Yumadilov:

Here we see the full name of the almanac from which Tukey took his data: The World Almanac, 1966. Even the pages numbers are given. Unfortunately, I wasn’t able to find it online. It’s available for sale on Amazon, but I did not want to buy it, pay for shipping to Russia, wait for a month for it to arrive.

Luckily, I’ve found a couple of these almanacs on sale on Ebay and Abebooks. So I wrote to the sellers and asked them to send me the pictures of the pages 282 and 283. Soon, I got a response from Barbie Berquist:

I have attached 2 pictures of the pages on the volcanoes. I hope they help.

Yes they do.

So in the almanac the volcanos are not, in fact, ordered alphabetically. They are ordered by height, but also grouped by region. Hence the descending ranges in the Tukey’s diagram.

Here are, for instance, the volcanos corresponding to the line 13 | 47830 — in Cameroon, Hawaii, and three in Guamemala:

Mystery solved. But I am still confused by lack of curiosity by Tufte. How could he ignore the oddity twice in the books and then content himself with “probably alphabetically” in the forum?