Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web i mòbil

Com adaptem la web als dispositius mòbils?
by

Pau Moreno

on 6 February 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web i mòbil

La web i els mòbils Hem d'adaptar la web
a la nova realitat: Per què? Com? i ELS DISPOSITIUS MÒBILS Enguany és l'any Font: http://www.businessinsider.com/mobile-versus-desktop Espanya encapçala un rànquing 1 Singapore 90%
2 HongKong 61%
3 Sweden 52%
4 Australia 47%
5 Spain 46% % Penetració smartphones
(dispositius per càpita) Font: http://www.wired.com/beyond_the_beyond/2011/12/42-major-countries-ranked-by-smartphone-penetration-rates/ Quin és el vostre dia a dia? El meu és aquest: Encara hi ha 2 internets www. m. Però hi ha ∞ dispositius A Trendtation (en 30 dies): 32 mides amb >1000 visites Tràfic mòbil a The Guardian Si assumim que mòbil = petit... L'internet mòbil,
versió retallada del clàssic? Si retallem... App?

Web? Accés a totes les funcionalitats de l'aparell
Interaccions i transicions complexes
Accés directe a l'escriptori, notificacions
Visibilitat als markets No cal instal·lar res
Actualitzacions immediates
Mateix codi per a tots els dispositius
Compatible amb el teu contingut existent La meva experiència ... més exemples a mediaqueri.es Super-avantatges Només una versió de cada pàgina
Només una lògica de direccions
Tots els continguts i funcionalitats per a tots els dispositius
Preparat per a dispositius futurs Ethan Marcotte (2010) http://ves.cat/cs_k + - Múltiples plataformes = múltiples codis
Múltiples versions del SO = encara més codis!
Requeriments dels markets
Actualitzacions lentes + - Poc accés a funcionalitats del dispositiu
Diferències entre SO's i navegadors
Interacció amb l'usuari poc fluïda
Poca visibilitat respecte a una app Per què fer dos cops
(o més)
la mateixa feina? CSS3
Media Queries Continguts
flexibles Especifiquem amplades amb percentatges
Apliquem a les imatges: max-width: 100% <link rel="stylesheet" type="text/css"
media="screen and (min-width: 640px)"
href="estils.css" />

@media screen and (min-width: 640px) {
footer {
float: right;
}
} Genial! Però... IE < 9?

Donem gràcies a
respond.js (a GitHub)
Nota: Per incloure dins del <head> després dels estils
Nota 2: Incloguem-hi també html5shiv Responsive Web Design ( ) PhoneGap

Apps en
HTML + CSS3 + JS http://docs.phonegap.com/en/2.3.0/index.html Mobile First Luke Wroblewski Pensem en els mòbils en primera instància http://vit.capa.webfactional.com/mq.html http://trendtation.com http://mumkin.es 3
limitacions Pantalles
petites Dits poc
precisos Connexió
lenta Prioritzar continguts a la navegació Menús amagats
Navegació a sota la pàgina http://contentsmagazine.com
Reduir, reduir, reduir Densitat de Píxels Píxels virtuals <meta name="viewport"
content="width=device-width, initial-scale=1">

Comparem exemples
http://vit.capa.webfactional.com Imatges borroses Icones el doble de grans
css background-size

Comparem exemples
http://vit.capa.webfactional.com Responsive images Minimitzem peticions I un altre cop l'IE < 9 Modernizr (a GitHub)
Icones a dues mides
CSS condicionals Àrees actives grans ~9mm / 45px costat
Suficientment separades Abast del polze Accions comuns a zones còmodes
Accions perilloses a zones incòmodes Ai, els teclats d'abans... Cuidem els nostres usuaris,
utilitzem els nous camps HTML5 <input type=" number | email | url ... "> Disseny gràfic?

Disseny industrial?

Ergonomia? Combinem JS i CSS
Utilitzem sprites CSS
"Catxejem" continguts estàtics
Podem carregar continguts sota demanda? Imatges HD a mòbils: malbaratem ample de banda
Imatges petites a gran pantalla: baixa qualitat
Picturefill (a GitHub) (i ens ho hem de prendre seriosament) Qui sóc? Què us
vinc a dir? Qui sou? I per acabar, un parell de consells: Proveu amb dispositius reals
Utilitzeu SASS Pau Moreno Martín
Full transcript