Mobile Websites tips and tricks @HeartAndSole

510 views

Published on

A few tricks for mobile web development.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
510
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Mobile Websites tips and tricks @HeartAndSole

    1. 1. Me me me Darren WaddellSenior Developer
    2. 2. Abacus“Abacus e-Media was established in 1979. It has officesin Portsmouth – Gunwharf, and in London – RegentStreet. We now have a team of over 50 designers,developers and project managers.We are a top 100 New Media Agency, specialising in thedevelopment of websites and content managementsoftware for the Public Sector and Media companies.Our CMS – Webvision is the leading product for B2Bpublishers in the UK.”
    3. 3. @fakedarrenCore Developer
    4. 4. Making Mobile Websites
    5. 5. Support for awesome• HTML(5) (Forms, localStorage)• CSS (CSS3, animations, @media queries)• ES5 (Latest and greatest JavaScript)
    6. 6. Have a separate site• Requirements are different• Have less graphics (images, photos)• Using a media query does not always stop a stylesheet downloading• Setting display: none does not always stop a graphic from downloading
    7. 7. New HTML form types <input type=”tel” /> <input type=”url” /> <input type=”email” />
    8. 8. CSS3 stuffz• @media queries for specific devices• put them in one stylesheet though because they’ll be downloaded anyway• No graphics necessary (just some icons)
    9. 9. CSS stuffz @media only screen and (- webkit-min-device-pixel-ratio: 2){ /* iPhone 4 styles */}@media only screen and (max-device-width: 480px)
    10. 10. CSS stuffzbackground: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#888)); border-radius: 2px;
    11. 11. JavaScript
    12. 12. Adding a click eventvar el = document.querySelector(‘#myElement’);el.addEventListener(‘click’, function(){ this.classList.toggle(‘open’); this.styles.color = ‘#94CC25’;});
    13. 13. Manifests• <!DOCTYPE html> <html manifest=”manifest.cache”>• 3 sections • CACHE: cached, always use network version if available • NETWORK: never use the cached version • FALLBACK: optional fallback for offline
    14. 14. Accessibility• All these tricks lower bandwidth use• This is the core of mobile accessibility
    15. 15. Thanks! http://twitter.com/fakedarrenhttp://mootools.net/developershttp://www.abacusemedia.com

    ×