Steve Jobs’ work has touched you

Most of the people I know have PCs. They have Android phones or Blackberries. They get their music by ripping CDs or by less legal means. Most of them have never heard of Steve Jobs. They don’t use his products. But they have been touched by his work. Everyone has been touched by his work. You have been touched by his work.

It’s funny how we take stuff for granted. Before the iPod it was impossible to fit a lot of songs in your pocket and even harder to get them on a device. Before iPhone there were no phones with a big screen that you could easily control with just your finger. Now that’s almost every new phone. And the Macintosh? Well, it changed personal computing forever.

Every good looking PC is a direct result of Apple’s design. Modern tablets are a direct result of iPad. Smartphones are all influenced by iPhone. Windows is a direct result of the first Macintosh. Apple’s revolutionary products have influenced almost all of electronics.

Apple is not the only company that creates revolutionary devices. But Steve understood that you do not only need to create something revolutionary, it must also be insanely great. Technology must serve people and it must bring delight to it’s users. That is the way to make a dent in the universe.

Steve Jobs has died and his legacy is Apple. Now it’s us who have to create something insanely great.

Remove Respond.js screen flicker

Respond.js makes simple media queries available in older Internet Explorers. It works because it parses the available CSS and saves the media query CSS. After every window resize event the script checks if any of the CSS rules should be applied or removed.

If you develop mobile first and responsive websites than using respond.js is a must. Luckily it’s awesome! But I ran into a problem mentioned by a client today. When used in IE7 and IE8 the browser first shows the mobile version and then quickly shows the correct desktop version. This flicker is quite irritating. So I created a simple hack which solves this. It’s not pretty, but it works.

My solution is to hide the HTML that is affected by the media query to be hidden as quickly as possible by adding a CSS class and than removing it in the media query. As soon as the media query is applied to content is visible again.

After opening the element which contains the content to be hidden (in my case a div with the id “container”) add this javascript. Note that this is HTML5 notation, so add type=”javascript” if needed.

<script>
    document.getElementById("container").className += " hide";
</script>

In your CSS create a new rule.

.hide{
    display: none;
}

Add code which sets the .hide rule to “display: block;” or whatever the default was. It needs to be declared for every “stop” in your responsive design. In my case there was only a mobile (the default) and desktop version. The code in my case:

@media screen and (max-width: 480px){
    #container.hide{
        display: block;
    }
}

@media screen and (min-width: 480px){
    #container.hide{
        display: block;
    }
    /* … rest of your CSS rules … */
}

And that’s it. It’s not bullet proof, but it’s probably water proof. If no javascript is available the content isn’t hidden. It could probably be improved by using Modernizr to check if media queries work and only then apply the javascript, because now the script is alays run.

Why deleting 75% of my photos made me happy

I recently deleted a whole lot of photos from my iPhoto library. I’m still not done, but currently my library has shrunk over 75% in size. In the process I also deleted some events completely and merged several together. A lot of pictures are lost, but it is the best thing that has ever happened to my photo library.

What I did was simple. I set a constraint of a maximum of 50 pictures per event. I chose 50 because it is a nice amount to watch with someone without getting bored, but can still give you a good impression of the event.

The end result is that my library is a lot more valuable to me. The only images in there are the ones that I truly care about because I forced myself to throw away lots of other good shots. It’s also a lot more fun to browse now and I can take more events with me on my phone or iPad. Managing Faces and Places takes a lot less time and as an added bonus iPhoto is quicker then ever.

If your current library also holds events filled with hundreds of photos, like my old library, I can highly recommend on deleting a lot of photos. Less truly is more.

Oh and all the original photos are not really gone. I’ve off course backed everything up, but I don’t think I’ll ever look at those photos again.

More on LESS and semantics

Smashing Magazine posted a nice article on LESS and semantic grid layouts yesterday. In “The Semantic Grid System: Page Layout For TomorrowTyler Tate talks about how to use LESS to create better semantic HTML and an easy grid to build your (responsive) layouts.

It’s a great article which describes what I tried to explain in “More semantic HTML with LESS CSS” a lot better and it offers a grid system to bring all the theory in practice. Highly recommended read!

Coding my own designs takes less time

It’s been a while since I had to code a design I didn’t do myself. But currently I’ve got two of such projects on my hands. Somehow it seems to take a lot longer to turn these designs into good HTML and CSS.

Thinking about how I work in Photoshop it quickly became clear: I’ve always got HTML in my head. In Photoshop I’ve already decided on the HTML markup and CSS for most design elements. But what’s more important, I’m always considering the most optimal markup.

Here are some concrete things I consider:

  • A sensible grid, with generous margins and padding, should be in place. Every piece of content, bordered or not, should line up perfectly. The site will look clean and the HTML and CSS will be simpler. Less code, easier maintenance and a faster website.
  • Create good text styles. The style of the text should indicate it’s important to the visitor. So apply those styles in that fashion.
  • The text styles should cascade well
  • The content you work with in Photoshop will likely not end up in the final website. What will happen with the layout if that headline suddenly spans another line?

As always I’m having a hard time trying to explain what I mean. But to try and sum up some of the things I’ve learned:

  • Grids make your life easier and your designs better
  • Good website designs consider HTML and CSS
  • Always charge more for coding the HTML and CSS if you’re not coding your own design

Design details: Espresso 2 settings button

I love well thought out software and I can really geek out about design details. Sometimes I come across a detail which is more than a great touch or a beautiful extra.

MacRabbit’s Espresso 2 Kaboom release, an awesome text and web editor, has such a detail. The settings button. The way it’s visually implemented is genius. It’s looks tell you more about what it does than if it just had an icon.

