It is no surprise that we currently live in a multi-screen world but did you know that the majority of the European website hasn’t been optimized for the normal screen (yes, mobile first sweet marketeers)? This is a sad development because the right solution is within hand’s reach: responsive design.
As you all may know already, responsive design is a way to get your website suitable for all screens and devices. I can say from my experience as front-end designer that this sounds easier than it actually is. Creating the perfect responsive design is a real challenge. Especially to adapt it for every device and screen without disabling major parts of the content.
Responsive Design
I already spoke twice about “every device and screen”. A dangerous statement, because which ones are currently included? Although a lot of companies still don’t see the importance of responsive design, I start asking myself the next question: What do we need to do with wearables?
When mobile phones and WAP (Wireless Application Protocol) entered the market, nobody could really predict whether a mobile device would be used for browsing the web or not. We thought people would use their phones on the fly, quickly checking an email. Boy, were we wrong. Even Google confirms this in their yearly report.
But how will we use the next generation of devices? At the moment, people use smart watches and other wearables as an extension of their smartphone. Although product development is still in a early stage and the market is in its infancy, I believe we need to decide what to do with wearables.
We are able to create apps for those wearable devices, but what will the future bring? Does a user expect to look up information on her wrist? In the early days of mobile phones, we started with screen sizes of 320×240 but the current state shows us models which don’t fit our handbag or skinny jeans.
How can we offer a website on such small screen sizes? Is it possible to fit this type of content at the size of your wrist and is responsive design the true future-proof solution? I am not the only one asking these kind of questions. Take a look at this screendump of the CSS Tricks website.
Is anyone here designing responsive sites that consider smartwatches?
To bring down a web design from desktop to smartphone size is not easy. Resizing it to a wearable screen size is a real challenge. The restrictions of phone screens are childsplay compared to the interface and behavior of a wearable. And do I want to visit a website with my smartwatch?
Dutch website Nu.nl developed their app for the Sony smartwatch and the Youtube video of this watch also shows us that it contains a browser app. So there will be a chance that people will visit your website with their watch.
Can we succeed in supporting all screens and devices by adding some breakpoints through responsive design? Or can we compare the life cycle of the wearable with the smartphone? It started with apps… we made some attempts with separate mobile websites and then finally we focused on responsive design. In my opinion responsive design will certainly have some restrictions.
The near future will bring us new screens and devices which need their own solutions. Let’s keep responsive design for the tremendous amount of screen resolutions, android versions and browser types… This will keep us busy all right.
Traditional research methods are by no means dead, as data analytics and attitudinal continue to…
We’re at an inflection point with personal transportation. Driving by hand is old-school. Driverless or…
Many designers and digital marketers are giving user experience more and more emphasis as the…
Storytelling is no longer limited to our childhood memories. I mean who doesn't love to…
Wearable technology is making it easier for consumers and businesses to access, gather, send and…
Special offers that can expire at any moment. Little extra's getting into your shopping cart…
View Comments
Hello!
While I totally agree with your article, well knowing the limits of responsive design with the approach your taking, I believe that there are limitations other than the screen resolution.
Assume a user in a stationary / home environment and one on the road. The user surely has different needs when it comes to his or her immediate information demand. At home, the user might want to consume extended information about something (a company, products, 10k report etc.), whereas on the road, the closest retail location might be important. Of course this can be done with the proper CSS, but needs a conscious decision. The "response" of the website should also include the users situational context.
Best
Colmar
Colmar I agree. I think we are going from mobile first to context first. And dependable of the place an user is, we can serve the suitable content to him. But in my article I only try to explain that the "one size fits all" principle is not going to work for all the new sizes which are coming in the near future. But whats your opinion, are people willing to watch a website (in some kind of context) at a wearable?
That is a good question, Elles!
Will you be able to experience the full content of a website on a watch or any similar (small) screen-format?! No, I don't think so.
Should there be features (parts) of that same website, that are made reasonably experienced on any other format? Yes!
But I believe I am drifting off into the context discussion again AND how it should be visualized according to the particular screen format. Imagine a Website (eg, store) with a google maps retail locator API, that's giving you the route from your point to the store XYZ! I would love for my watch to show me the way, perhaps just by arrows pointing into that direction with an indication of meters/miles to walk as opposed to permanently look on my phone to check if I am still on the right way.
I believe that the benefit of having the ability to provide additional information on your watch, needs to suite the benefit-character of a watch (or any other particular device). The watch per se provides me with a very convenient way to quickly figure out what time it is (ok, is some cases it also looks good) - so what other kind of information might be relevant at a given point in time that I quickly and conveniently want to find out? ... to my mind, there's a bunch.
I really like "going from mobile first to context first"!
Well I was trying to respond to you Colmar while I was doing some gym, but shame on you Paul...this website isn't responsive ;-)))) It says enough about my context I think :-) Getting back to this article and a previous one which i only wrote in Dutch but where I did some predictions for 2014. I admit that I am an Apple Fan girl, so I love to see an iWatch coming this year. But what's also interesting is bring iOs (and off course Android too) into cars. And when you bring both together I get a picture of my youth hero Michael Knight. Because let's face it...we want to connect all our gear together right? That we can talk with our car with our iWatch and tell him to unfreeze the windows :-) I think the wearables can be very interesting cause the context we use them and also the place we use them. A phone is not moving...yes a bit and we use GPS to do some location tricks. But something around our wrist can tell us much more. Also about our hearthrate (is this increasing after watching your website, full of excitement) Same with glasses and puppils. I read something about CSS 4 that they will add media queries which can do something with dark and lightness. So we can change colours of the website if we are outside and the sun is shining. Maybe website is not the right word...maybe we can better say "application". Whats also very interesting for the wearables vs websites is the coming features of push messages from browsers. Like the Pebble is receiving them from your phone. It can also receive them from your websites in the future. Maybe I watched to much sci-fi as child, but I really look forward to think about the great stuff which is coming ;-)
I wanted to say that I, too, love what you said about “going from mobile first to context first”. It's absolutely true that the context in which we use a device is of the upmost importance. That said, automatically shrinking websites down into miniscule, unusable sizes is both unnecessary and unworkable. With a smartwatch, we might be more apt to use voice commands which don't even need a UI in the traditional sense.
Testing these small devices also will be challenging in ways we might not yet forsee. For example, we want to create test cases and scenarios to see if people will likely use the devices in the way we predict they will. We must be open to all sorts of scenarios in this case and see how various personas might choose to use the devices "in the wild".
Additonally, if we want to capture the screen to show how a user is interacting with it, a tiny mountable camera is not a workable solution - although in that case, we might be able to do something similar to what Userlytics, a company I do some work for, does. They mirror the mobile screen on a larger computer monitor to allow for the traditional webcam/screen recording user testing methodologies.
http://www.userlytics.com/userlytics-launches-remote-usability-testing-platform-for-mobile-devices
That ability might be a big help - it's always helpful to be able to bring a tried and true testing method to a new situation, even as we explore new ways of testing, and indeed using, our devices.
Thanks for the thoughtful article!
...since you went to the gym, Elles, would't it been cool to have gotten a notification on your smartwatch that someone did respond to your article and the website asking you if it should read the response to you?! perhaps via these things: https://www.kickstarter.com/projects/hellobragi/the-dash-wireless-smart-in-ear-headphones
After you have been read the response, it would be interesting how your heart rate would react and the according to your Dash or runtastic profile would only read you articles accordingly..... oh god, where's this going? HA!
But why not have content chosen according to your present state when color adjustments are being chosen in regards to the lighting outside. I got to admin, it is fun to play these ideas. We're still talking about responsive design, right? Just not plainly a sites response to our screen resolution.
SyFy is great! Especially when you think of it as the things that we watched 20 years ago and them being here now. I wouldn't mind coming up with some SyFy today, thinking that it might be reality in another 20 years.
Do you think watches will ever contain a browser? I don't think this will ever be viable so I wouldn't include such low resolution devices in the responsive design discussion.
interesting point — i think people still think of responsive design as covering anything from smartphone to an iMac for screen-width and resolution and they forget the neverending peripheral spectrum that extends down to tinier screens { some we may not have imagined quite yet } as well as those that blow up to wide-screen televisions, dashboard operation centers, digital billboards and moonscape interface paradigms
of course i jest a bit on that last one, but the daunting 'every device and screen' could only anticipate interesting new breakpoint considerations and how users might begin to use the experience in those new contexts out in the world
right now i'm actually thinking about how experiences scale up to NOC-like environments if needed while still serving useful functionality to those that are monitoring and taking action on a laptop or desktop ... mobile is probably importan, too, just not on the radar with any immediate importance for the corporate context i'm working in
i think just throwing a supposed approach like responsive or mobile first at a challenge falls significantly short when applied to the universe of companies, contexts and purposes design needs to serve ... the appropriateness of the approach should, in my humble opinion, always come first and proceed the decision to pre-emptively adopt the latest trendy suggestions of the UX Conference Circus { er, ehm, I mean Circuit } just because it makes for interesting new presentations and conversations ... sometimes as designers we need to be a bit more practical than all of that, right?