The Internet isn’t just on computer screens anymore. It’s also on phones, tablets and laptops. So Web page design should take the multi-platform world into account and morph to ideally match the size and shape of the screen it’s viewed on. This is called “responsive design,” and it’s becoming more and more common.

Responsive design

Responsive design utilizes simple but elegant animation to respond to users’ behavior and environment based on screen size, platform and orientation: the desktop screen morphs into a laptop screen, then a tablet and finally a smartphone as the browser window gets smaller. If you make it taller than it is wide, the tablet or smartphone graphic rotates from landscape to portrait view.

CSS and Media Queries

Media Queries is a tool that enables responsive design by allowing you to provide targeted Cascading Style Sheets (CSS) that are triggered when a device’s capabilities match specific criteria. For example, you could use a media query to specify that a couple of lines of CSS be applied exclusively to devices with a display width of up to 480 pixels, in order to make your website or email easier to read on these screens.

These examples from Lyris customer, JOY the Store, show how responsive design allows one image and message to morph to any platform shape or size.

Responsive design means the website responds to you, rather than making you deal with it by scrolling or magnifying in order to view it comfortably.

About the Author:

Deb Papp

Deb Papp is Marketing Communications Manager at Lyris. She develops content for lead generation programs and resources, company messaging, event and promotional collateral, and the Lyris website.