Kategorien
CMS Essentials Freebies, Tools und Templates Programmierung

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr leichtgewichtig daher. Die Voraussetzungen für die Installation sind so gering, dass ein günstiges Webhosting-Paket bereits ausreicht, um mit Grav zu experimentieren. Das Grav CMS benötigt keinerlei Datenbanken und kann in der Tat innerhalb von 30 Sekunden installiert werden. Grav ist so interessant, dass wir dir das CMS heute etwas näher vorstellen möchten.

Kategorien
Essentials Exklusiv bei drweb.de Webdesign

Weihnachts-Bundle: Alle drei Design-E-Books für 14,99 EUR (statt 32,97 EUR)

Unsere Design-E-Books sind die Bestseller im Dr. Web-Shop. Für die Weihnachts- und Neujahrszeit bieten wir unseren Leserinnen und Lesern ein besonderes Schnäppchen. Anstelle des regulären Gesamtpreises von 32,97 EUR kannst du alle drei Bücher für eine begrenzte Zeit für nur 14,99 EUR kaufen. Dafür erhältst du alle drei Bücher in allen drei Formaten (epub, mobi, pdf). Wenn das mal kein HO HO HO wert ist…

Kategorien
Essentials Icons & Fonts

Freebie: 50 derb-lustige Funny Icons

Oh, äh. Entschuldigung, der ist mir so raus gerutscht. Halte einfach eine Weile die Luft an. Hier draußen verzieht sich sowas ja schnell… Ja, das finde ich lustig. Sehr lustig sogar. Lies am besten nur weiter, wenn es dir auch so geht.

Kategorien
Essentials Exklusiv bei drweb.de Freebies, Tools und Templates Icons & Fonts

Freebie: Human Pictos mit 500 Icons zu Menschen in Aktion

Es ist wieder soweit. Die Menschen stürmen die Innenstädte auf der Jagd nach dem perfekten oder wenigsten irgendeinem Weihnachtsgeschenk für ihre Lieben oder weniger Lieben. Unser Geschenk erfordert lediglich die Bewegung deiner rechten oder (je nachdem) linken Hand.

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Webdesign: So identifizierst du die verwendeten Schriftarten (nicht nur) auf Websites

Die massive Verbreitung der Webfonts bringt es mit sich, dass Typografie auch im Netz immer aufwändiger wird. Als stets interessierter Developer kommt es daher immer häufiger vor, dass du wissen möchtest, welcher Font da eingesetzt worden ist. Auch im Printbereich wirst du regelmäßig mit dieser Frage konfrontiert. Zumeist wird sie vom Kunden gestellt. “Schauen Sie sich mal unseren Flyer aus dem letzten Jahr an. Diese Schriftart wollen wir auch im nächsten Projekt verwenden.” Der Kunde weiß natürlich nicht, welche es ist. Die folgenden Dienste wissen unterschiedlich gut zu helfen, sind aber jedenfalls die beste Toolbox, die es derzeit gibt…

Kategorien
Design Essentials Freebies, Tools und Templates

Design: 11 Web-Apps, die Farbpaletten aus Bildern erstellen

Dienste zur Erzeugung von Farbpaletten gibt es im Netz wie Sand am Meer. Solche, die auch oder nur Farbpaletten aus vorhandenen Bildern extrahieren können, sind allerdings relativ selten. Dabei entspricht es zumindest meinem Workflow weit eher, kundennahe Farbpaletten aus vorhandenen Materialien zu entwickeln, anstatt sie ganz neu zu definieren. Folgend zeige ich dir daher nur solche Onlinedienste, die dir erlauben, Farbpaletten aus Bildern automatisiert zu erzeugen. Alle vorgestellten Dienste sind kostenlos nutzbar.

Kategorien
Design Icons & Fonts

Google Fonts 2018: Diese Schriften sind im Trend

Wie fast alles im Grafik- und Webdesign sind auch Schriften immer wieder Trends ausgesetzt. Die Auswahl an Schriften wächst stetig – auch bei Google Fonts – und Neues ist daher immer wieder schnell gefunden. Folgende Schriften und Schriftkombinationen solltest du 2018 bei einem deiner nächsten Projekte einmal ausprobieren.

