The Colors of Christmas

Mobile and Responsive Design

Responsive web design, is an approach to web design in which a site is crafted to provide an optimal viewing experience. Such as easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices from desktop computer monitors to mobile phones.

Elements of responsive web design

A site designed with RWD uses CSS3 media queries, an extension of the @media rule,to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images:

  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
  • The fluid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

What Is Mobile Responsive Design?

When a website is responsive, the layout and/or content responds or adapts based on the size of screen they are presented on. A responsive website automatically changes to fit the device you're reading it on. Typically there have been four general screen sizes that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet and the mobile phone. As you can see in the examples below, as the screen gets smaller, the content shifts and changes to the best display for each screen.

First

If a user is browsing from a mobile phone, they generally don't have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen onscreen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger and not have as many columns you'll give your mobile reader a much better experience.