Optimizing your layout for phones and tablets using viewport and media queries
Par Andreas Bovens
- Conférence (50 mn) :
- Sous-titres :
- Français
Liens connexes
- Diaporama (PDF)
- parisweb-pres-111013085104-phpapp02
Le sujet
With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern mobile browsers that help web designers to create compelling experiences on phones and tablets.
In my talk, I will cover the various features of the viewport meta tag, and look at how they allow you to control mobile browsers' zoom behaviors. I'll also connect this to Opera's CSS Device Adaptation proposal, which brings this feature to CSS in the form of the @viewport rule.
Furthermore, I will explain how viewport can be combined with media queries to create super-flexible layouts that work nicely across different browsing contexts and devices, and explore various strategies to dealing with different screen sizes and pixel densities.
Maintenant que le fait de naviguer sur Internet à en étant mobile est devenu une réalité, les utilisateurs s'attendent à ce que leurs sites préférés fonctionnent sans problème sur leur appareil mobile. Nous entrons dans une ère passionnante, car les navigateurs mobiles modernes disposent de nombreuses fonctionnalités qui aident les designers web à concevoir une expérience mobile (sur téléphone ou tablette) plus intéressante.
Lors de cette conférence, je parlerai des différentes possibilités offertes par la balise meta "viewport", et montrerait comme elle vous permettent de contrôler le comportement du zoom des navigateurs mobiles. Je ferai également le lien avec la proposition d'Opera nommée CSS Device Adaptation, qui apporte cette fonctionnalité aux CSS, sous la forme d'une règle @viewport.
NB : cette conférence sera en anglais avec traduction simultanée.
Présenté par
Andreas is based in Oslo, from where he heads up Opera Software's Developer Relations & Tools team. The team evangelizes open web standards through publications and conference presentations, takes care of product management of developer tools such as Opera Dragonfly and the Opera Mobile Emulator, and focuses on solving compatibility issues so sites work well in all Opera products.
In a previous life, Andreas did a master in Japanese studies, researched Japanese copyright law at Meiji and Keio University, and was a QA engineer and web evangelist at Opera's Tokyo office. He loves espresso, and picks up his banjo from time to time.
Andreas est basé à Oslo, d'où il dirige l'équipe Relations développeurs et Outils d'Opera Software. L'équipe fait la promotion des standards ouverts du Web par le biais de publications et de présentations en conférence, s'occupe de la gestion d'outils de développement tels qu'Opera Dragonfly et l'émulateur Opera Mobile, et se concentre sur la résolution de problèmes de compatibilité des sites afin qu'il fonctionnent correctement avec l'ensemble des produits de l'Opéra.
Dans une vie antérieure, Andreas a fait un master en japonais, des recherches sur le droit d'auteur japonais aux universités Meiji et Keio, et était ingénieur qualité et évangéliste Web au bureau à Tokyo Opera. Il aime le café expresso, et grattouille son banjo de temps à autres.