Comments on Readable Wearables

15 Reader Comments

Back to the Column
  1. Maybe it’s just the coffee not kicking in yet, but why 350 for the one media query breakpoint? I’ve had a few Android phones where 360 is the portrait width.

    Also, not yet owning a smartwatch (I’m waiting for one that can do continuous heartrate monitoring at the very least) I have to ask has anyone yet compiled the dimensions for them yet?  I appreciate the article giving the width for the Gear S, but has anyone seen it for other devices? My Google-fu isn’t finding them yet.

    Copy & paste the code below to embed this comment.
  2. PS,

    Thanks for the good question! I chose 350px, because that’s where those design decisions started to feel bad, and could benefit from adjustment. Up until that point, the type and grid changes still seemed to benefit the overall viewing experience.

    I’m trying not to make breakpoint decisions based on device widths. There are far too many in the present and near future to wrangle.

    My motto about when to add a breakpoint? When the design breaks: breakpoint.

    As for your other question, this is not up to the minute, but I did find it helpful: http://dpi.lv/

    MG

    Copy & paste the code below to embed this comment.
  3. @powrsurg I would assume that the 350px breakpoint came about simply because he felt the design needed to be tweaked at that width rather than tying it to a specific device viewport.

    In general, when writing responsive CSS, you really shouldn’t worry very much about a specific device’s pixel width, but instead adjust your designs based upon when you see issues as you expand/contract the browser window.

    Copy & paste the code below to embed this comment.
  4. When you say “my 1em (16px) body copy type was too small to comfortably read”, and go on to increase the font size to 1.1em.

    Is this possibly a device specific problem, and that another device might use a lower resolution display (or use more pixels per CSS pixel)?

    Copy & paste the code below to embed this comment.
  5. @CraigFrancis Yes, it’s device-specific. It’s up to the device to determine what its “ideal viewport” is. Smartwatch vendors should test if standard 16px text is readable and if not, set a lower ideal viewport to accommodate for that.

    Copy & paste the code below to embed this comment.
  6. Great reading! Yet another example of how handy SASS can be, especially when maintaining and experimenting on readability on this kind of device. Hope there’s not too much difference in the screen resolutions.
    I work at Stibo, where we have an accelerator currently working on news on smartwatches, an area where typography definitely becomes an issue. Very interesting stuff! Check it out if you’d like: http://www.stiboaccelerator.com/smart-watch/

    Copy & paste the code below to embed this comment.
  7. Craig,

    My impression resulted from two things: the screen is very tiny, yes (so big type doesn’t fit), but also one tends to hold a watch (if you’ll forgive the expression) at arm’s length. Being that it’s not right in front of your face, the 1em font size did feel too small. I did find this effect to also be true on the Moto 360’s very different screen.

    This effect is also a factor of the typeface design, so I encourage you to try things for yourself on your own devices, and use your best judgement.

    Copy & paste the code below to embed this comment.
  8. So here’s the question - does technology drive behaviour or does behaviour drive technology? My answer would be that technology has to be compatible with some underlying behaviour. Putting a camera onto a phone fitted with an underlying human need to simplify things. One device is easier than two. Maintaining two devices goes in the opposite direction - it complicates life. I wonder.

    Copy & paste the code below to embed this comment.
  9. Edge,

    In the best possible world: both. It becomes (hot new phrase) a virtuous cycle.

    How will people use these things? We’ve yet to find out. But this is why I ordered a couple and tried to start living with them, regardless of the potential for silliness.

    MG

    Copy & paste the code below to embed this comment.
  10. It occurs to me that I should really clarify my “arm’s length” comment,  as a phone is clearly at the end of the same arm as a watch.

    The thing I noticed is that when one has a watch to look at, and its display is on the back of the wrist, it suggests a very different arm posture to use close to your face.

    As a test, try holding your hand in the phone position (elbow down, palm towards your face) for 30 seconds. Then do the same in the watch position (elbow up, back of wrist towards your face) for the same period of time.

    How comfortable is the second pose, in comparison? Not so good, right? My tendency was to leave my elbow (and my wrist) in the down positioning, making the tiny screen more tiny, thus leading me to desire slightly larger smallest font sizes than on my phone.

    Copy & paste the code below to embed this comment.
  11. This, is a great article. Another example of how break points should be used. Rather than base them on devices, use them when your content starts to misbehave.

    Bumping up body copy font size is also beneficial for people reading in the bus for example. With the bumps in the road, you need larger text size so you don’t loose focus on the line you were trying to read. I use larger font size even on my tablet when reading an e-book in the bus, but I lower it when I get home.

    Copy & paste the code below to embed this comment.
  12. Has anyone got further updated information on the Samsung Gear S. 213px-point is small when styling. Our team are having fun with function and form with this. I am not so sure about these devices from a browsing perspective. Might stick with the Gold apple watch (kidding!)

    Copy & paste the code below to embed this comment.
  13. nice approach.. everyone can relate.. piastra per capelli professionale

    Copy & paste the code below to embed this comment.
  14. Excellent articles. There has been many wearables that has transformed the way users use certain applications. These wearables directly compete with Mobile applications and are expected to replace mobile apps as well. What is important is to understand the dimensions of the device and search for the techniques that help a company to develop an attractive wearable. Navigation and clarity of text are crucial elements in wearable apps.

    Copy & paste the code below to embed this comment.
  15. article quality . discussions were very useful , especially for me who is doing Tugan about Readable Wearables .. thanks Harga Ban Bridgestune Murah

    Copy & paste the code below to embed this comment.
  16. Sorry, commenting is closed on this article.