I had always looked at device testing as a straightforward pass/fail endeavor where websites either look and behave as expected or not. I would interact with whichever device—smartphone, tablet, or in-between—only for as long as it took me to verify that nothing was broken. At the end of the day all I gained was a check on a to-do list.
Recently, I’ve started ‘moving in’ to newly acquired or borrowed devices. I’ll setup email, multi-task, edit text, road test apps, and of course, browse the internet. Sometimes the experience is delightful, at others it’s frustrating and slow, but either way I win because I’ve taken a step or two closer to understanding where users might be coming from.
As web designers, our perceptions are among the most valuable tools in our arsenals. Limiting ourselves to one browser, operating system, or device brand is risky if our goal is to sensibly design for all of them. Now when I pick up a device to test, I find myself less quick to put it back down.
I wanted to post the code I’ll be using to get responsive layouts to render properly in IE10 for both Snap Mode and Windows Phone 8. Tim Kadlec and Matt Stow have documented & championed the cause better than I ever could, so read their posts if you want the full story. Basically, I’m following the recommendation to use the following code to set viewport in my CSS:
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}
A fix is on the way to get Windows Phone 8 to recognize CSS pixels (preferred behavior) rather than device pixels. In the meantime, use this javascript before any other scripts in the head if you need an immediate patch:
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
Here’s the code and demo link (twa.lt/ietenvp) for my test. And thanks to Rey Bango for helping us with a fix.
A couple of years ago I came across this lovely mishmash of a website called fulltable. I’ll go there when I’ve got spare time and dig around the index of links until I find something interesting. This weekend I stumbled upon these 1950s Country Fair magazine covers.
I was previously unaware of the publication and its editor, Macdonald Hastings, until now, but I may try to snag this book or a few throwback copies to leave around the office. The illustrations are done by John Hanna. I couldn’t find much about him online aside from this.
Update: 1/16/13
@TheBitLeague has recently made me aware that you can purchase this artwork in coaster or table mat form at jennyduff.co.uk.
I finally updated the site with a handful of changes I’ve been fiddling with over the past few months. It’s one of those complete overhauls that really don’t look much different at a glance, but it feels good to keep things current and in line with my own sensibilities. To mark the occasion, here’s a non-comprehensive list of what and why:
Centered Layout
A I opted for a single, centered column of text on most pages. The more I use tablets and phones, the more that left-hand margin reserved for meta data bothered me. Things felt unbalanced while reading. Plus, I think I’m going to enjoy having the extra space so that media can extend full-width from time to time.
Embiggened
The max-width of the site container has been increased to 1360px. I increase font-size and column-count for screens greater than 1200px × 500px and 1650px × 800px.
Pagination
At wider views, I stashed an easy-access pagination nav in the margins. I’ve noticed that Chrome has similar arrows appear on left & right swipe. Initially, I was hesitant to keep them because of that, but I found them so useful during buildout that they’re going to stay.
Proportional Grid
I simplified the grid. For posts, content within is centered and the width is governed to maintain good measure. I’ve also got a quick & easy proportional grid in place to split things into halves or thirds with ample 5% margins.
Improved Icon Font Usage
I updated my icon font and implementation to use unicode characters.
Page Updates
Info, Search, and the 404 page (complete with GIFs) each got overhauls.
I bought a Nokia Lumia 920 and have been test driving it over the past few days. Windows 8 has some really nice design touches so I thought I’d take a screenshot (press power + start) whenever I saw something that I got a kick out of. I particularly enjoy how things like indexing and settings are handled.
The phone is 70.8mm (2.8″) wide and 130.3mm (5.1″) tall with a screen resolution of 768px x 1280px. It’s large for a phone, but I’m getting used to it and mind it less when I see the difference those extra pixels can make for my favorite apps and sites.
