Mobile Web Optimization

These are notes gathered while researching mobile optimization of votesmart.org. These tools/technologies can also be used to create a Mobile Web App for Vote Smart. The difference here being a mobile optimized site is a different rendering of votesmart.org for mobile devices, and a mobile web app is an application with a specific purpose.

Technologies

HTML5
CCS3
JavaScript
Mobile Framework (?)

Frameworks

Process

Using django-mobile, we can create new templates for pages that we want to optimize for mobile. These new templates will use a style sheet specific for mobile layout.
This can be done in stages.

Standards

These are suggestions taken from Put Your Content In My Pocket II

FONTS:

Use Helvetica.
Use bold font-weight to maximize readability (remember, your design will often be used in daylight conditions).
Use normal font weight for secondary information.

LISTS:

Each row should be 44 pixels high.
Set text at 20px.
Inset text 10px from edges, and center vertically in row.
Make controls 29px high, with 12px bold text and a 5px border radius, centered vertically in row.

GROUPS:

Group items in a 300px wide box with 8px radius (10px on each side of box).
Set text at 20px.
Inset text 10px from edges.
Place labels above group box.
Inset labels 20px (so that they line up with 10px inset for group box and 10px inset for text within the box).

STANDARD COLORS:

Use #d9d9d9 for borders and list dividers.
Use #c5ccd3 for light blue (background).
Use #4c566c for dark blue (group box header).

Testing

Opera Mobile Emulator

Commands

Both the Javascript and the CSS files for mobile are being compressed in order to save on load time. see package.json for more information.

# install grunt and grunt-yui-compressor

npm -g install grunt

npm install grunt-yui-compressor

# minimize mobile.css into mobile.min.css

grunt mobilecss

# minimize mobile.js into mobile.min.js

grunt cssmin:mobile

See README.md for more information.

Note that these commands must be executed inside of pypvs.

Screenshot

PVSWiki : MobileWebOptimization