bossing around | Ruben Bos

Forget Touch. The Leap is a small box that let’s you...

Mon, 21 May 2012 16:37:24 +0200

Forget Touch. The Leap is a small box that let’s you interact with your computer as if it’s Minority Report. Crazy.

Spotify for iPad has arrived!

Wed, 02 May 2012 13:45:39 +0200

Spotify for iPad has arrived!

Stop Talking and Start Making. David Kelley, founder and...

Tue, 01 May 2012 17:16:57 +0200

Stop Talking and Start Making. David Kelley, founder and chairman of IDEO.

Pebble is a watch with e-paper display that connects to your...

Thu, 12 Apr 2012 08:52:00 +0200

Pebble is a watch with e-paper display that connects to your iPhone. There is even an SDK for developers so you can create your own apps. On Kickstarter, of course.

Retina images for the iPad using CSS3

Fri, 23 Mar 2012 23:21:00 +0100

Yesterday I was at a bar when ‘a guy’ entered with a plastic Media Markt bag containing two New iPads. The weird thing, it was 00:30PM and he just bought the iPad’s 10 minutes earlier. And if people start walking into bars with Retina iPads past midnight, I guess it’s really time to think about the impact of the high-res screens on our daily work as web developers.

Because websites look pretty bad on the 3th gen iPad. Images get blown-up.

When the iPhone 4 introduced the Retina screen in 2010, we had to update the graphics in native apps with images that are two times the original size. Apple quickly introduced a solution for iOS developers with the @2x format. If you’re not familiar with it: when you use an image, for example AwesomeLogo.png, adding a larger AwesomeLogo@2x.png is enough. You can still refer to AwesomeLogo.png.

This could be a great solution for mobile Safari on the new iPad (and iPhone4/s) as well, if the browser would check for a @2x image. As this isn’t the case, and we’re not sure if it will ever be, we have to come up with new solutions.

Looking for a solution I found this great Quora thread describing multiple solutions. It turns out you can focus on the Retina screen by using -webkit-device-pixel-ratio.

Let’s say we have a header containing an image called ‘AwesomeLogo.png’ that has an actual size of 100 x 100px. We can do something like this:

@media only screen and (-webkit-device-pixel-ratio: 1) {

.logo { background-image: url(‘AwesomeLogo.png’); }

}

@media only screen and (-webkit-device-pixel-ratio: 2) {

.logo { background-image: url(‘AwesomeLogo_2x.png); background-size: 100px 100px; }

}

The image targeted at -webkit-device-pixel-ratio: 2 is 200 x 200px. Even though an iPad3 is 2048 x 1536px it renders CSS as it was at 1024 x 768 px. Because of that we set the background-size to 100 x 100px (by a pixel-ratio of 2).

Great thing, we can even use the same tools and workflow as we’re used to for iOS development. I’m a big fan of Unretiner, a tool that creates ‘unretina’ versions of your high-res images.

I’m convinced that great people will make this even easier in the feature. Until then, this does the trick for default images of the website. Because it uses backgrounds in CSS it’s not a good solution for content images. If you’re not that scared of bandwidth usage, you could down-scale high resolution images. Be sure to check out this example by Duncan Davidson first.

Very interesting case study by Microsoft about the differences...

Fri, 23 Mar 2012 14:42:29 +0100

Very interesting case study by Microsoft about the differences between (UX) designing for iPad vs. Windows 8 Metro style.

“In this case study we want to help designers and developers who are familiar with iOS to reimagine their apps using Metro style design principles. We show you how to translate common user interface and experience patterns found in iPad apps to Windows 8 Metro style apps. We draw on our experience building the same app for the iPad and for Windows 8. We use common design and development scenarios to show how to leverage the Windows 8 platform and incorporate Metro style design principles.”

Check it out: Design case study: iPad to Windows 8 Metro style app

“Codea for iPad lets you create games and simulations — or...

Tue, 20 Mar 2012 13:48:26 +0100

“Codea for iPad lets you create games and simulations — or just about any visual idea you have. Turn your thoughts into interactive creations that make use of iPad features like Multi-Touch and the accelerometer.”

BBC News developers blogging about their experiences with...

Mon, 19 Mar 2012 15:49:23 +0100

BBC News developers blogging about their experiences with responsive design: http://blog.responsivenews.co.uk

Love the way how BBC covers their development efforts.

UX design for Mobile (Appsterdam Guru session). Appsterdam...

Fri, 16 Mar 2012 21:55:00 +0100

UX design for Mobile (Appsterdam Guru session).

Appsterdam invited me to give a Guru Session at BNO. Informal, very hands-on workshops to share a technology or a technique. I had a great day, thanks to 30 enthusiastic attendants. Check out the slides if you’re interested, or even better, read this blog post by my friends from VI Company, who also attended the workshop.

So, this guy walks into an a web forum, and posts the...

Sun, 26 Feb 2012 12:18:00 +0100

So, this guy walks into an a web forum, and posts the ultimate Windows Desktop UI Concept. Based on the Microsoft’s Metro UI, which can be found on Windows Phones and Xbox 360.

1984 - Nicholas Negroponte predicts the iPad, iBooks and an One...

Sat, 11 Feb 2012 12:30:55 +0100

1984 - Nicholas Negroponte predicts the iPad, iBooks and an One Laptop per Child kinda project.

Nice article on Design Shack why Pinterest is so great. From an...

Tue, 07 Feb 2012 21:59:48 +0100

Nice article on Design Shack why Pinterest is so great. From an UX view.

Brit - The Areaware Alarm Dock Turns Your iPhone Into an Old...

Tue, 07 Feb 2012 21:39:00 +0100

Brit - The Areaware Alarm Dock Turns Your iPhone Into an Old School Flip Clock

via davemorin

3.2 million ink dots. Hero on Vimeo

Tue, 07 Feb 2012 16:17:00 +0100

3.2 million ink dots. Hero on Vimeo

Live.js

Sun, 29 Jan 2012 22:31:34 +0100

Live.js:

“is a productivity tool, primarily aimed at front-end developers working in a development environment. It allows you to view the latest changes to your web page in the browser in real time, an auto refresh of sorts.

In other words, whether you’re editing JavaScript, CSS or HTML files, as soon as you hit CTRL-S, the browser is updated with your changes. So in theory, when in development, you can kiss goodbye to constant ALT-TAB and F5 based-distractions and concentrate on your workflow – your page will always be up to date in Chrome, Firefox, IE etc…”

List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript

Sat, 28 Jan 2012 21:08:30 +0100

List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript:

Nice.

Responsive Design Sketchbook

Sat, 28 Jan 2012 20:06:00 +0100

Responsive Design Sketchbook

Samsung Galaxy Tab. It’s Time to Tab (Parody)

Fri, 27 Jan 2012 10:04:53 +0100

Samsung Galaxy Tab. It’s Time to Tab (Parody)

Just got access to the New Vimeo. Looks very nice and simple....

Fri, 27 Jan 2012 10:04:19 +0100

Just got access to the New Vimeo. Looks very nice and simple. Love it when a website has such a great overhaul. Are you watching Flickr??

Cover of Avicii’s Levels by JWKTJE. Called Super Mario...

Sat, 21 Jan 2012 20:15:00 +0100

Cover of Avicii’s Levels by JWKTJE. Called Super Mario World Levels. Made entirely of sounds from Super Mario World (SNES).