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 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.