Revision history for MobileWebOptimization


Revision [7372]

Last edited on 2012-11-26 11:04:20 by LuizLopes [shultz' django-mobile]
Additions:
[[https://github.com/shultzm/django-mobile django-mobile]]
Deletions:
[[https://github.com/gregmuellegger/django-mobile django-mobile]]

Revision [7080]

Edited on 2012-10-17 11:36:32 by LuizLopes [grunt's mobile css compression command.]
Additions:
grunt cssmin:mobile
Deletions:
grunt mobilejs

Revision [7079]

Edited on 2012-10-17 11:21:40 by LuizLopes [updated commands for grunt.js]
Additions:
# install grunt and grunt-yui-compressor
npm -g install grunt
npm install grunt-yui-compressor
grunt mobilecss
grunt mobilejs
See ##README.md## for more information.
Deletions:
# install clean-css and uglify-js
npm install
npm run-script mobilecss
npm run-script mobilejs

Revision [6988]

Edited on 2012-09-28 15:13:12 by LuizLopes [Useful link to Mobile Design Pattern]
Additions:
[[http://mobiledesignpatterngallery.com/mobile-patterns.php Mobile Design: Pattern Gallery]]

Revision [6977]

Edited on 2012-09-26 16:12:02 by LuizLopes [New homepage]
Additions:
{{image url="http://i.imgur.com/6fe4P.png" title="text" alt="text"}} {{image url="http://i.imgur.com/x2hqz.png" title="text" alt="text"}}
Deletions:
{{image url="http://i.imgur.com/SLOmk.png" title="text" alt="text"}} {{image url="http://i.imgur.com/x2hqz.png" title="text" alt="text"}}

Revision [6810]

Edited on 2012-09-10 11:35:07 by LuizLopes [added cmd to install dependencies.]
Additions:
# install clean-css and uglify-js
npm install
Note that these commands must be executed inside of pypvs.
Deletions:
Note that these commands depend on ##clean-css## and ##uglify-js##

Revision [6809]

Edited on 2012-09-10 11:26:10 by LuizLopes [Added information on minify css and js for mobile]
Additions:
=====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)
# minimize mobile.css into mobile.min.css
npm run-script mobilecss
%%
%%(bash)
# minimize mobile.js into mobile.min.js
npm run-script mobilejs
%%
Note that these commands depend on ##clean-css## and ##uglify-js##

Revision [6803]

Edited on 2012-08-31 09:23:30 by LuizLopes [Added link to Opera Mobile Emulator and Bootstrap]
Additions:
- [[http://twitter.github.com/bootstrap/ Twitter Bootstrap]]
=====Testing=====
[[http://www.opera.com/developer/tools/mobile/ Opera Mobile Emulator]]

Revision [6689]

Edited on 2012-07-31 08:56:18 by LuizLopes [appcelerator link.]
Additions:
- [[https://www.appcelerator.com Titanium by Appcelerator]]

Revision [6650]

Edited on 2012-07-23 10:38:34 by LuizLopes [Added screenshots]
Additions:
{{image url="http://i.imgur.com/SLOmk.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"}}
Deletions:
http://imgur.com/a/DJxQ9/

Revision [6649]

Edited on 2012-07-23 10:35:46 by LuizLopes [Added screenshots]
Additions:
=====Screenshot=====
http://imgur.com/a/DJxQ9/

Revision [6648]

Edited on 2012-07-23 10:32:43 by LuizLopes [link to pvs mobile homepage.]
Additions:
[[http://imgur.com/a/DJxQ9 PVS Mobile Homepage]]

Revision [6646]

Edited on 2012-07-20 14:00:46 by LuizLopes [additional info on process]
Additions:
=====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).

Revision [6602]

Edited on 2012-07-13 11:57:26 by LuizLopes [additional info on process]
Additions:
[[CategoryITDoc]]|[[CategorySoftwareProjects]]
Deletions:
[[CategoryITDoc]][[CategorySoftwareProjects]]

Revision [6601]

Edited on 2012-07-13 11:57:11 by LuizLopes [Added page to software projects category]
Additions:
[[CategoryITDoc]][[CategorySoftwareProjects]]
Deletions:
[[CategoryITDoc]]

Revision [6600]

Edited on 2012-07-13 11:44:13 by LuizLopes [icon handbook]
Additions:
[[http://iconhandbook.co.uk/reference/chart/ Icon Reference Chart]]

Revision [6599]

Edited on 2012-07-13 11:41:40 by LuizLopes [jqtouch a jquery plugin for mobile dev]
Additions:
- [[http://www.jqtouch.com/ jQTouch]]

Revision [6594]

Edited on 2012-07-13 09:51:01 by LuizLopes [tech links]
Additions:
- [[http://diveintohtml5.info/ HTML5]]
- [[https://developer.mozilla.org/en/CSS/CSS3 CCS3]]
- [[https://developer.mozilla.org/en/JavaScript JavaScript]]
Deletions:
- HTML5
- CCS3
- JavaScript

Revision [6593]

Edited on 2012-07-13 09:21:35 by LuizLopes [added sitepoint's buildmobile]
Additions:
[[http://buildmobile.com/ SitePoint Mobile Development Site]]

Revision [6592]

Edited on 2012-07-13 09:18:34 by LuizLopes [smashingmag link to mobile category]
Additions:
[[http://www.smashingmagazine.com/guidelines-for-mobile-web-development/ Guidelines For Mobile Web Development]]

Revision [6591]

Edited on 2012-07-13 09:13:22 by LuizLopes [link to wink toolkit]
Additions:
- [[http://www.winktoolkit.org/ Wink Mobile Toolkit]]

Revision [6590]

Edited on 2012-07-13 09:09:07 by LuizLopes [specifying the diff btw mobileapp and mobile web]
Additions:
======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.
Deletions:
======Mobile Web Application======
Create a mobile optimized version of votesmart.org

Revision [6589]

The oldest known version of this page was created on 2012-07-13 09:04:32 by LuizLopes [specifying the diff btw mobileapp and mobile web]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki