Wir sind wirklich glücklich, in einer Branche wie der Webbranche tätig zu sein. Heutzutage haben wir so viele neue Tipps und Techniken und Arbeitsweisen. Wir sind auch sehr glücklich, dass wir uns in einer Zeit befinden, in der unsere Browser mit Einführung dieser neuen Technologien (zum größten Teil) ziemlich schnell aufholen können. Daher können wir diese neuen Technologien in unsere Designs integrieren ( und nach Luft schnappen, sogar in Kundenarbeit!) mehr als je zuvor.

CSS3 ist eine dieser (etwas) neuen großartigen Technologien. Damit verbunden ist eine ganze Reihe von Dingen, die uns das Leben als Designer und Entwickler erleichtern. Wenn unsere Browser besser werden, können wir mit unseren Ideen und Designs, die wir erstellen, abenteuerlicher sein.

Wir sind jedoch auch in einer Zeit, in der wir für mehr Benutzer, Geräte, Browser und Technologien als jemals zuvor entworfen haben. Vor dem Zeitalter des Smartphones, des Tablets und des an das Internet angeschlossenen Kühlschranks gab es eigentlich nur eine Möglichkeit, auf das Internet zuzugreifen. durch einen normalen Computer. Die am häufigsten verwendete Bildschirmauflösung war 640px x 480px oder 800px x 600px!

Heutzutage gibt es Tausende von verschiedenen Geräten, Bildschirmgrößen und Kontexten, die wir voraussichtlich bedienen werden. Wenn wir nur die Bildschirme und Bildschirmgrößen betrachten, für die wir sorgen müssen, haben wir Tausende von mobilen Geräten (Mobiltelefone, Smartphones, Tablets, Netbooks usw.), Retina-Bildschirme, Standardbildschirme, High-Definition-Bildschirme, kleine und große Bildschirme und so viel mehr.

Obwohl es wirklich schwierig sein kann, wird die Anzahl der Dinge, die wir uns bieten müssen, immer größer und größer. Daher müssen wir uns darauf einstellen und daraus lernen.

Unser Prozess muss sich anpassen

Und was bedeutet das für unseren Prozess? Es ist unmöglich, Ihre Website auf jedem einzelnen Gerät zu testen, auf dem Ihre Website möglicherweise angezeigt wird. Stattdessen müssen wir unseren Prozess effektiv zum Besseren verändern. Ich bin mir sicher, dass Sie als Entwickler dies selbst tun mussten, und es ist dasselbe wie ein Designer.

Möglicherweise müssen wir zusätzliche Schritte unternehmen, um unseren Konstruktionsprozess zum Besseren zu verbessern. Ein Beispiel dafür ist, mit Iterationsvorlagen für Typografie (z. B.) im Browser schneller vertraut zu werden. Was auch immer es ist, ich kann garantieren, dass sich Ihr Prozess möglicherweise leicht anpassen muss.

CSS3

Obwohl es sich wie CSS3 anfühlt, ist es eine neuere Sache, da in den letzten Jahren viele der verbreiteten CSS3-Techniken verwendet wurden, waren die ersten Entwürfe für CSS3 bereits 1999; Vor vierzehn Jahren!

Im Gegensatz zu früheren CSS-Spezifikationen (wie CSS2) wurde CSS3 in mehrere Module unterteilt – Mitte 2012 wurden über fünfzig Module veröffentlicht. Vier davon wurden insbesondere als Empfehlungen veröffentlicht, bei denen das Modul umfangreichen Überprüfungen und Tests unterzogen wurde, bevor es zur vollständigen Verwendung empfohlen wurde. Die vier von W3C empfohlenen CSS3-Module sind bisher:

• Medien-Anfragen
• Namensräume
• Selektoren (Stufe 3)
• Farbe

Andere Module wie “Hintergrund und Rahmen”, “Mehrspaltiges Layout”, “Flexibles Box-Layout” befinden sich derzeit auf der Ebene “Kandidatenempfehlung”, wo das W3C mit den wesentlichen Funktionen dieses Moduls zufrieden ist.

Auf dieser Ebene wird davon ausgegangen, dass Implementierungen (z. B. von Browsern) die Browser-Präfixe löschen sollten, die sie bereits installiert haben. Andere Module, die betrachtet werden, sind “CSS-Animationen”, “CSS-Transformationen” und “CSS-Filtereffekte”. Diese befinden sich jedoch alle im Status “Working Draft” (wie viele, viele andere Module!) Und sind daher nicht ganz so bereit wie die mit dem CR-Status.

