Responsive Design ist der neue Liebling der Webdesign-Welt. Es scheint, dass keine Woche vergeht, in der es nicht neue Ressourcen dafür gibt, Meinungen darüber, wie man es macht oder ob man es überhaupt machen sollte, und neue Websites, die es wunderbar nutzen. Der Versuch, mit allem Schritt zu halten, kann schnell überwältigend werden. Hier haben wir eine Liste mit mehr als siebzig Ressourcen zum Erstellen responsiver Designs zusammengestellt. Enthalten sind Artikel über responsives Design und verwandte Theorien, Frameworks und Boilerplates für responsive Layouts, Tools zum Testen Ihrer responsiven Designs, Techniken zur Größenänderung von Bildern und vieles mehr. Um das Ganze abzurunden, haben wir hunderte der derzeit besten responsiven Designs zusammengestellt, um Sie zu inspirieren und Ihnen einige Ideen aus der Praxis zu geben.
Artikel und Veröffentlichungen
Nachfolgend finden Sie eine Reihe hochwertiger Artikel, die sich mit responsivem Design und den darin verwendeten Techniken befassen. Einige enthalten möglicherweise ein paar Codeausschnitte oder andere technische Informationen, aber zum größten Teil handelt es sich dabei um Diskussionen auf Konzeptebene.
Sich anpassendes Webdesign
Dies ist das Originalbeitrag von Ethan Marcotte, der auf A List Apart veröffentlicht wurde. Es werden die Überlegungen und Prinzipien des responsiven Designs sowie praktische Techniken zum Erstellen responsiver Websites erörtert.
Responsive Webdesign-Buch
Sich anpassendes Webdesign von Ethan Marcotte, herausgegeben von A Book Apart, behandelt den Stand des responsiven Webs, flexible Raster, flexible Bilder, Medienabfragen und wie man responsive Designs erstellt.
Die praktischen Aspekte von CSS-Medienabfragen, gewonnene Erkenntnisse
Das Postvon Bloop bietet einen fantastischen Überblick über die Verwendung von Medienabfragen (und deren Vor- und Nachteile im Vergleich zur Erstellung einer dedizierten mobilen Website) sowie einige nützliche Tipps für deren Implementierung. Einige nützliche Codeausschnitte sind ebenfalls enthalten.
Groß vs. Klein: Herausforderungen im Responsive Webdesign
In diesem Artikel werden einige der Herausforderungen erörtert, die responsives Webdesign mit sich bringen kann, einschließlich der besonderen Überlegungen, die erforderlich sind, da die Desktop-Bildschirme immer größer werden, während gleichzeitig viele Benutzer zunehmend über Tablets oder Smartphones auf das Internet zugreifen.
Einsteigerhandbuch für Responsive Webdesign
Das Ratgeber für Anfänger von Think Vitamin bietet eine großartige Einführung in Responsive Design, einschließlich Informationen zu Fluid Grids und Medienabfragen.
Responsive Webdesign: Was es ist und wie man es nutzt
Diese Einführung in Responsive Design von Überwältigendes Magazin ist eine großartige Einführung in das Thema. Es behandelt das von Ethan Marcotte skizzierte Grundkonzept sowie praktische Aspekte bei der Erstellung responsiver Designs. Codebeispiele sind ebenfalls enthalten.
Standardmäßig reaktionsfähig
Das Artikel von Andy Hume erläutert, warum das Web standardmäßig reagiert und dass Designer es seit Jahren dazu zwingen, nicht zu reagieren. Es ist eine interessante Idee, die hauptsächlich aus der Sicht eines Entwicklers diskutiert wird.
Inhaltliche Choreografie
Wir sprechen oft ausschließlich aus technischer Sicht über Responsive Design, aber der Sinn von Responsive Design besteht darin, das Inhaltserlebnis zu verbessern. Das Post von Trent Walton spricht darüber, dass das Stapeln von Inhalten nicht immer die beste Lösung ist und was stattdessen getan werden kann.
Die Elemente des Responsive Webdesigns verstehen
Dieser Beitrag von Sechs Revisionen behandelt die Grundlagen des responsiven Designs: flexibles Raster, flexible Bilder und Medienabfragen.
Ein kurzer Überblick über Responsive Design
Hier ist ein weiterer großartiger Überblick darüber, was Responsive Design ist und wie man es erreicht, diesmal von 1. Webdesigner.
Responsive Webdesign hat auf ganzer Linie Möglichkeiten geschaffen
In diesem Beitrag werden einige der Möglichkeiten behandelt, die Responsive Design für Designer und Entwickler bietet.
Entwerfen für ein Responsive Web
Das Artikel von Webdesigntuts+ diskutiert Responsive Design im Hinblick auf Fluid Grid, Fluid Images und Medienabfragen.
Experimentieren mit Responsive Webdesign
Das Artikel von Lee Munroe gibt einen einfachen Überblick über Responsive Design, insbesondere Medienabfragen, sowie einige Beispiele.
CSS3-Medienabfragen
Webdesigner-Wand bietet in diesem Artikel eine großartige Zusammenfassung von Codeausschnitten für Medienabfragen, Beispielen für responsives Design und mehr.
20 erstaunliche Beispiele für die Verwendung von Medienabfragen für responsives Webdesign
Dieser Beitrag von Design-Hütte bietet einige großartige Beispiele für responsives Design sowie zahlreiche Informationen zum Erstellen eigener responsiver Websites.
Kontext
Das Post von Adactio deckt einige der Verwirrungen ab, die häufig mit responsivem Design einhergehen, bricht es in einfache Begriffe und bietet einige nützliche Einblicke.
Eine reichhaltigere Leinwand
Dieser Artikel von Mark Boulton bespricht einige der Vorteile, die Responsive Design, CSS3 und andere Tools Designern und Inhaltserstellern bieten, insbesondere, dass wir vom Inhalt ausgehend entwerfen sollten und nicht umgekehrt.
Einige Gedanken zu Responsive Webdesign und Medienabfragen
Das Post von Jon Phillips erörtert einige der potenziellen Nachteile von Responsive Design und bietet, was noch wichtiger ist, einige großartige Lösungen.
Responsives Webdesign und mobiler Kontext
Das Post Erörtert, wie mobile Geräte zum Durchsuchen von Webinhalten verwendet werden und wie sich dies auf Ihre Entscheidungen für responsives Design auswirken kann.
Der neue Front-End-Design-Stack: Die Rolle von Responsive Design
Dieser Beitrag von Acquia diskutiert die Bedeutung von Responsive Design, bietet einige großartige Beispiele, die technischen Elemente, die bei der Erstellung von Responsive Designs eine Rolle spielen, und mehr.
Responsives Webdesign der Zukunft
Responsives Webdesign der Zukunft ist eine Präsentation von Kyle Neath, die die Zukunft des Webdesigns in Bezug auf Responsive-Design-Prinzipien diskutiert.
Zur Hölle mit schlechten Geräten: Responsive Webdesign und Webstandards
Das ist ein Detaillierter Einblick in Responsive DesignDiskussionen über gerätespezifisches Design, was responsives Design für Apps bedeutet und mehr.
Die Vor- und Nachteile von Responsive Webdesign
In vielen Artikeln geht es darum, wie man ein responsives Design erstellt, aber nur wenige besprechen die Vor- und Nachteile von responsiven Designs. Die Pam tut genau das und liefert eine ziemlich umfassende Liste der damit verbundenen positiven und negativen Aspekte.
11 Gründe, warum Responsive Webdesign nicht so cool ist
Dieser Beitrag von WebDesignShock beschreibt einige der potenziellen Herausforderungen und Probleme, die Responsive Design mit sich bringen kann.
Tutorials
In den folgenden Tutorials lernen Sie CSS-Medienabfragen und andere Responsive-Design-Techniken kennen.
Kurzer Tipp: Ein Crashkurs in CSS-Medienabfragen
Das Nettuts+-Tutorial Bietet einige Grundlagen für die Arbeit mit Medienabfragen, komplett mit Video-Tutorial und Codeausschnitten.
Adaptive Layouts mit Medienabfragen
Das Lernprogramm vom .Net Magazine bietet einen Einblick in grundlegende CSS3-Medienabfragetechniken. Es enthält zahlreiche Codeausschnitte und praktische Informationen zum Erstellen eigener responsiver Layouts.
Responsive Webdesign: Ein visueller Leitfaden
Das Videoanleitung von Tuts+ bietet eine großartige Einführung in das Responsive Design mit Beispielen. Anschließend wird erläutert, wie Sie unter Berücksichtigung sowohl visueller als auch technischer Aspekte Ihr eigenes Responsive Design erstellen.
CSS-Medienabfragen und Nutzung des verfügbaren Speicherplatzes
Dieser Beitrag von CSS-Tricks erklärt das Konzept der Verwendung von Medienabfragen, um den verfügbaren Platz im Browser-Ansichtsfenster zu nutzen. Es enthält zahlreiche nützliche Codeausschnitte und Beispiele.
Arbeiten mit Medienabfragen
Hier ist eine kurze Lernprogramm für die Arbeit mit Medienabfragen, mit zahlreichen Codebeispielen. Es ist einfach und auf den Punkt gebracht, aber eine perfekte Einführung in grundlegende Medienabfragen.
So verwenden Sie CSS3-Ausrichtungsmedienabfragen
Medienabfragen eignen sich hervorragend zum Anpassen der Darstellung Ihres responsiven Designs in verschiedenen Browsergrößen, aber viele Designer übersehen dies Orientierungskontrollen. Damit können Sie die Art und Weise, wie Ihre Website angezeigt wird, je nachdem, ob ein Gerät derzeit im Hoch- oder Querformat ausgerichtet ist, ändern, was sowohl für Smartphones als auch für Tablets nützlich ist.
Optimieren Sie Ihre E-Mails für mobile Geräte mit der @media-Abfrage
Wir übersehen HTML-E-Mail-Newsletter oft, wenn wir über responsives Design nachdenken. Angesichts der Anzahl der Personen, die Ihre HTML-E-Mails wahrscheinlich auf ihrem Telefon anzeigen, ist es in diesem Fall eine gute Idee, Medienabfragen zu verwenden. Dieser Beitrag von Kampagnenmonitor erklärt, wie es geht.
So verwenden Sie CSS3-Medienabfragen, um eine mobile Version Ihrer Website zu erstellen
Dieser Beitrag von Überwältigendes Magazin erklärt, wie Sie Medienabfragen zum Erstellen einer mobilen Website oder zur anderweitigen Verknüpfung separater Stylesheets verwenden.
Adaptives und responsives Design mit CSS3-Medienabfragen
Dieser fantastische Beitrag von Webdesigner-Wand Enthält eine Responsive-Design-Vorlage sowie ein Tutorial zur Erstellung der Vorlage. Es ist eine großartige Ressource für diejenigen, die gerne neue Techniken erlernen, indem sie abgeschlossene Projekte analysieren.
Responsives Webdesign mit HTML5 und dem Less Framework 3
Dieser Artikel von SitePoint bietet ausführliche Anleitungen zum Erstellen eines responsiven Designs mit HTML5 und dem Less Framework. Es enthält den gesamten Code, den Sie für das endgültige Design benötigen, sowie eine gute Aufschlüsselung der Funktionsweise dieses Codes.
Werkzeuge und Techniken
Mit den folgenden Techniken und Werkzeugen können Sie viel einfacher Designs erstellen, die Ihren Wünschen entsprechen. Viele sind für den Umgang mit Bildern gedacht (wohl einer der anspruchsvolleren Aspekte des responsiven Designs), aber es gibt auch andere.
CSS-Effekt: Bilder so ausrichten, dass sie der Texthöhe entsprechen
Abhängig von Ihrem Layout muss der Text möglicherweise richtig an den Bildern ausgerichtet sein, unabhängig vom Abstand zwischen Bildern und Text. Das Technik von Zomigi zeigt Ihnen, wie Sie genau das tun.
Teile von Bildern verbergen und offenbaren
Die Größenänderung von Bildern bringt Sie mit responsiven Designs in manchen Fällen nur bedingt weiter. Manchmal ist es wichtiger, dass ein bestimmter Teil eines Bildes sichtbar oder lesbar ist, als dass das gesamte Bild angezeigt wird. Das ist wo diese Technik von Zomigi kann nützlich sein. Es ermöglicht das dynamische Zuschneiden von Hintergrund- und Vordergrundbildern, wenn sich die Breite Ihres Layouts ändert.
Erstellen verschiebbarer zusammengesetzter Bilder
Mit dieser Technik von Zomigi können Sie scheinbar ein einzelnes Bild erstellen, in Wirklichkeit handelt es sich jedoch um mehrere übereinander geschichtete Bilder. Auf diese Weise können Sie die genaue Platzierung verschiedener Bildelemente steuern, wenn sich Größe und Form Ihres Browser-Ansichtsfensters ändern.
Nahtloses, responsives Fotoraster
Das Galerie von CSS-Tricks bietet ein nahtloses Fotoraster, das die Größe Ihrer Bilder und des Gesamtrasters automatisch an den Ansichtsbereich Ihres Browsers anpasst.
Responsive Datentabellen
Responsive-Design-Techniken sind nicht sehr datentabellenfreundlich. Es kann leicht passieren, dass man Tabellen erhält, deren Schrift so klein ist, dass man sie nicht mehr lesen kann. Oder Sie können eine Mindestbreite angeben, aber das macht dann den Zweck eines responsiven Designs zunichte. Das Technik von CSS-Tricks bietet eine Lösung zur responsiven Darstellung tabellarischer Daten auf einem mobilen Gerät.
Vordergrundbilder, die sich an das Layout anpassen
Es ist also recht einfach, skalierbare Hintergrundbilder zu erstellen, Vordergrundbilder sind jedoch etwas kniffliger. Dieser Artikel behandelt eine Technik von Zomigi zum Erstellen von Vordergrundbildern in Ihren Inhalten, die sich an Ihr Layout anpassen.
FitText
FitText ist ein jQuery-Plugin zum Skalieren des Überschriftentextes in Ihren responsiven Designs. Dadurch füllt Ihr Text immer die Breite des übergeordneten Elements aus.
Sencha.io Src
Sencha.io Src ist ein Bild-Hosting-Dienst, der Ihre Bilder auf die richtige Größe für das Gerät skaliert, das sie anfordert. Die Bilder sind außerdem für eine effiziente Wiederholungszustellung optimiert.
Der Goldlöckchen-Ansatz für Responsive Design
In diesem Beitrag von Chris Armstrong geht es um „Goldlöckchen-Ansatz„für die Erstellung responsiver Designs, die für jedes Gerät „genau richtig“ sind.
Responsive-Bilder
Responsive-Bilder ist ein Experiment mit Mobile-First-Bildern, die sich reaktionsschnell an Ihr Design anpassen lassen. Die Idee besteht darin, optimierte, kontextbezogene Bildgrößen in responsiven Layouts bereitzustellen.
Lettering.js
Lettering.js ist ein jQuery-Plugin, mit dem Sie die Art und Weise, wie Ihre Webtypografie angezeigt wird, präzise steuern können. Dies kann ein großes Plus bei der Aufrechterhaltung der Lesbarkeit in einem responsiven Design sein.
Flüssige Bilder
Das Technik von Ethan Marcotte erstellt Bilder mit fließender Breite für Ihre fließenden Designs. Es funktioniert auch für eingebettete Videos und es gibt eine Problemumgehung für die IE-Kompatibilität.
Antworten
Antworten ist ein leichtes Polyfill-Skript für CSS3-Medienabfragen mit minimaler/maximaler Breite, damit sie in Internet Explorer 6-8 funktionieren. Es ist nur 3 KB minimiert oder 1 KB komprimiert.
Modernisierung
Modernisierung ist ein Toolkit für HTML5 und CSS3, das eine JavaScript-gesteuerte Funktionserkennung in Kombination mit Medienabfragen bietet.
Responsive Webdesign-Skizzenblätter
Wenn Sie Ihre Entwürfe auf Papier als Drahtmodell erstellen, finden Sie diese Responsive Webdesign-Skizzenblätter sehr nützlich sein. Es gibt verschiedene Layouts, die Sie kostenlos herunterladen können. Jedes davon zeigt eine Handvoll wahrscheinlicher Geräteansichtsfenster.
Frameworks und Boilerplates
Frameworks und Boilerplates können Ihren Designprozess erheblich beschleunigen. Die gute Nachricht ist, dass es bereits unzählige Standardvorlagen und Frameworks für die Erstellung responsiver Designs gibt.
Goldenes Gittersystem
Der Goldenes Gittersystem verwendet ein 16-Säulen-Basisdesign für Breitbildmonitore. Auf Tablets werden die Spalten zu einem 8-Spalten-Layout gefaltet. Und auf kleineren Smartphone-Bildschirmen falten sich die Spalten wieder auf 4 Spalten, sodass sich das Design an alles anpassen lässt, von einem 2560-Pixel-Breitbildschirm bis hin zu einem 240-Pixel-Bildschirm.
Das semantische Rastersystem
Das semantische Rastersystem ermöglicht flüssige Layouts und reaktionsfähige Designs und verwendet gleichzeitig semantisches Markup (das in den meisten Grid-Frameworks schmerzlich fehlt).
Gitterlos
Gitterlos ist ein HTML5- und CSS3-Boilerplate zum Erstellen mobiler responsiver Websites. Es enthält kein vordefiniertes Rastersystem und keine nicht-semantischen Klassen.
Weniger Rahmen 4
Der Weniger Rahmen ist ein CSS-Rastersystem zum Entwerfen responsiver Websites, die sich an die Größe des Browser-Ansichtsfensters anpassen. Es gibt vier Layouts: Standard (für Desktops und Tablets im Querformat), Tablet-Layout, breites mobiles Layout und mobiles Layout. Dies ist eine gute Option für Designer, die ein responsives Design wünschen, aber nicht unbedingt flüssige Spalten wünschen.
Responsive Twenty Ten
Responsive Twenty Ten basiert auf dem Twenty Ten WordPress-Theme. Es gibt auch ein Plugin, mit dem Sie Ihr untergeordnetes Twenty Ten-Theme in ein responsives Design umwandeln können.
Kolumnförmig
Kolumnförmig ist ein CSS-Rastersystem, das ein „Remix“ einiger anderer Raster mit zusätzlichem benutzerdefinierten Code ist. Die elastische Gitterbasis stammt von cssgrid.net, während andere Codeteile von 960.gs stammen.
1140 CSS-Raster
Der 1140 CSS-Rastersystem ist ein flexibles, fließendes Raster, das basierend auf dem Browser-Ansichtsfenster neu angeordnet wird. Es ist so konzipiert, dass es perfekt in einen 1280 Pixel breiten Monitor passt, darunter jedoch flüssig wird.
320 und höher
320 und höher nutzt das Mobile-First-Prinzip, um zu verhindern, dass mobile Geräte Desktop-Assets herunterladen. Es ist eine Alternative dazu, mit einer Desktop-Version zu beginnen und diese dann zu verkleinern.
Skelett
Skelett ist ein Musterbeispiel für responsive, mobilfreundliche Designs. Es beginnt mit dem 960-Raster, lässt sich aber für kleinere Bildschirme verkleinern und ist sowohl für den schnellen Einstieg als auch für stilunabhängige Anwender konzipiert.
Fluid-Grid-System
Der Fluid-Grid-System basiert auf einem sechsspaltigen Raster und verfügt über 720 verschiedene Layoutmöglichkeiten. Aufgrund seiner Einfachheit lässt es sich in älteren Browsern gut verschlechtern.
Fluid 960-Gittersystem
Der Fluid 960-Gittersystem basiert auf 960.gs, hat aber unabhängig von der Browsergröße ein flüssiges Layout.
Foldy960
Foldy960 ist eine responsive Version von 960.gs. Es besteht aus einigen zusätzlichen Klassen und anderen Dingen, um ein 960.gs-Design in ein responsives Design umzuwandeln.
SimpleGrid
SimpleGrid ist ein weiteres responsives Grid-Framework, das unendliche Verschachtelung unterstützt. Es ist für Bildschirme in vier verschiedenen Größen konfiguriert, darunter 1235 Pixel und 720 Pixel.
Testwerkzeuge
Mit diesen Tools können Sie Ihre responsiven Designs viel einfacher testen, ohne viele verschiedene Geräte verwenden zu müssen.
resizeMyBrowser
resizeMyBrowser ist ein nützliches Testtool für responsive Designs. Klicken Sie einfach auf eine der vordefinierten Schaltflächen für die Browsergröße und die Größe Ihres Browsers wird angepasst. Jede Größe ist mit dem Namen mindestens eines Geräts gekennzeichnet, das diese Auflösung verwendet.
responsivepx
responsivepx ist ein Browser-Testtool, mit dem Sie eine URL (lokal oder online) eingeben und dann die Höhe und Breite des Browser-Ansichtsfensters anpassen können, um die genauen Haltepunktbreiten in Pixel anzuzeigen.
Responsive Design-Tests
Matt Kersley hat dieses Browser-Testtool entwickelt, mit dem Sie genau sehen können, wie Ihre Website bei gängigen Browserbreiten angezeigt wird, angefangen bei 240 Pixel bis hin zu 1024 Pixel.
Screenfly
Screenfly zeigt Ihnen, wie eine Website auf verschiedenen Geräten aussieht, einschließlich internetfähigen Fernsehern und Mobilgeräten.
Adobe Device Central
Eine Reihe von Produkten der Adobe Creative Suite sind im Lieferumfang enthalten Gerätezentrale, das ein sehr wertvolles Werkzeug zum Testen Ihrer responsiven Designs sein kann. Damit können Sie Ihre Designs nicht nur in der Vorschau anzeigen, sondern auch auf dem Gerät Ihrer Wahl testen.
Beispiele
Nachfolgend finden Sie 100 Beispiele für fantastische responsive Designs. Es gibt viel mehr Websites, die diese Technik nutzen, und jeden Tag kommen neue hinzu. Eine großartige Ressource für die Suche nach neuen Websites ist Medien-Anfrageneine Galerie, die speziell Websites gewidmet ist, die Responsive-Design-Techniken verwenden.
Profi Span
Vergessene Präsidenten
Ben Handzo
Aaron Shekey
Die Highway Hurricanes
dConstruct 2011
Merlin Ord & Media
Der glückliche Teil
Vorfahren
Easy Readers: Adaptives Webdesign
Mehr Gefahren, mehr Helden
Fakten Regula
Hallo, mein Name ist Andrew
Sieb
FoodDrinkEurope
Die offensichtliche Gesellschaft
Geek im Park
Mapalong
JCHELBY
10K auseinander
Ausstellung
Sinn für Essen
Neue Abenteuer in der Webdesign-Konferenz
Cisco London 2012
Team PAWS Chicago
Diablo-Medien
Andersson-Wise Architects
Entwerfen mit Daten
Volle Frontal 2011
Webdesign Yorkshire
Winnie Lim
Urban Svensson
Luke Williams
Oberhund
Schriftsteller
Toronto-Standard
Design-Professionalität
Impact Dialing
Modernisierung
Johan Brook
Staub- und Schimmeldesign
Gridchin
Staffanstorp
El Sendero del Cacao
Dustin Senos
Kisko Labs
51 Bit
digitalHappy
Patrick Grady
Trent Walton
Kopfverschiebung
Eulentastisch
WeeNudge
Ash-Körpertraining
Mark Boulton
Der moderne Gentleman
Gilde gründen
Machen Sie Vorträge
David Hughes
320 und höher
About.com
Wirklich einfach
Prächtig
Leica Explorer
Zapfendesign
Cohenspire
Jason Weaver
Joni Korpi
iwantedrock.com
Konvergieren Sie SE
Pelikanfliege
Einfache Bits
Informationsarchitekten
Andy Croll
Hicks-Design
8 Gesichter
Der Sweet Hat Club
Kleine Erbsenbäckerei
Schlafstraße
Andrew Revitt
Cujo.jp
Interim.it
Philip Meissner Design
Teixido
Transfinancieel
UX London
Jeremy Madrid
Brad Dielman
Thomas Prior
Clearleft
Herjen Oldenbeuving
Büro
City Crawler Berlin
CSS-Tricks
Roboter … oder nicht?
Marcelino Llano
Caleb Ogden
Ein flexibles Raster
Simon Collison
Weitere Zusammenfassungen
Hier sind einige weitere großartige Responsive-Design-Zusammenfassungen von anderen Websites.
Nutzen Sie in Ihren Projekten Responsive-Design-Techniken? Kennen Sie Ressourcen, die wir verpasst haben? Lass es uns in den Kommentaren wissen!