Kategorien
Icons & Fonts Webdesign

Typografisches Einmaleins für Websites

War Typografie zu den Anfängen des World Wide Webs etwas Nebensächliches, hat es in den letzten Jahren zunehmend an Bedeutung gewonnen. Vor allem dank CSS sind zahlreiche typografische Features möglich, die vor einigen Jahren noch undenkbar oder nur auf Umwegen zu realisieren waren. Doch alles, was möglich ist, muss auch gut umgesetzt werden. Dieses kleine Einmaleins zeigt dir, worauf du achten solltest und wie du deine Website typografisch in den Griff bekommst.

Webfonts statt Systemschriften

Eigentlich versteht es sich mittlerweile ja von selbst: Der Einsatz von Systemschriften ist keine Option mehr, wenn es um zeitgemäße und individuell gestaltete Websites geht. Neben den vielen kommerziellen Anbietern gibt es ebenso viele, bei denen du kostenlos Webfonts für deine Website findest. Allen voran sei da Google Fonts genannt. Aber auch Fontsquirrel hat eine große Auswahl hochwertiger Schriften.

Um keine Probleme mit dem Datenschutz zu bekommen, solltest du allerdings darauf verzichten, Schriften durch Google hosten zu lassen. Lade sie dir herunter und stelle sie über deinen eigenen Webspace bereit. Dann gibt es keinen Ärger bezüglich der DSGVO. Denn Google Fonts erfasst über die JavaScript-Einbindung personenbezogene Daten.

Google Fonts

Das mittlerweile etablierte Dateiformat WOFF2 für Webfonts schafft es zudem, Schriften deutlich besser zu komprimieren als sein Vorgänger. Über zu große Dateien musst du dir also auch keine Sorgen machen.

Schriften richtig kombinieren

In der Regel kommt auf einer Website mehr als eine Schrift zum Einsatz. Für ein abwechslungsreiches Design ist eine gewisse typografische Abwechslung auch durchaus sinnvoll. Hier solltest du natürlich zwei Schriften finden, die gut zueinander passen. Auf der sicheren Seite bist du, wenn du Schriften derselben Familie kombinierst.

So lassen sich die „Source Sans“ und die „Source Serif“ von Adobe aus nachvollziehbaren Gründen immer kombinieren. Ansonsten gilt: Je ähnlicher zwei Schriften sind, desto schwieriger wird es. Wenn du eine Serifenlose ausschließlich in Versalien (Großbuchstaben) verwendest, kannst du fast jede andere Serifenschrift damit kombinieren. Je ähnlicher sich die Schriften sind, desto mehr musst du unter anderem darauf achten, dass die x-Höhe – also der Abstand zwischen Grund- und Mittellinie – der beiden Schriften ähnlich ist.

Auch hier hilft ein Blick zu Google Fonts. Dort werden dir passende Schriftkombinationen zu einer Schriftart angeboten. In jedem Fall gilt: Mehr als zwei Schriften solltest du in der Regel nicht kombinieren. Variationen kannst du durch verschiedene Styles – zum Beispiel fett oder kursiv – erreichen.

Die richtige Größe wählen

Wichtig für die Lesbarkeit einer Schrift ist natürlich die Größe. Eine perfekte Größe lässt sich pauschal für eine Schrift nicht festlegen. Letztendlich muss eine Schriftgröße immer für das jeweilige Gerät passen. Auf Smartphones ist mitunter eine andere Schriftgröße notwendig als auf einem großen Monitor am Schreibtisch.

Per Media Queries solltest du also unterschiedliche Größen definieren, die sich je nach Auflösung des Displays beziehungsweise Größe des Browserfensters richten.

Immer wieder gibt es Diskussionen, welche Einheit für die Angabe einer Schriftgröße denn die passende ist. Meist bietet sich die Einheit „em“ an. „1em“ entspricht bei den meisten Browsern einer Größe von 16 Pixeln. Der Vorteil der „em“-Einheit besteht darin, dass sie relativ ist. Wer Überschriften zum Beispiel immer doppelt so groß dargestellt haben möchte wie Fließtext, wählt „2em“. Ändert sich die Größe des Fließtextes, werden auch Überschriften entsprechend größer dargestellt. Während „em“ immer relativ zum jeweiligen Elternelement definiert ist, gibt es mit „rem“ eine Einheit, die immer relativ zum „<body>“-Element definiert ist.