Neben den vier von W3C empfohlenen Hauptmodulen gibt es jedoch viele beliebte CSS3-Techniken, die wir heute häufig auf unseren Websites sehen. Diese schließen ein:

• CSS-Farbverläufe
• Grenzradius
• Box Schatten
• Mehrere Hintergründe
• Deckkraft (rgba)
• Animationen und Verwandlungen

Lassen Sie uns auf diese etwas näher eingehen.

CSS-Farbverläufe

Die Einführung von CSS-Farbverläufen hat zur Folge, dass anstelle eines Bildhintergrunds zur Erstellung eines bestimmten Erscheinungsbilds auf einer Website für moderne Browser CSS3 verwendet werden kann.

Dies ist großartig, da es Seitengewicht einspart und auch die Leistung auf ein Minimum reduziert, indem nicht so viele Bilder angefordert werden.

Grenzradius

Rahmenradius bedeutet, dass wir in unseren Designs jetzt abgerundete Ecken für moderne Browser hinzufügen können, ohne auf Bilder zurückgreifen zu müssen. Stellen Sie sich vor, Sie hätten ein Hintergrundbild mit einem Rand, einer abgerundeten Ecke, einem Farbverlauf und einem Schatten – diese Art von Dingen war in der Vergangenheit ein Alptraum, während sie jetzt für Browser, die sie unterstützen, einfacher zu implementieren sind.

Wenn Sie Glück haben, erhalten Sie Kunden, die sich mit der fortschreitenden Verbesserung auskennen. Wenn nicht, können Sie es ihnen erklären und sie schulen. In der heutigen Welt, in der viele Menschen Smartphones, Tablets und Computer besitzen (oder eine Kombination davon und mehr), sollten die Menschen erwarten und verstehen, dass Websites nicht auf allen Geräten und Bildschirmen, auf denen sie angezeigt werden, gleich funktionieren. Bis zu einem gewissen Grad werden sie verstehen, dass bestimmte ästhetische Darstellungen für andere Browser elegant herabgesetzt werden. Abgerundete Ecken sind eine davon!

Box Schatten

Mit der Einführung des CSS3-Boxschattens können wir jetzt Schlagschatten für unsere Boxelemente verwenden. Es gibt auch eine Textversion, die wir auch für unseren Inhalt verwenden können (Textschatten, falls Sie sich nicht vorstellen können).

Sie haben auch die Wahl, sowohl einen Inset- als auch einen Standard-Farbverlauf zu verwenden, was bedeutet, dass wir – ja, Sie haben es erraten – auf die Verwendung von Bildern für diese Stile noch einmal verzichten können.

Mehrere Hintergründe

CSS3 führte uns auch in die Lage, auf mehrere Hintergrundbilder in unserem Code zu verweisen. Das ist großartig, da wir mehr Spaß daran haben können, Hintergrundelemente übereinander zu schichten, um ausgefallene Effekte zu erzeugen, die wir sonst nur in CSS oder mit einem Hintergrundbild neu erstellen konnten.

Deckkraft (rgba)

Schließlich – ab IE9 und mit allen anderen modernen Browsern müssen wir kein kleines, wiederholbares, transparentes Hintergrundbild erstellen!

Dies allein genügte, um mich mit CSS3 zu begeistern, und bedeutet einfach, wir können Transparenz in unseren Designs verwenden, wenn wir es für angemessen halten.

Animationen und Verwandlungen

Animationen und Verwandlungen sind großartig. Zusammen mit Übergängen helfen sie uns, unseren Websites mehr Interaktivität hinzuzufügen. Diese können zwar in unseren Designs nur schwer darstellbar sein, es ist jedoch definitiv eine Möglichkeit, CSS3 zu unserem Vorteil zu nutzen, um Websites zum Leben zu erwecken.

Webfonts (@ font-face)

Die Verwendung der @ font-face-Regel für CSS3 war für Designer brillant, da wir in der Typografie, die wir in unseren Designs verwenden, ein wenig experimenteller sein können. Im Wesentlichen hat die Verwendung von Webfonts den Designern viel mehr Freiheit gegeben, um Kreativität durch ihre Arbeit zum Ausdruck zu bringen.

Warum Webfonts großartig sind

