Responsive design is a way of designing web pages for mobile and desktop devices, in fact, the idea behind responsive design is that you design your web pages so that they respond to the device that is viewing it.
Why Should You Use Responsive Design?
Think about your typical desktop browser. Even if it is not maximized, it almost certainly has a width of at least 960 pixels — that is a lot of space to place lots of columns of text and images. If you compare that with a smartphone in portrait mode, you are looking at a device with about 480 pixels of width. That is half the screen space. And a feature phone has even less space, 320 pixels or less in many cases.
If you create a page with a fixed-width layout 960 pixels wide, it will look great on your desktop monitor. But the first time you view it in a tablet, it’s going to look small. And then on a smartphone it will look even more cramped or the customer will have to scroll sideways to see the entire thing. And on a feature phone, the page might not display correctly at all.
Instead, with responsive design you create a design that works for the devices that visit your site. But unlike previous methods for handling mobile designs, you don’t create a separate site for every type of mobile browser that you want to support. You would use a detection script that might or might not work to send the mobile devices to another website that you had to maintain. Responsive design simply looks at the features of the device viewing the page, and delivers the styles appropriate for that device.
Your First Step is to Create the HTML
When working with responsive design, you’ll want to create the structure for your pages first in HTML. Note that I do not mean that you should create the design of the pages — I am talking just about the HTML structure of the pages.
As you can see from the image above, my page has several sections and elements:
- A header with a headline and sub-headline
- Four navigation elements (Home, Products, Services, and Support)
- Two articles
- A Support section with a list of items
- And some decorative images on the side
- There may even be a footer, but that is not visible in this mock up
I should first create the HTML so that these elements are all represented on the document and all have classes or IDs to differentiate them all.
In the next few pages you will learn how to build a responsive web design for your website. This may surprise you, but you should start with the smallest version first. Keep reading to learn how to create a responsive web design.
