background preloader

Une feuille de styles de base pour le Web mobile

Une feuille de styles de base pour le Web mobile
Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation. Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport

http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html

Related:  thomaslecrouhennecHTML5 & CSS3Technos mobilesfanchlerouge

Nouveau site de l’agence Nealite : retour d’expérience sur le responsive design Le challenge Refondre son site web est toujours un défi pour une agence web. Notre précédent site fêtant son 3ème anniversaire, il n’était plus très en phase, ni avec notre discours, ni avec nos méthodologies et commençait à être technologiquement obsolète. Avec l’arrivée du HTML5, des CSS3 (media queries, @font-face, multi-columns, animations…) et l’expansion du javascript (à travers jQuery ou Mootools…), nous possédons désormais les outils nécessaires pour pouvoir mettre en ligne simplement des sites à la fois agréables, accessibles, rapides et portables.

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. 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.

Responsive Design, la panacée pour le SEO ? En matière de SEO, les attractifs avantages du Responsive Web Design ne doivent pas éclipser l'intérêt d'un site mobile dédié, qui peut se révéler plus intéressant. Récapitulatif des avantages et inconvénients de ces deux voies. Le Responsive Web Design a clairement le vent en poupe. 12 blogs et sites francophones sur l’ergonomie L’ergonomie des interfaces fait parler de plus en plus ! Nous vous proposons un tour d’horizon des blogs et sites francophones actifs (en avril 2012) qui traitent d’ergonomie des interfaces au sens large. Ce billet met à jour la liste que nous avions déjà publié en 2010. Rayon UX – Site t37.net Le Rayon UX est un site d'analyses et d'informations sur l'ergonomie, l'expérience utilisateur et l'écosystème des startups. Il traite également de développement web dans une section dédié.

Avantages et Inconvénients du Responsive Web Design Présentation du Responsive Design Si vous vous intéressez aux évolutions du Web, en voici une qui fait beaucoup parler d’elle. C’est le responsive Webdesign soit une savante formule qui permet de rendre son site ergonomique et adapté aux supports mobiles et aux supports classiques. Chaque évolution amène son lot de questions. Il est intéressant de savoir si un site 3 en 1 permet de faire des économies ? Quels sont les impacts sur la chaîne et les temps de production pour ce type de site ?

Exploiter n'importe quelle police dans vos pages HTML avec FLIR FLIR est une solution axée sur une combinaison PHP/Javascript. Elle génère dynamiquement une image à partir d'un texte contenu dans votre page web dans une police de caractère déposée sur votre serveur et qui, autrement, ne pourrait pas être vue par vos visiteurs. L'image générée sera automatiquement insérée dans votre page à l'aide de Javascript et visible sur tous les navigateurs modernes. N'importe quel élément contenant du texte peut être remplacé depuis les headers (<h1>, <h2>, etc...) jusqu'aux éléments <span>. Avant de vous jeter les yeux fermés dans l'éxecution de ce tutoriel, sachez que désormais CSS offre la possibilité - beaucoup plus souple et accessible - d'inclure une police "exotique" dans une page web grâce à la propriété @font-face. Par ailleurs, l'utilisation de FLIR requiert un serveur web supportant PHP et la librairie GD.

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

Related:  Responsive DesignCSSDesign ResponsiveResponsive