Mit der Einheit „vw“ (für „view width“) kannst du Schriften auch direkt an der Breite des Browserfensters beziehungsweise Viewports ausrichten. „1vw“ entspricht dabei ein Prozent der Breite des Viewports. Der Vorteil dieser Einheit besteht darin, dass Texte bei veränderter Breite immer mit skalieren – ähnlich wie Bilder, die sich immer an der Breite des Viewports orientieren. Vor allem für Überschriften und kurze Texte bietet sich diese Einheit prima an.

OpenType-Features nutzen

Im klassischen Desktop-Publishing werden OpenType-Features wie Ligaturen, Mediävalziffern und andere typografischen Besonderheiten und Raffinessen bereits lange eingesetzt. Aber dank CSS verwendest du die verschiedenen Möglichkeiten von OpenType-Schriften auch im Webdesign – vorausgesetzt natürlich, die jeweilige Schrift unterstützt diese Features.

Um bestimmte OpenType-Merkmale zu nutzen, musst du diese per CSS aktivieren. Die entsprechenden Eigenschaften beginnen mit „font-variant“. Um zum Beispiel Ligaturen zu verwenden, nutzt du die Eigenschaft „font-variant-ligatures“. Der Wert „common-ligatures“ aktiviert die Standard-Ligaturen einer Schrift. Dazu zählen klassische Ligaturen, bei denen Buchstabenpaare wie „fi“, „fl“ und „ff“ durch entsprechende Ligaturen ersetzt werden.

Daneben gibt es noch sogenannte bedingte Ligaturen, welche oft zur Verschnörkelung verwendet werden. Diese werden mit dem Wert „discretionary-ligatures“ aktiviert. Es gibt zahlreiche weitere Features – zum Beispiel für Zahlenformate und Kapitälchen. Nicht immer unterstützt eine Schrift jedoch alle OpenType-Merkmale.

Interpunktion und Sonderzeichen richtig einsetzen

Wer typografisch alles richtig machen will, achtet natürlich auf die korrekte Interpunktion und die Verwendung richtiger Zeichen. Das fängt bei Anführungszeichen an, die im Deutschen entweder „so“ oder »so« aussehen, aber niemals „so“.

Wenn du Zitate per „<cite>“ oder „<blockquote>“ auszeichnest, kannst du die Anführungszeichen auch per CSS definieren, indem du per „::before“ und „::after“ und der „content“-Eigenschaft die öffnenden beziehungsweise schließenden Anführungszeichen hinterlegst.

Außerdem solltest du den Unterschied zwischen Trenn- und Gedankenstrich berücksichtigen – letzterer ist deutlich länger als der Trennstrich. Dank UTF-8 müssen all diese Zeichen nicht mehr per HTML-Entitys ausgezeichnet werden.

Die hier erwähnten Beispiele zählen schon zur sogenannten Detailtypografie, mit denen ganze Bücher gefüllt sind. Aber wer die hier vorgestellten Regeln und Tipps beachtet, macht schon eine Menge richtig, wenngleich es in der Typografie ziemlich viel gibt, was man falsch machen kann.

Kategorien
Essentials Freebies, Tools und Templates Webdesign

Gewusst wie: Kostenlose E-Books für Designer und Entwickler

Wenn du ein Web-Designer oder -Entwickler bist, dann weißt du ja, dass du dich niemals genug weiterbilden kannst. E-Books bieten sich dafür an, denn hier erhältst du Lernstoff in komprimierter Form. Das ist vorteilhaft, denn unter Zeitmangel leidet wohl so ziemlich jeder Webworker. Ich habe mich daher für dich auf die Suche nach E-Books gemacht.

Kategorien
(Kostenlose) Services Essentials Fortbildung Inspiration Programmierung Showcases Tutorials

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung waren auf diese Weise völlig von sämtlichen Bildungsmöglichkeiten abgeschnitten. Das Internet ist angetreten, all das zu verändern. Heutzutage ist die Chance auf Bildung nur die Frage einer funktionierenden Netzverbindung.

