Make web materials work on student smartphones

Bob Ponterio, SUNY Cortland & FLTEACH
NYSAFLT, Buffalo, NY, 11 October 2013

http://web.cortland.edu/flteach/wksp/nysaflt2013.html


 

1. Introduction

Why am I talking about this?
Technology in the Second Language Classroom, SUNY Cortland

Who is this presentation for?
Anyone who wants to put materials online via the web for display on SmartPhones or Tablets (whether or not you know much about web design).

This presentation offers only the simplest, basic bits of responsive design needed for creating fairly simple web pages for displaying content on student phones or quickly converting your existing content so that it will display better on these smaller devices.

 

2. What are the issues we will be addressing in the session?

a. Problems displaying and interacting with most web pages on tablets & smartphones.

b. Solutions: easier clicking, self-adjusting columns, auto resizing of images, readable text, changing content for different screen sizes, reducing indents on small screens, making videos elastic.

c. Responsive Design (using Media Queries, Cascading Style Sheets (CSS), & Fluid Grid layouts).

d. Need to make this easy & transparent for the teacher because you don't have time for Media Queries, CSS, or Fluid Grid layouts! (In other words, you want to focus on content, not format, so we must keep it simple.)

e. Should we design a page for a wide, desktop screen and then include responsive design styles to make it fit better on a SmartPhone? Or should we design the page for a SmartPhone first, and then let it scale up to also display on a desktop? A third approach is to make separate pages for each, and jump/redirect to one depending on the screen size.

f. Might we make two different pages for narrow or wide screens? Then we could automatically jump to the appropriate version depending on screen width.

 

3. Before/After:

These sample pages below, photographed on a smartphone, show a before/after comparison of some of these Responsive Design features. The images are linked to the original pages. Note the improved usability of the improved pages.

2

3

4

3

 

4. Solving the problem (the man behind the curtain)

A. Cascading Style Sheets help us separate format from content:

Responsive Styles in an External CSS file:

Put all responsive design related styles in a separate css file (for example "responsive.css").
Tell the page to get the styles from that css file:
<link href="responsive.css" rel="stylesheet" type="text/css">

Responsive Styles in a web page header:

Put responsive design related styles between <style> tags in each web page header:
    <style>
    img {
       max-width:100%;
       width:auto
       height:auto;
       }
    </style>

Inline Styles:

Put a responsive design related style directly into one particular item on a page:
    <table style="width:100%;">

 

B. <DIV> </DIV>

DIVs are just boxes that can be defined as having a width that is a particular percentage of the box they are contained in. A bit like tables that can move around and adjust to their environment. They are far more effective and versatile than tables for formatting a web page.

Example of a DIV class to make 3 columns:

/* GRID OF THREE */
.span_3_of_3 {
   width: 100%;
   }
.span_2_of_3 {
   width: 66%;
   }
.span_1_of_3 {
   width: 32%;
   }

Example of DIV class that is hidden or displayed on a cell phone:

.hidden_on_phone {
   width: 100%;
   display:none;
   }
.display_on_phone {
   width: 100%;
   display:block;
   }


C. Media Queries (a way to tell the page how much room it has on the screen):

Change the style if the screen is no bigger than a pre-determined size.

Example of a Media Query setting for a smartphone to make a normally 1/3 screen size column fill the width of the smartphone screen:

@media only screen and (max-width: 480px) {
   .span_1_of_3 {
      width: 100%;
      }
   }

And finally, to make it all work, we have also added a Meta tag in the page header:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

D. Smartphone first design:

Another option is to design a page first for the smartphone:

Single column; Nothing wider than about 320-480 pixels; Avoid too many indentation levels; Image width set by percentage (indeed many objects can have - style="width:100%" ).

 

E. Make two pages, one for SmartPhones, the other for wider browser windows:

Yet another option is to make different pages for different media. You can make a separate page for a SmartPhone and automatically jump to it if the browser window is narrow. To do this, you can paste this script into your "normal" wide screen web page head area and change the document.location to automatically jump to your mobile page if the width is less than 480 pixels:

<script type="text/javascript">
<!--
if (window.innerWidth <= 480) {
document.location = "http://my.mobile.page.address.goes.here/";
}
//-->
</script>

Now when the visitor loads your "regular" web page from a SmartPhone, it will automatically jump to the SmartPhone version. Of course, this is more work, but it can make the design easier if the differences between the two versions are great.

 

5. Examples

The Media Queries, Styles & DIVs for all of these are included in the headers of each page.

3 column design

2 column design with hidden DIVs

4 column design with a header and a footer

Responsive Design Elastic Video

 

6. Basic Template Guidelines

Use a few basic templates instead of starting from scratch each time.

I am incorporating all style information needed for all of these Responsive Design templates into every sample template (in its header) so you don't have to bother with external style sheets.
- However, if you are comfortable with CSS, putting responsive design in an external style sheet is really a better approach.

Always avoid using absolute sizes such as an image width & height specified in pixels (don't include any size info in images). Avoid a table or column whose width is in pixels (use % instead). This might require checking the HTML properties of images to delete width & height.

You can download these templates, fill in your own content, and copy & paste sections (be careful to respect section boundaries) to add or rearrange format sections. I will put a horizontal line between sections help you see the section boundaries and make it easier to copy/paste whole sections.

The first layout is just a single column blank page with no special sections or areas, intended for SmartPhone first design. You should be able to copy/paste your existing web page into this single column layout.

Reformat any special wide layout elements you might have (wide tables).

Remove image width & height.

Move things around so you have just a single column of content.

Keep any indentations to a minimum.

 

7. Templates

Right click on each link to download that template. Each is just a single file that can be edited to insert your content and modified to your preferred format features.

 

This is a page with just a single, full-width column. A blank slate.

Use this layout for SmartPhone first design.

class="col span_3_of_3"

class="col span_2_of_2"

 

one_column_no_header.html

 

Header

 

This is a page with a single, full-width column.

It also has a header and a footer section.

class="col span_2_of_2"

 

Footer

one_column_with_header.html

 

Header

 

 

Left column

span_1_of_2

 

 

Right column

span_1_of_2

Footer

two_columns_with_header.html

 

Header

 

Left

 

Right

 

Full width section

 

Footer

two_columns_plus_full_width.html

 

Header

 

Full width section

 

 

Left

 

Right
Footer

full_width_plus_two_columns.html

 

Header

 

Left column

1_of_3

 

Right column

span_2_of_3

Full width section

 

Footer

two_columns_unequal_1_third-2_thirds.html

 

Header

 

Left column

span_2_of_3

 

Right column

1_of_3

Full width section

 

Footer

two_columns_unequal_2_thirds-1_third.html

 

Header

Left 1/4

Right 3/4
span_3_of_4

Full width section

 


Left 3/4

Right 1/4
Footer

two_columns_unequal_by_fourths_plus_full_width_section.html

 

Header

Left

Right

2 DIVs
1. Hidden on cell phone
class="hidden_on_phone"
2. Hidden on wide screen
class="display_on_phone"

Full width section

 

Footer

hidden_sections_plus_unequal_columns_plus_full_width_section.html

 

Header

 

 

Left

 

 

Col 2 Col 3 Right

Full width section

 

Footer

four_columns_plus_full_width.html

 

Redirect page: This page has the script to automatically redirect you to a different page for a smaller browser window (less than 480 pixels).

redirect.html

 

8. Adding your own content

Using web page editors: Dreamweaver & Kompozer

Copy/Paste sections

Remove height & width from images so they get their size from their containers.

Checking your work: Firefox / Tools / Web Developer / Responsive design view

Checking you page online: http://springload.responsinator.com/

 

9. Questions