Responsive Web Page Design

What is Responsive Web Design?

With the multitude of devices capable of accessing the internet today, having a site which properly displays on various screen sizes is extremely important. The amount of users browsing the internet on mobile devices, such as tablets and smartphones, is growing at an extremely rapid rate and has already tied (and sometimes surpassed) the amount of "old fashioned" desktop/laptop users.

This means that your content must display well on smaller screens. If not, you risk your viewers having a poor user experience. This webpage has been specifically designed to fit any screen size from the smallest cell phone browser to the highest definition smart TV browser, and everything in between.

You can change the size of your browser and see for yourself. Go ahead, give it a try.

Content Section - DIV Tag

This is a SECTION (using a DIV tag). Sections take up the full available width and no items can appear to the left or right of them with the exception of background colors or images. Essentially, they take up their own "line"

The BORDERS are in place for visual aid allowing you to see the layout of the containers. If this layout were being appllied to your webpage, the borders would/could be removed so the page is more subtle and not as loud or distracting to your viewers.

You can have as many sections on a page as you choose. Each section would appear beneath the section before it, and would also take up the full available width. Viewers would have to scroll down the screen to see the entire page.

For this example, we have a section for the header (logo and menu options) at the top, the content (page info, images and links), and the footer (copyright info, sitemap, etc) at the bottom. Within each section, as you will see below, are content blocks. These can have their width set based on the screen size. Blocks will align side by side to fill up the screen, but will "wrap" down to the next line if there is no more space.

Content Block - SPAN Tag

This is a content block. Images and/or text can be placed here. This text will wrap based on the block width and the size of the screen it is being viewed on. Text that must remain on the same line can be tagged "nowrap" so they are never on different lines. Also, the width of this content block can be set and changed for various screen sizes. Three ways to do this include setting the exact width, setting a maximum width, or setting a minimum width.

This is a paragraph in between two (2) content blocks. The one before it has a "sample image" and the one below has three (3) additional content blocks within it.

CONTENT BLOCK SPAN TAG

This block has three (3) columns within it.

Desk Top / Laptop

I like to assume viewers on a computer will have a screen width of 900 pixels or more.

iPad or Tablet

Formatting for screens between 600 pixels and 900 pixels wide.

Mobile Device / Cell Phone

Screen size less than 600 pixels wide.