Un site Web pour plusieurs résolutions client
Je continue de penser que bien que la création d'un site Web unique pour plusieurs résolutions client ou tailles d'écran puisse être difficile, il est beaucoup plus facile à gérer que de créer un site Web distinct pour chaque appareil ou résolution.
Quelles applications de conception ou d'édition de site Web, le cas échéant, puis-je utiliser pour aider à créer du CSS spécifique ou même du balisage pour des appareils cibles d'une taille donnée?
Dreamweaver CS5 prend en charge les requêtes multimédias HTML 5 vous permettant d'utiliser des CSS spécifiques et un aperçu par résolution d'écran. C'est le seul qui me vient à l'esprit mais je n'ai jamais aimé Dreamweaver et je ne le recommanderais pas.
Un site Web unique pour plusieurs clients est certainement plus facile à gérer.
La première chose à faire est d'avoir plusieurs fichiers CSS que le navigateur récupérera en fonction de l'attribut media :
<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">
Vous pouvez adapter la disposition des éléments, leur taille et même masquer certains d'entre eux pour les petits appareils.
Si de grandes parties de votre mise en page doivent être supprimées sur de petits appareils, il est préférable de les supprimer sur le serveur pour économiser de la bande passante.
La résolution d'écran et la taille de la fenêtre peuvent être déterminées sur le client en Javascript (c'est le plus fiable, testez screen.width/screen.height et document.body.clientWidth/document.body.clientHeight), tandis que sur le serveur, vous devez principalement compter sur le HTTP_USER_AGENT en-tête (testez-le ici avec d'autres en-têtes).
Une autre technique importante consiste à abandonner l'utilisation de tableaux HTML pour la mise en page au profit de blocs flottants , qui s'adaptent mieux aux différentes résolutions d'écran ou au redimensionnement des fenêtres.
Faites également attention à la taille réelle de l'écran, car les petits appareils ont généralement une résolution beaucoup plus élevée (DPI, points par pouce) qui peut rendre les choses illisibles.
Les deux techniques doivent être combinées (côté client et côté serveur) pour obtenir les meilleurs résultats. L'exemple Responsive Web Design est impressionnant mais vous devez vraiment maîtriser les techniques pour y parvenir, et il y a encore des limites.
Je pense que cette question, même si elle est posée en raison de nouveaux appareils mobiles connectés, devrait même être envisagée pour l'ordinateur car l'utilisateur peut redimensionner la fenêtre du navigateur.
Il s'agit d'une présentation incontournable, qui couvre un manque de la façon dont beaucoup utilisent les requêtes multimédias: Repenser le Web mobile .
En un mot, les téléphones mobiles qui ne prennent pas en charge les requêtes multimédias (et il y en a beaucoup) peuvent se retrouver avec un style destiné aux navigateurs de bureau. L'approche recommandée ici, et utilisée par moi-même, commence par des styles de base pour tous, puis ajoute progressivement des styles pour les navigateurs qui prennent en charge les requêtes multimédias.
Seul CSS ne fonctionnera pas pour cela, car vous pouvez avoir une disposition très différente pour l'interface utilisateur mobile et pour PC/Mac. Une petite idée réside dans la mise en page côté serveur. Par exemple, vous devez rendre une partie de la page (grille de données, barre latérale, barre de navigation, etc.). Par exemple, vous utilisez ASP.NET comme processeur côté serveur. Ensuite, dans votre mise en page, vous écrivez:
Pour la barre de navigation:
<acme:NavBar runat="server">
<MenuItem Name="<%$Loc: News%>" />
<MenuItem Name="<%$Loc: Products%>">
<MenuItem Name="<%$Loc: Project1%>" />
<MenuItem Name="<%$Loc: Project2%>" />
</MenuItem>
<MenuItem Name="<%$Loc: Support%>" />
<MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>
Pour la grille de données:
<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>
Puis dans codebehind:
grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();
etc.
Ensuite, vous devez écrire différents rendus pour différentes résolutions (mobile/etc ...). * Pour une grande résolution, vous rendez des en-têtes triables, des moteurs de recherche, des filtres, des trieurs, du contenu défilable, des plugins JQuery, etc. * Pour une petite résolution, vous rendez juste un simple html.
J'espère que l'idée principale est claire.
Vous n'avez pas besoin de plusieurs "sites Web" pour différents clients (je ne pense pas que quiconque le fasse), mais vous devriez avoir plusieurs portails pour différents segments de visiteurs, par exemple: ordinateur de bureau/ordinateur portable, netbook/ipad/téléphones intelligents et autres mobile.
Bien que CSS vous permette de spécifier différentes feuilles de style pour différents types de périphériques, cela est problématique dans la pratique. De nombreux téléphones intelligents n'attrapent pas la feuille de style mobile ou utilisent à la fois la feuille de style mobile ET la feuille de style d'écran.
Deuxièmement, vos différents segments d'audience rechercheront des informations différentes. Par exemple, un utilisateur mobile ne sera probablement pas intéressé par la lecture de longs articles ou la visualisation d'images ou de vidéos haute résolution. Un portail séparé avec une expérience utilisateur ciblée serait donc optimal, et c'est pourquoi la plupart des services populaires proposent des portails distincts pour les utilisateurs mobiles.
Troisièmement, la maintenabilité concerne l'organisation et la simplicité plus que la quantité. Bien sûr, vous pouvez avoir une seule grande feuille de style utilisant beaucoup de hacks en cascade et de navigateur pour déchaîner votre site principal dans tous les clients. Mais cela sera probablement plus difficile à maintenir que de maintenir 2-3 feuilles de style plus simples, chacune adaptée à une classe particulière de clients.
Enfin, si votre application est correctement modularisée à l'aide de l'isolement de domaine et conçue avec une séparation des préoccupations, il devrait être assez facile de configurer de nouveaux portails personnalisés pour différentes classes d'appareils. Si vous utilisez un modèle MVC, il vous suffit d'ajouter de nouvelles vues et de continuer à utiliser les mêmes modèles et contrôleurs. Si vous concevez une application AJAX, vous pouvez même réutiliser la plupart des vues en créant des services Web.
Cela dépend de votre contenu, mais vous pouvez modulariser votre contenu.
Chaque élément de contenu peut être affiché dans un module étroit qui peut être affiché sur trois colonnes sur un écran large, pour des résolutions inférieures, vous pouvez utiliser moins de colonnes.
Un bon exemple de ceci est: http://colly.com/ Il y a trois ajustements de mise en page lorsque vous diminuez la largeur de la page. En utilisant cela comme guide pour votre propre site, vous pouvez concevoir un module et une mise en page avec 3 variantes pour répondre à chacune de ces largeurs.
Pour implémenter cela, vous pouvez avoir des modules de taille fixe (peut-être sous forme de li) dans un conteneur qui ajuste la taille. Vous pouvez ajuster la taille des conteneurs à l'aide de jquery pour détecter la largeur d'écran (et le changement de largeur), puis ajouter/supprimer une classe. Vous pouvez créer des variations sur les éléments du conteneur, par exemple: ul.product_list li et ul.product_list_wide li
Comme d'autres l'ont dit, j'utiliserais des requêtes média CSS3 pour cibler plusieurs résolutions. Selon votre site/application, cela peut ne pas être possible. Cela suppose que vous allez utiliser le même contenu pour toutes les expériences, en l'affichant simplement différemment en fonction de la taille de l'écran (ce n'est pas toujours optimal pour une expérience mobile).
Certaines ressources pour utiliser cette technique seraient:
Un article de List Apart sur le Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/
Repenser le SlideShare Web mobile: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib
JavaScript pour activer les requêtes multimédias CSS3 pour les navigateurs qui ne le prennent pas en charge nativement: http://code.google.com/p/css3-mediaqueries-js/
Une sélection de requêtes multimédias pour différents appareils et tailles: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
Quelques autres exemples: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- site web /
Malheureusement, il n'y a pas de WYSIWYG pour faire ce genre de choses - vous avez besoin des connaissances et des compétences pour pouvoir l'implémenter à la main.
Bien que je suggère contre eux, des services comme Mobify existent si vous ne vous souciez que des vues de bureau/mobile. http://mobify.me/