The button actually tells a small story. “Look, I’m a button! But not just any button. I show you the inner workings of this app, the gears behind this interface. If you want to change something just click here.”

After you push the button the interface slides up and reveals the settings. As a bonus the gears spin as they “work” to slide the interface up. It’s beautiful, clear and functional because it tells a story. And I like it. A lot.

iPhoto and iTunes in iCloud. What I would like.

iCloud will launch this fall. A lot of it’s features are already known, but lately I have been thinking about some additions that could really make it a kick-ass service.

After last weeks refresh I ordered a new Macbook Air. I know it’ll be a great machine, but I foresee one problem: storage space. Most of the bits on my current Macbook hold media. My iPhoto and iTunes libraries take most of the hard drive space. My new machine likely won’t have enough space to store my current libraries. Another problem is that my girlfriend will start using my old machine and would like to have access to the same libraries meaning I would have to manage them on two machines.

I would love my iPhoto and iTunes libraries to be in iCloud with multiple devices smartly caching the media for local access. Multiple people could also manage the same library so my girlfriend and I would both have access to exactly the same photos and music.

Some problems could occur though.

  • If someone adds several gigabytes of images, it would take a while to upload. If the upload would be interrupted, by putting the laptop in a bag for example, it could take several days for the new images to arrive on other peoples devices.
  • Getting media from iCloud could take a while thanks to slow internet connections.

Those problems can be fixed and the solution is actually pretty simple. An update to Time Capsule.

Time Capsule would act as the local mirror of your iCloud account. Adding photos to iCloud would first send them to Time Capsule over your fast local network. From there they’ll be uploaded to iCloud or be quickly pushed to other devices within the house.

If your device can’t detect your Time Capsule, because your not at home, it would connect to iCloud directly. Any updates while on the move would be pushed to iCloud which in turn would update your Time Capsule. It’s always online anyway.

For this to work OSX and iOS should be updated as well off course. Media libraries are a combination of the media files itself and a database of meta data. An example of meta data are image descriptions, faces and places. Those databases are only several megabytes for very large libraries.

When a change on iCloud occurs the meta database should always be synced first. That way the interfaces on all the devices could reflect the updated media even before the media has been downloaded. The devices should smartly cache media. For example only 5000 images consisting of the most viewed, most recently viewed and most recently added items. It could also smartly pre-fetch media.

iPhoto and iTunes in iCloud woud rock. Photo stream is a great start, but it’s not full iPhoto. And using Time Capsule as a local mirror would greatly speed up the experience. Apple probably is the only company which can create something like this and I would gladly give them some money if they do.

Be clear about what it shouldn’t do

In the office ideas for new apps are always around. It might be a new idea like Anniversall, but it could also be a new take on existing concepts.

Ideas for an online shop app have been floating around for several months now, but every time we talk about it the scope seems to get bigger. But we want a simple back-end experience.

When you sell clothing you can have a T-shirt in several sizes and colors where each of those properties can influence the price. In The Netherlands we have multiple VAT percentages (depending on the type of goods) and some shops may need to track their inventory. An item in the shop quickly turns into something more complicated than a name, description, image and price. These are the things which make our scope much broader than it needs to be.

Just now I was working on some ideas for the shop and finally realised that we needed some boundaries for the app. Instead of focusing what it should do I created a list of things the app should not do. That made it a lot easier to decide on the attributes of a shop item.

Establishing boundaries makes you run into them. Not having boundaries makes you explore every possibility which will increase the scope and problems you need to solve. Make it easy on yourself and be clear about what it shouldn’t do.

Anniversall has launched!

Today marks the launch of our first open web app: Anniversall

Anniversall is simple. Just enter a date that has special meaning to you and you get some neat information about that date. You want to know how long you’ve been married? Or how many days have passed since you we’re born? Anniversall answers these questions and give you some extras too.

You will get simple stats on how many full years, months, weeks, days or hours have passed since the date you’ve entered.

After that Anniversall tells you a fun fact about the time that has passed since that date. Like “How long would your hair have been hadn’t you cut it since?” or “How many times has the moon orbited earth since then?”.

Finally, and to us this is the most interesting feature, you will get a calender marking the anniversaries for your date. But not only the yearly anniversary but other cool dates too. Like the 100 month anniversary, the 900 day anniversary or the 95000 hour anniversary. We like anniversaries, so why only celebrate them once a year?

The goal of Anniversall is to make the world more fun, to share more moments to celebrate and to spread useless knowledge to people using it.

To us it also was a great way to dive deeper into mobile web development. It’s a big part of (right now and) the future and we want to be prepared.

Anniversall is free to use. It works great on modern browsers, but is aimed at most modern mobile platforms. If you use an iPhone or iPod Touch you can add it to your home screen and use it just like a regular app. Just tap the arrow (or +) button in Safari and choose “Add to home screen”. IPhone 4 users will get the benefit of high-res images.

So, if you want answers to questions like:

  • How long you’ve been in a professional relationship with this clients?
  • How many days old is my son?
  • When do I live in my current apartment for 500 days?
  • How many weeks has it been since my last vacation?
  • How many times could I have continuously traveled between Amsterdam and Paris by train since last year?

Don’t hesitate and just enter your precious date into Anniversall.

Aim higher than usable

I was recently watching some Future Of Web Apps videos and came across an excellent talk by Aaron Walter (of Mailchimp fame). The talk was great, but there was one point which really stuck with me.

Usable = Edible

A restaurant which serves food that is just edible doesn’t have a bright future. Great restaurants make eating into a great experience. The food smells good, looks good, tastes good and is well presented. And it’s edible too!

So is creating edible software enough? No. Successful software should care about it’s users and serve them a great experience. Because those experiences are what create customers who don’t just use your software, but users who love your software.