Responsive Design

Updated at 2013-12-07 12:38

With responsive design, you have one uniform implementation between all devices and screen sizes. This helps you to create interface that transforms according to the device and screen of the user. In mainly focus on responsive websites but the most tips work on normal applications too.

Why to use responsive design?

  • Amount of different screen sizes is growing, some people use their full hd television to browse, few out there use their 1024x768 monitor.
  • Amount of mobile phone users is growing.
  • Amount of tablet users is growing.
  • Amount of different displays is growing e.g. pixel density.
  • Amount of different mechanisms has grown e.g. click, touch, air gestures.

You should optimize design based on your content. Do not optimize for different devices or different resolutions. The point of responsive design is that your content responds to all the possible contexts.

Responsive Components > Responsive Layouts

Avoid absolute sizing of the content. Use fluid layouts. Fluid layouts fill the containers using percentages. You can use browser window width and height to change content style though. Use percentages over pixels.

# bad
div.article-container       # => 800px
    div.article             # => 560px
    div.related-articles    # => 240px

# good
div.article-container       # => 100%
    div.article             # => 70%, but 100% when small resolutions
    div.related-articles    # => 29%, but 100% when small resolutions

Consider what the context the website is used in is. If the website might be viewed on a smart TV integrated browser, face of the user is not 12 inches away from the screen but 10 feet away.

Create break points based on the content. A break point is a specific browser height or width that causes your content to change layout. Many frameworks provide break points by devices, avoid using those.

# bad
Heading changes to smaller font when browser width is less than 800px,
where 800px is a width you have defined to be "tablet" screen width.

# good
Heading changes to smaller font when it does not fit on the screen and you
tested that the heading does not fit on the screen at 727px.

Support Internet Explorer 8. Worldwide IE8 usage is still at around 8% so you should support it as of 2013. Because IE8 does not support media queries, you should optimize for smallest desktop size (1024x768) and move your way up and down.

# good starting point
Create a photoshop document 1500px wide.
Create 12 columns, 60px wide each.
Separate neighbouring columns by 20px.
        Webpage content is 940px wide. (12*60 + 11*20)

Check your design on popular resolutions. Here is a suggestion for resolutions to check your design in:

## 2013 ##
# Each resolution has a name.
# Names starting with an underscore (_) can rotate to landscape and portrait.
# Names are in alphabetical order by size if _ is ranked before letters.
# Names ending with a plus (+) are popular.
480x320     _Ancient+     iPhone 2G/3GS/4 and first Androids.
568x320     _Expensive+   iPhone 5.
800x480     _Regular+     Nokia Lumia 520-900 and HTC Desire S/Z/HD.
960x540     _Super        HTC Sensation and Motorola Droid RAZR.
1024x768    _Target+      small tablets, tiny desktops, optimize around this.
1280x720    _Wide+        large tablets, small desktops.
1366x768    Alpha+        medium desktops.
1440x900    Bravo         rare medium desktops.
1600x900    Charlie+      large desktops.
1680x1050   Delta         rare large desktops.
1920x1080   Echo+         huge desktops.

Reduce image sizes on the web. Make your images really big with low quality and show them smaller sizes. Start by doubling the size. Usually reduce image size on JPGs.

Solid color 1x1 px image.
Horizontal gradient 1xY px image.
Vertical gradient Yx1 px image.

Screen Pixel Density

Most of the time, responsive design should go for an extra mile to also optimize for the screen pixel density in addition to the screen resolution.

Understand dots-per-inch (dpi). Dots-per-inch is a measure of how many colored dots fit on a one inch line (2.54cm). It measures screen density. Dots-per-inch is the same measure as pixels-per-inch (ppi), but dpi can also refer to the resolution of printed images.

# Area of 1 inch on 160 dpi screen contains 25 600 pixels.

# Note that these values are rough estimates, not exact values.

PPI             Images        Name / Device

PPI Names:
120 PPI         0.75x         LDPI        <- optimize on desktop
160 PPI         1x            MDPI        <- optimize on mobile
240 PPI         1.5x          HDPI
320 PPI         2x            XHDPI
480 PPI         3x            XXHDPI
640 PPI         4x            XXXHDPI

160 PPI         1x           iPhone 3GS, iPad 1/2 and iPad Mini 1
320 PPI         2x           iPhone 4/4S/5/5C/5S and iPad Mini 2

Nokia PPIs:
240 PPI         1.5x         Lumia 710/800/820/900
320 PPI         2x           Lumia 920/1020

Microsoft Device PPIs:
148 PPI         1x           Surface 1
208 PPI         1.5x         Surface 2
208 PPI         1.5x         Surface Pro 1
208 PPI         1.5x         Surface Pro 2

Understand density-independent pixel (dp). Density-independent pixel is an unit of one pixel in 160 dpi screen. Also called device independent pixel (dip).

Know about scale-independent pixel (sp). One scale-independent pixel is density-independent pixel, but also scaled by user's font size. Term used with Android devices. You should use sp with when styling fonts, dp for everything else.

On websites and web apps, you can use media queries to detect high dpi devices.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 13/10),
        only screen and (min-resolution: 120dpi)
    // Use @2x resolution images.