Jan 23, 2019

What Is Responsive Web Design and How Does It Work?

With daily life becoming more fast-paced than ever, it's not surprising that the sales of desktop PCs are slowing while sales of smartphones and tablets are rising. According to a press release from StatCounter, browsing the web from mobile devices now makes up over 50 percent of total Internet traffic. Because people are constantly on the go, consumers often switch from PC to tablet to smartphone throughout the day, and the web-browsing experience should be equally-enjoyable on each device. Learning responsive web design through courses in the Udacity Catalog can help.

What Is Responsive Web Design?

The term "Responsive Web Design" (RWD) was coined by independent Ethan Marcotte. The design concept suggests that websites should be automatically responsive to different devices based on screen size, platform, and orientation. In order to work correctly, RWD needs three key elements: fluid grids, media queries, and flexible images.

Fluid Grids

With RWD, developers use the design language Cascading Style Sheets or CSS to create a percentage-based design rather than a pixel-based design. Page layout is divided into columns, each of which is designed according to proportional heights, widths, and margins. This allows for page element sizing to be relative rather than absolute, meaning that website components flow and adapt no matter what device is being used.

Media Queries

When creating responsive web design, a media query (or breakpoint) is used in HTML/CSS to make designs behave differently on different devices. Media queries check for specific media features like screen size and allow the page to display correctly.

Flexible Images

This design concept allows images and other media to adapt to different devices when loading. This is accomplished in CSS in two ways: by scaling or using overflow. With scaling, the image or media is set at 100 percent, and the web browser expands or shrinks depending on the size of the device. Overflow allows images to be clipped or scrollbars to be added so that content fits into different spaces.

Changes in technology affect the way that people view the Internet. Since the arrival of mobile devices, more and more people are surfing the web on the go. This makes the cutting edge field of responsive web design a popular choice for tech-savvy students. If you're interested in a career in responsive web design or another hi-tech field, consider an alternative to traditional training and education with a Udacity Nanodegree program