Twitter is over capacity

I just wanted to check something on Twitter right now and got this nice looking web page:

Twitter over capacity

The page actually looks great. I guess they really were prepared for such shortages (or thought this might happen often enough that the page had to look good).

Wondering if it because of and increasing popularity of their social website or just because of some other technical issues. Anyway there’s even a support page showing this whale and other great looking error screens. Since I see a whale and not a robot, it’s probably that there are two many people currently tweeting or reading tweets.

Now that I’ve seen this, I need to change my 404 page… The one I have currently is kind of embarrassing in comparison to the whale or robot page…

A simple guide to responsive typography

The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don’t talk about is typography.
Read more here.

A very interesting article about responsive typography. I’ve often seen that the font is often an issue while visiting websites on my smartphone but never really thought about using other typefaces, making the font resizable or defining a larger font sizes for smaller display. I’m kind of wary of hearing about responsive design everywhere and keep seeing so called responsive sites where the mobile usability is just bad (even though, they actually manage to make all parts of the UI somehow visible). See this post with a few thoughts about it.

Responsive and separate mobile sites: a common model and two targeted views

Over the past year there were lots of talk about responsive vs. separate mobile websites. Of course duplicating everything, having two sets of URLs, having the risk to redirect from one site to the other are valid arguments against separate mobile sites. But to be honest, you have to admit that many responsive sites actually do not provide a perfect user experience. Even though their UI is adapted for use on smaller device it’s not actually designed for it. You often see that these sites do provide a better display of information and functionality than non-responsive sites. But often they do present a readable but overcrowded UI.

So what now ? Is it all bad ? Well it just means that having two sites is not maintainable and having a single UI for all devices makes it difficult to optimize the user experience. But it doesn’t mean you can’t have two UIs based on common contents. Just some old Model-View… Of course, this is only feasible if you are able to define a model handling all extensions to your system. If you need to adapt your UIs for each extension of the site, this will basically have you maintain two sites. You need to actually be able to define a model and keep adding to the model without needing to change the view. That what you do when working with a blogging or a webshop platform.

Of course I still sometimes miss some functionality in such mobile sites which I would maybe be able to access if it were a responsive website. But again, even responsive websites sometimes need to hide some parts, require more scrolling to access it or actually put things at a place you wouldn’t expect it. So I guess the main issue is especially to understand what’s important for your user and what should be (easily) accessible on a mobile device. This of course costs money and time but will pay in the end.

Also I firmly believe that the purpose of users of different devices are often also different. When I’m on the go and want to access my analytics or adSense data, I actually expect to see a whole different UI than when I’m on my laptop and access them.

But it’s not all black and white. Even if you have a mobile and a desktop UI, it doesn’t mean that some parts of them cannot be shared using responsive UI modules/elements.

Wide-spread web fonts

The following fonts are supported by most browsers on most platforms and can thus be considered “web-safe”. In order to give you an idea how the different fonts look like, I’ve applied them to their corresponding paragraph.

Verdana

Verdana is a sans-serif typeface designed in 1996 for Microsoft Corporation. It was designed to be readable at small sizes on a computer monitor. It is characterized a large x-height, wide proportions and loose letter-spacing.

Georgia

Georgia is a serif typeface designed in 1996 for Microsoft Corporation. It was designed to be readable at small sizes on a computer monitor.It is similar to Times New Roman but larger.

Helvetica

Helvetica is a sans-serif typeface designed in 1957 in Switzerland (thus the name). It was designed as a neutral typeface with great clarity. It is one of the most widely used sans-serif typefaces.

Trebuchet MS

Trebuchet MS is a sans-serif typeface designed in 1996 for Microsoft Corporation. It was designed especially for computer screens and is especially adapted for headlines.

Lucida Sans Unicode / Lucida Grande

Lucida Sans Unicode is a sans-serif typeface which was first shipped with the Microsoft Windows NT 3.1. It is one of the most ideal for upside-down text. Lucida Grande is a nearly identical font available on Mac OS X.

Tahoma

Tahoma is a sans-serif typeface designed in 1994 for Microsoft Corporation. It was designed especially for legibility on the screen. It is similar to Verdana, but has a narrower body, less generous counters and much tighter letter spacing.

Typography terminology

Typeface
A typeface is a set of characters sharing the same design. For example, Arial, Helvetica, Times and Verdana are typefaces.
There are two different categories of typefaces: serif and sans serif.

Font
A font is a specific size (usually defined in points) and style (roman, italic, bold, extrabold, condensed, etc.) of a typeface. For example, Verdana 12 pt bold is a font.

Serif
Serif typefaces use small decorative marks to embellish characters and make them easier to read. Times Roman is an example of a serif typeface.

Sans serif
Sans serif typefaces are composed of simple lines unlike Serif typefaces. Helvetica is an example of a sans serif typeface.

Times (serif type)           Helvetica (sans serif)
Roman           Roman
Bold           Bold
Italic           Italic
Baseline
The baseline is an imaginary line on which most of the characters “sit”. The baseline is also relevant for measurements (including x-height and leading) and for alignment purposes.

Mean line
The mean line (or midline) is also an imaginary line running along the top of non-ascending, lowercase letters (e.g. “p” or “x”) and at the curve of some ascending letters (e.g. “h”).

Ascender
It is the part of a lower case letter (e.g. “t” or “b” which goes above the mean line.

Descender
It is the part of a lower case letter (e.g. “q” or “g” which goes below the baseline.

Point
Types are measured in points (pt). One point is equal to 1/72 of an inch (i.e. 0.3527 mm).

X height
It is the distance between the baseline and the mean line of the font. In most fonts it corresponds to the height of the lower case letter “x”.

Font size
It is also called “point size” or “type size”. It’s the distance from the ascender line to the descender line. It corresponds to 1em.