Webdesign

RGB oder CMYK?

Print, Webdesign

Kurz und knapp: RGB (Rot-Gelb-Blau) wird für die Darstellung von Farben am Monitor benutzt, während CMYK (Cyan-Magenta-Yellow-Black[=key]) für die Mischung von Farben beim Druck auf Papier benötigt wird.

Im Klartext heisst das, alle Online-Grafiken in RGB und alle Druck-Grafiken in CMYK umzuwandeln.

[Mehr Infos zum Thema „Druckvorbereitung“ folgen bald in einem eigenen  Artikel…]

Wie und wo kann man das überprüfen?

rgb-groesserBei Bildern und Fotos geht es ganz einfach über das Kontextmenü (Rechtsklick) der Maus: Unter „Informationen“ ist vermerkt, in welchem Format die Farbinformationen vorliegen.

Das Umwandeln geht mit den gängigen Bildbearbeitungsprogrammen sehr schnell. Wer z.B. mit Adobe Photoshop arbeitet, kann unter dem Tab „Bild“ den benötigten Farbraum unter „Modus“ auswählen.

Achtung: Lasst Euch nicht von Euren Augen täuschen und überprüft es immer (!), aber es macht einen riesengroßen Unterschied, ob man (fälschlicher Weise) CMYK bei der Ausgabe am Monitor benutzt oder Farbwerte beim Druck in RGB angegeben hat.

Am Monitor sind die Unterschiede in einigen Fällen vielleicht nur in Nuancen erkennbar, beim Druck wird falsches Farbmanagement oft zum reinen Glücksspiel und mitunter sehr häßlichen Farbabweichungen!

Breakpoints – was ist das?

Design, Webdesign

Kürzlich wurde ich  gefragt, was das denn sei: Breakpoints?
Das sind genau die Stellen, an denen sich das Layout einer responsiven Webseite ändert, antwortete ich. Sichtbar wird das, wenn man das Browserfenster in der Größe verändert und Elemente der Webseite an einer anderen Position erscheinen oder wenn aus Text-Links plötzlich kleine Icons werden.

Anschließend wurde ich gefragt, „welche Breakpoints“ ich denn genau kennen würde.
Gängige Praxis im Webdesign ist immer noch, dass man durch (möglichst viele) Media-Queries-Abfragen versucht, (möglichst viele) User an möglichst vielen Endgeräten zu erreichen und ihnen hierfür die jeweils optimierte Version anzubieten. Bei einigen Webdesignern führt diese Praxis zu bis zu 20 verschiedenen Abfragen!

Bei diesen Abfragen orientiert man sich an den unterschiedlichen Abmaßen, den Auflösungen und der Orientation (Hoch bzw. Querformat) von iPhone und iPad, kleineren Tablets anderer Anbieter, Laptops und internetfähigen TVs.
Im Klartext heißt das, mit Hilfe der Media-Queries verschiedene Versionen mit Breakpoints bei

  • 320 px,
  • 480 px,
  • 600 px,
  • 768 px,
  • 1024 px,
  • 1200 px und eventuell noch bei
  • 1750 px

zu erstellen. Jeder merkt schon beim Mitlesen: Das sind aber viele! Und trotzdem fehlen welche! Rein theoretisch kann nämlich jede beliebige Stelle im Layout ein Breakpoint sein und zusätzlich gibt es noch verschiedene Gestaltungsansätze à la „Mobile First“ oder „Content First“ bzw. „Graceful Degradation“ und „Progressive Enhancement“.

Fazit

Für mich persönlich ist und bleibt der Inhalt „König“ und nur dieser sollte maßgeblich bestimmen, wann und wo Breakpoints eingesetzt werden, wobei einige, zielgerichtete MQ-Abfragen erlaubt sein und ein flexibles Layout (in % oder em) angestrebt werden sollte. Einen sehr interessanten Ansatz hierzu verfolgt der Designer David Hellmann in seinem Beitrag „CSS Media Queries: Das Problem mit fixen Breakpoints„. Leider habe ich mich bisher noch nicht viel mit Sass/SCSS beschäftigt, bin nun aber echt „angefixt“: Da ich u.a. über PHP-Kenntnisse verfüge, bin ich natürlich von der Struktur und den Einsatzmöglichkeiten von Sass begeistert! Das wird sicherlich noch den künftigen Einsatz von HTML und CSS entscheidend erweitern und bereichern!

Was meint Ihr dazu? Wie arbeitet Ihr selber und was haltet Ihr von Davids Alternative, den CSS-Code direkt ans Element zu binden? Ich bin gespannt auf Eure Ideen und Gedanken!

Hilfreiche Webdesign-Tools

Design, Webdesign

Heute möchte ich Euch eine Liste mit hilfreichen Webdesign-Tools präsentieren. Einige werdet Ihr davon sicherlich kennen, allerdings wollte ich sie mal gebündelt haben, um sie griffbereit abzuspeichern. Da es ausschließlich um Design-Tools zur Webseiten-Erstellung geht, lohnt sich für Euch vielleicht auch ein Blick in meine anderen Link-Empfehlungen?! Außerdem kennt Ihr bestimmt auch noch weitere coole Tools, also kommentiert bitte fleißig, damit sich die Liste auch wirklich lohnt!

W3C-Validierer

Auf den Seiten des W3C kann man probeweise den Code validieren lassen: Entweder gibt man den Code direkt ein (Copy & Paste) oder man überprüft gleich eine ganze URL, wie praktisch!

Umrechnungs-Tools

Gerade, wenn man responsive arbeiten möchte, muß man viele Längenangaben in em oder % angeben. Um die ganze Rechnerei zu erleichtern, gibt es auch da tolle Tools.

Grids

