Die 25 am besten reagierenden Websites
Im Jahr 2012 wurde Responsive Web Design wirklich zum Mainstream. Zwei Jahre später Ethan Marcottes wegweisender Artikel über A List Apart Es war nicht mehr nur ein Konzept. Wir haben einige der führenden Lichter in gefragt sich anpassendes Webdesign - Sie finden die Liste am Ende des Artikels - um die am besten reagierenden Websites auszuwählen, die in den letzten 12 Monaten gestartet wurden, und hier ist, was sie sich ausgedacht haben.
Es ist eine beeindruckende Mischung, die von persönlichen Projekten reicht, die frei herumlaufen können, ohne dass ein Kunde den Hals runter atmet, über innovative Kundenarbeit für Microsoft, Disney, Currys und Starbucks bis hin zu einigen zukunftsfreundlichen Inhouse-Jobs der BBC, The Nächstes Web und Zeit. Hier sind sie in alphabetischer Reihenfolge ...
01. Ableton
'Ich habe Futura noch nie so tapfer gesehen!' ruft Designer, Sprecher und Autor aus Elliot Jay Stocks von Edenspiekermann Arbeit für den Berliner Musiksoftware-Entwickler Ableton . 'Es funktioniert jedoch in Kombination mit kräftigen Bildern und einer lebendigen Farbpalette.'
Stephanie Rieger , Designer und Mitinhaber von Yiibu , eine kleine Beratungsfirma für mobiles Design mit Sitz in Edinburgh, stimmt zu: 'Dies ist eine wunderschöne, unterhaltsame und entzückende Website auf der Marke. Teile der Website sind etwas schwer, aber angesichts des Publikums, der Art der Marke und der Notwendigkeit, Musik und Videos zu integrieren, denke ich, dass sie einen großartigen Job gemacht haben. Achten Sie darauf, dass Sie nach den vielen kleinen kreativen (und praktischen) Designelementen suchen - wie dem Drehen von Spaltenbeschriftungen auf einer Software-Vergleichstabelle, um kleinere Bildschirme besser anzupassen. '
02. Adobe & HTML
' Diese Website zeigt die webbezogenen Produkte von Adobe ist eigentlich eher ein adaptives Layout eher als ein wirklich ansprechendes Design “, erklärt Designer und Entwickler Stephen Hay . 'Die Leistung könnte erheblich verbessert werden, und ich mag es nicht, wenn die Navigation auf Mobilgeräten den größten Teil des Platzes oben auf der Seite einnimmt.
Der Grund, warum ich diese Website hier erwähne, ist, dass sowohl das adaptive Layout als auch der Inhalt signalisieren, dass Adobe, ein Gigant der Druckdesignsoftware, das moderne Web und die Bedürfnisse seiner Designer allmählich erkennt. Adobe mit seinen Design-Wurzeln hat die Möglichkeit, diese Website in ein grafisch ansprechendes, vollständig ansprechendes Design zu verwandeln. '
03. Ein Ereignis für sich
'Die frisch gestaltete Ein Ereignis für sich ist nicht nur wunderschön, sondern auch wunderbar verarbeitet “, sagt er Tim Kadlec , Webentwickler und Autor von Responsive Design implementieren . '[Die Entwickler] verwenden SVG-Symbole, wenn sie können, und greifen bei Bedarf auf PNGs zurück.
Bilder werden beim Laden faul geladen. Zum Beispiel, wenn Sie nach unten scrollen eine Ereignisseite Sie können sehen, wie die Lautsprecherbilder subtil eingeblendet werden. All dies plus ein ansprechendes und klares Design! '
04. BBC News
'Die am besten reagierende Seite des Jahres 2012 war die Mobile Website von BBC News , 'Sagt Paul Robert Lloyd , Designer bei Clearleft und Autor der monatlichen Responsive-Kolumne von .net. 'Obwohl es in Bezug auf das Layout noch nicht auf Desktop-Browser skaliert werden kann, reagiert es im wahrsten Sinne des Wortes.
'Entwickelt mit einer Mobile-First-Mentalität, skaliert es, um verschiedene Geräteeigenschaften auf wundervolle Weise zu erfüllen. Es ist ein fantastisches Beispiel für eine progressive Verbesserung. Es gibt viele Diskussionen über reaktionsschnelle Bilder, aber der Ansatz der BBC ist äußerst pragmatisch. Das Markup verweist nur auf ein einzelnes Bild, das für die Überschriftenstory verwendet wird, und das bedingte Laden bedeutet, dass nur leistungsfähigere Geräte die hochoptimierten Bilder für andere Storys empfangen. Die Seite ist nicht nur von jedem Gerät aus zugänglich, sondern auch unglaublich schnell.
'Im nächsten Jahr würde ich mir einen stärkeren Fokus auf Leistung gegenüber visuellem Design und Layout wünschen. In dieser Hinsicht ist die mobile Website von BBC News ein gutes Beispiel für andere. '
05. Build 2012
„Einer meiner Lieblingsteile des Jahres ist es, zu sehen, was Andy McMillan und Kyle Meyer für das Neue einfallen lassen Erstellen Sie eine Konferenzseite , schwärmt Reagan Ray , leitender Designer und ein Drittel von Paravel .
'Sie haben auf die Version 2012 reagiert und ich denke, es ist ihre bisher beste Anstrengung.'
06. Inhalt
' Inhaltsmagazin Vielleicht hat Ethan Marcotte selbst einen unfairen Vorteil als Creative Director - aber niemand hat gesagt, dass meine Entscheidungen fair sein müssen “, sagt er Mat Marquis , Designer / Entwickler bei Filamentgruppe in Boston und Gründer und Vorsitzender der Responsive Images Community-Gruppe für den W3C.
'Der Inhalt zeichnet sich durch eine wunderschöne Typografie und ein Gesamtdesign aus, bei dem der Inhalt - wie zu erwarten - in jeder Größe vorne und in der Mitte bleibt. Das Design wird durch Abbildungen pro Ausgabe unterstützt, die die Kopie je nach Haltepunkt unterschiedlich umschließen. Die Abbildungen verbessern das Design, dienen aber niemals als Ablenkung. Es ist eine echte Freude zu lesen, und genau darum geht es in diesem 'Webdesign'.
07. CSS-Tricks
'Nochmals: wählen eine Website mit dem Namen von Chris Coyier fühlt sich ein bisschen wie Betrug an, aber fair ist fair - der Typ ist ein Biest, und er hat mit dieser Neugestaltung einen verdammt guten Job gemacht “, lacht Mat Marquis. 'Chris verwaltet eine unglaubliche Menge nützlicher Informationen auf seiner Website und dies mit einem Design, das nicht nur logisch und bei jeder Bildschirmgröße verwendbar ist, sondern auch eine Menge Persönlichkeit besitzt.
'Lobende Erwähnung geht hier an Chris' codepen.io (beim Bearbeiten noch nicht vollständig ansprechbar) Dies ist ein unglaublich nützliches Tool zum Erstellen schneller Demos und Testfälle. Dort gibt es einige erstaunliche Arbeiten. '
08. Currys
' Currys Möglicherweise haben wir nicht das Designniveau, das viele Agentur- und persönliche Websites haben, aber ich wähle es aufgrund seiner Bedeutung für die breitere Akzeptanz reaktionsschneller Designtechniken aus. Es ist die erste wirklich große E-Commerce-Website, die ich gesehen habe und die sich mit Responsive Design befasst “, erklärt er James Young , Creative Director bei Offroadcode .
'Es bietet eine gute Erfahrung auf einer Reihe von Geräten, während es mit einer großen Menge an Inhalten und Produkten aller Formen und Größen zu tun hat, und beinhaltet einen benutzerfreundlichen Kaufprozess - alles innerhalb einer einzigen Codebasis, die von der Currys-Webteam. '
09. dConstruct 2012
'Abgesehen von der unglaublichen Lautsprecheraufstellung, die dKonstruieren Die Website selbst ist eine wunderschön gestaltete, reaktionsschnelle Erfahrung “, sagt er Ich bin Callahan , Präsident einer kleinen Agentur mit Sitz in Ohio Sparkbox .
'Mein Lieblingsdetail der Site ist die Navigation. Beachten Sie die hinzugefügte Ikonografie für ein kleineres Ansichtsfenster. Dies zeigt, dass dem Touch-Zielbereich echte Sorgfalt geschenkt wurde, und bedeutet einen impliziten Wert, der den Benutzern, die die Site auf kleineren Geräten betrachten, beigemessen wird - eine Mobile-First-Mentalität. Gut gemacht @clearleft ! '
10. Disney.com
'Wenn eine Site mit der Medienkomplexität von Disney Als es reagierte, zeigte es wirklich die Gültigkeit des Ansatzes für die Bereitstellung von Multimedia-Inhalten im Web “, erinnert sich Scott Jehl , Webdesigner / Entwickler bei Filament Group. 'Das zurückhaltende, klare Design der Website unterstreicht die reichhaltigen Bilder von Disney-Filmen und -Fernsehen, die auf der Website inline angezeigt werden können, sowie eine gute Verwendung von Ajax und history.pushState sorgt für subtile, nicht störende Seitenübergänge.
'Die Website bietet außerdem eine gute kontextbezogene Interaktivität, z. B. gestengesteuerte Karussells für Touch-Geräte und eine Navigation außerhalb der Leinwand auf kleinen Bildschirmen.'
11. Fray, Ausgabe 3
' Ausgabe 3 des Fray 'Das ursprüngliche Storytelling-Magazin des Internets' war mein Lieblingsdesign, das ich dieses Jahr gesehen habe, und vielleicht mein Lieblingsdesign ', erinnert sich Scott Jehl. 'Zusätzlich zu seinem ansprechenden, ansprechenden Cover-Design, bei dem Designelemente aus dem Cover-Artwork im gesamten Layout wiederverwendet werden, verfügt jeder Artikel in der Ausgabe über ein eigenes, kunstorientiertes Design, ähnlich wie wir es in Printmagazinen sehen, jedoch seltener im Internet.
'Viele der Layouts enthalten fein abgestimmtes CSS, um einen schönen Effekt zu erzielen, wie den verzerrten Titel und die Byline des Artikels' Braces 'sowie durchgehend versetzte Pullquotes. Nur eine Warnung: Das Thema der Website richtet sich an Erwachsene. '
12. Gov.uk.
Stephen Hay sagt: 'Die Gov.uk. Das Design ist visuell einfach (praktisch keine Bilder), aber es ist klar, was es beabsichtigt: Ihnen zu helfen, Informationen schnell zu finden. Für Regierungswebsites ist dies keine leichte Aufgabe. Ich finde es toll, dass diese Website nicht nur reaktionsschnell ist, sondern auch ein perfektes Beispiel dafür, wie durchdachte Inhalte und Strukturen unabhängig vom verwendeten Gerät zu einer klareren Benutzererfahrung führen können.
„Es ist so wichtig, dass die Regierungen ihre Informationen zugänglich präsentieren. Ich bin sicher, dass die Einfachheit dieser Website ein Beispiel sein wird, dem andere Regierungsorganisationen folgen werden. '
13. Heroku-Status
'Heroku ist ein Bereitstellungsdienst für Webanwendungen, daher richtet sich diese Website an ein sehr technisches Publikum', sagt Scott Jehl von seiner zweiten Wahl. ' Herokus Statusseite ist lediglich ein Ort zur Überwachung der Verfügbarkeit des Dienstes mit Statusbenachrichtigungen für aktuelle Vorfälle und einer Zeitleiste mit Berichten.
'Die Präsentation auf kleinem Bildschirm ist konservativ, aber sehr funktional und semantisch reichhaltig, mit einer sauber gestalteten Listenpräsentation. In breiteren Ansichtsfenstern verwandelt sich die Zeitleiste jedoch in eine vertikale Datenvisualisierung, in der Vorfälle über kurvige HTML5-Linien gezeichnet und mit Zeitpunkten verknüpft werden, wodurch der Inhalt ansprechender wird. '
14. Lotta Nieminen
' Lottas clevere Seite fördert die Erkundung, da die linke und rechte Seite des Bildschirms Inhalte aus den angrenzenden Abschnitten necken “, schwärmt Elliot Jay Stocks.
'Ich habe halbwegs damit gerechnet, dass dies bei unterschiedlichen Breiten unterbrochen wird, aber das Verhalten bleibt jederzeit konsistent und kombiniert Medienabfragen mit JavaScript, um einzelne Spalten sinnvoll zu stapeln und ihre Größe zu ändern.'
15. Microsoft
'Das neue Microsoft Die Seite ist für mich aus so vielen Gründen aufregend “, verrät Ben Callahan. „Zu sehen, wie ein Riese wie Microsoft auf diese Weise hinter Responsive Web Design steht, zeigt wirklich, wie weit wir in den letzten zwei Jahren gekommen sind. Das Design entspricht eindeutig dem Metro-Stil und bietet uns ein Maß an Sauberkeit und Platz, das auf den meisten Unternehmensseiten fehlt. Es gibt auch eine beträchtliche Menge an Navigation, was eine echte Herausforderung sein kann, um sie für eine Vielzahl von Ansichtsfenstern und Interaktionsmodellen nutzbar zu machen. Ich liebe die Tatsache, dass die Dropdowns dahinter liegen klicken oder berühren [Ereignisse] im Gegensatz zu :schweben . Ich glaube, wir werden in naher Zukunft noch viel mehr davon sehen, selbst bei größeren Vorsätzen. Gut gemacht @ Paravelinc ! '
Reagan Ray, der auf der Baustelle gearbeitet hat, sagt: „Trent und Dave sind zu bescheiden, um das Paravel-Horn zu betätigen, also werde ich es tun. Wir waren froh, in einer so aufregenden Zeit für Microsoft eine kleine Rolle spielen zu können. Ich denke, es ist ein großartiges Beispiel für ein großes Unternehmen, das Responsive Design einsetzt. '
16. Polygon
' Polygon ist eine wahnsinnig reiche Responsive-Gaming-Site, die ihre großen Brüder ( IGN , Gamespot und so weiter) zu beschämen ', lobt Dave Rupert , Hauptentwickler von Paravel und Co-Host von ShopTalk mit Chris Coyier. 'Die großen Grafiken bringen meine Spielersinne zum Kribbeln. Die Innenpfosten sind eine erstaunliche Mischung aus Art Direction und ansprechender Architektur. '
17. Aufstand
Elliot Jay Stocks kommentiert: 'Einfache, zentrierte, einseitige Websites scheinen leicht in reaktionsschnelles Design zu übersetzen, aber es erfordert Geschicklichkeit, Überlegung und ein scharfes Auge, um alles nahtlos neu anzupassen. Randalieren Die Website macht genau das. '
18. Skinny Ties
'Während ich keine besitze dünne Krawatten Abgesehen von einer Handvoll Reste der 80er Jahre, die irgendwo in einem Vorratsbehälter versteckt sind, denke ich, dass diese Seite wunderschön ausgeführt ist “, sagt Ben Callahan. 'Es ist auch ermutigend zu sehen, dass auf komplexeren Websites reaktionsschnelle Techniken eingesetzt werden: in diesem Fall ein E-Commerce-Erlebnis. Die Navigation auf dieser Site ist in allen Auflösungen von Ansichtsfenstern einzigartig, funktioniert jedoch am kleinen Ende des Spektrums außergewöhnlich gut. Seine visuelle Natur ist für ein Geschäft dieser Größe durchaus sinnvoll und bleibt trotz der Verwendung von nutzbar :schweben auf Touch-Geräten. Gut gemacht @ Falkowski ! '
19. Starbucks
'Die reaktionsschnelle Starbucks.com ist großartig, aber was uns noch mehr inspiriert, ist das Web-basierte Gestaltungsrichtlinie das kommt damit, ' Trent Walton , Gründer von Paravel, weist darauf hin. 'Es vermittelt die Leistung des flüssigen / reaktionsschnellen Layouts viel besser als eine .psd- oder .pdf-Dose.'
20. Tattly
'Ich habe gerade eine gefährliche Zeitsenke in diese Liste aufgenommen', warnt Mat Marquis vor dieser temporären Tattoo-Site. 'Ich entschuldige mich im Voraus bei Ihnen und / oder Ihrem Chef. Ich habe eine peinliche Zeit damit verbracht, die Designs zu durchsuchen Tattly Ich bin nie auf der Suche nach einer Erfahrung, die ich nur an einem bestimmten Haltepunkt machen kann. Sie haben großartige Arbeit geleistet, um sicherzustellen, dass ihre Website gut in eine Vielzahl von Geräte- / Fenstergrößen übersetzt werden kann, und, was vielleicht noch wichtiger ist, sie bieten mir eine sichere Möglichkeit, mich wie ein Arschloch aussehen zu lassen. Weißt du, jedenfalls für ein paar Tage. '
21. Das nächste Web
'Obwohl ich immer noch kein Fan der klebrigen Seitenleiste bin, ist diese Seite ziemlich erstaunlich', gibt Dave Rupert zu. 'Das Leerzeichen und die Typografie schaffen eine wirklich entspannte Umgebung. Ich bin angenehm erleichtert, wenn ich besuche TNW auf einem Tablet: Es hat ein großartiges Gefühl und ein gutes Leseerlebnis. '
22. Die Form des Designs
'Frank Chimeros Übernahme eines reaktionsschnellen Leseerlebnisses ist auf allen Ebenen inspirierend', sagt Trent Walton. 'Seine Online-Version von Die Form des Designs ist eine Freude zu lesen. Die unauffällige Kapitelnavigation funktioniert gut und die Medienabfrage Schriftgröße Durch die Skalierung bleibt alles wunderbar proportional. '
23. Zeit
'Dem Beispiel des Boston Globe folgend, Zeit hat mit seiner Implementierung die Welt der Responsive News-Websites geprägt “, begrüßt Stephen Hay. 'Die Tatsache, dass es weltweit eine Nachrichten-Website weniger gibt, die uns einen Link zur' vollständigen Website 'auf Mobilgeräten bietet, reicht bereits aus, aber die Website sieht auf Mobilgeräten wirklich gut aus: Es ist durch und durch die Zeitidentität. Ein Teil des Textes mag auf einigen Geräten etwas klein sein, aber die Entwickler haben die Skalierung beibehalten: Immer eine gute Idee. Es könnten einige Schritte unternommen werden, um die Leistung zu verbessern, z. B. das Bereitstellen skalierter Bilder, [aber] es ist dennoch ein Schritt in die richtige Richtung. '
24. United Pixelworkers
'Ich bin ein Fan der kühnen Einfachheit von United Pixelworkers und das solide Rasterlayout und die Navigationsbehandlung für kleine Bildschirme funktionieren gut “, sagt James Young. 'Wie bei der Currys-Website handelt es sich um eine E-Commerce-Website, mit der ich meine Hauptaufgabe - den Kauf von Goodies - auf jedem Gerät problemlos erledigen kann.
'Es ist eine Schande, dass Sie zu Shopify springen, um Ihren Kauf abzuschließen, und ich würde gerne bald mindestens eine Seite mit der Fertigstellung der Marken-Kasse sehen, aber es ist immer noch sehr einfach, Ihre T-Shirts zu kaufen.'
'Responsive E-Commerce ist schwierig, aber die Pixelworker scheinen es herausgefunden zu haben', fügt Dave Rupert hinzu. 'Tolle Homepage, tolle Produktseiten, toller Checkout-Flow. Wenn Sie eine wunderbare reaktionsschnelle E-Commerce-Website erstellen möchten, ist dies Ihre Bar. '
25. Universität Notre Dame
'Ich liebe einige der Dinge Universität Notre Dame ist unter der Haube los ', schwärmt Tim Kadlec. 'Es verwendet RESS, um das Seitengewicht auf kleinen Bildschirmen zu reduzieren. Außerdem wird die Geolokalisierung verwendet, um die Campus-Tour-Funktion zu verbessern. Wenn die Site erkennt, dass Sie sich auf dem Campus befinden, identifiziert sie die nächstgelegenen Standorte und bietet Ihnen eine Wegbeschreibung. Dies ist eine hilfreiche Methode, um den Kontext des Benutzers und die Funktionen des Geräts zu nutzen, um die Benutzererfahrung zu verbessern. '
Vielen Dank an alle unsere Mitwirkenden für die Auswahl ihrer bevorzugten Responsive-Sites des Jahres 2012 für diesen Artikel: Ben Callahan, Elliot Jay Stocks, Tim Kadlec, Paul Robert Lloyd, Mat Marquis, Scott Jehl, Stephanie Rieger, Stephan Hay, James Young und das Ganze von Paravel: Trent Walton, Dave Rupert und Reagan Ray.
Wir hoffen, Sie wurden inspiriert, einige der Websites zu überprüfen. Teilen Sie uns in den Kommentaren Ihre Meinung zu unserer Auswahl mit und welche Websites in diesem Jahr Ihre eigenen Favoriten waren.
Mochte dies? Lese das!
- Brillant Wordpress-Tutorial Auswahl
- Der ultimative Leitfaden für die Gestaltung der beste Logos
- Das beste kostenlos Web-Schriftarten für Designer
- Entdecken Sie, was als nächstes kommt erweiterte Realität
- Herunterladen freie Texturen : hohe Auflösung und sofort einsatzbereit
