Intro

Mobile and tablet devices are rapidly replacing desktop computers to complete many of our simple tasks. From browsing the web, communicating with friends to banking, people are spending more time on their phones and tablets rather than in front of a desktop. Whether you’re a beginner or an experienced designer for UI (User Interface), here is a checklist that will help  you get started.

Getting started

Standard Screen Size

To keep website bounce rates lower, knowing what your target audience use to browse your website is important.  Google index looks at how mobile-friendly websites are to determine their search ranking. You can always test it out here (https://www.google.com/webmasters/tools/mobile-friendly/). Alternatively if you are designing for an app, starting your design files in the correct size is key. Here (http://www.mydevice.io/devices/) is a great resource for finding out your specific device screen size.

Pixel Ratio / Resolution

If you ever see a blurry image on your phone, but on the desktop version it’s crisp then this might be a pixel ratio problem. Many newer devices have a pixel ratio of 1.5 or 2. This means when designing for a device with screen resolution of 720px X 1280px, our actual image size will have to be 1440px X 2560px to accommodate the higher pixel ratio.

Font

Using screen friendly font faces

While newer devices come with high definition or retina screens, many are still using lower quality screens. For example older generations of apple iPads have clear pixels that you can see on their screens. Using fonts like Verdana, Open Sans, Proxima nova, Lato and Ubuntu will increase the readability especially in smaller fonts and in paragraphs. Tip: When in doubt, always choose sans-serif over serif fonts because the thicker strokes make the characters more legible

Minimum font size

For devices, a minimum font size of 14pt is ideal for paragraphs, 18pt for headings and the title is up to you. Most HD screens can display smaller fonts and are still very readable, so this is dependent on your audience.

Paragraphs, when to break them into columns

Similar to print design, breaking wide paragraphs into 2 or 3 columns makes the whole section easier on the eye. This is important as most devices have portrait and landscape mode, your users can be reading on either. A paragraph can look good on portrait mode but when rotated, it might be better to split into columns because of the width of each line. A good laid out paragraph will have at most 15 words on the same line.

Buttons

Minimum width & height

The minimum size for any buttons, links or clicking objects is at 40px x 40px. This is the average size of our finger tips, not including the thumb. If you are designing buttons for the bottom of the screen, which means people will most likely press them with their thumbs then increase the minimum size to 70px x 70px.  Larger isn’t  better. If your button is as big as a whole section on your wireframe, then people might actually miss it and think that it’s just a banner or header.

Hover effects

Unlike a cursor on computer screens, devices often rely on touch. Therefore applying a ‘hover’ effect doesn’t really do much. Instead, design for a “mouse-down” effect which happens when your finger is pressed down, but hasn’t lifted up yet. This  effect adds a clear display of interaction for the user. See example below:

Navigation

Place interactive elements where the fingers can reach

Think about the usual finger position when  you  hold a 5” x 7” tablet in a landscape position. Now picture holding a smart phone with one hand. What’s interesting here is that in both cases the user is able to navigate the UI with their thumbs. Because of this, it’s recommended to place most used links at the bottom left or right corners.   Examples are Link to home, Menu bar, back and forward arrows on a gallery and site-wide call to actions.

Conclusion

With mobile design, we cannot bet on a single design that will accommodate all devices. Although these are basic guidelines that works for most devices, there will be new gadgets coming out sooner or later such as smart watches, screens with edges and even curved monitors! Our job as UI designers not only stays at optimizing for different devices, but to be creative with how users can comfortably interact with our UI on any screen types.