When your viewport lies...

You may be aware that a while back when that Stephanie Rieger posted 'Strategies for choosing test devices' I decided to throw up a simple tumblr blog with developer's device testing suite (please add yours so that there'd be a small resource for helping others to decide what to buy.

About the same time I started researching and purchased a Samsung Galaxy Europa on the magical eBay. There really is a bargain to be had if you look hard enough. I managed to get this for a bargain price of £35.

A back story

Also at the same time I was embarking on a 120 hour project for a start up I'm now a co-founder of where, initially, I was the front-end developer turning the PSD's into a nice HTML/CSS/jQuery web system for the back-end to 'plug into'. 

During the many skype conversations I managed to get agreed an attempt at an 'responsive' version of the fixed width designs.

What did I just buy?

So in the preliminary coding of the designs I thought I'd check it out on my Android device (the Eurpoa). When I ordered the mobile I knew that it'd be a device that was 240px wide and 320px high (in portrait). I thought that it'd be great to have that because there's quite a few devices that have this screen size.

What I wasn't expecting was for it to 'spoof' itself in thinking that it's actual viewport is 320x401 (in portrait). This makes everything a lot smaller. My hands are not the chubbiest of things and it's a real difficulty in typing in a domain name so 'pushing' buttons and navigating around a site that's 'smaller' because of this was kinda hard.

Real devices

So case in point. It really is benificial to 'test on a real device'. Without doing this I could have made potential users struggle.

Human Interface Guidelines

I'm a real big fan of Apples guidelines, although aimed for iOs applications I think that a lot of it's 'sizing of things' can be carried across to your small/narrow/mobile/device viewport designs. Also worth a read is this fantastic article about the visual proportions of iOS. Of course, again, these guidelines are for a specific 'fixed width' kind of design but a lot of it can carry over within your responsive development even if device viewports can be quite an accumalation

So, be careful out there

Just because it works on your iPhone, it maybe squashed on a smaller viewport (or a smaller device lying to you), testing in the browser is great for the intial part of your responsive tool kit but try and get that design tested on as many devices as you can as often as you can. Your viewport maybe different to what you perceive.