This project was written by:
Mark Brautigam
markb@mixed-up.com
This project was written as part of a class:
Mobile Web and App Design
GDES (Graphic Design) 051
Mission College
Mark Garrett, instructor
This is one of a series of projects that I implemented to investigate the possibilities for upgrading the web site www.mixed-up.com, which is devoted to square and round dancing information.
Bootstrap. This project uses version 3.1.1, which is included as part of the project code.
jQuery. This project uses version 1.11.0, which is linked from googleapis.com.
Web Fonts. This project uses the web font Special Elite, which is linked from googleapis.com.
A few images used in this project are PNG files made for other projects and
used here just for comparison purposes. The
Pros and Cons page has a large image whose size
is constrained by both width and max-width.
The majority of the images in this project are SVG images, most of them
are background images taken from
this one image sprite file, which should display
in the browser because it is XML code. Combining all these images into one file
greatly reduces the number of HTTP requests. Because it is not possible to
resize a background image with a sprite due to bad interaction between
background-size and background-position, the various
sizes of icons are all in the sprite file and they are chosen by changing the
background-position property in the media queries.
The main icons are 68px square. They are used on the home page and in the page titles on the inside pages. The medium-size icons are 51px (75%) and they are made by applying an SVG transform to the original icons. They are used in the sidebar menu. They are also used in the page titles and the home page at smaller sizes. The small icons are 34px (50%) and are also made by SVG transform. They are used in the dropdown menus and in the previous/next page navigation at the bottom of each page. They are also used on the home page at very small sizes. So the responsive characteristic is carried out by swapping out the larger ones for smaller ones in the media queries.
This site has been tested on the following devices and browsers:
| Device | Browsers |
|---|---|
| Galaxy S4 (Android 4.3) |
Chrome 33 Firefox 27 Android Browser 1.5 |
| iPhone 4 | Safari 7.0.4 Mobile |
| iPad 2 | Safari 5.1 Mobile |
| Mac OS 10.8 | Safari 6.1.2 Firefox 28 Chrome 33 |
| Windows 7 | Internet Explorer 11 |
In addition, this site has been tested against the W3C HTML and CSS validation engines. There are links at the bottom of each page for validation.
I used YSlow to check the performance and components of these pages, and the Safari Timelines panel to check load times.
| Pages | Files | Size (Kb) | Load Time (sec) |
|---|---|---|---|
| Home | 9 | 208 | 6.65 |
| Introduction | 12 | 288 | 4.47 |
| How It Works | 10 | 220 | 4.43 |
| Make One | 10 | 220 | 3.85 |
| Make A Series | 12 | 262 | 1.68 |
| Simple Language | 11 | 230 | 3.41 |
| Pros and Cons | 11 | 230 | 3.25 |
| About | 9 | 208 | 2.29 |
There are a minimum of nine component files on any one page:
In addition, there are other JavaScript files and PNG image files included on some pages.
The largest files on the site are bootstrap.min.css at 100K bytes,
and jquery.min.js at 96K (but gzipped down to 33K).
I tested load times by downloading the HTML-only files from a Dropbox account, instead of the PHP-served files from my home account, to get a better idea of network latency. Pages that took a longer time to load did load much faster on subsequent refreshes, usually less than 2 seconds.
