Blog

Resolution Independent Mobile UI

August 23, 2010 | David Kaneda

A Brief Introduction

• If you design a button for a 132ppi (like the iPad), it will come out much smaller for higher ppis, which could result in it becoming harder to tap and possibly render it unusable.
• Images and UI elements must be scaled intelligently, to avoid pixellation and blurriness.

The General Concept

This unit defines the proportion of the letter width and height with respect to the point size of the current font… This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

Starting Simple: A Button

.button {
    display: inline-block;
    color: #fff;

    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C1FA3B), color-stop(0.02, #8FCA05), to(#5A7F03));
    -webkit-border-radius: .2em;
    -webkit-box-shadow: #7EB105 0 0 .03em 0.03em inset, rgba(0, 0, 0, 0.4) 0px 0.1em .2em;
    text-shadow: rgba(0,0,0,.2) 0 .05em .02em;
    border: .08em solid #374D02;
    padding: .2em .6em;
}

.size_2x {
    font-size: 200%;
}
.size_8x {
    font-size: 800%;
}

<a href="#" class="button">1×</a>

<div class="size_2x">
    <a href="#" class="button">2×</a>
</div>
<div class="size_8x">
    <a href="#" class="button">8×</a>
</div>

Caveat: Changing only the text size

<a href="#" class="button"><span class="textsize_2x">2× text</span></a>

Images and Masks

.imgbase {
    width: 4em;
}

<img class="imgbase" src="duck.jpg" />

<div class="size_2x">
    <img class="imgbase" src="duck.jpg" />
</div>
<div class="size_8x">
    <img class="imgbase" src="duck.jpg" />
</div>

li {
    background: url(resources/duckbullet.png) 0 .3em no-repeat;
    background-size: 1em auto; // sets width to 1em, then height automatically
}

SVG to the Rescue

.logo {
    width: 2em;
    margin-bottom: 20px;
}
.size_2x {
    font-size: 200%;
}
.size_8x {
    font-size: 800%;
}

<img class="logo" src="sencha.svg" />
<div class="size_2x">
    <img class="logo" src="sencha.svg" />
</div>
<div class="size_8x">
    <img class="logo" src="sencha.svg" />
</div>

Community Sample: Loading Indicator

Changing Size Per Devices

body {
  font-size: 100%; // This accommodates the lowest density, the iPad, at 132ppi.
}
body.x-iphone-os.x-phone {
  font-size: 114%; // This accommodates the iPhone, at 163ppi
}
body.x-android-os.x-phone {
  font-size: 120%; // This accommodates most Android phones, at 180ppi.
}

The future: @media queries

@media screen and (min-resolution: 132dpi) {
    body {
      font-size: 100%; // This accommodates the lowest density, the iPad, at 132ppi.
    }
}
@media screen and (min-resolution: 160dpi) {
    body {
      font-size: 114%;
    }
}
@media screen and (min-resolution: 180dpi) {
    body {
        font-size: 120%;
    }
}
// Not possible yet :(

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS specific to Retina Displays
}

Conclusion