What comes to your mind when you think about responsive design? Is it mobile devices versus desktop devices? Does it work across all screen sizes? Think about mobile touch as an alternative to using a mouse. Does it change the shape of components based on their placement on the page? This is how we used to think of the responsive design. But it’s not the only way. The way we should and can think about responsive design is how it affects the context of the user and how we can best respond to their needs.
The screen size is only a part of the context. However, these elements are essential when the user accesses your application.
The location of the user
The noise and light levels
The current time, including the timezone.
How they hold and access the device (personal settings).
Future responsive design will be about the user’s space and time context, device context, and preferences for said devices. All of these are important. These inputs can be leveraged by the web browsers that we use and develop today. You can now see any device’s battery level, location, light preference, orientation, and status and make design decisions around these parameters.
Location detection
One of the most popular browser-based detection mechanisms today is location detection (geolocation). The West Elm website can help you find the closest West Elm shop if you are in dire need of furniture shopping.
This is the default behavior to ensure the best possible user experience. West Elm aims to make finding the closest store as easy for you as possible. In this instance, effort means entering data into a field and searching on a map. Instead, West Elm wants your browser to do the work by sending your location information to a server to determine the result.
Beyond the store locator
This is the most popular use case. However, there are many other reasons location detection could impact user experience and the UI design of a product. Location is the proximity to any object. It’s the distance to the store in the store locator. However, it could also be used for determining the proximity to an event.
You can show the user how far they are from their destination if you build a scheduling app with locations. If they’re heading to a party, you could modify the UI to remind them they are close. The app can notify users if they are constantly moving toward a specific location but turning incorrectly. Facebook uses location data to inform people who are near a trauma event so they can mark themselves “safe.” Media companies could also use location to share information about the happenings in their area. You can think of other ways to use location information in mobile apps.
Native Java and Swift provide interfaces to detect location when developing mobile apps. This is used in many different apps, including fitness apps that track distance and time to calculate pace (like MapMyFitness), social sharing apps that use location-based filters (like Snapchat), and maps that allow you to navigate to specific locations (like Google Maps).
Location detection can create a better user experience for many different products. Let’s look at how it works with an example from the web.
Use the HTML5 Geolocation Application
We can use ipinfo.io to look up IP if we only need the user’s country. We can access the IP address to determine the user’s country, city, region, and zip code.
Time
You can also think of time as a “pillar for proximity.” Time is essential for users and their experience using your application. When is the event due? Until a discount sale ends? Or a new product launch? It is a crucial component of many of our decisions. We should integrate it to meet our users’ needs.
This watch by Glevkuzenstov is my favorite. It shows the time and gives users a detailed view of their day. The interface changes according to the time of day and meets in an X-minute ticker.
Using locale string
Packages such as Moment.js allow you to extract time from a timezone and then relate it to the user’s needs and timezone. Natively, web browsers offer many options for parsing date strings. One of these is toLocaleString.
The toLocaleString() method returns an object string related to the user’s locale-specific needs. The LocaleString allows a date or number stamp to be parsed using the user’s plan to represent time or numbers.
Light levels
Some applications, such as Flux, use time-based dimensions to affect the UI. Flux, for instance, removes the blue light from your screen at night and helps you fall asleep.
Apple released iOS 11 with Night Mode. This feature did the same: it removed blue light from iOS 11 to prevent users from falling asleep if they use their device at night.
Different lighting conditions can indeed affect readability. We can modify the UI of an app or website to adapt it to the environment or user preferences.
This is where it comes in handy. It’s mainly in legibility.
This is where matching the light to the environment is essential. Screens that are too bright or vibrant to be read in high-light situations can make them difficult. Low-light conditions will make it more difficult to see a view that is too bright or too contrasted due to how bright the glare is compared to the surrounding environment. In this instance, a darker UI will be easier to read. However, we prefer UIs with more excellent contrast and more text for high-light situations. This is how it could look:
This is done automatically by mobile devices. A phone will adjust the brightness to make the screen brighter when it detects high-light conditions. It will also change the brightness for low-light situations. This setting is the default on most mobile phones. This is not possible on the web. However, it does require some additional work.
Ambient light queries
JavaScript was the only way developers could detect light in the past. This was done by using ambient light queries. While this was possible on some browsers, security concerns meant this capability was no longer available in Firefox.
caniuse.com allows you to check the capabilities of different browsers. For example, this browser fits if it supports an ambient light sensor.