Le contrôle que les concepteurs savent dans le support d’impression, et désirent souvent dans le milieu de web, est tout simplement une fonction de la limitation de la page imprimée.Nous devons accepter le fait que le web n’a pas les mêmes contraintes, et la conception de cette flexibilité.Mais d’abord, nous devons «accepter le flux et le reflux des choses.»
John Allsopp, » A Dao du Web Design «
L’architecte anglais Christopher Wren, une fois dit en plaisantant que son domaine de prédilection « vise pour l’éternité», et il y a quelque chose intéressante à propos de cette formule: Contrairement au web, qui se sent souvent comme objectif pour la semaine prochaine, l’architecture est une discipline très bien définie par sa permanence.
X-Team International Pty Ltd est à la recherche d’un développeur Node.js.
la fondation d’un bâtiment définit son empreinte, qui définit son cadre, qui façonne la façade. Chaque phase du processus architectural est plus immuable, plus immuable que le dernier. décisions Creative littéralement façonnent un espace physique, définissant la façon dont les gens se déplacent à travers ses limites pendant des décennies, voire des siècles.
Travailler sur le web, cependant, est une question tout à fait différente. Notre travail est défini par sa fugacité, souvent raffiné ou remplacé dans un an ou deux. largeurs Incohérence de fenêtre, les résolutions d’écran, les préférences de l’utilisateur, et les polices installées de nos utilisateurs ne sont que quelques-uns des actifs incorporels nous négocions lorsque nous publions notre travail, et au fil des ans, nous sommes devenus incroyablement habiles à le faire.
Mais le paysage est en train de changer, peut – être plus rapidement que nous le souhaiterions. La navigation mobile devrait dépasser l’ accès de bureau à base dans les trois à cinq années . Deux des trois dominantes consoles de jeux vidéo ont des navigateurs Web (et l’ un d’entre eux est tout à fait excellent). Nous concevons pour les souris et les claviers, pour les claviers T9, pour les contrôleurs de jeux portables, pour les interfaces tactiles. En bref, nous sommes confrontés à un plus grand nombre de dispositifs, les modes d’entrée, et les navigateurs que jamais auparavant.
Au cours des dernières années, j’ai rencontré avec plus d’ entreprises qui demandent « un site iPhone » dans le cadre de leur projet. Il est une expression intéressante: À première vue, bien sûr, il parle à la qualité de WebKit mobile comme un navigateur, ainsi que d’ un cas d’affaires puissant pour penser au – delà du bureau. Mais en tant que concepteurs, je pense que nous prenons souvent le confort dans ces exigences explicites, car ils nous permettent de compartimenter les problèmes devant nous. Nous pouvons mettre en quarantaine l’expérience mobile sur différents sous – domaines , des espaces distincts et séparés de « le site non-iPhone. » Mais quelle est la prochaine? Un site Web iPad? Un site N90? Pouvons – nous continuer vraiment engager à soutenir chaque nouvel agent utilisateur avec sa propre expérience sur mesure? À un certain moment, cela commence à se sentir comme un jeu à somme nulle. Mais comment pouvons – nous et nos conceptions-adapter?
Une fondation souple
Prenons un design par exemple . J’ai construit une page simple pour un magazine hypothétique; il est une disposition en deux colonnes simple construit sur une grille fluide , avec pas quelques images flexibles poivré partout. En tant que partisan de longue date des dispositions non-fixe, je me suis longtemps senti qu’ils étaient plus «preuve avenir» simplement parce qu’ils étaient la disposition agnostique. Et dans une certaine mesure, cela est vrai: des modèles plus souples font aucune hypothèse sur la largeur d’une fenêtre de navigateur, et d’ adapter magnifiquement à des dispositifs qui ont des modes portrait et paysage.
images énormes sont énormes. Notre mise en page, flexible si elle est, ne répond pas bien aux changements dans la résolution ou la taille de la fenêtre.
Mais pas de conception, fixe ou fluide, évoluer de manière transparente au – delà du contexte pour lequel il a été prévu à l’ origine. Les exemple conception échelles parfaitement bien que la fenêtre du navigateur redimensionne, mais les points de tension apparaissent rapidement à des résolutions inférieures. Lorsqu’on regarde au viewport inférieur à 800 × 600, l’illustration derrière le logo devient rapidement recadrée, le texte de navigation peut envelopper d’une manière inconvenante, et les images le long du fond devient trop compact pour apparaître lisible. Et il n’y a pas que l’extrémité inférieure du spectre de la résolution qui est affectée: lors de la visualisation de la conception sur un écran large, les images se développent rapidement à des tailles difficiles à manier, évincer le contexte environnant.
En bref, notre conception flexible fonctionne assez bien dans le contexte de bureau centrée pour lequel il a été conçu, mais pas optimisé pour prolonger bien au-delà.
Devenir sensible
Récemment, une discipline émergente appelée « l’ architecture réactive » a commencé à se demander comment les espaces physiques peuvent répondre à la présence de personnes qui passent à travers eux. Grâce à une combinaison de la robotique embarqués et matériel de traction, les architectes expérimentent des installations d’art et structures murales qui se courbent, flex, et d’ élargir ainsi les foules approchent. Les détecteurs de mouvement peuvent être couplés avec des systèmes de contrôle du climat pour ajuster l’éclairage de la température et la température ambiante d’une pièce car il se remplit avec les gens. Les entreprises ont déjà produit « technologie de verre intelligent » qui peut automatiquement devenir opaque lorsque les occupants d’une pièce atteignent un certain seuil de densité, en leur donnant une couche supplémentaire de la vie privée.
Dans leur livre de l’ Architecture Interactive , Michael Fox et Miles Kemp décrit cette approche plus souple comme «un système multi-boucle dans laquelle on entre dans une conversation; un échange continu et constructif informations « mine d’accent, comme je pense que ce une distinction puissant subtile:. plutôt que de créer des espaces immuables immuables qui définissent une expérience particulière, ils suggèrent habitant et la structure peuvent et doivent-mutuellement influencer mutuellement.
Ceci est notre façon d’ avancer. Plutôt que d’ adapter des conceptions déconnectées les unes d’un nombre toujours croissant de dispositifs web, nous pouvons les traiter comme des facettes de la même expérience. Nous pouvons concevoir pour une expérience visuelle optimale, mais les technologies dans nos conceptions basées sur des normes embed pour les rendre non seulement plus flexible, mais plus adapté aux médias qui les rend. En bref, nous avons besoin de pratiquer Responsive Web Design . Mais comment?
Rencontrez la requête des médias
Depuis les jours de CSS 2.1 , nos feuilles de style ont bénéficié d’une certaine prise de conscience de l’ appareil par le biais des types de médias . Si vous avez déjà écrit une feuille de style d’impression , vous êtes déjà familier avec le concept:
<link rel= »stylesheet » type= »text/css » href= »core.css »
media= »screen » />
<link rel= »stylesheet » type= »text/css » href= »print.css »
media= »print » />
Dans l’espoir que nous serions concevons plus de pages imprimés parfaitement formatés, le CSS spécifications nous a fourni une multitude de types de supports acceptables , chacun conçu pour cibler une classe spécifique de dispositif prêt pour le Web. Mais la plupart des navigateurs et des dispositifs jamais vraiment embrassé l’esprit de la spécification, ce qui laisse de nombreux types de médias mis en œuvre imparfaitement , ou tout à fait ignorés.
Heureusement, le W3C a créé des requêtes des médias dans le cadre du CSS3 cahier des charges, l’ amélioration sur la promesse de types de médias. Une requête multimédia nous permet de cibler non seulement certaines classes de périphériques, mais en fait inspecter les caractéristiques physiques du dispositif de rendu notre travail. Par exemple, suite à la hausse récente de WebKit mobile, les demandes des médias sont devenus une technique côté client populaire pour fournir une feuille de style adaptée à l’iPhone, les téléphones Android, et leurs semblables. Pour ce faire, nous pourrions intégrer une requête dans une linkde feuille de style ed mediaattribut:
<link rel= »stylesheet » type= »text/css »
media= »screen and (max-device-width: 480px) »
href= »shetland.css » />
La requête contient deux composantes:
- un type de support ( screen), et
- la requête réelle enfermée entre parenthèses, contenant un particulier fonctionnalité de média ( max-device-width) pour inspecter, suivi de la valeur cible ( 480px).
En clair, nous demandons l’appareil si sa résolution horizontale ( max-device-width) est inférieure ou égale à 480px. Si le test réussit, en d’ autres termes, si nous regarder notre travail sur un appareil petit écran comme l’iPhone-alors le dispositif va charger shetland.css. Sinon, l’ linkest ignoré complètement.
Les concepteurs ont expérimenté avec des configurations de résolution consciente dans le passé, la plupart du temps compter sur JS solutions axées sur l comme un excellent script de Cameron Adams . Mais la spécification de la requête des médias offre une multitude de fonctionnalités multimédias qui dépasse largement la résolution de l’ écran, élargissant considérablement le champ d’application de ce que nous pouvons tester avec nos requêtes. De plus, vous pouvez tester la valeur des propriétés multiples dans une seule requête en les enchaînant avec le andmot – clé:
<link rel= »stylesheet » type= »text/css »
media= »screen and (max-device-width: 480px) and (resolution: 163dpi) »
href= »shetland.css » />
En outre, nous ne sommes pas limités à intégrer les demandes des médias dans notre links. Nous pouvons les inclure dans notre CSS soit dans le cadre d’une @mediarègle:
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Ou dans le cadre d’une @importdirective:
@import url(« shetland.css ») screen and (max-device-width: 480px);
Mais dans chaque cas, l’effet est le même: Si l’appareil passe le test mis en avant par notre requête des médias, le correspondant CSS est appliqué à notre balisage. Requêtes des médias sont, en bref, les commentaires conditionnels pour le reste d’ entre nous. Plutôt que de cibler une version spécifique d’un navigateur spécifique, nous pouvons les questions chirurgicalement correctes dans notre mise en page comme il échelles au – delà de sa première, la résolution idéale.
Adapter, répondre, et à surmonter
Tournons notre attention sur les images à la base de notre page. Dans leur mise en page par défaut, le correspondant CSS ressemble actuellement à ceci:
.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */
width: 31.121642969984202211%; /* 197px / 633px */
}li#f-mycroft,
li#f-winter {
margin-right: 0;
}
J’ai omis un certain nombre de propriétés typographiques pour se concentrer sur la mise en page: Chaque .figureélément est de taille à peu près un tiers de la colonne contenant, avec la marge de droite à zéro pour les deux images à la fin de chaque ligne ( li#f-mycroft, li#f-winter). Et cela fonctionne assez bien, jusqu’à ce que la fenêtre est soit sensiblement plus petite ou plus large que notre design original. Avec les requêtes des médias, nous pouvons appliquer spotfixes spécifiques résolution, adapter notre conception pour mieux répondre aux changements dans l’affichage.
Tout d’ abord, nous allons linéariser notre page une fois que la fenêtre tombe en dessous d’ un certain seuil de résolution-dire, 600px. Donc , au fond de notre feuille de style, nous allons créer un nouveau @mediabloc, comme suit:
@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}
Si vous affichez notre page mise à jour dans un navigateur de bureau moderne et de réduire la taille de la fenêtre ci – dessous 600px, la requête des médias désactive les flotteurs sur les principaux éléments de la conception, l’ empilage de chaque bloc au – dessus de l’autre dans le flux de documents. Donc , notre conception miniaturisée se dessine bien, mais les images ne toujours pas l’ échelle vers le bas que intelligemment. Si l’ on introduit une autre requête des médias, nous pouvons modifier leur disposition en conséquence:
@media screen and (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */
} li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}
Nos chiffres peuvent changer en réponse leur disposition pour mieux répondre à petits écrans .
Ne vous occupez pas les pourcentages inesthétiques; nous avons simplement recalculant les largeurs de la grille du fluide pour tenir compte de la mise en page nouvellement linéarisé. En bref, nous allons passer d’une disposition en trois colonnes à une disposition en deux colonnes lorsque la largeur de la fenêtre tombe en dessous 400px, ce qui rend les images plus important.
Nous pouvons effectivement prendre la même approche pour les affichages à écran large, aussi. Pour de plus grandes résolutions, nous pourrions adopter un traitement de six à travers nos images, en les plaçant tous dans la même ligne :
@media screen and (min-width: 1300px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 13.902053712480252764%; /* 88px / 633px */
}
}
Maintenant , nos images travaillent magnifiquement aux deux extrémités du spectre de la résolution , l’ optimisation de leur mise en page à des changements dans la largeur de la fenêtre et la résolution de l’ appareil même.
En spécifiant un plus large min-widthdans une nouvelle requête des médias, nous pouvons changer nos images en une seule mise en page de la ligne .
Mais c’est seulement le début. Travaillant à partir des requêtes des médias , nous avons intégré dans notre CSS , nous pouvons modifier beaucoup plus que la mise en place de quelques images: nous pouvons introduire de nouvelles, mises en page de remplacement accordés à chaque gamme de résolution, peut – être rendre la navigation plus important dans une vue panoramique, ou le repositionner au- dessus du logo sur les plus petits écrans.
En concevant en réponse, nous pouvons non seulement linéariser notre contenu sur des appareils plus petits, mais aussi d’ optimiser sa présentation à travers une gamme d’écrans .
Mais une conception sensible ne se limite pas à des changements de mise en page. Les requêtes des médias nous permettent de pratiquer quelques ajustements incroyablement précis que nos pages se remodèlent: nous pouvons augmenter la zone cible sur les liens pour les petits écrans, mieux se conformer à la loi de Fitts sur les appareils tactiles; afficher ou masquer des éléments qui pourraient améliorer la navigation d’une page sélective; on peut même pratiquer la composition sensible à modifier progressivement la taille et de premier plan de notre texte, l’ optimisation de l’expérience de lecture pour l’affichage fournissant.
QUELQUES NOTES TECHNIQUES
Il convient de noter que les requêtes des médias bénéficient d’un soutien incroyablement robuste parmi les navigateurs modernes. Les navigateurs de bureau tels que Safari 3+, Chrome, Firefox 3.5+ et Opera 7+ tous analysent nativement les requêtes des médias, comme le font les navigateurs mobiles les plus récents tels que Opera Mobile et WebKit mobile. Bien sûr, les anciennes versions de ces navigateurs de bureau ne prennent pas en charge les requêtes des médias. Et tandis que Microsoft est engagé à l’ appui de la requête des médias dans IE9 , Internet Explorer ne propose pas actuellement une implémentation native.
Toutefois, si vous êtes intéressé à mettre en œuvre l’héritage support du navigateur pour les requêtes des médias, il y a une doublure argentée JavaScript teinté:
- Un plugin jQuery à partir de 2007 offre peu de soutien de la requête des médias limitée, la mise en œuvre que les min-widthet max-widthpropriétés des médias lorsqu’il est attaché à différents linkéléments.
- Plus récemment, CSS3-mediaqueries.js a été libéré, une bibliothèque qui promet de «faire IE 5 +, Firefox 1+ et Safari 2 transparente analyser, tester et appliquer CSS3médias Requêtes » lorsqu’il est inclus par @mediablocs. Bien que très bien une version 1.0, je l’ ai personnellement trouvé qu’il était très robuste, et je prévois de regarder son développement.
Mais si vous utilisez JavaScript ne fait pas appel, qui est parfaitement compréhensible. Cependant, cela renforce le cas pour la construction de votre mise en page au sommet d’ une grille souple , assurant votre conception bénéficie d’une certaine souplesse dans les médias navigateurs et appareils requête aveugle.
La voie à suivre
grilles fluides, images flexibles, et les requêtes des médias sont les trois ingrédients techniques pour la conception web réactif, mais il exige aussi une autre façon de penser. Plutôt que de mettre en quarantaine notre contenu dans des expériences disparates, spécifiques à l’appareil, on peut utiliser des requêtes de médias pour améliorer progressivement notre travail dans différents contextes de visualisation. Cela ne veut pas dire qu’il n’y a pas une analyse de rentabilisation pour les sites distincts orientés vers des dispositifs spécifiques; par exemple, si les objectifs de l’utilisateur pour votre site mobile sont de portée plus limitée que son équivalent de bureau, servant alors un contenu différent à chaque pourrait être la meilleure approche.
Mais ce genre de pensée de conception n’a pas besoin d’être notre défaut. Maintenant plus que jamais, nous concevons le travail destiné à être vu le long d’un gradient de différentes expériences. Responsive Web Design nous offre une voie à suivre, enfin nous permettre de «conception pour le flux et le reflux des choses. »
