Copyright

Responsive Web Design: Examples & Explanation

Instructor: Lucinda Stanley

Lucinda has taught business and information technology and has a PhD in Education.

In this lesson, you will learn about responsive web design--what it is, where it came from, and how it's used to help web designers create pages for multiple Internet-capable devices. At the end of the lesson, test your knowledge with a short quiz.

Advancements in Technology: A Dilemma for Web Designers

Which of the devices in the image below do you use?

From left to right: laptop, tablet, smartphone
Laptop, tablet, smartphone

Chances are you use all of them! Gone are the days when static web page design was the norm--when there were no images, a web page was just text, and everyone viewed web pages on a standard 15-inch black-and-white monitor. A single user can switch from smartphone to tablet to laptop, and many people want to be able to view the same site on every one their devices. Today, web designers have to consider that users are viewing their web pages from multiple devices with a variety of screen sizes, resolutions, and capabilities.

Responsive Web Design: A Solution

Monitor
Monitor

Can you imagine viewing a web page designed for a square monitor (above) on a smartphone's rectangular screen (below)?

Smartphone
Smart Phone

How can a web designer maintain consistency across various devices and platforms? One answer would be to design a web page for each device, but that would be a lot of work. A more efficient solution is responsive web design (RWD), which responds to how the user is viewing and using the page. The pages automatically adjust, taking into account screen size, platform, and orientation. Designers who use RWD eliminate the need for multiple web designs for multiple devices.

This method of web design was created by Ethan Marcotte, who based the RWD concept on responsive architecture. Responsive architectural features in buildings or rooms adjust to how the room is being used. An example would be a room that uses motion sensors to change the room's temperature as more people enter the room.

Similarly, RWD adjusts a web page based on the capabilities of the device on which the web page is being viewed.

Elements of RWD

Cascading Style Sheets

So, what exactly does a web page with RWD do differently? Web designers using RWD utilize Cascading Style Sheets (CSS), a style sheet language with flexible capabilities. CSS provides the instructions for controlling how a page is laid out, how images and text are displayed, and other foundational elements of the web page.

Here's how it works: The designer creates a base CSS that has all of the foundational design elements and then creates a style sheet defining the layout and structure of the page for each type of device that could be used (desktop, laptop, tablet, smartphone). Built into the CSS main page is a media query, which quickly searches to determine the type of device being used to open the page, its capabilities, and its orientation, and then the media query loads the CSS that best fits the device.

Relative Units

RWD designers do another major thing differently during web design: They use relative units rather than an absolute number of pixels. Pixels are picture elements used to define the maximum number of dots on the screen that the element can occupy, either vertically or horizontally. For example a picture with an absolute pixel of 200 x 149 would look like this:

Image: 200 x 149 pixels
Image: 200 x 149 pixels

Instead of defining a set number of pixels, RWD uses percentages. Designers write the instruction to say the element will be 20% x 30%, meaning the element will be 20% of the width and 30% of the height of any screen it is being viewed on. A larger screen will mean a larger picture.

Designers also use this process to create flexible images. Flexible images can be resized proportionately where the maximum width is determined by the width of the screen. The height is determined by keeping the proportions of the width and height equal. This is called maintaining the aspect ratio. Let's apply this to the 200 x 149 picture we saw earlier--if the maximum width is 150 pixels, the vertical aspect would be 112.

Image: 150 x 112 pixels
Image: 150 x 112 pixels

Custom Layout Structures

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support