“I need a new website that will work on all devices, including iPhone, Android, tablet, and desktop. It would also be nice if it was optimized for TV, and could work on my BlackBerry. I also heard that a new device will be available soon with a display of six inches. The site needs to work on that, too.”
This is a bit extreme, but we’ve all heard similar requests.
Is a project of the scope described above—one incorporating current and future device specifications—even possible? Are we able to build something that will work now and be smart enough to adapt in the future?
When we think about what it means to “work on future devices,” we shouldn’t assume that it would simply render, it needs to respond to the new device’s screen size, bandwidth limitations, browser differences, context, hardware, and languages. In order to create these projects, adaptive design, as opposed to simple responsive design, has proven itself a better fit for allowing the flexibility necessary to adapt to the multi-device environment of today (and tomorrow).
From Resolutions to Multi-Device
Let’s face it, a client’s audience is not going to use the same devices next year as it does today, and this needs to be considered in the initial development processes. Development is not a one-and-done scenario, and it’s necessary to allow room, and time, to adapt.
It’s hard to remember, but as recently as a decade ago we did not have today’s variety of devices. However, we had similar development conversations. Before iPhones, Android phones, and tablets, we still had to consider the project’s resolution (800×600, 1024×728, or higher). Similar to the way we want a website to work on all devices today, we wanted them to work on all resolutions years ago.
When it came to resolution, many thought that the best approach was to design in the lowest resolution, keeping the most important content visible. As the resolution grew, we started to review and add more content. Another approach was to create fluid websites that adapted their width depending on the resolution and screen size. This had the side effect of lots of pages with awkward layouts, ridiculous paragraph sizes that were almost impossible to read, and big empty spaces that altered the layout and practically destroyed the planed design. Some developers tried to fix this by centering and fixing the width, but that could generate horizontal scroll, which can still be difficult, even with new generations of devices that allow for it.
Responsive is merely a technique that focuses on implementing your website to have breakpoints …
This resolution issue blew up when smartphones and tablets hit the market. We went from having three or four resolutions to consider to almost 20 by late 2012. New devices now have different operating systems, browsers, resolutions, and navigation features. We can also now work in landscape or portrait screen orientations. Designers now needed an adaptive design approach that would works in this increasingly complex environment.
Know Your Problem Before Thinking About the Solution
To identify the best adaptive solutions it’s important to understand the problems:
- Image dimensions, KB size, and resolution: Stretched and low-resolution images look horrible. It’s important to make sure that all images render correctly on all devices and that connection speed and data plan options are also taken into account—nobody wants to wait longer or pay more to see bad images.
- Browser support to new markups: There is still no standard for what different browsers will or will not support. Every browser company creates their product differently. I’ve worked as a web designer for a long time and I know the pain that goes into validating websites following the W3C Web standards. This lack of browser standards makes our lives very difficult and causes problems in predicting which images and designs will work with a particular browser.
- Unplanned changes to look and feel: Attention must be paid to appearance on each type of device, including paragraph and font size, text alignment, horizontal or long vertical scroll, and broken navigation systems. This requires access to different devices for testing to ensure the content is accessible and readable on all of them.
- Communication strategy: How are the information architecture, message, and language impacted from device to device? What you thought would be impactful and call attention to the user on a desktop site might not work in mobile contexts. For example, that banner that you are counting on to bring in revenue might appear prominently on a desktop but never be seen on certain mobile devices.
The current environment seems to have spawned two trains of thought for developers: either they must accept that there is no way to build an ideal product that takes all current and future devices into account, or aknowledge that it can be done but will be time consuming and very expensive.
What I’ve learned is that there are no guarantees as to what the future will bring, but we can work with what we have today to try and be adaptable to changes that present themselves. Looking at the available options—and based on my own experience—the best solution is the adaptive design approach, as opposed to simple responsive design.
Adaptive Design is the Best Option
Adaptive design moves beyond responsive to focus on the strategy behind the decision, and responsive is actually one of the options we can use to solve a problem. Before anything else, we need to take into consideration the project’s context, experience, and audience. If the conclusion is that different solutions are needed for different devices, adaptive is the larger, all-encompassing design methodology required for such forward-looking projects. Responsive is merely a technique that focuses on how you will implement your website to have breakpoints and reorganize information, including font size and image size, to better display in different screen sizes.
I had an experience at CI&T where we needed to create a website with a lot of specific features, like e-commerce, e-detailing, news, and registration. The result was a site that only worked well on a large screen, not something smaller like a tablet. To satisfy the project requirement of usability on multiple devices, we decided to utilize adaptive design to create three different versions of the site, each one focusing on the most important features for each kind of user.
We had to think about what a user would want to see when they viewed the site on a tablet, what they needed to use it on a smartphone screen, and so on. We made it possible to show bigger images and more content on tablets and we transformed the menu system to an icon which the user could expand and contract to access all items on a smaller smartphone screen. Users didn’t need to have all the features available for smaller screens, so a simplistic responsive approach would not have worked at all in this case. We created specific features and ways to solve problems differently for each kind of device and user.
Conclusion
The advent of so many devices is clearly a big change in the IT industry and this change will only accelerate. People get frustrated if a website doesn’t work well or is not mobile-optimized for their particular device. As the number of devices, operating systems, and browsers grows, development projects will require more and more strategy; the work of people experienced with planning before executing; and IT providers that can deal with unexpected developments and react fast to control ther scope and timeline.
I believe that adaptive design is the key to providing end-to-end solutions that will have a better chance to succeed on not only today’s devices, but with the coming down the pipeline. Planning for the context and not just the resolution will bring to the surface the most important strategies you need to consider, helping you to understand your user and their objectives and interests. Designers and developers working side by side are the key to fast adaptation and creative solutions, reducing delays and preventing issues before they occur.
There’s no mobile crystal ball, so we must keep the users and contexts as our highest priorities and make smart decisions about how to deal with the challenges that are sure to come.
Image of glowing crystal ball courtesy Shutterstock
