UMSL logo

Computer Education & Training Center

Responsive Design

What is Responsive Design?

Mobile Devices at West County Computer Lab

Responsive Web Design (RWD) is a strategy for creating Web sites for a wide range of device types and sizes. What you see will depend on the screen size of the viewing device. A responsive design web page will automatically re-arrange content depending on whether you are viewing the page on a desktop computer, tablet, or a smartphone.

RWD uses media queries to detect the screen size of the viewing device (desktop, laptop, tablet, phone) and then adjusts the layout of the Web page accordingly. Layout is based upon proportions instead of absolute sizes, making both images and text fluid and more easily adaptable.

When you create your responsive Web site, you will need to consider a large number of options. HTML and CSS provide the tools you need to make it look substantially the same in every format, completely different, or anything in between. The more you understand about your options, the better your choices will fit your needs.

For example, you might have a statement such as the following:

@media screen and (max-width:320px) {
.sidemenubar { display: none }
}

This would check the screen size and it would not display the item, sidemenubar, on those devices with a width of 320 pixels or fewer (usually phones). Other page items could be re-sized to fill the space.

Or you may want to display three columns when the page is viewed on a desktop and only one column when the page is viewed on a phone. Factors you need to consider in responsive design include:

Responsive Web Design Using HTML and CSS

Is your Web site mobile-ready? From fluid grids to flexible images to media queries, our Responsive Web Design Using HTML and CSS class will help you understand the new way of crafting Web pages to respond to user's needs.

[Responsive Web Design Class Schedule]