Im Jahr 2011 gab es kein Webdesign-Blog oder -Magazin auf der Welt, in dem HTML5 nicht verwendet wurde. oder? CSS3? in mindestens ein paar Schlagzeilen. Wir sprachen endlos über die neuen Möglichkeiten, die diese Technologien mit sich brachten, stritten unermüdlich über die Hürden, die sie stellten, und hatten unheimlich viel Spaß beim Erstellen von Demos mit peinlich bescheidenen Browser-Unterstützung.
Obwohl CSS3 und HTML5 immer noch ganz oben auf unserer Diskussionsliste stehen, habe ich beschlossen, mich umzusehen, welche anderen Begriffe und Schlagworte für 2012 die wichtigsten Themen sind. Lesen Sie weiter, um zu erfahren, was Webdesigner über diese Tage reden und streiten. Auf dem Weg dorthin findest du über fünfzig hervorragende Artikel, die dich über jedes Thema aufklären werden.
RWD
Falls Sie noch nichts davon gehört haben, rufen wir Responsive Web Design (RWD) an. jetzt. Es ist die kurze, coole Art und Weise, es sozusagen an Bord zu setzen, bevor Sie sich selbst in Verlegenheit bringen, indem Sie die archaische Langversion bei Ihrer nächsten Webdesign-Konferenz ausschalten. Sie könnten auch ein Plone-T-Shirt tragen.
RWD ist zweifellos eines der absolut heißesten Themen in der Webentwicklung. Dies ist darauf zurückzuführen, dass es wirklich einen großen Paradigmenwechsel darstellt, der die Art und Weise, wie wir Web-Design-Projekte angehen, grundlegend verändert.
Gibt es zu viel Hype um RWD? Ich habe sicherlich viele Kommentatoren zu meiner eigenen Arbeit gesehen, die diese Melodie singen. Als eine der führenden Lösungen für die Öffnung des Webs, um für so viele Geräte wie möglich optimiert zu werden, ohne für jedes eine eigene Website zu erstellen, finde ich persönlich, dass dies die Aufmerksamkeit verdient.
Das Problem, das zu einem Schlagwort wird, besteht darin, dass Webdesigner dies bereits zu einem wichtigen Werbeslogan gemacht haben, unabhängig davon, ob sie wirklich wissen, wie sie es in einer realen Welt erfolgreich umsetzen können oder nicht. Seien Sie vorsichtig in diesem Bereich, da es eine neue Technik ist und wir alle lernen immer noch, wie sie auf lange Sicht aussehen wird.
RWD-Diskussion
- Responsives Webdesign (wegweisend)
- Anfängerleitfaden für Responsive Webdesign
- So erstellen Sie eine Responsive Thumbnail-Galerie
- 5 wirklich nützliche Responsive Webdesign-Muster
- Responsive Web Design: Was ist es und wie wird es verwendet?
Haltepunkte (oder geräteunabhängige RWD)
Es gibt viele Unterbegriffe innerhalb des RWD-Bereichs, die viel Aufmerksamkeit auf sich ziehen: Medienanfragen, responsive type usw. Einer, der eine Menge Gespräche und sogar Diskussionen ausgelöst hat, ist "Haltepunkte".
Die Idee hinter RWD ist im Kern einfach: Mit cleverem CSS können Sie das Layout einer Site an verschiedenen vordefinierten Haltepunkten neu definieren. Die große Frage, die sich daraus ergibt, ist offensichtlich: Welche Haltepunkte sollte ich verwenden?
Die beliebte Lösung besteht darin, die gängigen Gerätebreiten zu betrachten und speziell für sie zu entwerfen. Sie richten also eine Medienabfrage für das vertikal ausgerichtete iPad, das horizontal ausgerichtete iPad, das vertikale iPhone, das horizontale iPhone usw. ein. Als Alternative finden Sie einen guten generischen Mittelweg und zielen auf drei Hauptbereiche: Desktop, Tablets und Telefone.
Ich habe kürzlich einen Artikel veröffentlicht, warum wir aufhören sollten, über spezifische Gerätebreiten nachzudenken und RWD zu verwenden, um Websites zu erstellen, die praktisch alle denkbaren Breiten innerhalb eines angemessenen Rahmens bearbeiten. Es hört sich schwierig an, aber in der Praxis ist es wirklich nicht mehr Arbeit als die anderen Methoden. Ich nannte es "Content-Focused Responsive Design". weil der Inhalt selbst die Haltepunkte und nicht die üblichen Gerätegrößen bestimmen kann. Andere Websites haben seitdem über dieselbe Idee mit einem vielleicht besseren Namen geschrieben: "Device Agnostic". RWD. Heute fand ich einen Artikel von Marc Drummond, der lange vor meiner eigenen Diskussion ähnlicher Techniken mit dem kurzen Begriff "Natürliche Haltepunkte" gepostet wurde.
Unabhängig davon, wie Sie es nennen, veranschaulicht diese Debatte perfekt den Punkt, den ich im letzten Abschnitt angesprochen habe: dass RWD an diesem Punkt keineswegs eine perfekt definierte Praxis ist. Es entstehen ständig neue Methoden und Ideen, und es wird erwartet, dass in diesem Jahr viel mehr Diskussionen über den Haltepunkt geführt werden.
Haltepunkt-Diskussion
- Responsive Design: Warum Sie es falsch machen
- Geräteunabhängiger Ansatz für Responsive Webdesign
- Responsive Webdesign-Standard-Haltepunkte sind tot
- Breakpoints im Responsive Design neu denken
SVG
Apple hat entschieden, dass die Zukunft des Computers eine bessere Auflösung bietet. Ob es der Industrie gefällt oder nicht werden Folgen Sie dieser Entscheidung (lassen Sie alle Apple-Kommentare, die Ihnen gefallen, es wird immer noch passieren, Leute). Apple drängt raus? Retina? Displays über die gesamte iOS-Linie (iPhone, iPad, iPod Touch) und andere große Gerätehersteller stellen bereits fest, wie sie diese Technologie erreichen oder schlagen werden.
Für Webdesigner ist dies eine böse Dose von Würmern. Es ist schon schlimm genug, dass wir für Tonnen verschiedener Bildschirmgrößen entwerfen müssen. Jetzt werden wir es mit großen Verschiebungen in der Pixeldichte abrunden. Bei Bildern mit höherer Auflösung treten Probleme mit der Dateigröße auf, wie und wann unterschiedliche Bilder auf verschiedenen Geräten bereitgestellt werden sollen usw.
Eine der wichtigsten Errungenschaften, die wir jetzt betrachten, ist SVG (Scaleable Vector Graphics), mit der Sie die in Adobe Illustrator erstellten Bildtypen grundsätzlich in eine Webseite einbetten können. Der Vorteil hierbei ist, dass die Grafiken als Vektoren aufgebaut sind, dass sie unendlich skalierbar sind und auf jedem Gerät, das Silicon Valley sich vorstellen kann, absolut perfekt aussehen.
- Bereit oder nicht, hier kommt HD-Webdesign
- Unabhängigkeitserklärung mit SVG
- 20 Svg-Anwendungen, die den Kieferhaufen zum Beben bringen
- Mit SVG Design spielen
- Verwenden von SVG für flexible, skalierbare und unterhaltsame Hintergründe
Vorprozessoren
Die strenge Bewegung der Webstandards führte zu einer ziemlich rigiden Webdesignbranche, in der Sie die Regeln befolgen oder sich den Konsequenzen stellen müssen.Diese Starrheit wurde durch eine radikale Idee erschüttert: Was ist, wenn es einen besseren Weg gibt, zu codieren? Es gibt Dinge über CSS, JavaScript und sogar über die HTML-Syntax, die wirklich scheiße sind. Warum also nicht einen Weg finden, sie aufzuheben, ohne die Standards aufzugeben, die das Internet zu dem gemacht haben, was es heute ist? Warum müssen wir noch auf einige Experten warten, um Funktionen hinzuzufügen, die wir zu unseren bevorzugten Sprachen hinzufügen möchten? Warum können wir es nicht einfach selbst machen?
Betreten Sie die Welt der Präprozessoren. Einige wilde und verrückte Rebellen haben diese Systeme zusammengestellt, mit denen Sie beim Schreiben Codierungsstandards ausrangieren und dann Ihren Code durch einen magischen Reiniger laufen lassen, der gültige Syntax ausspuckt. Stellen Sie sich CSS und JavaScript ohne die unbequeme Notwendigkeit von Semikolons und Klammern oder HTML ohne diese lästigen schließenden Tags vor. Stellen Sie sich weiter vor, weniger Code zu schreiben und mehr zu tun als je zuvor (können Sie CSS-Variablen sagen?).
Vor einigen Jahren wurden diese Vorprozessoren von den meisten weniger als herzlich aufgenommen und von anderen völlig verachtet. In der zweiten Hälfte des letzten Jahres haben sie sich aus irgendeinem Grund wirklich geschlagen. Plötzlich sind Preprozessoren der heißeste Trend.
Wenn Sie es noch nicht getan haben, ist es an der Zeit, die Vorprozessoren kennenzulernen, die einen solchen Sprung machen. Sass, LESS und Stylus erweitern CSS mit großartigen Funktionen wie Variablen, Mixins, mathematischen Operationen und sogar der drastischen Vereinfachung der Syntax. Fans von Sass sollten sich auch ein anderes Projekt von den gleichen Leuten ansehen, das das HTML-Authoring drastisch überdenkt: HAML. Wenn Sie ein JavaScript-Guru sind, suchen Sie nicht weiter als CoffeeScript, um sich hunderte Zeilen Code zu sparen.
Preprozessor-Diskussion
- Sass vs. LESS vs. Stylus: Preprozessor-Shootout
- Sparen Sie viel Zeit, indem Sie Ihr HTML mit Haml schreiben
- 10 WENIGER CSS-Beispiele, die Sie für Ihre Projekte stehlen sollten
- Supersüße CSS 3D-Texteffekte mit Sass und WENIGER
- WENIGER CSS hat mehr mit 1.2.0
- Mit CoffeeScript rocken
- Besseres JavaScript mit CoffeeScript schreiben: Die Grundlagen
- Holen Sie sich in WENIGER: die programmierbare Stylesheet-Sprache
Pinterest ist die trendigste neue Social Site im Internet. Es ist im letzten Jahr absolut populär geworden und scheint sich immer noch in einem kontinuierlichen Aufstieg zu befinden. Der interessante Teil ist, dass Pinterest für sein besonders weibliches Publikum bekannt ist. Die meisten von ihnen scheinen besessen von Fotos von Ryan Gosling zu sein, der in Weihnachtsbeleuchtung gehüllt ist oder Welpen umarmt. Warum zum Teufel habe ich es als Webdesign-Schlagwort aufgelistet?
Dafür gibt es zwei Gründe. Der erste ist, dass ein Großteil des Erfolgs von Pinterest wahrscheinlich auf das Design zurückzuführen ist, das die Art und Weise verändert, in der Designer über galeriebasierte Websites denken. Wie ich hier bereits skizziert habe, ergibt die Kombination eines Masonry-Layouts mit unendlichem Scrollen eine einfach süchtig machende Benutzererfahrung, die Stunden Ihres Lebens stehlen kann. Ihr erster echter Einstieg in Pinterest endet wahrscheinlich damit, dass Sie von Ihrem Bildschirm aufblicken und sich fragen, in welchem Jahr es sich befindet und wie lange Sie unter diesem bösen Bann standen.
Abgesehen von der interessanten Design-Fallstudie wird Pinterest allmählich von allen Arten von Nutzern akzeptiert, nicht nur von Gosling-Gäsern. Designer sind eine Nische von Nutzern, die auf dieser Site wirklich ein Zuhause finden. Wir sind visuell interessierte Menschen und Pinterest bietet uns eine fantastische Plattform, um visuelle Inspiration zu speichern und auszutauschen. Sie müssen nicht weiter als nach unserem eigenen Konto suchen, um zu sehen, dass dies wahr ist (Ende schamloser Selbststecker).
Pinterest-Diskussion
- Addictive UX: Warum Pinterest so erstaunlich ist
- Verwendung von Pinterest für Design Inspiration
- Wie Pinterest das Webdesign verändert hat
- Pinterest ist eine Web-Bonanza für Designer
- 3 wirkungsvolle Möglichkeiten, mit denen Webdesigner Pinterest verwenden können
CS6
Adobe ist nahezu unübertroffen in seiner Fähigkeit, pleite Designer regelmäßig gottlose Geldsummen auszahlen zu lassen. Die ständige Weiterentwicklung der Adobe Creative Suite erfordert tiefe Taschen, um mit der besten Branchentechnologie Schritt zu halten. Dies gilt insbesondere für die Welt des Design-Blogs. Wenn ich ein Tutorial auf Photoshop veröffentliche und den Fehler mache, etwas so altes wie CS3 zu verwenden, werde ich kein Ende nehmen.
Mit CS6, der nächsten großen Wiederholung der Creative Suite, wird Adobe Ihre Welt noch einmal rocken. Ich weiß, einige von Ihnen rollen Ihre Augen und beschweren sich nur darüber gerade kaufte CS5, und ich teile deine Schmerzen, aber die gute Nachricht ist, dass Adobe tatsächlich mit jeder Version große Verbesserungen vornimmt.
Der Wahnsinn über CS6 ist auf einem Allzeithoch, seit Adobe eine kostenlose Beta-Vorschau von Photoshop veröffentlicht hat. Zu den großartigen neuen Funktionen gehören eine überarbeitete Benutzeroberfläche (jetzt ist dunkel eine Option), Textstile, die den Absatzstilen in Illustrator und InDesign ähneln, eine Blur-Galerie, die die Schärfentiefe und die Neigungsverschiebungssimulation erheblich vereinfacht, ein neu überarbeitetes Zuschneidewerkzeug, Ebenensuche, Ebenengruppenmasken und vieles mehr. Machen Sie sich nicht einmal die Mühe, Widerstand zu leisten, Sie wissen, dass Sie es wollen.
CS6-Diskussion
- Verbesserungen in Photoshop CS6
- Top 7 Photoshop CS6-Funktionen
- Photoshop CS6 Unschärfegalerie-Tutorial
- Adobe Photoshop CS6 Beta erreicht 500.000 Downloads
- Unser erster Blick auf Photoshop CS6
Muster
Dies ist ein interessantes, das Sie zuerst falsch interpretieren können. Durch Muster Ich meine nicht kariertes, kariertes oder irgendein visuelles, sich wiederholendes texturartiges Design. Ich beziehe mich stattdessen auf die systematische Analyse des Webdesigns und auf die Art und Weise, wie dies üblicherweise sowohl aus visueller als auch aus codierender Sicht erreicht wird.
Wenn Sie gerade mit einem großen geantwortet haben? dann erlaube mir zu erklären.Letztes Jahr schrieb ich einen Artikel mit dem Titel 10 Rock Solid Website-Layoutbeispiele, in dem ich beliebte Layoutmuster besprach, die auf unzähligen Websites im Internet zu sehen sind und warum sie gut funktionieren. Diese haben nichts mit Farbe, Textur, Typografie oder etwas spezifischem zu tun, sondern werfen einen Blick auf die absolute Basisebene des Designs, auf dem der Rest aufgebaut ist.
Dieses Thema umfasst auch die Codierung. Die Website Pears zeigt typische Muster von HTML- und CSS-Paarungen für gängige Designelemente wie Navigationsmenüs, Fußzeilen und Miniaturgitter.
Mustererkennung, -analyse und -freigabe ist ein Trend, der immer heißer wird. Ich gehe davon aus, dass die Popularität weiter an Bedeutung gewinnt, zumal Responsive Web Design neue Paradigmen und Praktiken sowohl beim Codieren als auch beim Layout vorantreibt.
Musterdiskussion
- Responsive Navigationsmuster
- 5 wirklich nützliche Responsive Webdesign-Muster
- Muster für mehrere Geräte
- Wesentliche JavaScript-Entwurfsmuster
- Vor- und Nachteile von 6 CSS-Layout-Mustern
Hersteller-Präfixe
Wir alle haben CSS3 lange genug verwendet, um sich an den Wahnsinn der browserspezifischen Herstellerpräfixe zu gewöhnen. Wenn Sie etwas verwenden, das in CSS recht neu ist, müssen Sie dies für alle möglichen Browser immer wieder wiederholen. Ein perfektes Beispiel dafür, wie verrückt es wird, sind CSS-Gradienten. Hier ist der empfohlene Code zum Implementieren eines einfachen zweifarbigen Farbverlaufs:
Verrückt richtig? Einige sagen, dies sei eine gute Sache für das Internet, andere sagen, es sei geradezu giftig. Obwohl wir seit einiger Zeit Präfixe verwenden, ist die Hitze in dieser Debatte plötzlich ganz aufgedreht. Jeder hat eine andere Meinung, warum Präfixe helfen oder weh tun, und es scheint, dass ein Konsens oder sogar ein paar solide Vorschläge für ein besseres System nicht in Sicht sind.
Präfix-Diskussion
- Jedes Mal, wenn Sie ein proprietäres Feature aufrufen? CSS3? ein Kätzchen stirbt
- Die Herstellerpräfixe
- Herstellerpräfixe sind nicht für Entwickler geeignet (Paul Irish)
- TL; DR auf Herstellerpräfix Drama (Chris Coyier)
- Herstellerpräfixe - Über den Weg nach Süden
- Große Frage: Verletzen Herstellerpräfixe das Web?
- CSS-Anbieter-Präfixe bedrohen Open Web
Progressive Enhancement
Die alte? Progressive Verbesserung vs. anmutige Degradation? Debatte ist nichts Neues. Im großen und ganzen scheint es, als ob wir alle mit der graziösen Erniedrigung begonnen und dann zu einer progressiven Verbesserung als einer wohl überlegenen Methode übergegangen wären.
Die progressive Verbesserungsbewegung hat in den letzten Jahren viele Diskussionen und Ideen ausgelöst. Themen wie? Mobile zuerst? design umfasst progressive verbesserung, um sicherzustellen, dass möglichst viele Menschen das Internet so gut wie möglich nutzen.
Die Frage für 2012 lautet: "Was kommt als nächstes?" Ist es möglich, dass Konzepte, die der fortschreitenden Verbesserung innewohnen, das Web tatsächlich zurückhalten und nicht vorwärts bringen? Sollten wir unsere Ideen weiterentwickeln oder vielleicht sogar ganz aufgeben? Die neuesten Artikel der Debatte finden Sie in den folgenden Artikeln.
Progressive Enhancement-Diskussion
- Progressive Enhancement ist eine Barriere für den Fortschritt
- Progressive Verbesserung ist wichtiger als je zuvor
- Massively Mobile Progressive Enhancement | Ist Ihre Site zukunftsfähig?
- Progressive Enhancement 2.0 - Nicholas Zakas
- Progressive Enhancement: Alles, was Sie wissen müssen, ist hier
Gamification
Der heilige Gral bei jeder Art von Design ist das Engagement. Das ist es, was wir alle in jedem Projekt anstreben, mit dem wir uns befassen. Letztendlich möchten wir, dass die Menschen unsere Projekte erleben, genießen und hoffentlich sogar wiederkommen.
Mehrere Trends sind gekommen und gegangen, die den Schlüssel zu dieser schwer fassbaren Kreatur enthalten, aber der derzeitige Favorit ist Gamification. Das Konzept, das dies antreibt, ist ziemlich grundlegend: Die Leute lieben Spiele, also lassen wir alles zu einem Spiel werden. Sie müssen nur einen Blick auf Foursquare werfen, um ein effektives Beispiel zu sehen. Diese Leute wollten eine App erstellen, mit der Sie Ihre Ankunft an einem beliebigen Ort teilen können. Es war ein interessantes Konzept, aber wie würden sie die Leute dazu bringen, die App tatsächlich zu benutzen? Was ist der Anreiz?
Die Antwort: Mach ein Spiel! Beim Einchecken erhalten Sie Abzeichen (wertlose Pixel, aber gut für prahlende Rechte). Der Benutzer, der am häufigsten an einem Ort ist, macht Sie zum Bürgermeister, der Ihnen wiederum Rabatte und Preise in der realen Welt einbringen kann. Es gibt sogar eine Rangliste, die Ihnen täglich sagt, wie Sie Ihren Freunden gegenüber stehen. Es stellt sich heraus, dass Wettbewerb Interaktion fördert.
Diese Idee führt zu einem dramatischen Umdenken bei allen Arten von Websites, Anwendungen und sozialen Netzwerken. Dutzende von neuen Startups, die versprochen haben, einige Bereiche neu zu gestalten, zu denen bisher noch niemand beigetragen hat.Auf der Mikroebene versuchen bestehende Unternehmen, kleine Teile ihrer Website oder App zu verbessern, um das Alltägliche spannend zu machen. Wird Gamification zu einer langfristigen Verschiebung hin zu mehr Spaß im Internet führen oder ist es nur ein vorübergehender Trend, der schneller verschwinden wird, als Sie Gowalla sagen können?
Gamification-Diskussion
- Gamification - Nuggets der Weisheit oder Dummkopfgold?
- Die Zukunft des Webdesigns ist Engagement
- Die Vorteile und Fallstricke von Gamification
- Online Marketing & Gamification von Design
Was habe ich verpasst?
Ich bin mir sicher, dass zumindest einige der oben genannten Themen Ihren Vorstellungen entsprechen, über die Sie in letzter Zeit nachgedacht, gesprochen und / oder sich Sorgen gemacht haben. Hinterlassen Sie unten einen Kommentar und lassen Sie uns wissen, welche dieser Themen Ihnen am meisten in den Sinn gekommen ist und auf welcher Seite Sie sich in den vielen Debatten oben befinden.
Diese Liste von zehn Themen kratzt die Oberfläche heißer Webdesign-Konzepte derzeit kaum. Erzählen Sie uns von anderen Schlagworten, die Sie in letzter Zeit häufig gehört haben, und was Sie darüber denken.
Bildquellen: Yutaka Tsutano & Phil Roeder