Webfonts sind großartig, da sie uns eine neue Möglichkeit bieten, visuell beeindruckende Websites zu erstellen. Es gibt eine große Auswahl an Schriftarten, die wir jetzt in unseren Websites verwenden können, wenn nicht in Hunderten, ganz bestimmt in Tausenden.

Nicht alle werden großartig sein, und es gibt definitiv einige, die von vielen bevorzugt werden, aber es gibt so viele Edelsteine, die Sie in Ihren Designs verwenden können, die im Vergleich zu einigen der älteren, sicheren Web-Fonts einfach nur nett aussehen.

Webfonts bieten uns auch eine sicherere Art, verantwortungsbewusst mit unseren responsiven Designs zu arbeiten. Erinnern Sie sich an den Tag, an dem „ausgefallene“ Überschriften mit alternativen Schriftarten erstellt wurden (die nicht als websicher eingestuft wurden) und als Bilder oder Bildhintergründe platziert wurden? Web-Fonts bedeuten, dass wir diese Praxis sicher aufgeben und hinter uns lassen können, da wir wissen, dass wir schöne Websites mit vollständig zugänglichen und skalierbaren Fonts haben werden.

Wie kann ich Webfonts verwenden?

Mit der Einführung von Webfonts und @ font-face sind einige Dienste aufgetaucht, die uns bei der Implementierung von Webfonts in unsere Websites helfen. Diese Dienstleistungen umfassen:

• Typekit
• H & FJ-Cloud-Typografie
• Fontdeck
• Fonts.com
• Google-Schriftarten

Und selbst bei so wenigen Diensten gibt es viele Möglichkeiten, diese in Ihren Entwicklungsprozess zu implementieren. Einige verwenden JavaScript und andere verwenden reines CSS, um die Schriftarten zu laden. Aber was ist mit dem Workflow der Designer? Wie funktioniert die Arbeit mit Webfonts in statischen Modellen?

Es ist wirklich ein bisschen schwierig, da es viele Möglichkeiten gibt, die von Ihnen verwendeten Webfonts in die Grafiksoftware zu integrieren, die Sie möglicherweise verwenden. Typekit hat kürzlich Pläne angekündigt, eine Desktop-Synchronisierung mit Adobe Creative Cloud zu integrieren, und begann mit der Einführung für ausgewählte Benutzer.

Dank der Übernahme von Typekit durch Adobe können sie jetzt perfekt mit Photoshop und Illustrator und allen anderen Adobe-Produkten synchronisiert werden. Dies ist eine gute Nachricht für Designer.

Abgesehen davon gibt es keine andere Möglichkeit, die von uns gewählten Webfonts in unseren Mockups zu integrieren, es sei denn, wir kaufen die standardmäßige Desktop-Version der Schriftart separat zur Webfont. Wenn Sie sich nicht um die Marke für eine Website kümmern, kann dies ein bisschen teuer und unkomfortabel werden.

Eine andere Möglichkeit, die Sie bei der Arbeit mit Typografie haben, besteht darin, recht schnell in den Browser zu springen. Entweder durch die Arbeit mit einem Dienst wie Typecast, wie in den vorherigen Typography-Abschnitten dieser Serie erläutert, oder indem Sie die Web-Schriften Ihres bevorzugten Dienstes erwerben und sehen, wie sie mit Ihrem Inhalt in einer prototypisierten Version Ihres Designs reagieren.

Wie auch immer Sie sich entscheiden, mit Web-Schriftarten in Ihrem Design zu arbeiten, Sie können garantiert sein, dass Sie ein kreativeres, besser aussehendes Endergebnis für Ihre Benutzer haben und auf das Sie stolz sein können.

Icons

Icons sind im Moment eine große Sache; eine gute Sache, die in der Welt der “Trends” geschieht. Ich denke, dass Icons und visuelle Bilder, die darunter fallen können, beispielsweise ein Logo, ein großartiges Werkzeug sind, um Ihre Benutzer auf einer Website zu führen. Neben Text verwendet, können sie eine große visuelle Hilfe sein.

In einer Welt, in der sichergestellt werden muss, dass Bilder und Layouts auf so vielen Geräten und Bildschirmgrößen gut funktionieren, müssen wir jedoch sicherstellen, dass unsere Symbole und Bilder allgemein gut funktionieren und zukunftssicherer sind. Glücklicherweise stehen uns einige Optionen zur Verfügung, mit denen wir sicherstellen können, dass wir dies tun.

PNG

