======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=====
	- [[http://diveintohtml5.info/ HTML5]]
	- [[https://developer.mozilla.org/en/CSS/CSS3 CCS3]]
	- [[https://developer.mozilla.org/en/JavaScript JavaScript]]
	- Mobile Framework (?)
=====Frameworks=====
	- [[http://www.iui-js.org/ iUI Mobile Web Framework]]
	- [[http://snippetspace.com/portfolio/iwebkit/ iWebKit Webapp Framework]]
	- [[http://www.jqtouch.com/ jQTouch]]
	- [[http://www.sencha.com/products/touch sencha touch 2]]
	- [[http://www.winktoolkit.org/ Wink Mobile Toolkit]]
	- [[http://www.jquerymobile.com jquery mobile framework]]
	- [[https://www.appcelerator.com Titanium by Appcelerator]]
	- [[http://twitter.github.com/bootstrap/ Twitter Bootstrap]]
=====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 [[http://www.alistapart.com/articles/putyourcontentinmypocketpart2/ 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=====
[[http://www.opera.com/developer/tools/mobile/ 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. 

%%(bash)
# install grunt and grunt-yui-compressor
npm -g install grunt
npm install grunt-yui-compressor
%%

%%(bash)
# minimize mobile.css into mobile.min.css
grunt mobilecss
%%

%%(bash)
# 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=====
{{image url="http://i.imgur.com/6fe4P.png" title="text" alt="text"}}  {{image url="http://i.imgur.com/x2hqz.png" title="text" alt="text"}}  
{{image url="http://i.imgur.com/eKFTY.png" title="text" alt="text"}}  {{image url="http://i.imgur.com/fG4FE.png" title="text" alt="text"}}

=====Links=====
Useful links.
[[http://www.smashingmagazine.com/guidelines-for-mobile-web-development/ Guidelines For Mobile Web Development]]
[[http://mobiledesignpatterngallery.com/mobile-patterns.php Mobile Design: Pattern Gallery]]
[[http://www.w3.org/TR/mobile-bp/ w3c best practices]]
[[https://github.com/shultzm/django-mobile django-mobile]]
[[http://buildmobile.com/ SitePoint Mobile Development Site]]
[[http://iconhandbook.co.uk/reference/chart/ Icon Reference Chart]]
[[http://imgur.com/a/DJxQ9 PVS Mobile Homepage]]

[[CategoryITDoc]]|[[CategorySoftwareProjects]]