Smartwatches and location-based messages, voice search, Google Glass and more.

Rachel Pasqua offers many insights on smartwatches from how they may drive demand for location-based messaging and voice search to how they are more likely to be quickly adopted than Google Glass.

An Apple smartwatch

An Apple smartwatch.

Reducing non-data ink to improve graphical display

In April, I posted on “The Elements of Style” applied to analytic design. Darkhorse Analytics of Edmonton, Alberta, Canada, has this presentation demonstrating the reduction of non-data elements to improve the data-ink ratio of a bar chart. I combined the original and the final images to create a before-and-after image below:

The original bar chart, left, and the re-designed bar chart, right.

The original bar chart, left, and the re-designed bar chart, right.

Re-designing reduced the image size to less than 10% of the original, a huge reduction which indicates the potential for expediting image loading.


Bloomberg Businessweek offers this article about the pending offerings of Apple and Samsung smartwatches. With the increase in both web-enabled TVs offering huge viewports and smartwatches, though they are big for watches, offering tiny viewports, design for web sites and email probably needs to consider an ever-increasing range of viewing sizes and needs.


The I’m Watch, created by Blue Sky in 2011.

Responsive web frameworks: Twitter Bootstrap, Foundation, and Skeleton compared

What is responsive web design? According to myself – this is from, my own responsive site showcasing my portfolio:

It is an approach to crafting sites so that visitors have an optimized experience, one usually with no sideways scrolling, minimal resizing, and hopefully not much waiting, regardless of the device through which they visit, whether phone, tablet, laptop, desktop or something else (anyone here via web television?). It now typically embodies a mobile-first approach so that visitors using smaller viewports are given primary consideration though viewers with larger viewports may have a progressively enhanced experience, one often involving larger type and images and sometimes additional content.

Vermilion design + interactive offers this brief comparison of the big three responsive CSS frameworks. I’ve used all three and appreciate them all. I started with Skeleton and its simplicity made learning it so easy. Twitter Bootstrap has the most assets in its library currently, and I’m just finishing a new site composed with it. I like Foundation 4 because it is mobile-first by default and I think this framework is gaining momentum rapidly.

The Google home in 1999 and on 4 June 2013

Google home in 1999.

Google home in 1999.

Google home on 4 June 2013.

Google home on 4 June 2013.

Simplicity prevails in the home design for both dates despite the approximately fourteen year difference. Interestingly regarding responsiveness, when I resize my Firefox and Google Chrome browsers in my laptop, I get a horizontal scroll bar in each browser at below 1000 pixels width, roughly. In my iPhone 4S, however, does  display without a horizontal scroll bar.

My responsive web portfolio –

Today I link to my own responsive web portfolio and present some screen captures, too, to show how the site responds to vastly different viewport characteristics.

Screen capture of index page of my web site  - - bearing my web portfolio in a Firefox browser

Screen capture of index page of my web site – – bearing my web portfolio in a Firefox browser.

Screen capture of index page of web site - - bearing my web portfolio in a Blackberry Storm..

Screen capture of index page of my web site – – bearing my web portfolio in a Blackberry Storm.

An exemplary responsive web site:

There is very, very little I dislike about Perhaps that’s an odd way of putting it but so many web sites can be annoying with unruly pop-ups and animations or features whose use is less than clear or self-explaining that I start from a negative score and grade upward. But is beautiful with great typography, an excellent navigation system (different from the one at featured in my previous post), and “easing” which you can glimpse if you resize the browser in a desktop or laptop (I don’t observe this in an iPhone, though, and I’m unsure about tablets) and which produces an acceptable animation (basically a very brief delay in the relocation of, for example, an icon) adding some playfulness to the site. The easing is unnecessary, but technically proficient and fun. The navigation system evident in widescreen viewports tucks into a select box for narrower viewports and allows more content to be viewed in phones and tablets where space is scarcer.

Widescreen view of

Widescreen view of

View of in an iPhone in portrait and landscape views.

View of in an iPhone in portrait and landscape views.

An excellent navigation system on a responsive web site showcases the work of front-end web developer Joseph Twumasi. Front-end web developers, also known as front-side or client-side web developers, create the things that web users see, hear and otherwise interact with on a web site, rather than the server-side (or back-end) things such as an e-commerce database. I like the site’s color scheme and think it has a fantastic responsive navigation system.

Here are images of the header, including the navigation system, in a full-screen view on a laptop as well as the view of the site’s home on a mobile phone (a Palm Pre):

The navigation system of tucked neatly into the header in this wide screen view.

The navigation system stretches nicely along the header of

Mobile phone (Palm Pre)portrait  view of

The navigation system stacks vertically for narrow viewports while other elements of the header that appeared in wider viewports have been removed.