Share
Wenn Sie nicht völlig neu in der Branche sind oder in einem fernen Land eines anderen Planeten unter einem Felsen gelebt haben, haben Sie von Responsive Design gehört. Selbst wenn Sie es nicht vollständig verstehen, ist es sicherlich etwas, auf das Sie in irgendeiner Weise gestoßen sind oder mit ihr interagiert haben.
Kurz gesagt, Responsive Webdesign ist die Kunst, Websites für eine Vielzahl von Bildschirmgrößen und Geräten zu entwerfen, so dass für jeden Benutzer bei jeder möglichen Größe ein optimales Erlebnis zur Verfügung steht.
Responsives Webdesign ist am besten, wenn es geräteunabhängig ist. Wenn Sie nicht beabsichtigen, für bestimmte Auflösungen oder Größen zu entwerfen, z. B. nur für iPhone- oder iPad-Größen. Stattdessen sollten Sie darauf abzielen, den Inhalt und das Design so zu gestalten, wie dieser Inhalt fließt und sich an die verschiedenen Umgebungen anpasst, in denen er gesehen oder verwendet wird.
Früher war es der Fall, dass Sie für den Zugriff auf das Internet einen (meist sehr großen) Computer verwenden müssten, wobei die vertrauten Geräusche des Modems beim Verbindungsaufbau ertönen. Jetzt können Sie jedoch über Computer, Laptops, Mobiltelefone, Smartphones, Tablets, Fernseher, Spielekonsolen auf das Internet zugreifen - die Liste fühlt sich fast endlos an.
Responsive Web Design, geschrieben von Ethan Marcotte und veröffentlicht von A Book Apart, ist eine brillante Einführung in die Prinzipien von Responsive Web Design. Nun, auf der einen Seite sind dies großartige Neuigkeiten. Mehr als je zuvor können wir zu jeder Zeit und an jedem Ort, an dem wir uns wünschen, mit dem Internet verbunden sein. Dies ist zwar selbstverständlich, für viele aber auch notwendig. Und mit der Notwendigkeit und dem Zugang haben wir oft auch Ungeduld und die Notwendigkeit, dass die Dinge funktionieren und schnell arbeiten.
Aufgrund der zunehmenden Verbreitung von responsiven Websites hat sogar die breite Öffentlichkeit (also alle außerhalb der Web- und Kreativbranche) es fast erwartet, wenn sie im Internet surfen. Alles in allem ist responsives Webdesign definitiv eine große Sache.
Die Arbeit mit Responsive Design ist nicht ohne Herausforderungen. Zunächst einmal gibt es eine Vielzahl von Geräten und Bildschirmgrößen, für die wir sorgen müssen. Von übergroßen bis zu großen Bildschirmen, von kleinen bis mittleren Bildschirmen (und alles dazwischen) gibt es viel zu bedenken. Und ich bin sicher, dass Sie als Entwickler bereits wissen, dass die Arbeit mit responsive Design von der technischen Seite auch albtraumhaft sein kann und äußerst schwierig zu handhaben ist.
Die Website mediaqueri.es bietet viele Inspiration für erstklassige responsive Webdesigns. Wie bei jedem Projekt müssen Sie beim responsive Webdesign vor allem über den Inhalt der Website nachdenken, wie dieser Inhalt in das Design passt und wie der Inhalt von Seite zu Seite fließt. Sie müssen prüfen, wie die verschiedenen Gestaltungselemente zusammenarbeiten, und sicherstellen, dass sich alles zusammenfügt und konsistent ist.
Der Unterschied zum responsive Webdesign besteht darin, dass Sie auch darüber nachdenken müssen, wie all dies von einer Größe zur anderen funktioniert, unabhängig davon, ob es sich um eine Breite oder eine Höhe handelt. Sie müssen sorgfältig darüber nachdenken, wie all dies auf einen kleineren oder größeren Bildschirm übertragen wird und wie all Ihre Gestaltungselemente, Ihr Inhaltsfluss und alles andere funktioniert. Sie müssen das Erlebnis konsistent halten, unabhängig von der Größe der Website.
Wir als Designer und Entwickler in einer derart schnelllebigen Branche haben großes Glück. Wir arbeiten an erstaunlichen Projekten und wir arbeiten normalerweise immer an der Spitze der neuen und aufstrebenden Technologien. Die Arbeit mit responsivem Webdesign ist nur eines der aufregenden Dinge, die wir machen können, aber damit verbunden ist ein Preis.
Das Greenbelt Festival ist ein hervorragendes Beispiel für responsives Webdesign. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Denken Sie zurück an
Zu Beginn eines Designprojekts sollten Sie versuchen herauszufinden, was genau Ihr Kunde aus dem Projekt herausholen möchte und was er erwartet. Das Management der Erwartungen Ihres Kunden kann schwierig sein, aber es ist wichtig, dass Sie sich daran halten, um sicherzustellen, dass Ihre Kunden Ihren Prozess vollständig verstehen.
Ein schönes Beispiel für responsives Webdesign in Aktion ist auf der Modern Green Home-Website zu finden. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Wenn es um responsives Webdesign geht und vor allem, wenn Sie mit einem dieser Schlagworte zu Ihnen gekommen sind, müssen Sie es versuchen und helfen erziehen Ihre Kunden Häufig wurden diese Schlagworte zufällig gehört oder falsch dargestellt, und es liegt an Ihnen, sicherzustellen, dass Ihr Kunde das Thema richtig versteht.
Manchmal könnten Sie sogar potenzielle Kunden dazu bringen, zu sagen, dass sie eine Website wünschen, die auf „iPhone und iPad“ funktioniert. In diesem Fall würde ich sagen: „Nun, das ist vollkommen in Ordnung - aber das Beste wäre, dass wir uns stattdessen darauf konzentrieren können, Ihnen eine perfekt ansprechende Website zu erstellen, an der Sie arbeiten können irgendein Gerät und nicht nur auf die beiden beschränkt sein. “Das ist ein großartiger Eisbrecher zu diesem Thema, und es ist etwas, das es Ihnen sehr offen lässt, es in der Planungsphase weiter zu erklären.
Wenn Ihr Kunde responsives Design richtig versteht, kann ich mir vorstellen, dass er mit dem Projekt zufriedener ist.
Die Stuff & Nonsense-Website ist ein hervorragendes Beispiel für responsives Webdesign und führt auch verschiedene Illustrationen bei verschiedenen Bildschirmgrößen ein. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Wenn Sie sich die Zeit nehmen, den Kunden richtig zu unterrichten, kann dies nur zu Ihren Gunsten wirken. In meiner eigenen Arbeit versuche ich zum Beispiel immer sicherzustellen, dass meine Kunden das Gefühl haben, zu arbeiten mit sie als einfach zum Sie. Dies erleichtert die Arbeit mit Ihren Kunden beim Entwurf für das responsive Web.
Es ist alles gut und gut, wenn ich darüber spreche, warum es wichtig ist, Kunden aufzuklären und Ihnen Dinge mitzuteilen, die Sie bereits über responsives Webdesign kennen. Nun zu den Kleinigkeiten, in denen ich Ihnen die besten Wege erklären kann, responsive Websites zu entwerfen.
The Great Discontent sind für ihre Interviews bekannt und ihre Website ist ein großartiges Beispiel für das Design von Magazinen im Internet sowie ein brillantes Beispiel für responsives Webdesign. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Und die Antwort? Nun, leider gibt es nicht wirklich einen richtigen! Es tut mir leid, wenn Sie das nicht gesucht haben, aber da Sie wahrscheinlich mit Ihrer Entwicklung und Programmierung verstehen werden, sind alle Prozesse unterschiedlich und niemand scheint auf dieselbe Weise zu funktionieren. Das ist auf seine Art großartig, da wir immer neue Arbeitsweisen finden können.
Machen Sie sich jedoch keine Sorgen, ich gebe Ihnen einige Top-Tipps für die Gestaltung responsiver Websites, die Sie relativ einfach umsetzen können sollten. Fühlen Sie sich frei, aus all diesen zu wählen und sie dort zu kombinieren, wo Sie es für angemessen halten. Ebenfalls Experiment! Probieren Sie viele verschiedene Wege aus, um responsive Websites zu entwerfen und sehen Sie, was für Sie passt Sie Beste.
Das Erstellen eines Modells für eine Site mit statischer Breite in Photoshop (oder einer anderen Grafiksoftware) war für die meisten Leute so, wie sie Websites entworfen haben, und für einige ist es immer noch so. Das ist absolut in Ordnung! Wenn Sie mit einer Grafik-App vertraut sind, um das Erscheinungsbild Ihrer Website zu gestalten, ist das in Ordnung.
Die UX London 2013-Website ist ein schönes Beispiel für Design, das sich von klein bis groß anmutig skalieren lässt. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Versuchen Sie jedoch nicht, für jede Auflösung oder Breite ein Modell zu entwerfen. Sie würden verrückt werden und sehr lange da sein. Denken Sie stattdessen an den Wireframing-Artikel zurück. Überlegen Sie, wie wir den Inhaltsfluss für diese Wireframes betrachtet haben und wie wir entschieden haben, dass alles zusammenpassen sollte. Versuchen Sie, dies in Ihre Designs zu übersetzen, und überlegen Sie, wie sich diese Elemente bewegen und verschieben, wenn sich die Bildschirmgröße ändert.
Einige dieser Änderungen werden gravierend sein, und für diese kann es sinnvoll sein, ein kleines Modell zu erstellen, um dies zu zeigen. Bei allen anderen Änderungen, z. B. bei der Textanpassung, würde ich mich auf solche Dinge im Internet konzentrieren Browser, sobald Sie mit der Codierung von Prototypen beginnen. Wenn Sie es vorziehen, für jede wichtige Phase Ihres Entwurfs ein Modell zu entwerfen, machen Sie auf jeden Fall weiter. Machen Sie sich einfach die Zeit bewusst, die sich für Ihr Projekt ergibt.
Nun zu einer Kontroverse. Sie haben vielleicht von dem Ganzen gehört
Die WWF-Website ist ein großartiges Beispiel für Webdesign, das auch hervorragend reagiert. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Beim Entwerfen im Browser gelangen Sie von einer Wireframe-Phase (wenn Sie das getan haben) direkt in den Browser, um die Designphase zu starten, anstatt mit einer Grafiksoftware zu arbeiten. Wenn Sie viele Online-Tools verwenden, um Sie beim Erstellen verschiedener Elemente Ihrer Entwurfsstruktur zu unterstützen (z. B. zum Erstellen von Rastern oder zur Verfeinerung Ihrer Typografie), kann dies sehr gut funktionieren.
Viele Designer haben jedoch das Gefühl, dass sie Schwierigkeiten beim Entwerfen im Browser haben, insbesondere wenn sie mehr Designer als Codierer sind. Der Grund dafür ist, dass sie das Gefühl haben, ihre Kreativität ein wenig einzuschränken, was es für sie schwieriger macht, kreative, einzigartige und visuell aufregende Ideen zu haben.
Das Next Web kann Inhalte auf eine Art und Weise anzeigen, die leicht zu verdauen und zu verfolgen ist, auch auf kleinen Bildschirmen. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Als Entwickler dürfte es Ihnen jedoch sehr schwer fallen, Code zu verwenden. Daher ist es möglicherweise eine gute Idee, mit dem Versuch zu versuchen, im Browser zu entwerfen und zu sehen, welche Ergebnisse Sie erzielen.
Dies ist wahrscheinlich mein persönlicher Favorit. Entscheidend im Browser bedeutet, dass Sie ein wenig Arbeit in Grafiksoftware und ein bisschen im Browser erledigen müssen. Ich persönlich denke, dass Sie kein besseres Ergebnis davon bekommen können, wie ein Design funktioniert, bis es im Browser selbst ist. Typografische Darstellungen werden in Grafik-Apps immer anders dargestellt als im Browser. Es ist viel einfacher, Prototypen zu erstellen und schnell durch die Entwurfsphasen zu navigieren, wenn Sie sich im Browser befinden (auch wenn sich dies mit der Einführung von Anwendungen, z. B.
Die Microsoft-Website verwendet je nach Größe des Ansichtsfensters geschickte Inhalte und beschneidet Bilder. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Wenn Sie sowohl mit Mockups als auch mit browserbasierter Arbeit arbeiten, können Sie Ihrem Design und den Entscheidungen, die Sie treffen müssen, viel Flexibilität verleihen. Der Schlüssel zu diesem Begriff „im Browser entscheiden“ ist jedoch das erste Wort. Obwohl viele wichtige kreative Entscheidungen in der Grafiksoftware getroffen werden können, können Sie im Browser die endgültige Entscheidung treffen.
Wenn ich auf diese Weise arbeite, stelle ich fest, dass ich oft eine Mischung aus Mockups, entworfenen Musterbibliotheken (in Grafiksoftware und in HTML & CSS) und vollständigen HTML- und CSS-Prototypen ende. Eine Mischung ist großartig und zeigt die Entwicklung der Website von Anfang an bis zu einer hoffentlich vollständigen Website.
Zunächst einmal, wenn Sie noch nicht aus meinen Artikeln im Abschnitt „Vor dem Start“ gelernt haben - beginnen Sie immer mit der Arbeit an Ihren Entwürfen. Sie müssen lediglich sicherstellen, dass Sie mit echtem Inhalt und dem Inhalt arbeiten, der auf der von Ihnen gestalteten Website verwendet werden soll.
Philip House ist ein hervorragendes Beispiel dafür, wie Sie beim Arbeiten mit responsiven Webdesigns Layouts verschieben und verschieben können. Mit freundlicher Genehmigung von mediaqueri.es zur Verfügung gestellte Screenshots. Zweitens liegt es ganz bei Ihnen, ob Sie zuerst mit dem mobilen Arbeiten (beginnend mit kleineren Layouts) oder mit dem Desktop-Down (beginnend mit Desktop-Layouts mit voller Breite) arbeiten. Es gibt viele Debatten darüber online, aber eigentlich ist es Ihre eigene Entscheidung. Wenn Sie sich kreativer fühlen, wenn Sie von einer größeren Größe zu einer kleineren Größe wechseln, selbst wenn Sie es auf die entgegengesetzte Art und Weise bauen, ist das in Ordnung. Da macht man das Gegenteil und geht von klein nach groß!
Lassen Sie uns einige nützliche Ressourcen zusammenfassen. Es gibt so viele Tools, die Ihnen beim Entwurf responsiver Websites helfen können.
Accentsconagua