responsive website design - RWD
A responsive website is one that has been designed to respond, or adapt, based on the technology and type of computing device used by the visitor to display the site. It is basically one website design that will looks good at any size — from a large desktop LCD monitor to the smaller screens we use on smartphones and tablets. Responsive design ensures visitors to the site have a similar experience that is independent of the of the size of the device device used to view the site.
Responsive Website Design
Responsive website design (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, 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, web 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.
In contrast, 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.
Image source: Mashable.com
How to Incorporate Responsive Design into Web Development
A variety of responsive design techniques can be utilized to create responsive websites, but most frequently web developers will set major and minor width breakpoints based on viewport tag and CSS media queries, and then code to present optimized content layout and text based on the display size ranges between these breakpoints.
Another key to responsive web design is using relative values as much as possible as opposed to fixed attributes like width. This enables content to scale in size based on the device and platform the reader of the web page is using at the time.
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...
Stay up to date on the latest developments in Internet terminology with a free weekly newsletter from Webopedia. Join to subscribe now.
The following facts and statistics capture the changing landscape of cloud computing and how service providers and customers are keeping up with... Read More »Facts about Computer Science: Education and Jobs
The following computer science facts and statistics provide a quick introduction to the changing trends in education and related careers. Read More »Texting & Chat Abbreviations
From A3 to ZZZ this guide lists 1,500 text message and online chat abbreviations to help you translate and understand today's texting lingo. Read More »
Learn about each of the five generations of computers and major technology developments that have led to the computing devices that we use... Read More »Computer Architecture Study Guide
Computer architecture provides an introduction to system design basics for most computer science students. Read More »Network Fundamentals Study Guide
Networking fundamentals teaches the building blocks of modern network design. Learn different types of networks, concepts, architecture and... Read More »