Creating Responsive Sites

Before we dive into code, it's important to understand what responsiveness is and why it's important. HTML is responsive by default. Web page content will automatically fill and scale based on the rules built into the browser viewing the content. This default responsiveness is lost when we use CSS to move content around the screen and change its size.

Opening Today's Files

We will be using several files today, but to get started, we'll open our home page, the style sheet, and the swipe file in the following applications:

NOTE: The file swipe.txt contains all the code that we will type today. You can either type the code, copy & paste from this PDF, or copy & paste from swipe.txt.

Step1. Launch a code editor.

Step2. To open a file, press:

Control key + O

NOTE for MacOS Users: These materials were written with a Windows PC in mind. If you are using a Mac, you can substitute the Command key for the Control key and Return key for Enter key.

You see the Open dialog box.

We need to specify the name and location of the file to open.

Setting the Location for Opening Your File

When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.

We will start at the desktop, since our exercise file folder, epclass, is located there.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click

The epclass folder contents are now visible.

Note for Macintosh Users - On a Macintosh, the "From:" field is above the list of visible folders and files. To move to the desktop, press the key combination Command key + D. From there, you can move into the epclass folder.

We will need to open the Code the Web subfolder of the epclass folder that contains all of the necessary documents.

Step3. To open the correct folder,

Double-Click the Code the Web folder

Let's open index.html.

Step4. To select index.html,

Double-Click index.html

You see index.html open in the code editor.

Step5. To open another file, press:

Control key + O

You see the open dialog box. It left off in the Code the Web folder. Let's open swipe.txt.

Step6. To open swipe.txt,

Double-Click swipe.txt

Let's also open htmsw.css.

Step7. To open another file, press:

Control key + O

You see the Open dialog box. It left off in the Code the Webfolder.

Step8. To open the css folder,

Double-Click the css folder

Let's open the CSS file now.

Step9. To open the CSS file,

Double-Click htmsw.css

We can see that all three files are open in a code editor.

Opening a File in a Web Browser

Let's open index.html in a web browser now.

Step1. Open a web browser.

Step2. To begin opening a file, press:

Control key + O

You see the Open dialog box.

We need to specify the name and location of the file to open.

Setting the Location for Opening Your File

When the dialog box opens, it lists a default location from where the file will be opened. All of our exercise files are contained in the epclass folder, located on the desktop. We'll want to change our location to this folder.

We will start at the desktop, since our exercise file folder, epclass, is located there.

Step1. To move to the desktop,

Click

The current location is now set to the desktop. All of our exercise files are contained in the epclass folder, located on the desktop.

Step2. To open the epclass folder,

Double-Click

The epclass folder contents are now visible.

Note for Macintosh Users - On a Macintosh, the "From:" field is above the list of visible folders and files. To move to the desktop, press the key combination Command key + D. From there, you can move into the epclass folder.

We will need to open the Code the Web subfolder of the epclass folder that contains all of the necessary documents.

Step3. To open the correct folder,

Double-Click the Code the Web folder

Let's make sure we have index.html open in the browser.

Step4. To open index.html,

Double-Click index.html

We see the starting point for our site appear in the browser.

Understanding Responsive Sites

A responsive site is one that changes its layout fluidly based on the size of the browser window being used to view the page. For example, if you view a page initially on the desktop in a full-screen browser window, then make the window smaller, the layout of the page will change. This is accomplished by using media queries. A media query allows the designer to specify several break points and the style rules that go along with them. A break point is a specific width at which the browser will apply different style rules than the default.

Responsiveness is vitally important today especially since more and more users are consuming web content on a wide array of different screen sizes. Mobile phones, tablets, and even watches are all a higher percentage of overall web traffic today than they were a couple years ago, and this trend isn't likely to change any time soon. Since these devices have much smaller screens than a high pixel density desktop or laptop screen, the users have different needs.

However, screen size is not the only consideration. Users browsing the web with mobile devices are interacting with sites using a much less precise input device, such as their fingers or a stylus. Desktop sites can take advantage of the precision of a mouse, but the same site on a device with a small screen could be frustratingly difficult to navigate, especially if the site's designer didn't take into account the varying devices accessing their content.

This is where the philosophy of mobile-first design has its roots. Mobile-first design simply refers to the starting point of a web project, specifically, designers will create the mobile experience first, then create the desktop experience later. This ensures that a page has maximum usability on small screens, but at the same time does not hinder the use of the page on a larger screen.

Mobile usability problems are introduced when designers start adding CSS that specifies things such as font size, box width, position, and do on. By starting with a mobile layout first, then building up from there, we are mimicking the way browsers handle HTML-only content.

Let’s take a look at a familiar example of a responsive site. Here is the Indiana University homepage as a full-width desktop site:

Take a good look at the layout. Specifically, notice the following:

• The navigation, which is currently expanded into individual menu items at the top right side of the page
• Size and location of the image, which currently fills the entire right side of the viewable page contents
• Position of the “Bring on Tomorrow” heading and news articles, currently located on the left side of the page

NOTE: All three of the screen captures in this section are the same physical height and same scale to show more precisely how the page looks on various screen widths.

Now, let's look at the same page at a typical tablet width:

This layout is slightly different. Take note of the same items mentioned previously, specifically:

• The navigation is collapsed into a button in the upper right corner of the page
• The image, previously located on the right side of the page, is now above the text content and left-aligned
• The "Bring on Tomorrow" heading and news articles are now positioned underneath the image

Finally, let's look at a mobile-sized version of the page:

Not much has changed between the tablet and mobile versions of the page. The navigation is still collapsed into a button in the upper right corner of the page, and the image is still positioned above the main text and news articles. However, the following differences are visible:

• The "Bring on Tomorrow" and following paragraph of text that previously took up one line each in the tablet version of the page are now appearing on multiple lines
• The image at the top of the page is now center-aligned instead of left-aligned

Responsive vs. Adaptive

The terms responsive and adaptive are sometimes casually tossed around as if they mean the same thing. In reality, these techniques are similar; however, they do not refer to the same thing. While they both refer to techniques for creating a mobile-friendly site, the means by which they accomplish this are different.

Adaptive sites query the size of the screen first, and load style rules accordingly. Adaptive sites will not automatically change their layouts based on the width of the browser as a page reload is usually required to select a different set of style rules. Using adaptive techniques can be useful for retrofitting an existing site with a mobile layout, or if your site has bandwidth restrictions.

Recall that responsive designs are fluid and typically based on media queries within a CSS document. They allow the user to resize their viewport and the site will change automatically. Most sites that are designed from scratch today use responsive techniques.

We will be using mobile-first design techniques to create a responsive page.