background preloader

Comprendre le Viewport dans le Web mobile

Comprendre le Viewport dans le Web mobile
Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial

http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Related:  webdesignCréa SiteWeb mobileTechnos mobilesApprendre les CSS

CSS3 : initiation aux media-queries pour adapter ses pages web à tout type d'écran - CSS débutant Avec l'avènement des smartphones ou autre tablette, la multiplication des tailles et des résolutions d'écran, il devient de plus en plus aléatoire de ne réaliser qu'une seule disposition graphique de sa page web... Comment en effet visualiser correctement sur un smartphone une page qui aurait été pensée pour une résolution minimale de 1900px ? (ce qui est très mal, d'ailleurs...) Les Media-Queries, permettent de cibler différents cas et ainsi d'adapter la restitution de sa page html à différentes caractéristiques des terminaux. Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation ...

Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs). Comment s'y retrouver?

Responsive webdesign : adapter un site à toutes les résolutions Le Responsive Web design (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites.

Le futur du Responsive Web Design Le RWD est un matériau jeune, une ébauche en plein brouillon qui prend peu à peu forme et consistance au fil du temps et de nos expériences sur le terrain. Dans quelques mois (années ?), les spécifications officielles seront bien plus abouties et stabilisées au sein de nos navigateurs. La meta viewport et @viewport pour les mobiles width La propriété css width est un raccourcit pour spécifier la propriété css min-width et max-width. La propriété css width accepte deux valeurs séparées par un espace : la première est la valeur de min-width et la seconde la valeur de max-width ; Si une seule valeur elle est appliquée aux deux propriétés CSS. min-width

Un peu de psychologie pour une meilleure expérience utilisateur Article invité rédigé par Muriel De Dona, consultante qualité web spécialisée dans l’audit qualité et accessibilité, et coauteur du livre “Qualité Web“. Il y a plus de 10 ans maintenant (gloups) je m’asseyais pour la première fois sur les bancs de la fac de Psychologie. Je ne savais pas encore à quoi ressemblerait ma carrière professionnelle, mais j’avais une certitude bien ancrée : l’humain y occuperait une place centrale. Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives).

Goban Club – Responsive Web Design par Ethan Marcotte : une traduction française Le Web Design Réactif par ETHAN MARCOTTE Le contrôle qu’exercent les designers au sein du média imprimé et qu’ils désirent souvent retrouver au sein du virtuel est simplement le produit d’une limitation de la page imprimée. Nous devrions accepter le fait que le Web n’a pas les mêmes contraintes, et concevoir en fonction de cette flexibilité. Mais avant, nous devons « accepter le flux et le cours des choses. John Allsopp, « Le Maître du Web Design ». Responsinator, tester ses sites avec différentes tailles d’écrans S’il y a bien une tendance forte en Webdesign cette année, c’est le « Responsive webdesign ». Cette technique consiste à adapter un site quelque soit la taille et la résolution d’un écran. Je vous passe les détails technique tant les articles sur le sujet son nombreux. Et comme d’habitude en Webdesign, le plus pénible est de tester ses sites. C’est long et fastidieux. Responsinator est un webware qui permet de tester en ligne le comportement de ses sites sur différentes tailles d’écrans.

Un Petit Conseil: N'oublie pas la Balise Viewport Meta - Envato Tuts+ Web Design Article Je me souviens de mon voyage inaugural en web design responsive: j'ai utilisé une grille classique, j'étais aux prises avec la mise en page flexible, et j'ai abordé les Media Queries pour la première fois. Le changement de la taille de la fenêtre du navigateur donnait un resultat satisfaisant de mon design qui répondait à son cadre. Ensuite, j'ai testé sur un portable. Ça n'a pas marché - je voyais la version miniature du design pour le plein écran.

114: Comment battre le paradoxe du choix ? May 5, 2014 Lettres Philippe Gouillou one response Conseils sur les fichiers sitemaps et le référencement (SEO) Voici tout ce qu'il faut savoir sur le fameux fichier sitemap et son impact sur le référencement. Ce tuto explique les risques d'une mauvaise compréhension de l'utilité du sitemap et donne de nombreux conseils. Article mis à jour le 22/06/2015, publié initialement le 07/06/2014 Un fichier sitemap pour Google, utile au SEO ? Ce dossier fournit des explications et des conseils pour exploiter les fichiers sitemaps XML ou TXT pour votre référencement naturel Qu'est-ce que le fichier sitemap ?

Flipcards sur les Bonnes Pratiques du Web Mobile (MWBP) Les images, couleurs et styles mettent le contenu en valeur, mais doivent être utilisés avec précaution car certains terminaux disposent d'écrans à faible contraste ou ne prennent pas en charge tous les formats. Vérifier graphiques & couleurs IMAGES RESIZING:Redimensionner les images à taille intrinsèque sur le serveur.

Mobile first: mettez de la magie dans vos développements Début 2013 j'ai assisté à la présentation par une grande ESN (Entreprise de Service du Numérique, comme on dit maintenant pour nos SSII), de sa réponse pour le développement d'un nouvel extranet dans une grande entreprise.Donc une application partagée par internet avec les clients dont on ne maitrise pas l'équipement. A la question "Et ça marchera sur tablette?", la réponse fut après une longue hésitation, "Non ce n'est pas prévu, on a chiffré sur PC mais on mettra le mobile dans le lot 2"... lui, par contre le lot 2, il était déjà prévu 18 mois plus tard, c'est à dire aujourd'hui. Un choix finalement anachronique!

Related: