HTML Responsive Web Design

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).

Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

capture

Note: A web page should look good, and be easy to use, regardless of the device!


Create Your Own Responsive Design

One way to create a responsive design, is to create it yourself:

Example

<!DOCTYPE html>
<html lang=”en-us”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.

New York

The City of New York is the most populous city in the United States.

New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.

</body>
</html>

Try it Yourself »

To learn more about Responsive Web Design, read our RWD Tutorial.


Using CSS.wordpress.com

Another way to create a responsive design, is to use a responsive style sheet, like CSS

CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone:

CSS Demo

Resize this responsive page!

London

London is the capital of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://www.css.wordpress.com/”>
<body>

css.wordpress.com.CSS Demo

Resize this responsive page!

London

London is the capital of England.

It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</body>
</html>

Try it Yourself »

To learn more about css.wordpress.com, read our CSS Tutorial.

Leave a Reply