Home Screen Icons

all — for all the media types below
braille — for braille tactile feedback devices
embossed — for paged braille printers
handheld — for handheld devices like mobile phones
print — for printed material
projection — for projected presentations
screen — for color computer screens
speech — for speech synthesizers
tty — for teletypes, terminals, and other devices with limited display capabilities
tv — for televisions and television like devices

Device Types

Sizes

IOS

76 × 76 (iPad non-retina e.g iPad2)
120 × 120 (iPhone @2x)
152 × 152 (iPad 3+ @2x)

Android

48 × 48 (mdpi - 160dpi)
72 × 72 (hdpi - 240dpi)
96 × 96 (xhdpi - 320dpi)
144 × 144 (xxhdpi - 490dpi)
192 × 192 (xxxhdpi - 640dpi)
512 × 512 (Google Play store)

Both use .pngs

Design Guidelines

IOS

  • The device will automatically round the edges and add a gradient gloss. DO NOT include these in the files
  • Avoid transparency
  • Don't use a drop shadow

 

Android

 

General Design Guidelines

  • Use imagery that users will recognize and communicates what your app does
  • Keep the shapes and style simple
  • Test on a variety of different backgrounds
  • Use high contrast colors- they stand out.
  • Avoid using typography
  • Make sure the artwork can scale - always design in vector
  • Don't use photos

Adding app icons

You can add app icons by adding links in the <head> of your HTML. You will need to add a link for each icon.

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link href="http://www.yoursite.com/apple-touch-icon.png" rel="apple-touch-icon" />

<link href="http://www.yoursite.com/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />

<link href="http://www.yoursite.com/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />

<link href="http://www.yoursite.com/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />

<link href="http://www.yoursite.com/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="http://www.yoursite.com/icon-hires.png" rel="icon" sizes="192x192" />

<link href="http://www.yoursite.com/icon-normal.png" rel="icon" sizes="128x128" />

Home Screen Notification

You can add a home screen notification popup component by adding a bit of javascript

Add to homescreen

>Matteo Spinnelli's "Add to home screen" script is one of the most popular scripts and is easy to use.

<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>

Mobile UX & Forms

Mobile UX

On most mobile devices, we're designing for touch which means:

  • There are no hover effects
  • Buttons and links need to be designed for a finger touch, not a mouse click
  • Gestures are users to interact with content
  • Content needs to be optimized for mobile

Designing for touch

We want to place the most used UI elements (such as navigation) in places where they can easily be assessible

Touch Targets

We also want to make sure that touch targets are large enough for finger taps

44px x 44px

Optimal touch target size is

Touch Targets

We also want to make sure that touch targets have ample white space around them so users don't accidentally touch one target, when they meant to tap another.

Plenty of white space!!!

Content

Some things to think about:

  • Unless it's a game, users who access content are usually distracted and want to access content quickly
  • Content should be to the point
  • Content needs to be optimized for the user experience and for the mobile device
  • Use progressive disclosure whenever possible
  • Try to reduce the number of taps a user needs to take to get to their end goal

 

Detecting Touch

Modernizer

Feature detection library

Built into Foundation

 

jQuery

The jQuery library allows you to detect for specific devices

 

Mobile Detect

Lightweight PHP script that detects mobile and browsers (in general)

 

FORMS

Mobile

Form Design

  • User input can be difficult on some phones due to a touch keyboard or smaller keypad
  • If it's possible, combine user inputs
  • To decrease the margin for error and frustration, you should limit the number of input fields
  • Pull as much stored information as possible to auto fill
  • Space out user inputs enough so users can easily tap to fill
  • Use one column on smaller devices

Form Design

  • Make sure form inputs are 44px tall
  • Utilize the OS functionality whenever possible
  • Labels should be placed on top of the form field on smaller devices
  • Make sure it's clear on what you're asking for and if the field is required

Form Design

Creating a responsive form

  • All forms must be wrapped in a form tag
  • All form element widths should be set at a pecentage
  • All form elements must be wrapped in a label
  • Forms elements can be styled via CSS (except for OS specific elements such as selects)

Let's create a responsive form!

Made with Slides.com