Readable Wearables

http://alistapart.com/column/readable-wearables

In the article Readable Wearables by Matt Griffin, we learn about the scalability of web-pages and the design response to newer and smaller devices brought to market every year. Today, the digital production industry is responsible for an already vast number of devices, screen dimensions, and pixel densities. Thankfully, the design industry is pre-built to withstand change. With the Apple Watch release later this year, and other wearable Android devices already available, web designers are going over their HTML and CSS files to prepare for many of the smallest web enabled devices yet. Griffin takes us through the design process for his own website on his column in A List Apart.

“So, will people use their watch-like devices for browsing the web?” the author asks rhetorically. The answer is that people will access the web using anything they can get their hands on. So, in his own “device lab,” Griffin tests out a promotional Samsung Gear S, and finds that — as web design goes — even his own website wasn’t displaying properly. The formatting had changed: some pictures were squished together, font wasn’t readable, headlines had lost their centering. He then takes to his site’s CSS to prepare it for the 213 pixel wide screen. In doing so, he praises his former self for preparing for changes early on in his design.

http://alistapart.com/d/misc-images/Column_images/Bearded-side-by-side-top.png”

The first issue he encounters is that fonts that were previously fine to work with were now less readable. Some fonts had to be changed to all-caps for this problem to be fixed. Additionally, larger fonts used for headlines also lost their impact on the smaller screen as formatted indentation is interrupted. This problem shows that font choice is very important, and imagining every possible way it can be viewed is necessary. By selecting fonts in sizes that were appropriate for the device, and assigning them to the device detection in the website, he was able to fix this issue.

Noticing that the 16px font was actually diminished on his watch, he compensates by increasing the font to achieve the same look and feel as the desktop experience. Using the existing set of tools he was able to find a way to bring the impact and readability back into the headline and body copy. It very is hard to see just by looking at it, because you are rarely looking at unfinished pages, but copy and web layouts are very fragile. It takes knowledge of many different environments to create an impactful, let alone properly functioning, website across all device experiences.

In this case study, our designer is able to make changes to his website quickly and easily because he prepared for change beforehand. As mobile web devices first shattered the way many web designers did their work, it appears that tiny devices such as smart watches will do the same if they are adopted. This is not a bad thing at all for web designers (that use CSS) in that it provides a new problem for content, breeding new innovation. The blog post talks about this, saying, “In the letterpress world, we’re restricted to the type we have, … weights, sizes, typefaces, and variations are extremely limited, … this can lead to some very exciting design work that otherwise we’d never be forced to do.”

As the author of this article shows — the web designer must be very diligent about experiencing new technologies as they emerge. In a world that every day feels as if it is its apotheosis, something new comes about to shatter pre-conceived notions and conceptions. Being in the industry means knowing ahead of time what is next, what works, and what doesn’t. As a species, we learn new visual cues and symbols daily and in this global society we need to create content that reaches more people in more places than ever before.

In my experience, the typical web designer is unattached from the present because he or she has a foot in the future. Another important part of being a good web designer is knowing the history of web design so as to build on history rather than repeat it. The environment for the web has been built layer by layer, over 30 years of internet, and we are still just on HTML5, but the work that has been done within that small system is astronomical.

http://alistapart.com/d/misc-images/Column_images/Bearded-side-by-side-middle.png”

What this blog post highlights more than anything else is the fascinating scalability of web content and visual language. Starting since before the printing press we have been expanding on the idea of visual and readable content from how it is created to how it is viewed. Interestingly, we have not had to deviate much from those original forms yet, still using serifs and grids to indicate where we are on a page. Even the way we view content, our eyes moving from top-left to bottom right side of the page has remained constant for centuries.

From our current perspective the future appears to be a minimal and clean one. In the future, web design must be clean enough to further render invisible any imperfections, especially as we hold screens closer and closer to our eyes. With all the fundamental aspects of design incorporated into even latest iterations of technology, learning and perfecting the basics remains a relevant tool to have going forward in the design industry.

Advertisements

One thought on “Readable Wearables”

  1. Man it’s a great writing.
    Yeah…. Even these days, some websites have some problems on portable devices. It is kind of shame, if you think about it. Web & Mobile Advertisement is the upcoming biggest market and still…. The websites breakdown. But sometimes I wonder, is it going to be only good if the screen of the portable devices get smaller? Apple’s that watch thing mentioned above has the screen size which is even less than the half of iPhone. Would the advertisers or marketers able to show the image or copy that they are trying to express on those small screens? I sometimes just wonder….

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s