Les 25 meilleurs sites Web réactifs
En 2012, la conception de sites Web réactifs s'est vraiment généralisée. Deux ans après L'article fondateur d'Ethan Marcotte sur A List Apart , ce n'était plus juste un concept. Nous avons demandé à certains des principaux phares de site Web adaptatif - vous pouvez trouver la liste à la fin de l'article - pour choisir les meilleurs sites Web réactifs lancés au cours des 12 derniers mois, et voici ce qu'ils ont proposé.
C'est un mélange impressionnant, allant de projets personnels qui sont libres d'errer sans qu'un client ne respire dans le cou au travail client innovant pour Microsoft, Disney, Currys et Starbucks et à des emplois internes de la BBC, The Prochain Web et temps. Les voici, par ordre alphabétique ...
01. Ableton
«Jamais je n'ai vu Futura utilisé avec autant de courage! s'exclame le concepteur, le conférencier et l'auteur Actions Elliot Jay de Edenspiekermann travail de développeur de logiciels de musique basé à Berlin Ableton . «Cela fonctionne, cependant, combiné avec des images audacieuses et une palette de couleurs vives.
Stéphanie Rieger , designer et copropriétaire de Yiibu , un petit cabinet de conseil en design mobile basé à Édimbourg, est d'accord: «C'est un site magnifique, amusant et délicieusement adapté à la marque. Certaines parties du site sont un peu lourdes mais étant donné le public, la nature de la marque et la nécessité d'incorporer de la musique et de la vidéo, je pense qu'ils ont fait un travail formidable. Assurez-vous de rechercher les nombreuses petites touches de conception créatives (et pratiques) - comme la rotation des étiquettes de colonne sur un tableau de comparaison de logiciels pour mieux s'adapter aux petits écrans.
02. Adobe et HTML
' Ce site, qui présente les produits Web d'Adobe , est en fait plus un mise en page adaptative plutôt qu'un véritable design responsive '', explique le concepteur et développeur Stephen Hay . «Les performances pourraient être considérablement améliorées, et je n'aime pas que la navigation occupe la majeure partie de l'espace en haut de la page sur mobile.
La raison pour laquelle je mentionne ce site ici est que la mise en page adaptative et le contenu signalent qu'Adobe, le géant des logiciels de conception d'impression, commence à reconnaître le Web moderne et les besoins de ses concepteurs. Adobe, avec ses racines de conception, a l'opportunité de transformer ce site en un design réactif complet et attrayant sur le plan graphique.
03. Un événement à part
'Le fraîchement repensé Un événement à part est non seulement magnifique mais aussi merveilleusement conçu », dit Tim Kadlec , développeur web et auteur de Mettre en œuvre une conception réactive . «[Les développeurs] utilisent les icônes SVG quand ils le peuvent, et se rabattent sur les PNG s'ils le doivent.
Les images sont chargées paresseusement lorsqu'elles apparaissent. Par exemple, lorsque vous faites défiler vers le bas une page d'événements vous pouvez voir les images des haut-parleurs s'estomper subtilement. Tout cela en plus d'un design attrayant et épuré!
04. BBC News
'Le meilleur site responsive de 2012 a été le Site Web mobile de BBC News ,' dit Paul Robert Lloyd , designer chez À gauche et auteur de la colonne Responsive mensuelle de .net. `` Bien qu'il ne s'adapte pas encore aux navigateurs de bureau en termes de mise en page, il est réactif dans le vrai sens du terme.
«Conçu avec une mentalité de mobile d'abord, il s'adapte à merveille aux différentes caractéristiques des appareils. C'est un exemple fantastique d'amélioration progressive. Il y a beaucoup de discussions autour des images responsives, mais l'approche de la BBC est tout à fait pragmatique. Le balisage ne fait référence qu'à une seule image, celle de l'article principal, et le chargement conditionnel signifie que seuls les appareils plus performants reçoivent les images hautement optimisées pour d'autres articles. Le site est non seulement accessible à partir de n'importe quel appareil, mais aussi extrêmement rapide.
«L'année prochaine, j'aimerais que l'accent soit mis davantage sur la performance que sur la conception visuelle et la mise en page. À cet égard, le site mobile de BBC News est un excellent exemple à suivre pour les autres.
05. Construire 2012
`` L'une de mes parties préférées de l'année est de voir ce qu'Andy McMillan et Kyle Meyer proposent pour le nouveau Construire le site de la conférence , 's'enthousiasme Reagan Ray , concepteur principal et un tiers de Paravel .
«Ils sont devenus réactifs pour la version 2012 et je pense que c'est leur meilleur effort à ce jour.
06. Table des matières
' Contenu magazine peut avoir un avantage injuste avec Ethan Marcotte lui-même en tant que directeur créatif - mais personne n'a dit que mes choix devaient être équitables '', dit Mat Marquis , designer / développeur travaillant chez Groupe de filament à Boston et fondateur et président du Groupe communautaire Responsive Images pour le W3C.
«Contents possède une belle typographie et un design global qui garde son contenu - comme on pouvait s'y attendre - au premier plan et au centre de n'importe quelle taille. La conception est soutenue par des illustrations par numéro qui entourent la copie de différentes manières en fonction du point d'arrêt. Les illustrations mettent en valeur le design, mais ne servent jamais de distraction. C’est un réel plaisir à lire, et c’est vraiment ce que signifie ce truc de «conception Web». »
07. Astuces CSS
'Encore une fois: choisir un site avec le nom de Chris Coyier dessus se sent un peu comme de la triche, mais c'est juste - le gars est une bête, et il a fait un sacré boulot avec cette refonte », rigole Mat Marquis. «Chris gère une quantité insensée d'informations utiles sur son site et il le fait avec un design qui est non seulement logique et utilisable à chaque taille d'écran, mais qui a une tonne de personnalité.
'Une mention honorable va à Chris' codepen.io (pas encore totalement réactif lors de l'édition) qui est un outil incroyablement utile pour créer des démos rapides et des cas de test. Il y a un travail incroyable là-dessus. '
08. Currys
' Currys peut ne pas avoir ce que nous considérons comme le niveau de conception de beaucoup d'agences et de sites personnels, mais je le choisis pour son importance pour l'adoption plus large des techniques de conception réactive. C'est le premier site de commerce électronique à grande échelle que j'ai vu qui adopte une conception réactive '', explique James Young , directeur créatif chez Offroadcode .
`` Il offre une bonne expérience sur une gamme d'appareils tout en traitant une quantité massive de contenu et de produits de toutes formes et tailles, et comprend un processus d'achat facile à utiliser - le tout dans une seule base de code qui a clairement été bien considérée par le Équipe Web Currys. '
09. dConstruct 2012
Outre l'incroyable gamme de haut-parleurs, le dConstruire site en lui-même est une expérience réactive magnifiquement conçue », déclare Je suis Callahan , président d'une petite agence basée dans l'Ohio Sparkbox .
«Mon détail préféré du site est la navigation. Notez l'iconographie ajoutée pour une expérience de fenêtre plus petite. Cela montre qu'une réelle attention a été accordée à la zone cible tactile et signifie une valeur implicite [placée sur] les utilisateurs qui consultent le site sur des appareils plus petits - une mentalité de mobile d'abord. Bien joué @clearleft ! '
10. Disney.com
'Lorsqu'un site avec la complexité médiatique de Disney est devenu réactif, il a vraiment montré la validité de l'approche de diffusion de contenu multimédia sur le Web », se souvient Scott Jehl , web designer / développeur chez Filament Group. `` Le design sobre et épuré du site met en évidence la riche imagerie des films et de la télévision Disney qui peuvent être visionnés en ligne sur le site, et une bonne utilisation d'Ajax et history.pushState permet des transitions de page subtiles et non discordantes.
«Le site offre également une belle interactivité contextuelle, comme des carrousels gestuels pour les appareils tactiles et une navigation hors canevas poussant les pages sur de petits écrans.
11. Fray, numéro 3
' Numéro 3 de la mêlée , «le magazine de narration original du Web», était mon design réactif préféré que j'ai vu cette année, et peut-être mon préféré », se souvient Scott Jehl. `` En plus de sa belle conception de couverture réactive où les éléments de conception de l'illustration de la couverture sont réutilisés tout au long de la mise en page, chacun des articles du numéro a son propre design personnalisé unique dirigé par l'art, un peu comme nous le voyons dans les magazines imprimés, mais moins fréquemment. sur le Web.
«De nombreuses mises en page intègrent du CSS finement réglé pour un bel effet, comme le titre et la signature biaisés de l'article« Accolades », et des guillemets décalés tout au long. Juste un avertissement: le sujet du site est destiné aux adultes.
12. Gov.uk
Stephen Hay dit: `` Le Gov.uk la conception est visuellement simple (pratiquement pas d'images), mais son intention est claire: vous aider à trouver rapidement des informations. Pour les sites Web gouvernementaux, ce n'est pas une tâche facile. J'adore le fait que ce site n'est pas seulement réactif, mais un exemple parfait de la façon dont un contenu et une structure bien pensés peuvent conduire à une expérience utilisateur plus claire, quel que soit l'appareil utilisé.
«Il est si important que les gouvernements présentent leurs informations de manière accessible; Je suis sûr que la simplicité de ce site sera un exemple que d'autres organisations gouvernementales suivront.
13. Statut Heroku
«Heroku est un service de déploiement d'applications Web, donc ce site est orienté vers un public très technique», déclare Scott Jehl à propos de son deuxième choix. ' Site de statut de Heroku est simplement un endroit pour surveiller la disponibilité du service, avec des notifications d'état pour tous les incidents en cours et une chronologie des rapports.
«La présentation sur petit écran est conservatrice, mais très fonctionnelle et sémantiquement riche, avec une présentation de liste bien conçue. Cependant, dans des fenêtres plus larges, la chronologie se transforme en une visualisation de données verticale où les incidents sont encadrés et liés à des points temporels via des lignes courbes HTML5 dessinées sur un canevas, ce qui rend le contenu plus attrayant.
14. Lotta Nieminen
' Le site intelligent de Lotta encourage l'exploration, car les côtés gauche et droit de l'écran taquinent le contenu des sections adjacentes », s'enthousiasme Elliot Jay Stocks.
`` Je m'attendais à moitié à ce que cela se brise à différentes largeurs, mais le comportement reste cohérent à tout moment et combine les requêtes multimédias avec JavaScript pour empiler et redimensionner judicieusement les colonnes individuelles. ''
15. Microsoft
'Le nouveau Microsoft Le site est passionnant pour moi pour de nombreuses raisons », révèle Ben Callahan. «Voir un géant comme Microsoft se lancer dans la conception de sites Web réactifs de cette manière montre vraiment à quel point nous avons progressé ces deux dernières années. Le design embrasse clairement le style Metro et nous donne un niveau de propreté et d'espace qui manque sur la plupart des sites d'entreprise. Il existe également une quantité importante de navigation, ce qui peut être un véritable défi pour rendre utilisable dans un large éventail de fenêtres et de modèles d'interaction. J'adore le fait que les listes déroulantes sont derrière Cliquez sur ou toucher [événements] par opposition à :flotter . Je pense que nous en verrons beaucoup plus dans un proche avenir, même avec des résolutions plus importantes. Bien joué @paravelinc ! '
Reagan Ray, qui a travaillé sur le site, déclare: `` Trent et Dave sont trop modestes pour taper sur le cor Paravel, alors je le ferai. Nous étions heureux de jouer un petit rôle dans une période aussi passionnante pour Microsoft. Je pense que c'est un excellent exemple d'une grande entreprise adoptant un design réactif.
16. Polygone
' Polygone est un site de jeu réactif incroyablement riche qui met ses grands frères ( IGN , Gamespot , et ainsi de suite) à la honte, 'louanges Dave Rupert , développeur principal de Paravel et co-animateur de ShopTalk avec Chris Coyier. `` Les grands graphismes font picoter mon joueur. Les poteaux intérieurs sont un mélange étonnant de direction artistique et d'architecture réactive.
17. Émeute
Elliot Jay Stocks commente: `` Des sites simples, centrés et d'une page peuvent sembler se traduire facilement en design réactif, mais il faut des compétences, de la considération et un œil vif pour que tout se réajuste de manière transparente. Émeute c'est exactement ce que fait le site.
18. Cravates maigres
'Bien que je n'en possède pas cravates fines , à part une poignée de restes des années 80 rangés quelque part dans un bac de stockage, je pense que ce site est magnifiquement exécuté », déclare Ben Callahan. «Il est également encourageant de voir des techniques réactives utilisées sur des sites plus complexes: dans ce cas, une expérience de commerce électronique. La navigation sur ce site est unique dans toutes les résolutions de la fenêtre d'affichage, mais fonctionne exceptionnellement bien sur la petite extrémité du spectre. Son caractère visuel est parfaitement sensible pour un magasin de cette taille et il reste utilisable malgré l'utilisation de :flotter sur les appareils tactiles. Bien joué @falkowski ! '
19. Starbucks
'Le réactif Starbucks.com c'est génial, mais ce qui nous inspire encore plus, c'est le Web guide de style qui vient avec, ' Trent Walton , souligne le fondateur de Paravel. «Il transmet bien mieux la puissance de la mise en page fluide / réactive qu'un .psd ou .pdf.»
20. Tattly
«Je viens d’inclure un temps perdu dangereux dans cette liste», prévient Mat Marquis à propos de ce site de tatouage temporaire, «je vous présente donc mes excuses à vous et / ou à votre patron. J'ai passé un temps embarrassant à parcourir les créations sur Tattly sur différents appareils, et je ne suis jamais en manque d'une expérience que je ne peux obtenir qu'à un certain point d'arrêt. Ils ont fait un excellent travail en veillant à ce que leur site se traduise bien par une vaste gamme de tailles d'appareils / de fenêtres, et peut-être plus important encore, ils me fournissent un moyen infaillible de me faire passer pour un dur à cuire. Tu sais, pour quelques jours à la fois, en tout cas.
21. Le prochain Web
«Bien que je ne sois toujours pas fan de la barre latérale collante, ce site est assez incroyable», admet Dave Rupert. «Les espaces et la typographie créent un environnement vraiment détendu. Je suis agréablement soulagé lors de ma visite TNW sur une tablette: il offre une sensation agréable et une bonne expérience de lecture.
22. La forme du design
«La vision de Frank Chimero sur une expérience de lecture réactive est inspirante à tous les niveaux», déclare Trent Walton. 'Sa version en ligne de La forme du design est une joie à lire. La navigation discrète dans les chapitres fonctionne bien et la requête multimédia taille de police la mise à l'échelle garde tout merveilleusement proportionnel.
23. Heure
'Suivant l'exemple du Boston Globe, Temps a fait sa marque dans le monde des sites d'information réactifs avec sa mise en œuvre », applaudit Stephen Hay. `` Le fait qu'il y ait un site Web d'actualités de moins dans le monde qui nous offre un lien vers `` le site Web complet '' sur mobile est déjà suffisant, mais le site a vraiment l'air bien sur mobile: c'est l'identité Time de part en part. Une partie du texte peut être un peu petite sur certains appareils, mais les développeurs ont laissé la mise à l'échelle: toujours une bonne idée. Certaines mesures pourraient être prises pour améliorer les performances, comme la diffusion d'images mises à l'échelle [mais] néanmoins, c'est un pas dans la bonne direction ».
24. Pixelworkers unis
'Je suis fan de la simplicité audacieuse de Pixelworkers unis et la disposition en grille pleine et le traitement de navigation pour les petits écrans fonctionnent bien », déclare James Young. «Comme pour le site Currys, il s'agit d'un site de commerce électronique qui facilite l'accomplissement de ma tâche principale - acheter des goodies - sur n'importe quel appareil.
`` C'est dommage que vous sautiez sur Shopify pour finaliser votre achat, et j'aimerais voir au moins une page de fin de paiement de marque bientôt, mais il est toujours très facile d'acheter vos t-shirts. ''
«Le commerce électronique réactif est difficile, mais les Pixelworkers semblent l'avoir compris», ajoute Dave Rupert. «Excellente page d'accueil, superbes pages de produits, bon flux de paiement. Si vous cherchez à créer un merveilleux site de commerce électronique réactif, c'est votre barre.
25. University of Notre Dame
'J'aime certaines des choses University of Notre Dame se passe sous le capot », se réjouit Tim Kadlec. «Il utilise RESS pour réduire le poids des pages sur les petits écrans. Il utilise également la géolocalisation pour améliorer la fonction Campus Tour. Si le site détecte que vous êtes sur le campus, il identifie les emplacements les plus proches et vous propose des itinéraires à pied. C'est un moyen utile d'utiliser le contexte de l'utilisateur et les capacités de l'appareil pour améliorer l'expérience.
Un grand merci à tous nos contributeurs pour avoir sélectionné leurs sites responsive préférés de 2012 pour cet article: Ben Callahan, Elliot Jay Stocks, Tim Kadlec, Paul Robert Lloyd, Mat Marquis, Scott Jehl, Stephanie Rieger, Stephan Hay, James Young et le tout de Paravel: Trent Walton, Dave Rupert et Reagan Ray.
Nous espérons que vous avez été inspiré pour consulter certains de ces sites. Dites-nous ce que vous pensez de notre sélection dans les commentaires, et quels sites étaient vos propres favoris cette année.
Aimait ça? Lisez-les!
- Brillant Tutoriel Wordpress sélection
- Le guide ultime pour concevoir le meilleurs logos
- Le meilleur gratuit polices Web pour les designers
- Découvrez les prochaines étapes Réalité augmentée
- Télécharger textures gratuites : haute résolution et prêt à l'emploi maintenant
