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.
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.
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.
Ed Lea, Visual+Interaction Designer, illustrates responsive web design with this imagery:
Ed Lea’s illustration of responsive web design
What is responsive web design? According to myself – this is from williamp.com, 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.
Google home in 1999.
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, Google.com does display without a horizontal scroll bar.
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 – williamp.com – bearing my web portfolio in a Firefox browser.
Screen capture of index page of my web site – williamp.com – bearing my web portfolio in a Blackberry Storm.
There is very, very little I dislike about viljamis.com. 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 viljamis.com is beautiful with great typography, an excellent navigation system (different from the one at codelabgh.com 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 viljamis.com.
View of viljamis.com in an iPhone in portrait and landscape views.
Codelabgh.com 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 stretches nicely along the header of Codelabgh.com.
The navigation system stacks vertically for narrow viewports while other elements of the header that appeared in wider viewports have been removed.
Marko Dugonjić uses face detection via your webcam to evaluate your distance to the screen and adjust the layout. Perhaps he’s being too modest in describing the idea as it could be applied to the entire layout, not just the typographic aspects.