Now that you know why a website should be mobile friendly and how responsive design works, we can start to examine how to lay out elements in a way that works for mobile devices. Before we can get to the meat of UI layout and design, let’s introduce some concepts and define our terms.

User Interface (UI)

First, let’s talk about what a UI, or user interface, is exactly. UI is the collective name for all the different elements a visitor uses to navigate and view your site. The menu, footers, links, icons, scroll bars, and content areas are all examples of UI elements. A responsive website has a user interface design that is just as easy to use on a desktop as it is on mobile devices. It’s also important that the UI looks similar across devices so that when the same user views your site on a different device, they are familiar with the layout. How these elements work together allowing users to easily browse your site and get to the information they want is called the “UI design.” A good user interface can keep users engaged and result in more page views and longer user sessions, while a bad UI can cause users to abandon your site prematurely.

Internet Traffic by Device

Density-Independent Pixels (dp)

All screen sizes are measured by pixels. For example an “HD” screen is 1920 by 1080 pixels. The problem with this is that not all pixels are the same size. A 1920x1080 TV that’s 64 inches has much larger pixels than a 1920x1080 TV that’s 32 inches. Twice as large, in fact. This ratio between resolution and screen size is called pixel density. The same thing happens with phones and other mobile devices. What all this basically means is that an element with a fixed pixel size (say 48px) is going to be much smaller on a higher pixel density screen than it will be on a screen with lower pixel density. This is why we use dp (density-independent pixels). DPs are an arbitrary unit of measurement that are the same size no matter what the pixel density of the screen is, so if an element has a size of 48dp, it will be the same size on every screen.

Hamburger and Hotdog Icons

Hotdog and Hamburger Icons

Yep, as crazy as it sounds, these are the actual names for two different types of mobile menus– or at least what they are popularly called. What I’m referring to is the three stacked lines or dots commonly used as icons for mobile menus. Look in the top right of my site for an example of a “hamburger” menu. If you are using Chrome browser, your settings are accessed by clicking the “hotdog” menu in the top right represented by three vertical dots.

Z-Index

Z-index

Responsive web pages may look flat, but are actually designed in 3D space. Typically important elements are positioned in front, while backgrounds and less important elements are pushed to the back. Shadows, size, and position are used to show an element’s location in 3D space, but your browser needs a way to interpret this position so that elements can be displayed correctly. We do this using a z-index. An element’s z-index simply represents its position on the Z axis. Higher z-index values are interpreted as being “in front” of lower z-index values. For example our slide-in-menu, accessed by clicking the “hamburger”, has a higher z-index value than the rest of the page. This tells the browser to display it in front of the other elements on the page, while movement and shadows let you see that it is above the rest of the page.

Margins and Padding

Margins and Padding

This is how you affect an element’s position on the page in relation to other elements. The margin sets the amount of empty space between elements. For example, the space between the end of this article and the comment box is set by margins. On the other hand, space inside of elements is set with padding. For example, padding is used to put space between the paragraph and the edges of the white card it’s on.

Stay Tuned for More

Make sure to check back next week. We will be taking these principles and applying them to mobile UI design. We’ll cover how to design for small screens and touch enabled devices. Also, we’ll show some common pitfalls in user interface design and how best to avoid them. If you’d rather leave the UI design to us, you can contact us or schedule an in person meeting.

Sources:
https://material.io/guidelines/
https://commons.wikimedia.org/wiki/File:Coord_planes_color.svg

Share This