Device and browser guidelines

Devices are physical pieces of technology like mobile phones and laptops. Browsers are software applications that allow users to browse the internet.

Applies to:

Apps versus web apps

An app and a web app are often confused or used interchangeably. An app or application is software downloaded to the device that the user can access at any time. A web app is an application that downloads to the browser and can typically only be used if there is an internet connection.

When designing for an app, your designs have to be device or operating system specific. For example, while an app on an iPhone and an Android device may look similar, some of their functionality or interface may be different due to the operating system or screen size.

When designing for a web app, you don’t have any constraints on what type of device functionality you need, but there are other downsides. Unlike an application designed to a specific size, a web app has to scale up or down to any screen size. This means that when creating a web application, you have to design for desktop and mobile at the same time.

Phone apps

A phone application is a piece of software downloaded to a mobile phone.

Designing for iPhones

Apple only releases a new phone or 2 a year. This means that it’s relatively simple to find out the exact specifications for each new device. However, these devices do tend to change sizes between new releases. This means you have to think about how your app will look on the iPhone X (and beyond) as well as the iPhone 4 or 5.

How to in Balsamiq Use the property inspector to change the type of iPhone in your wireframes.

Designing an app for an Android smartphone

There is an endless list of smartphones, and each type varies slightly in its hardware and operating system. But, luckily for designers, they tend to keep similar proportions or screen ratios.

In 2019, 87% of phones used the Android operating system (Statista, 2021). Due to the high adoption of these phones, many developers start designing for Android before moving over to creating an iPhone equivalent.

Tip Choosing the right phone for your wireframe largely depends on who you are designing for. If you’re creating for techies and the upper classes, use the most modern phone template. If you are designing for emerging markets or poorer countries, consider using the oldest phone template.

As a general rule of thumb: if you use the smallest dimensions for your designs, they will likely work on all other devices.

Phone orientation

The majority of phone apps are designed to be vertical-first, if not vertical-only. Vertical-first means that while an app can work both vertically or horizontally on the phone, the intention is that it should be used vertically.

The most common apps that are horizontal-first tend to be entertainment apps, like games.

Tablet apps

According to StatCounter, in 2021, less than 3% of the global population has a tablet, while 42% have PCs and 55% have phones. Due to this, there are fewer apps developed for tablets.

It’s tempting to think that tablets are halfway between a phone and a desktop due to their size. However, designing for them is very different. For example, while most users can simultaneously hold and interact with a phone one-handed, users may need both hands to operate a tablet due to its bigger size. And unlike a desktop, you can’t rely on hover interactions as you can’t hover on a touch screen.

Common tablet app types include eBook readers, social media, casual games, and news apps.

How to in Balsamiq Use the property inspector in Balsamiq to change the orientation of your tablet.

Browser apps

Unlike a device app, a browser app or application is downloaded to the web browser and not the device. Examples of web browsers include Chrome, Firefox, and Microsoft Edge.

This means that users will have to navigate to your site every time they want to do something instead of clicking an icon on their desktop. However, an advantage is that the user never has to go through the trouble of installing an app.

There are a few complications when designing for browser apps, mostly around supporting all devices and internet speeds. In addition, when designing a browser app, you have to think about how it resizes up and down constantly. This means that the same design has to work on a large desktop and a tiny phone.

You also have to consider how the device’s interactions differ from each other. For example, a hover interaction on a desktop won’t work on a phone. Another example is a pinch interaction, as it will work on a touch screen but not on a PC with a mouse.

Unlike device apps, browser apps may need to download all the information every time the user logs on unless they are able to save data to the device. This means that another factor one has to consider when designing for the web is the download speed.

Variations

Controls included in Balsamiq

Balsamiq offers a range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

iPhone: The iPhone template allows you to design for the recent iPhone sizes. You can choose which type from the property inspector.

Smartphone: The smartphone template is used when designing Android apps.

iPad: The iPad is used for designing iPad or other tablet apps.

Browser: The browser template is used for designing websites or browser apps.

By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.