Kategorien
Cartoons Essentials Exklusiv bei drweb.de

Cartoon: Sichtbarkeit

Wer kennt die Situation aus unserem Cartoon der Woche nicht? Also, ich meine die auf dem ersten Bild. Und wer hätte sich nicht schon einmal vorgestellt, darauf zu antworten, wie unser Webdesigner auf dem zweiten Bild? Die alte Mär von der Sichtbarkeit ist einfach nicht auszurotten. Danach müsste man nur oft und lange genug kostenlos arbeiten, um einen Auftrag nach dem anderen einzuheimsen. Dabei gilt gerade bei dem sogenannten „Spec Work“ meist leider nur: „Von nichts kommt nichts“.

Cartoon: Sichtbarkeit

Übrigens, weitere Cartoons gibt es hier.

Der Cartoon erschien zuerst in unserem zweiwöchentlichen Newsletter. Ein Abonnement lohnt sich.

(Beitragsbild: Depositphotos)

Kategorien
Design Dr. Web-Ratgeber Essentials Exklusiv bei drweb.de Fortbildung Programmierung Responsive Design UI/UX Webdesign

Brandneu: Webdesign der Zukunft (E-Book)

In welche Richtung muss ich mich als Webdesigner und Webentwickler bewegen, wenn ich auch in einigen Jahren noch mein Stück vom Kuchen abhaben will? Diese Orientierung bietet dir unser neuestes E-Book mit dem sprechenden Titel Webdesign der Zukunft.

Kategorien
Cartoons Essentials

Cartoon: Was macht eigentlich dein Sohn beruflich?

In zwanzig Jahren wird es kein Thema mehr sein. Aber heutzutage ist es doch immer noch schwer, seinen Eltern zu erklären, womit wir eigentlich unser Geld verdienen, oder? Meine Mutter pflegte jahrelang immer zu antworten „Irgendwas mit Computern“. Und wer kennt nicht den geflügelten Ausdruck „Irgendwas mit Medien“? Es ist aber auch nicht so einfach mit den modernen Berufen.

mutter_cartoon

Erst kürzlich marschierte ein Handwerker in mein Büro, um die Klimaanlage zu warten. Ich saß am Computer. Er sprach: „Ach, gut. Ich hatte schon befürchtet, ich würde Sie stören!“ Hallo? Otto Normalbürger assoziiert ganz offenbar mit Menschen, die am Computer sitzen, Facebook, Clipfish und YouPorn, aber kein ernsthaftes Arbeiten. Ich wollte erst ansetzen und dem guten Mann erklären, dass er mich sogar überaus deutlich gestört hatte, denn er hatte mich aus dem Flow gerissen. Ich kam zu dem Ergebnis, dass er mich ohnehin nicht verstehen würde und zuckte nur, „Nein, schon gut“ murmelnd, mit den Schultern.

Wie erklärst du deinen Eltern, womit du deine Brötchen verdienst? Und glaubst du, sie verstehen das?

Weitere Cartoons findest du an dieser Stelle >>

(Artikelbild: Depositphotos)

Kategorien
Dr. Web-Ratgeber Exklusiv bei drweb.de Webdesign

Webdesign konkret: So baust du Websites heute (E-Book)

Funktionierende Gestaltungselemente und Konzepte, die geräteübergreifend funktionieren. Das ist der Schwerpunkt unseres E-Books mit dem sprechenden Titel Webdesign konkret.

Kategorien
Design E-Business Essentials Freebies, Tools und Templates Freelance HTML/CSS

Pro und Contra: Design mit fertigen Templates

“Echte” Designer schlagen schon die Hände über dem Kopf zusammen, wenn einer bloß das Wort “Template” oder “Theme” in den Mund nimmt. Schauen wir uns das Ganze mal objektiver an.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Müllmail: Kostenlose Wegwerf-Adressen für jedermann

Sie sind so alt wie das Netz. Wegwerf-E-Mail-Adressen habe ich zum ersten Mal in den Neunzigern genutzt. Heutzutage gibt es indes noch weit mehr Bedarf daran. Der deutschsprachige Dienst Müllmail.com ist derzeit deine beste Anlaufstelle, wenn du aktiven Spamschutz betreiben willst.