Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience — 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). RWD provides optimal viewing experience across a wide range of devices making the user's experience the best it can be ensuring that they will tell their friends and family, thereby, driving more traffic to your web site.
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, and an extension of the @media rule.
Technically speaking, a responsive web design employs the following:
- A fluid grid concept that calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points;
- Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element;
- Media queries allow the page to use different CSS style rules based on the characteristics of the device the site is being displayed on; and,
- Server-Side Components (RESS) in conjunction with client side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/useability.
In the coming months, I will write about what web developers and customers should consider when determining if a Responsive Web Design is right for them. I will discuss such aspects as:
- Challenges, and other approaches;
- Adaptive (Multiple Fixed Width Layouts or Responsive Multiple Fluid Grid Layouts;
- Mixed Approach for large and medium - fluid width for small;
- Who Is Doing It?
- Corporate Websites versus Medium to Smaller Websites;
- When To Use It?;
- Things to Consider
- Frameworks (save time) or Roll Your Own (more control);
- Best Practices; and,
- Where Can We Learn More?