Responsive design

Along with the proliferation of mobile devices is an increasing variety of screen sizes. Mobile phone screen size can be larger than a small tablet, and computer monitors rival the size of TVs. The device itself is no longer a clear indication of the size of the display, which is why device size can’t be the sole criteria used when designing interfaces.

Don’t build your designs for specific screen sizes, devices, or resolutions; instead, build for responsive, fluid content in a browser.

Responsive assessment

When you test your content by resizing the browser window, consider the following:

• Does the content look good on all sizes?

• Are there some sizes where the content wraps in an unexpected way? If so, consider adjusting your content to the breakpoint.

• Are lines longer than the maximum readable length (70-80 characters per line)? If so, consider changing the layout.

• Is there too much white space between elements? If so, consider adding a maximum width.

• Dive deep into the use cases and concept of your interface before you build wireframes.

• Consider the user context or scenario for using your service (for example: in a hurry, small browser windows to large displays) and prioritize your design decisions accordingly (for example: mobile first).

• Don't reduce functionality or remove content for smaller viewports. Users should be able to access the same content regardless of the browser window they are using.

• Incorporate responsive design early in your design process. Design a uniform and seamless user experience across breakpoints, and don't design for specific devices or screen sizes.

• Don't rely on a fixed position of elements in your layouts. The more fluid your design is, the better the responsiveness of your interface.