Ino Detelić

Designs we take for granted

I just saw this excellent video from AT&T Archives, 1970 Saul Bass’ Pitch Video for Bell System Logo Redesign.

It’s impressive how relevant and up to date all the aspects of the corporate identity redesign presented here are relevant today.

It also made me think how many things we take for granted, for example before this redesign all the people installing and repairing telephones at this huge company did it with their own clothes, with only a tag on their shirt distinguishing them from plumbers, electricians and other workers.

Posted on January 18th, 2012 under random

I’m afraid of getting near the new google logo.

One of the untold rules on the web is that if you click the logo, it takes it to the home page. This is inprinted in my brain.

I’ve had the newest google redesign, with the menu on google logo hover for over a month now, and I still haven’t adapted to it.

I’m at the phase where my cursor avoids it like the plague and when I remember to actually use it, I get a strange feeling like some Pavlovian reaction knowing I’ll get beaten if I get near it.


Four days ago, I changed my personal browsing to Firefox after a couple years on Chrome just because of the font rendering.

You see, I love fonts and beautiful letters matter to me, and Chrome only does horizontal sub-pixel antialiasing while Firefox does that plus vertical antialiasing, resulting in smoother font edges, specially noticeable on the top and the bottom of curved letters like O and S where they appear jagged on Chrome and smooth on Firefox.
I’ve also noticed that on Firefox the kerning, the space between the letters, is less accurate but I’ll leave this for another post.


Back to the google redesign – Now that i’m on Firefox, the google apps gmail, google+, calendar and others are shown with the second newest design, with the black bar on top. While I’m not a big fan of it either, I feel so much better without the fear of putting my mouse near the dreaded logo because it doesn’t have the rage inducing and Pavlovian dog beating hover menu.

The new google apps have a refresh button that I’ve been using more, specially on reader, because of the fear of the logo. And now that I have the choice between the logo and the refresh button, I press the logo with a strong sense of revolt and pleasure, like a dog when he’s destroying a pillow he shouldn’t. He knows he’ll get beaten but the pleasure is much greater so he defies the rules and does what his instinct tells him.

Posted on January 6th, 2012 under random

How to know if certain year is a leap year (or intercalary or bissextile year)

Is there a UEFA European Football Championship this year? If answer is yes, the year is a leap year*.


You’re welcome.


*If the year is before 1960, you have to find another way to figure out if year is leap year because there were no European Championships back then.

PS. I’m talking about football, the one you play with your feet.

Posted on January 4th, 2012 under random

Designing the perfect pagination for mobile web

Pagination on mobile is usually done with infinite scrolling or a ‘load more’ button when you reach the bottom, but when you’re required to use a pagination element, how do you do it?

A good pagination should provide:

  • previous and next page links
  • the total number of pages
  • first and last page links
  • current page number
  • a quick way to get to an arbitrary page number


The problem here is you want big buttons that are easy to click, but they take space and you don’t want to lose any functionality, so the common  ‘«first «prev 12 13 14 15 of 28 16 17 18 next» last»’ pagination is too bulky for use in a mobile touch screen.

To solve this problem, I merged some points shown above to save space without compromise in functionality. Starting with the common

«first «prev 12 13 14 15 of 28 16 17 18 next» last»

the ‘«first and last» page links’ can be merged with the total number of pages simply by transforming them into a numerical link. That leads us to

«prev 1 … 12 13 14 15 16 17 18 … 28 next»

which is shorter with no loss of information or functionality.

Now the ’12 13 14 15 16 17 18′ links give us the current page number and some control to get to nearby pages. Notice how 14 and 16 function the same as «prev and next» links, repetition which is fine on desktop with lots of space, but for mobile we have to cut redundancies like these.

In order to save space, we can replace the whole ’12 13 14 15 16 17 18′ portion with either a dropdown <select> tag or a numerical <input> field which default to the current page number. Both work well even if you have a large number of pages because the iPhone and android browsers have good dropdown selectors.

note: If you’re using the input field, don’t forget to specify type as number so the browser shows the numerical keyboard.

This is the pagination I ended up with:

Large buttons, prev and next links, visual representation of current page and total number of pages, first and last page links and the possibility to quickly go to an arbitrary page number, all in 5 buttons and an input field. I could have also done it with a dropdown <select>.

Also notice how the previous page and first page links are greyed out and they do nothing when you click on them, and how the input field and go button are bundled together.

Posted on December 3rd, 2011 under random