Das schöne PNG (das uns eine Möglichkeit bot, einen transparenten Hintergrund in ein Bild einzufügen, das keine zwielichtige GIF war) ist eine sichere Methode, um mit Symbolen auf Ihren Websites zu arbeiten.

Aber vergiss nicht: Wenn Sie einer Retina-Menge schön aussehende Bilder liefern möchten, benötigen Sie eine Art CSS- oder JavaScript-Sicherung, um sicherzustellen, dass Sie dies tun.

Die Arbeit mit PNG-Dateien sollte auch nicht viel an Ihrem Workflow ändern. Sie können alle von Ihnen erstellten Bilder einfach in der erforderlichen Größe speichern und direkt in Photoshop speichern.

PNGs funktionieren auch gut für die Skalierung, solange Sie sie verkleinern. Wenn Sie ein Bild vergrößern müssen (was manchmal passiert, wenn Sie von einem größeren Ansichtsfenster zu einem kleineren Ansichtsfenster wechseln), sieht die PNG-Datei oft pixelig und verschwommen aus, was Sie offensichtlich vermeiden möchten.

SVG

Dieser letzte Punkt in Bezug auf PNG bringt uns schnell zu der SVG-Option, die wir für unsere Icons haben. Wenn Sie ein vektorbasiertes Bild haben (z. B. in Adobe Illustrator erstellt) und nicht rasterbasiert, wie es beispielsweise in Adobe Photoshop der Fall ist, können Sie dieses Bild als SVG-Datei speichern.

Als Entwickler sind Sie wahrscheinlich mit SVG vertraut und wissen, wie Sie sie auf Ihrer Website implementieren können. Andernfalls können Sie mit SVG eine skalierbare Grafik in Ihre Website-Designs integrieren. Auf diese Weise müssen Sie sich bei der Größenänderung oder Skalierung nicht um die Grafik drehen, die in Pixeln oder Unschärfen dargestellt wird, sondern sie wird sich perfekt auf die erforderliche Größe ausdehnen.

Dies eignet sich hervorragend für Logos und Symbole. Grundsätzlich gilt dies für alles, was möglicherweise skaliert werden muss, das Sie entweder bereits in einem Vektorformat haben oder bei Bedarf problemlos in diesem Format neu erstellen können. Beim Entwerfen und Speichern Ihrer SVG-Bilder würde ich immer empfehlen, auf die optimale Größe zu arbeiten, die Sie meistens benötigen. Auf diese Weise muss Ihr Browser nur unter bestimmten Umständen und nicht zu jeder Zeit die Größe und Größe des Logos ändern.

Web-Schriften

Wie wir jetzt bereits wissen, sind Web-Schriften unendlich skalierbar und funktionieren in aktuellen Browsern perfekt auf unseren Websites. Einige sehr kluge Leute konnten sowohl Web-Fonts als auch Icons kombinieren, um Icon- oder Symbol-Web-Fonts zu erstellen. Ähnlich wie Wingdings haben diese oft mehr Bedeutung und Kontext als ein einfaches Symbol.

Es gibt Argumente für und gegen Webfonts als Symbole: Einige sagen, dass das Laden einer ganzen Schriftart, um nur einige der Ligaturen zu verwenden, nicht sinnvoll ist, da dies die Seite stark belasten und die Leistung beeinflussen wird.

Mit kommerziellen Symbol-Webfonts, die Sie gekauft haben, lässt sich dies möglicherweise schwer vermeiden. Es gibt jedoch Tools, mit denen Sie Ihre eigenen Webfonts erstellen können. Hier können Sie dies vermeiden und nur eine Schriftart mit den gewünschten Symbolen erstellen. Einige sagen auch, dass Sie möglicherweise einen Teil des Kontextes mit Webfonts verlieren, da sie manchmal nur einen Buchstaben für die Anzeige des Symbols verwenden. Einige clevere Leute wie Folk bei Symbolset verwenden jedoch Schlüsselwörter für die Schriftarten, die dazu beitragen, dem Symbol, das Sie verwenden, ein wenig mehr Kontext hinzuzufügen.

Und dort haben Sie drei Möglichkeiten, wie Sie Icons in Ihren Designs verwenden können. Die Wahl liegt jetzt bei Ihnen! Die meisten Optionen werden Ihren Design-Workflow auf die eine oder andere Weise etwas erweitern, aber es liegt an Ihnen, welcher Prozess am besten in Ihren Workflow passt.