Saturday, July 31, 2010

Semantically awesome ordered lists

So if you were ever trying to style an ordered list <ol> and get rid of those pesky periods after the numbers you may have wanted to give up.


Do not give up!

Much better than manually adding the numbers and styling them in a very un-semantic way. Now of course this works in Firefox and Webkit and not much else, but that's okay. I need it for an iPhone app, so we're good!



<style>
nav {
  margin-left: 20px;
  margin-right: 30px;
  color: #666;
 }
  
 ol { counter-reset: item }

 li {
  display: block;
  margin-top: 10px;
 }
 nav ol li span {
  font-family: 'GothamBook', Arial;
  font-size: 1.6em;
 }
 ol li::before {
   content: counter(item) " | ";
   counter-increment: item;
   font-family: 'GothamLight', Arial;
   font-size: 2.2em;
 }
</style>

<nav>
   <ol>
    <li><a href="#">Why mobile?</a> <span>Quotes and figures to astound your clients.</span></li>
    <li><a href="#">Focus.</a>  <span>Using constraints to improve design across the board.</span></li>
    <li><a href="#">Capabilities.</a>  <span>What can mobile phones do now-a-days?</span></li>
    <li><a href="#">Native vs. Web App.</a>  <span>Which is a better fit for your needs?</span></li>
    <li><a href="#">Workflow.</a>  <span>What happens to your app when it comes through our door.</span></li>
    <li><a href="#">Cost.</a> <span>An arm and a ...</span></li>
    <li><a href="#">Know before you start.</a> <span>10 essentials that can save your app.</span></li>
    <li><a href="#">What's on the horizon?</a> <span>Mobile trends to keep in mind.</span></li>
    <li><a href="#">Help me.</a> <span>We’re here to help you with all your Mobile needs..</span></li>
   </ol>
  </nav>











Thank you:

http://efreedom.com/Question/1-3153019/Remove-decimal-from-ordered-ol-list-via-CSS

http://www.w3.org/TR/CSS2/generate.html

Saturday, July 24, 2010

jQuery Canvas Loader Plugin

 Hi everyone,

I want to tell you about a new jQuery plugin I just released yesterday. It's called Canvas Loader and it provides a canvas replacement to the  standard Ajax Loading images we're all used to seeing around the web. This is helpful for the mobile space because Android for example does not support animated gifs, but it does support the canvas tag. It's also neat because by default it's transparent and is easily customizable. The actual un-minified size is likely bigger than the a small loader image, but not by much and if included with the main javascript of the site it should actually download faster.


While the plug-in takes a lot of options. The main functionality can be triggered by calling this simple method. It tires to match the width and height of an existing image.  Currently, you must have an actual image that is being replaced!

$("img.ajaxLoader").canvasLoader();


Check it out for an example and the code:
 http://jamund.com/canvas-loader/

      

Tuesday, July 20, 2010

Mobile Web Best Practices

This is a fantastic draft article by the W3C:

http://www.w3.org/TR/mwabp/

The article provides a good overview of some of the things to consider when developing a mobile web application, especially across multiple platforms. Highly recommended read for mobile web developers.

Check it out!

Here is the table of contents from the article:
  1. Use Cookies Sparingly
  2. Use Appropriate Client-Side Storage Technologies for Local Data
  3. Replicate Local Data
  4. Do not Execute Unescaped or Untrusted JSON data
  5. Ensure the User is Informed About Use of Personal and Device Information
  6. Enable Automatic Sign-in
  7. Use Transfer Compression
  8. Minimize Application and Data Size
  9. Avoid Redirects
  10. Optimize Network Requests
  11. Minimize External Resources
  12. Aggregate Static Images into a Single Composite Resource (Sprites)
  13. Include Background Images Inline in CSS Style Sheets
  14. Cache Resources By Fingerprinting Resource References
  15. Cache AJAX Data
  16. Do not Send Cookie Information Unnecessarily
  17. Keep DOM Size Reasonable
  18. Optimize For Application Start-up Time
  19. Minimize Perceived Latency
  20. Design for Multiple Interaction Methods
  21. Preserve Focus on Dynamic Page Updates
  22. Use Fragment IDs to Drive Application View
  23. Make Telephone Numbers "Click-to-Call
  24. Ensure Paragraph Text Flows
  25. Ensure Consistency Of State Between Devices
  26. Consider Mobile Specific Technologies for Initiating Web Applications
  27. Use Meta Viewport Element To Identify Desired Screen Size
  28. Prefer Server-side Detection Where Possible
  29. Use Client-side Detection When Necessary
  30. Use Device Classification to Simplify Content Adaptation
  31. Support a non-JavaScript Variant if Appropriate
  32. Offer Users a Choice of Interfaces

Friday, July 2, 2010

Apple's Useful Offline Storage Article

An interesting point from the article:
The localStorage and sessionStorage JavaScript objects are functionally identical except in their persistence and scope rules:

  • localStorage—used for long-term storage. This data persists after the window is closed and is shared across all browser windows.



  • sessionStorage—used for ephemeral data related to a single browser window. Data stored in the sessionStorage object does not persist after the window is closed and is not shared with other windows.

  • http://developer.apple.com/safari/library/documentation/iphone/conceptual/safarijsdatabaseguide/Name-ValueStorage/Name-ValueStorage.html 


    A note on storing objects using local storage:
     
    http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage


    Great info about creating Mobile Web Applications

    http://www.mollerus.net/tom/blog/2010/06/web_app_homescreen_icons_in_android.html