Mobile Websites tips and tricks @HeartAndSole

Me me me

Darren Waddell
Senior Developer

Abacus
“Abacus e-Media was established in 1979. It has ofﬁces
in Portsmouth – Gunwharf, and in London – Regent
Street. We now have a team of over 50 designers,
developers and project managers.

We are a top 100 New Media Agency, specialising in the
development of websites and content management
software for the Public Sector and Media companies.

Our CMS – Webvision is the leading product for B2B
publishers in the UK.”

Support for awesome

• HTML(5) (Forms, localStorage)
• CSS (CSS3, animations, @media queries)
• ES5 (Latest and greatest JavaScript)

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

New HTML form types

<input type=”tel” />
<input type=”url” />
<input type=”email” />

CSS3 stuffz

• @media queries for speciﬁc devices
• put them in one stylesheet though because
they’ll be downloaded anyway
• No graphics necessary (just some icons)

CSS stuffz
@media only screen and (-
webkit-min-device-pixel-ratio:
2){
/* iPhone 4 styles */
}

@media only screen and (max-
device-width: 480px)

CSS stuffz

background: -webkit-gradient(linear,
left top, left bottom, from(#FFF),
to(#888));

border-radius: 2px;

Adding a click event
var el = document.querySelector(‘#myElement’);

el.addEventListener(‘click’, function(){
this.classList.toggle(‘open’);
this.styles.color = ‘#94CC25’;
});

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 ofﬂine

Accessibility

• All these tricks lower bandwidth use
• This is the core of mobile accessibility

Thanks!
http://twitter.com/fakedarren
http://mootools.net/developers
http://www.abacusemedia.com

Mobile Websites tips and tricks @HeartAndSole

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Mobile Websites tips and tricks @HeartAndSole

Similaire à Mobile Websites tips and tricks @HeartAndSole (20)

Dernier

Dernier (20)

Mobile Websites tips and tricks @HeartAndSole

Notes de l'éditeur