Premier mobile web design

Deux grandes catégories de stratégies ont été employées au cours des années pour appuyer la conception Web pour les appareils mobiles: dégradation progressive

et amélioration progressive. Une grande partie de la bande est actuellement presque inutilisables sur les appareils mobiles, car il a été conçu pour les navigateurs de bureau et ne sont pas bien adaptées aux petits écrans.

Mobinautes sont souvent contraints de zoomer, faire défiler, pincée, plisser les yeux, et leurs doigts aussi petit que possible d'utiliser la majorité des sites Web conçus il ya plus de quelques années.

Stratégie de design gracieux de dégradation Web pour les appareils mobiles

L'idée derrière la dégradation gracieuse est de concevoir votre site Web principalement pour les utilisateurs de bureau, mais aussi le design d'une manière telle que les caractéristiques de l'emplacement de bureau qui ne fonctionne pas ou adapter sur les appareils mobiles sera toujours utilisable - si pas assez ou que fonctionnelle - sur les appareils mobiles.

Dégradation progressive était une bonne philosophie de conception dans les jours précédant les smartphones avec les navigateurs fonctionnalités complètes existait. Cependant, la dégradation gracieuse fait avoir de problèmes majeurs. Plus important encore, la dégradation gracieuse oblige l'utilisateur à télécharger l'ensemble de votre site web, pour être montré une version dégradée de celui-ci. Sur les appareils mobiles, qui ont souvent une bande passante limitée, ce ne sont pas une bonne chose.

Stratégie de conception progressive d'amélioration de Web pour les appareils mobiles

En raison de limitations de dégradation gracieuse, une nouvelle stratégie appelée amélioration progressive est devenu populaire. Amélioration progressive commence avec le site très plus basique et ajoute sur les fonctionnalités en fonction de ce que le navigateur de l'utilisateur prend en charge.

Amélioration progressive permet aux sites Web pour être utilisable même en utilisant un téléphone mobile très basique. Le navigateur mobile n'a pas besoin de télécharger un grand nombre de CSS et de code javascript (par exemple) qu'il ne sait pas quoi faire avec.

Une façon de visualiser l'amélioration progressive est comme un système qui ajoute des couches sur un site Web en fonction de la taille du navigateur ou les fonctionnalités du navigateur prend en charge.

Voici un exemple simple de la façon dont deux liens de feuilles de style peuvent être utilisées pour améliorer une page Web mobile pour les grands navigateurs:

Le premier lien comprend style.css pour tout écran ou un appareil portatif. Dans ce cas, style.css contient des styles qui sont optimisés pour un appareil mobile.

Le second lien est pour une feuille de style appelée enhanced.css. Si vous regardez le médias attribuer pour ce lien, vous remarquerez qu'il a un min-width état. La enhanced.css fichier ne sera inclus si l'appareil est supérieure à 800px. À l'intérieur enhanced.css, le concepteur web peut surcharger les propriétés de la style.css feuille de style pour rendre le navigateur échelle pour des largeurs de navigateur plus grandes.

Première conception mobile résout le problème de la taille du navigateur

Mobile est d'abord une philosophie de conception qui emploie les idées de l'amélioration progressive de construire des sites Web mobiles d'abord et ensuite les améliorer pour le bureau. La grande chose à propos de la première conception mobile est que quand vous construisez le premier site mobile, par opposition à l'inverse, vous obtenez un site de bureau fonctionnel gratuitement!

Pensez à tous les sites Web que vous avez vu qui ne rentrent pas dans les navigateurs mobiles. Maintenant, imaginez visitant un site Web mobile avec un ordinateur de bureau. Un site Web qui est optimisé pour un petit écran sera toujours travailler sur un navigateur de bureau - même si elle ne finissent pas le remplissage de la fenêtre du navigateur.