As a general rule I gravitate towards larger type not only for relative readability, but also to help with touch targets. Yesterday, Matt Griffin from Bearded posted on the desire to, at times, use a base font-size that’s less than the 100% (16px) default for a range of media queried viewport widths. I questioned this in a series of naggingtweets, noting that touch and viewport size aren’t connected. The most popular touch devices may currently be phones and tablets, but you can also find touch screen offerings for 27” monitors and beyond.
I find it’s better to err on the side of larger type and bigger touch targets on any screen size, but I do think I was over-generalizing. In fact, there are a lot of places on the current Microsoft Homepage where we’re using 14px (0.875em) text. I think it works quite well for things like labels and caption/sub-text, especially for narrower columns.
Also, it’s entirely possible to have type smaller than 16px and maintain reasonable touch target sizing through vertical spacing like line-height and padding. Why both? Take a look at the two unordered lists below (Demo also on CodePen):
Example A only uses line height to establish vertical spacing, but when text wraps at narrower views the list items are hard to tell apart because lines of text and list item links are spaced the same. Example B has a tighter line-height with the difference being made up with the extra padding. This way, when the text wraps it’s easy to tell items apart. Bada-bing!
It’s been an honor to contribute a chapter to Smashing Magazine’s The Mobile Book. I had the lead-off position in a series of chapters about responsive web design that was brilliantly followed up by Brad Frost and Dave Olsen.
If you’d like to take the book for a test drive, good news! Mine is the free sample chapter (8.0mb PDF). But there’s nothing quite like the real thing. This is Smashing’s best looking book, topped off with illustrations by the infinitely talented Mike Kus.
But when all these [negative emotions] are removed, and you can look forward, and the road is clear ahead, and now you’re going to create something. That’s as happy as I would ever want to be.
I love the look he has on his face. You can almost see memories and experiences flash by. The joy I find in making something can easily be dashed when all is not well with those whom I care about. Work hard. Be nice. Handle your business, and don’t be an asshole.
While I’ve built one or two myself, I think parallax scrolling websites can, at times, be excessive. In the rare occasion where the effect is an appropriate fit, it can add a nice touch of natural perspective to a site.
In the above GIF, I mounted a camera on a tripod and snapped shots at regular intervals as I raised and lowered the arm. Things in the foreground move up & down faster and further than things in the background. Also, things only shift on the axis being traveled—nothing shifts left & right along the x-axis if the y-axis is the one being traveled.
That’s why I think using vertical scroll to trigger horizontal motion can feel jarring and unnatural. Similar effects, like slowing the pace of a scroll or using it to load, rotate, or animate objects, can feel clunky and disorienting. There are surely exceptions, but assuming these effects make a site more engaging might be unsafe. I actually feel less engaged when scroll behavior is unexpected or hijacked. Like a car’s steering, even subtle changes in responsiveness will leave the driver unsure and less focused on what’s in front of them.
We should also keep in mind that extra browser/device testing is necessary. Some implementations can harm performance and won’t work well in touch environments. Parallax sites can be great fun, but please, implement with care.
Oh, and hat tip to Sega’s 1988 smash, Altered Beast, for showing us all how cool parallax is in the first place.
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:
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);
}
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.
