A white Iphone with a black screen with a abstract blue splash behind it.

Is the website prepared for new devices?


The mobile industry is constantly changing and evolving. New models are brought to market rapidly. Screens are getting better with higher resolution and richer colours. New devices are invented and new patterns of usage.

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.

Third layer

It's important that the look and feel is the same as the original design. Colours, typefaces and images are the same. Also, if the code can sense what sort of device the visitor is using, we can give them the best experience. Most common is iOS and Android for phones. You will get the pattern for that specific system your using. We work with different devices every day and for us its natural to think and work like this. Since technology is pushing the limit, we need to constantly educate ourselves. We need to be prepared for tomorrows challenges. We see a trend of Automatic driven cars with big displays. Smarter IOT services in your home. Devices that is voice driven is also getting more popular. We don't know the future, but we can do our best to be prepared. How would your website look like on a display in an automated driving car?

Better to scroll than to cram too many elements in one place.
- Christofer Grifó, Art Director

Profile picture of Torbjörn Buhré, employee at Petra Digital Agency
For more about this, contact

Torbjörn Buhré

Creative Director