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 for Enter.

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

NOTE: In Internet Explorer, you will also have to Click Browse...

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 IUPUI home page as a full-width desktop site:

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

• Location of the navigation and look of the branding bar at the top of the page
• Size of the hero image
• Number of news articles across the page
• Number of circles located within the At a Glance band

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 Menu button in the upper right of the page
• The hero image is much smaller
• There are two news items across the page
• There are three At a Glance circles across the page

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

Again, take note of the same items mentioned previously, specifically:

• The campus name has been condensed to its initials
• The hero image is much smaller
• There is one news item and At a Glance item
• The At a Glance band has no crimson background
• We can see the Get Connected band begin to appear

NOTE: If you were viewing this page in a browser rather than the static screen captures here, you would notice that in the tablet and desktop sizes, the hero image is animated and in the mobile version, it is not.

The IUPUI and IU Bloomington web sites are both good examples of responsiveness since they both use the same site template.

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.