Comment gérer différentes tailles d'écran lorsque votre thème concerne la conception
Nous savons que toutes les personnes n'ont pas la même résolution d'écran sur leur écran d'ordinateur. Certaines personnes préfèrent un écran large de 15 pouces, tandis que d'autres utilisent 17 pouces et plus pour leur expérience informatique.
Je conçois une page Web qui dans mon moniteur (17 '' 1280w x 1024h) a fière allure.
Lorsque je l'ai testé dans un ordinateur portable (moins de résolution en hauteur que mon moniteur), il n'a pas l'air bien car il divise en quelque sorte la page et vous devez faire défiler pour obtenir la sensation. Vous n'obtenez pas toute la bonne partie à la fois. Cela signifie qu'il perd de sa conception.
Ma question est de savoir si c'est un jeu de mon esprit parce que je suis habitué à mon moniteur, et si ce n'est pas le cas, comment dois-je le gérer?
Je préfère ne pas montrer ma page, mais j'ai trouvé un exemple de ce que je veux dire dans le modèle monstre ici http://livedemo00.template-help.com/joomla_35840/
Pour cette raison et pour la taille d'écran mobile également, il existe une nouvelle technique appelée Responsive Webdesign. Il s'agit d'adapter son contenu et sa mise en page en fonction de la taille de l'écran en utilisant des médias CSS et des techniques supplémentaires côté serveur. Je n'ai pas creusé trop profondément, mais je pense que c'est basé sur HTML5 et CSS3.
Mais, je crains qu'il ait besoin d'une toute nouvelle approche de mise en page pour votre site actuel.
Liens: Introduction au Responsive Web Design , Responsive Web Design: Qu'est-ce que c'est et comment l'utiliserPragmatic responsive design , Adaptation: Pourquoi le design réactif commence réellement sur le serveur , Golden Grit System
Et des liens critiques: 11 raisons pour lesquelles le Responsive Design n'est pas si cool! , Responsive Web Design ou Separate Mobile Site? Eh. Ça dépend. , CSS Media Query for Mobile is Fool's Gold
Je dois être d'accord avec FrankL ici. La tendance actuelle est à la conception de sites Web réactifs utilisant HTML5 et CSS3 (en particulier les requêtes multimédias). Sachez cependant qu'une grande partie de cette fonctionnalité ne fonctionnera que sur les nouveaux navigateurs. Si vous avez des statistiques sur les personnes qui visitent actuellement le site (quels navigateurs ils utilisent), cela peut indiquer si HTML5/CSS3 est le chemin à parcourir ou si vous devez examiner d'autres façons de créer des effets similaires qui fonctionnent sur les anciens navigateurs.
Quelques liens sur la conception de sites Web de réponse:
http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Je dois dire (à ma honte) n que je n'ai pas vérifié récemment quelle est la résolution majoritaire utilisée par les écrans en 2011. Cependant, je m'en tiens à l'idée que vous devriez au moins prendre en charge 1024 x 768. Dans votre conception, si vous ne répondez pas à la grande majorité de votre public potentiel, alors tout ce que vous créez est un projet de vanité.
Mon conseil est ... de découvrir quelle est la majorité (c'est-à-dire plus de 90%) de vos résolutions de visiteurs et d'assurer au moins une apparence acceptable, le plus petit dénominateur commun. Je sais que c'est pénible mais ce sont vos utilisateurs que vous devriez aborder.
Si sa conception vraiment TOUT, essayez de la concevoir fluide afin qu'elle puisse s'adapter à différentes tailles d'écran. Il existe de nombreux exemples de sites Web similaires.
Google a fait une très bonne chose avec une interface semi-fluide (j'ai utilisé le terme semi parce qu'il a quelques étapes qu'il réduit, il ne se réduit pas facilement avec toutes les tailles de navigateur) - ouvrez vos documents Google et commencez réduire la taille de la fenêtre du navigateur et voir ce qui se passe.
Il existe même des cadres pour ce type de travail que vous pouvez utiliser.