Responsive Web Design
What is a Responsive Web Design?
Responsive Web Design (RWD– A philosophy of creating a website that allows all of the content to show correctly regardless of screen size or device. Your website will “respond” to the size of the screen each user has, shrinking and reorganizing on smaller screens, and expanding to fill appropriately on large ones.
RWD enables site designers to create once and publish the same content everywhere, for all devices. It is a website development philosophy of rendering web pages in an efficient, optimized and easy-to-read format across a variety of devices and web browsers on different platforms.
Rather than the traditional approach of designing web pages for viewing on just desktop or laptop PCs, the responsive design utilizes a variety of newer web development features and functionality to deliver an optimal view to users on mobile devices like smartphones and tablets as well as on traditional PCs and other electronic devices.
Because of their smaller display size, mobile devices typically require a modified layout for content to help users navigate through the website more efficiently, and with responsive design. Wweb developers are able to code their web pages with the flexibility to render readable content at a variety of display sizes. This is due largely in part to websites that can continually and fluidly change, based on factors such as the viewport width.
Three Main Components of Responsive Design
Responsive website design consists of the following three main components:
- Flexible layouts– Using a flexible grid to create the website layout that will dynamically resize to any width.
- Media queries– An extension to media types when targeting and including styles. Media queries allow designers to specify different styles for specific browser and device circumstances.
- Flexible media– Makes media (images, video and other formats) scalable, by changing the size of the media as the size of the viewport changes.
Responsive Web Design vs. Traditional Web Design
An example of a non-responsive web design page is one that reads well on desktop browsers but has very small, unreadable text on smartphones, often due to having too many columns or images that are too large to fit within a smartphone’s limited viewport display width.
With responsive design, web developers don’t have to focus on specific display sizes; rather, their responsive web code is designed to adapt to a range of display sizes, presenting different layouts based on the display size and capabilities of the mobile device or PC.
« Back to Glossary Index