How can we make sure that user experiences is consistent across different devices? What are the most important things?
If we look at the web, we design experience and services first of all for desktop. What happens then when we are on the go? It needs to be the same look and feel on a smaller device as on a desktop. Is it as simple as that to make it work? Well, there are a couple of important things that needs to be well thought through before you start. What is the main goal of the site? What do we want the users to feel? Can we get the message across with as few words as possible? People tend not to read long texts. Can we use as little design as possible to create the actual feeling we want to communicate? There are many questions we want to ask ourselves to get the best experience. In some cases, it’s better to use fewer words and big imagery. Use of white space can be a good way to make the message stand out.
Usually we design the desktop version of the site first and then we continue to look into other screen sizes. But it's important to think on the different screen sizes already in the beginning, then it will be easier in the design process. I usually break it up in 3 layers when starting on the next screen. Usually its smaller than desktop.
First layer
The grid system should be responsive. By that I mean the grid should be fluid. Images, text lengths and other elements should resize in height and width. And sometimes hidden to fit in to the new size of screen. In some cases, we need to hide and group navigation elements in to smarter objects. A quite common way of doing this is hiding the navigation into one icon. This way we free up space for other important information. This is also a good way of creating a more native UX for the actual device. Since we have less screen space for portable devices, we need to think about the information that we show. Don't clutter the page with information. It’s better to show less then too much. People tend to not read text, so be short and descriptive. Highlight the important things.
Second layer
The second thing we need to look at is all the design elements that we use on the site. Call to actions (Buttons), use the same sizes as the native systems that the actual device is using. Images need to be resized to be the best version for that screen, sometimes they need to be cropped. Other elements such as drop-downs can be used like the native design pattern. Typefaces need to be looked in to, a clear hierarchy is powerful and effective. For a good readability the text needs to be no smaller than the smallest native system label. Also, a high contrast is important for use outside in daylight. Also, don't be afraid to make the information scrollable. People are used to scrolling in apps. Better to scroll than to cram too many elements in one place. Side swipe is also an effective way of showing information in the same hierarchy.