Most embeddable maps are touch friendly in that you can swipe/scroll to reposition the map within their frame. This is great, but users can get stuck if the embedded map happens to fill a viewport at any given time. If there’s no piece of the actual page in site, there’ll be nothing to touch or swipe from.
Test this on a small touch screen. Unless you channel all your swiping mojo, you won’t be able to scroll to the bottom of the page.
This is most common with single column mobile views where containers occupy 100% of the viewport’s width. To avoid this, I’ll usually set the container closer to 90%. This provides rails on the right and left sides that ensure there’s always part of the page to swipe. I also try and keep the map’s height short. Maybe something like this:
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!
Update: 3/13/13
The infinitely talented Gerren Lamson recently posted his sketchnotes from the Responsive Design From Every Angle panel. Gosh, he’s good.
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.
