Responsive Design
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
iOS PPIs:
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.
}