Wer ein Grid einfügt, ist meistens schön aus dem Schneider und muß fast nicht mehr selber rechnen..  🙂  Manche sind wirklich simpel und eignen sich deshalb hervorragend v.a. für responsive Webseiten.

Von wirklich anspruchsvollen, wie z.B. Bootstrap etc., würde ich Anfängern jedoch abraten. Sie sind enorm umfangreich und richten sich daher meist an Profis.

Frameworks

Die ultimative Unterstützung stellen wohl Frameworks dar, wo gleich mehrere Funktionen gebündelt zur Verfügung gestellt werden. An dieser Stelle möchte ich direkt  auf eine externe Liste verlinken:

Wie erstelle ich eine WP-Seite oder Blog?

Design, Webdesign, Wordpress
Technische Voraussetzungen

Natürlich muss dein Computer über allerlei Systemkomponenten verfügen, damit WordPress installiert werden kann, allerdings ist das bei fast allen neueren Computern der Fall. Ihr braucht auf jeden Fall einen Linux-Server mit Apache, PHP, MySQL usw.

Zusätzlich braucht Ihr einen FTP-Client, wie z.B. FileZilla, damit Ihr an den Dateien Einstellungen vornehmen könnt. Die genauen Details könnt Ihr natürlich bei WordPress selbst nachlesen.

Download

Wollt Ihr Eure WP-Installation auf Englisch haben, dann solltet Ihr sie am besten direkt von www.wordpress.org downloaden. Für eine deutsche WP-Installation könnt Ihr die Dateien auch von der deutschen WordPress-Seite runterladen. Für andere Sprachausgaben müsst Ihr die entsprechenden Sprachdateien auf jeden Fall zusätzlich runterladen.

Nach dem Download müsst Ihr Euch über FileZilla mit dem Server verbinden. Sollte sich auf dem Server schon eine Datei index.html befinden, sollte sie sofort gelöscht werden! Dann werden alle WP-Dateien auf den Server in das Verzeichnis .htdocs oder .html hochgeladen.

Konfiguration

Nun braucht Ihr einen Editor wie z.B. NotePad++, mit dem Ihr die Datei wp-config-sample.php öffnet. In dieser Datei müsst Ihr anschließend einige Platzhalter-Namen ersetzen:

Ihr braucht einen Namen für die Datenbank, ein Benutzername muss angegeben und ein sicheres Passwort angelegt werden. Etwas weiter unten in der Datei kommen die WP-Sicherheitsschlüssel, die Ihr Euch aber nicht merken müsst. Folgt einfach den Hinweisen in der Datei und generiert Euch neue Sicherheitsschlüssel, mit denen Ihr die alten einfach ersetzt.

Speichert alles ab und schließt den Editor. Wechselt ins lokale Verzeichnis und benennt die Datei wp-config-sample.php um in wp-config.php. Nun könnt Ihr die Datei auf den Server hochladen.

Installation

Die eigentliche Installation ist nur noch eine Kleinigkeit. Öffnet einen Browser und gebt Eure URL ein (einschließlich eventueller Unterverzeichnisse) mit der Angabe /wp-admin/install.php. Es öffnet sich dann ein Fenster, in dem Ihr den Blogtitel oder Namen der Webseite angeben könnt (kann man später auch noch ändern). Den Benutzernamen solltet Ihr aus Sicherheitsgründen ändern und ein sicheres Passwort anlegen. Auch Eure E-Mail-Adresse ist wichtig: Melden sich neue User an oder werden Beiträge kommentiert, werden auch diese Vorgänge an die E-Mail-Adresse gesendet.

Nun kann WordPress installiert werden.

Hoster mit vorinstallierten Anwendungen

Abhängig vom jeweiligen Hoster gibt es manchmal die Möglichkeit – wie in meinem Fall – dass bestimmte Anwendungen schon vorinstalliert sind, so: Einige bekannte CMS wie TYPO3, Joomla oder eben auch WordPress waren schon vorinstalliert und können bei Bedarf ganz schnell und einfach aktiviert werden. Innerhalb weniger Schritte waren eine Datenbank angelegt, Verzeichnisse erstellt, etc.

Daher solltet Ihr Euch vorher (!) genau bei dem Hoster Eures Vertrauens informieren.

Themes

Das hatte ich mir doch etwas leichter vorgestellt. Obwohl ich recht genau wusste, wie alles aussehen sollte, dauerte schon die Auswahl des Themes länger als erwartet. Kein Wunder – mittlerweile gibt es fast 2.800 zur Auswahl! Dank der Filter und Tags kann man zwar schon viele näher eingrenzen, allerdings sollte man sich vorher einige Gedanken machen:

  • Unumgänglich ist die Frage: Responsive oder nicht?
  • Gibt es einen Blog?
  • Soll ein Shop integriert werden?
  • Sollen Social-Media-Interaktionen ermöglicht werden?
  • Werden große Bildergalerien gebraucht?

…um nur ein paar zu nennen. Nachdem ich ein adäquates Theme gefunden hatte, war die Installation wirklich ein Klacks!

Warum WordPress..?!

Design, Webdesign, Wordpress

Erst durch meine Weiterbildungen wurde mir klar, wie häufig WordPress eingesetzt wird: Mittlerweile gibt es mehr als 60 Mio. WordPress-User weltweit, von allen genutzten CMS generell ist WP mit 66% der Marktführer! Die Bedienung ist in der Tat relativ leicht, PHP-Kenntnisse sind jedoch von Vorteil.

Mit mehr als 34.500 Plugins und fast 2.800 Themes lassen sich fast alle Wünsche bezüglich Funktionalität und Design erfüllen. Und außerdem – um nicht nur kostenlose Werbung für WordPress zu machen 😀 – brauchte meine persönliche Homepage dringend einen Relaunch!