Icon-Font mit IcoMoon erstellen

Font-Bibliotheken wie font-awesome und glyphicons sind sehr praktisch aber oft auch überdimensioniert, wenn man nur ein paar Icons verwenden möchte. Für diesen Fall kann man mit IcoMoon seinen eigenen Icon-Font erstellen.

icomoon-bild_im_blogpost

1. Seite aufrufen und IcoMoon App auswählen

icomoon-icon-erstellen-ideesign-koeln-auswahl

Zunächst muss die Seite icomoon.io aufgerufen werden. Oben rechts auf der Seite wechselt man zur IcoMoon App, mit der man seinen eigenen Font erstellen kann.

2. Icons hochladen oder aus anderen Fonts auswählen

icomoon-icon-erstellen-ideesign-koeln-iconauswahl

Über „Import Icons“ wählt man seine selbst erstellten Icons von seinem Rechner aus. Die Dateien müssen im SVG Format vorliegen, damit IcoMoon sie versteht. Enthaltene Schriften sollten unbedingt in Pfade umgewandelt sein, da sonst Darstellungsfehler entstehen können und auch die Dateigröße zu groß ist.

Möchte man keine eigenen Icons verwenden, kann man sich aus den verschiedenen kostenlosen Fonts wie FontAwesome, ElegantIcons oder LineIcons seine Icons individuell zusammenstellen und sich so seinen eigenen Wunsch-Font bauen.

Als nächstes auf „Generate Fonts“ klicken, um den Font zu erstellen und weitere Einstellungen zu tätigen.

3. IcoMoon Font: Einstellungen

icomoon-icon-erstellen-ideesign-koeln-download-einstellungen

Bevor man den Download-Button klickt, kann man mit Klick auf das Zahnrad rechts daneben weitere Einstellungen vornehmen.

 icomoon-icon-erstellen-ideesign-koeln-options

In den Einstellungen kann man Klassennamen vergeben oder Attribut-Einstellungen für CSS (Klassen-Pre- und Postfix) ändern. Das kann nützlich sein, wenn man mehrere Sets benutzt. Icomoon erstellt aber auch schon von Haus aus sinnvolle Bezeichnungen, wenn sie denn eindeutig benannt wurden. So wird, wenn das Icon „star.svg“ (wie in unserem Beispiel) heißt, auch die vergebene CSS-Klasse von IcoMoon zur späteren Verwendung diesen Namen enthalten. Nach dem Prinzip: „prefix-iconname-postfix“.

4. Dateien aus dem Download

Nach dem Download erhält man eine Anzahl von verschiedenen Dateien. Die wichtigsten für den direkten Gebrauch sind die Schrift-Dateien im Ordner „Fonts“ und die style.css, die man nachher in sein eigenes Webprojekt einbinden muss. Die Angaben zur Einbindung des Fonts kann man aus der style.css in sein eigenes Stylesheet übernehmen, den Ordner Fonts legt man einfach neben seinem Stylesheet ab.

Wie man dann den Webfont benutzt, ist in der Stylesheet-Datei selber erläutert.

icomoon-icon-erstellen-ideesign-koeln-dateien

Viel Spaß mit dem eigenen Icon Font!

Was sind Rich-Snippets und wie bindet man sie ein?

Rich Snippets  (dt. „reichhaltige Schnipsel“), dienen dazu, Informationen aus einer Webseite in Suchmaschinen gesondert darzustellen. Dem Nutzer wird geholfen spezifische Angaben wie Anschrift, Bewertungen oder Telefonnummern in den Suchergebnissen zu sehen. Wir zeigen beispielhaft, welche Snippets es gibt und wie man sie einsetzt.

rich-snippets-bild_im_blogpost

Warum Rich Snippets?

rich-snippets-schwarzwaelder-kirschtorte-serp-ideesign-koeln

Lecker Schwarzwälder Kirschtorte – Doch welches Rezept würden Sie nehmen? – google.com

Hier ein einfaches Beispiel. Worauf würde man wohl als erstes klicken? Der obere Eintrag von chefkoch.de wurde mit Rich-Snippets um eine Bewertung, Zubereitungsdauer und ein Artikelbild erweitert. Nutzer heutzutage haben wenig Zeit, um die gesuchten Informationen zu finden. Wenn Produktbewertungen, Anschrift oder Öffnungszeiten direkt im Suchergebnis vorliegen, ist das ein immenser Vorteil gegenüber der Konkurrenz und erhöht die Chance, dass Kunden die Seite anklicken oder Sie andersweitig kontaktieren. Bilder haben sich als besonders hilfreich erwiesen, da sie aus der Textwüste des Suchergebnisses herausstechen. Daher sind Rich Snippets eine sinnvolle Erweiterung der Webseite, um aufzufallen und dem Besucher schon im Suchergebnis Informationen an die Hand zu geben. Welche Informationen angezeigt werden, sollten mit dem gewählten Marketing-Ziel in Einklang gebracht werden.

Beispiele verschiedener Rich Snippets und ihre Bedeutung:

Hier nur ein paar der bekannteren Beispiele, denn die Datenbank von schema.org umfasst hunderte Einträge von Rich Snippets, die den Content einer Webseite im Suchergebnis von Google und Co. besser platzieren kann. Zunächst einmal sollte klar werden, welche Snippets eine sinnvolle Erweiterung in den Suchergebnissen bedeuten. Für lokale Geschäfte lohnen sich Angaben des Standorts, der Telefonnummer, Bewertungen und möglicherweise auch aktueller Events.

· Bewertungen

Eines der am meisten genutzten Rich Snippets weltweit. Nutzer können für verschiedene Produkte auf der Webseite eine Bewertung hinterlassen. Dabei hat sich eine Bewertung von 0 bis 5 Sternen bewährt. Google zeigt diese standardmäßig als Sterne an, deklariert man die Bewertung mit dem dafür vorgesehenen Rich Snippet.

· Unternehmen und Organisationen

Rich Snippets bieten eine genaue Darstellung des Unternehmens für die Suchanfrage. Weitreichende Informationen wie die Branche, Mitarbeiter, den Standort und Unterorganisationen können mit Rich Snippets visualisiert werden.

· Rezepte

Eine beliebte Angabe sind Rezepte. In den Suchanzeigen können durch Angabe der Snippets z.B. bereits Kalorienanzahl oder auch Ausschnitte des Rezepts dargestellt werden.

· Veranstaltungen

Veranstaltungen können mit Anfangsdatum, den darstellenden Akteuren und Direktoren, Sponsoren und etlichen weiteren Informationen ausgestattet werden.

· Produkte

Von Produktfotos über passende Bewertungen bis zu Kundenreviews ist alles möglich, um Besucher schon in den Suchergebnissen zu einer Conversion zu bekommen.

· Musik

Alben können in einer kompletten Liste dargestellt werden. Mit Albumcover und den jeweiligen Interpreten. Dabei kann auch ein direkter Link zum Abspielen der Musik angeboten werden. Regionsabhängige Angaben, Bitrate und weitere Angaben zu den Stücken sind nur eine von vielen Möglichkeiten Musik auf Google zu promoten.

· Preise

Zusammen mit Produktreviews bietet es sich an, den Preis des Produkts direkt im Suchergebnis anzeigen zu lassen. Vielleicht bietet die eigene Webseite ja einen besonders guten Preis an. Der sollte auf jeden Fall Platz auf Google finden.

· Videos

Videos sind einige der wenigen Schemas, die kein Text-Snippet sind. Sie können als Direktlink mit Thumbnail, weiteren Informationen wie Bitrate, Autoren, Caption oder Akteuren dargestellt werden.

Einbindung in eine Webseite

Im Grunde ist es ziemlich einfach bereits erstellte Inhalte mit Rich Snippets auszustatten. Dazu müssen Angaben in der HTML-Syntax der Webseite getätigt werden. Mit dem HTML-Attribut „itemprop“ und dem jeweiligen Wert z.B. „name, mail, telephone“ , den man auf schema.org nachlesen kann, werden Elemente für Suchmaschinen sichtbar ausgezeichnet.

Ein umschließendes div-Tag gibt der Suchmaschine Informationen, nach welchem Schema die Daten angelegt sind (hier: itemtype=“http://schema.org/Recipe„) und Attribut „itemscope“, dass als Elternattribut funktioniert. Es handelt sich also um ein Rezept. Die beschriebenen Child-Tags stehen für die verschiedenen Informationen, die man Nutzern für ein Rezept geben kann. Die Attribut-Werte sind sprechend. Zum Beispiel geben „itemprop“ Werte, wie ‚cookTime‘ die veranschlagte Zubereitungsdauer des Rezepts an.

WordPress Plugin – All In-One Rich Snippets

all-in-one-rich-snippets-plugin-wordpress-ideesign-koeln

Mit dem kostenlosen Plugin „All In One Scheme.org Rich Snippets“ können die Rich Snippets mit einem einfachen Interface in die eigene WordPress Installation eingefügt werden und müssen nicht manuell in den Code eingetippt werden. Dabei bietet das Plugin eine automatische Vorschau des Suchresultats. Die meisten Snippets werden bereits unterstützt und weitere sollen noch hinzugefügt werden.

Quellen:
schema.org
webmasterpro.de

Seite nicht gefunden? Tipps für 404-Fehler in WordPress

Findet ein Server die gewünschte Seite nicht, entsteht ein sogenannter 404-Fehler mit entsprechender Anzeige. Für den Nutzer kann das bedeuten, dass er die Webseite verlässt. Wir zeigen, was man nicht nur in WordPress tun kann, um das zu verhindern.

404-fehler-wordpress-bild_im_blogpost

Eine 404-Seite sagt im Grunde nur, dass die Seite, die ein Nutzer aufrufen möchte, nicht auf dem Server gefunden wurde. Der Server arbeitet ordnungsgemäß, nur die aufgerufene Seite befindet sich nicht an Ort und Stelle. Deshalb zeigen wir hier:

  1. Weshalb gibt es 404 Seiten?
  2. Wie generiert WordPress 404 Seiten?
  3. Welche Strategie gibt es für 404 Seiten?

Weshalb gibt es 404-Seiten?

Zunächst sind 404-Seiten kein spezielles Problem von WordPress. Jedoch kann man mit WordPress die Permalink-Struktur ändern und leider auch zerstören. Meistens entstehen 404-Fehler durch falsche Schreibweise der URL des Nutzers oder des Autors der Webseite.

Die Permalink-Struktur kann auf allen Seiten und Beiträgen im WordPress Dashboard überprüft und geändert werden. Sind die Permalinks grundsätzlich im falschen Format, ist es möglich sie im Backend unter Einstellungen -> Permalinks auf die bevorzugte Schreibweise zu stellen. Dabei empfiehlt es sich, die URL „sprechend“ zu gestalten:

Beispiel: www.webseite.de/unterseite/unter-thema

Was macht WordPress bei einem 404-Fehler?

WordPress sucht bei einem Seitenaufruf im Dateisystem nach der index.php, die wiederum auf eine Unterseite verlinkt. Sollte die Seite in der Datenbank nicht gefunden werden, wird alternativ auf die 404.php verwiesen. Normalerweise befindet sich in jedem Standard Theme eine 404.php. Falls dem nicht so ist, verlinkt WordPress automatisch auf die Startseite der Installation. Eine 404 Seite kann wie jedes andere Seiten-Template erstellt werden.

Die 404.php Datei befindet sich standardmäßig im Theme-Verzeichnis und sollte einen generischen Inhalt haben, wie einen 404-Text, der den Nutzer auf den Fehler hinweist und eine Suchmaske. Alternativ kann man sich für diese Seite eine Strategie überlegen, die den Nutzer gezielt leitet. Möchte man ihn zu einer bestimmten Seite bewegen oder soll er selbst suchen können? Ist eine Auflistung der meist gesuchten Begriffe sinnvoll?

404 Seite erstellen – WordPress Codex: Create a 404 Page

Welche Strategie für 404-Seiten?

Bevor man anfängt die Seite zu modifizieren, sollte man sich eine 404-Strategie überlegen. Woher kommen die Nutzer und kann man die kaputten Links schon vorher reparieren? Was kann man tun, damit der Nutzer auf der Seite bleibt und nicht auf eine andere Seite springt? Und falls Nutzer öfter über eine falsch geschriebene Seite kommen, sollte man sie auf die richtige Webseite leiten?

1. Kaputte Links überprüfen

Zunächst sollte überprüft werden, ob es kaputte Links gibt, die auf nicht mehr vorhandene Inhalt verweisen. Mit den folgenden Tools erhält man eine übersichtliche Liste dieser Links.

Google Webmaster Tools – Crawl Errors
Indem man einen Snippet Code in die Webseite einfügt, bestätigt man, dass man Besitzer der Webseite ist. Danach erstellt Google eine Liste von Links, über die die Suchmaschine die Seite gecrawlt hat. Dabei werden sowohl interne als auch externe Links überprüft. Google zeigt nun nicht mehr funktionierende Links an.

w3 Validator – Checklink
Der w3 Validator überprüft nur die interne Verlinkung einer Webseite und listet die vorhandenen Fehler sauber untereinander auf. Es gibt außerdem Tipps für die Linksstruktur, um die Seitengeschwindigkeit zu erhöhen.

2. WordPress-Plugins – 404 Seiten umleiten

Wer sich jedoch nicht darum kümmern will, wie seine 404 Fehlerseite aussieht, kann sie umleiten. Mit diesen Plugins geht das in WordPress sehr komfortabel.

Bildschirmfoto 2017-01-12 um 16.07.15

404 to 301
Mit diesem Plugin können 404-Seiten automatisch auf eine andere Seite weitergeleitet werden. Ideal, um direkt im WordPress Backend nicht vorhandene Seiten umzuleiten.

 

Bildschirmfoto 2017-01-12 um 16.12.22

404 to Homepage
Dieses Plugin leitet sämtliche 404-Seiten zur Startseite der Homepage weiter.

3. Kreative 404 Seite

Man kann auch etwas kreativer an die Erstellung von 404-Seiten herangehen. Das Magazin t3n hat dafür Beispiele aufgelistet, die zur Inspiration dienen können:

404 Error! Wanna play Pacman instead?

Fazit

Für welche Strategie man sich auch entscheidet: Man sollte das Potenzial einer 404-Seite nicht liegen lassen und es für den eigen Vorteil nutzen. Alles ist besser, als den Besucher auf einer weißen Webseite alleine zu lassen. Eine gute 404-Strategie ist Bestandteil der Benutzerführung und wirklich ohne großen Aufwand zu realisieren.

Die 10 schönsten Webfonts

Seitdem Google das Hosting für Open Source Schriften zur Webeinbindung übernommen hat, sind die Zeiten der ewig gleichen „Arial, Helvetica, sans-serif“-Layouts vorbei. Wir haben 10 der zurzeit angesagtesten Webschriften zusammengetragen. 5 davon zur kostenlosen Nutzung, 5 aus dem kostenpflichtigen Typekit-Abo von Adobe.

Schreibwerkstatt - Die 10 schönsten Webfonts

Freie Webfonts

Die hier angegebenen Schriften sind komplett kostenlos herunterzuladen. Entweder findet man sie auf der Google Fonts Seite oder auf fontsquirrel.com. Auf diesen Webseiten ist es außerdem möglich einen Test mit beliebigen Textausschnitten durchzuführen und Schriften zu vergleichen.

1. Source Sans Pro

10_schoenste_webfonts-sourcesanspro-ideesign-koeln

Die serifenlose Source Sans Pro war Adobes erste Open Source Schriftart und ist für digitale Interfaces optimiert worden. Sie wurde von Paul D. Hunt entworfen und ist in insgesamt 12 verschiedenen Schriftschnitten erhältlich.

2. Open Sans

10_schoenste_webfonts-opensans-ideesign-koeln

Mit ihren offenen Formen und dem neutralen, freundlichen Charakter gehört die serifenlose Open Sans von Steve Matteson zu einer der beliebtesten Schriften im Web. Sie wurde sowohl für den Druckbereich als auch für das Web und mobile Anwendungen optimiert und zeichnet sich durch ihre hervorragende Lesbarkeit aus. Sie umfasst circa 900 Zeichen und ist in 10 Schriftschnitten erhältlich.

3. Raleway

10_schoenste_webfonts-raleway-ideesign-koeln

Raleway ist eine freie, serifenlose Schrift, die vor allem für Überschriften gebräuchlich ist. Ursprünglich nur mit einer Schriftstärke ausgestattet wurde sie 2012 von Pablo Impallari und Rodrigo Fuenzalida in 2012 und iKerned von Igino Marini um 8 Schriftstärken erweitert.

4. Dosis

10_schoenste_webfonts-dosis-ideesign-koeln
Eine abgerundeter, serifenloser Schrifttyp mit gerade Strichen und abgerundeten Buchstabenenden. Erzeugt durch weiche Formen und geometrische Strichführung eine gelungene Mischung aus Seriosität und Verspieltheit.

5. Arvo

10_schoenste_webfonts-arvo-ideesign-koeln
Unter vielen serifenlosen Schriften im Webbereich sticht Arvo durch seine geometrische, serifenbetonte Anmutung angenehm hervor. Gestaltet von Anton Koovit und optimiert für die Webanwendung ist die beinahe monolineare Schrift gut lesbar auf den meisten Geräten. Arvo steht im Finnischen für „Nummer, Betrag oder Wert“, was den Charakter der Schrift gut beschreibt.

Kostenpflichtige Webfonts aus Typekit von Adobe

Bei Typekit handelt es sich um ein Abonnement für eine Schriftenbibliothek, aus der man anstatt einzelne Schriften zu lizensieren, Schriftarten auswählen kann, die über eine App synchronisiert werden. Typekit ist quasi das Spotify unter den Schriftbibliotheken: Man kann die Schrift benutzen, hat aber keinen Zugriff auf die Schriftdatei selber. Man erhält Typekit automatisch zum Abonnement der Creative Cloud von Adobe dazu. Aber auch ohne CC-Abonnement kann man die Schriften ausprobieren und ein separates Typekit-Abonnement abschließen. Die Schriften sind unterteilt in Desktop- und Web-Nutzung. Wobei viele der Schriften für beide Zwecke verwendet werden können.

6. Proxima Nova

10_schoenste_webfonts-proximanova-ideesign-koeln

Die Proxima Nova ist eine Überarbeitung der Proxima Sans aus dem Jahr 1994 und zeichnet sich durch seine humanistischen Proportionen aus und eine eher geometrische Anmutung. Sie besteht aus 3 Schriftbreiten mit jeweils 8 passenden Schriftstärken. Die Schrift wird mit verschiedenen Erweiterungen, wie Ligaturen, Frakturen, passenden Ordnungszahlen, Dingbats ausgeben und unterstützt sowohl die meisten lateinischen Schriften als auch Währungen.

7. Museo

10_schoenste_webfonts-museo-ideesign-koeln

Angefangen mit der Letter „U“ ist die Museo durch ihre geradlinige Schriftstärke und ihr charakteristischer nahtloser Übergang in die Serifen ein besonderer Anblick. Leichter Verspieltheit und ein klares Auftreten sind die Charakteristiken der Museo, die sich vor allem für größere Textgrößen eignet.

8. FF Market Web

10_schoenste_webfonts-ffmarketweb-ideesign-koeln

Handgeschriebene Antiqua aus dem Jahr 1996 vom deutschen Schriftdesigner H. A. Simon. Sie eignet sich durch ihre dynamische Strichführung gut für vielfältige Anwendungen im Werbebereich, Verpackungen, auf Webseiten und der Spieleindustrie. Dabei bietet sie vor allem mit den vor allem im Webbereich üblichen serifenlosen Schriftarten einen ausgewogenen und stimmigen Kontrast. Sie wird in 3 Schriftstärken ausgegeben und unterstützt Funktionalitäten wie Ligaturen, alternatierende Zeichen, Frakturen, stylistische Alternativen und vieles mehr.

9. Minion Pro

10_schoenste_webfonts-minionpro-ideesign-koeln

Eine klassische Schriftart wie die ebenfalls beliebte Garamond, die sich durch ihr ruhiges Schriftbild auszeichnet.

10. Adelle

10_schoenste_webfonts-adelle-ideesign-koeln

Die dynamische, serifenbetonte Schrift eignet sich vor allem für den Editorial Bereich, meistens für Zeitschriften oder Magazine. Durch ihren unauffälligen Charakter mit dunkler Farbe kann sie für die meisten Anwendungen verwendet werden. In größeren Schriftgrößen spielt sie ihre energetischen Eigenschaften wegen ihrer betonten Serifen aus. Mit 14 verschiedenen Schriftschnitten, Schriftbesonderheiten wie Frakturen ist die Adelle eine Allzweckwaffe für gute Typografie.

Quellen: Google FontsTypekit – fontsquirrel

Kostenloses PSD Website Template zum Download [freebie]

Modernes und aufgeräumtes Webseiten-Template als PSD. Inklusive verschiedener Grid-Systeme sowie strukturierter Ebenen und Gruppen. Einfach herunterladen und benutzen, verändern, umsetzen … viel Spaß damit!

explore_freetemplate_ideesign

Format: PSD/zip
Größe: 17.5 MB

Download

Dir gefällt, was du kriegst? Please share the love:

mmenu – Das flexible Off-Canvas Menü

Es gibt viele Möglichkeiten Menüs mobil darzustellen. Ein äußerst erfolgreiches Prinzip ist das Off-Canvas Menü, das von außerhalb in den Screen geflogen kommt. Das jQuery Plugin mmenu bietet vielseitige Optionen für ein kreatives, responsives Menü.

mmenu_responsive_offcanvas_menu-ideesign_koeln-post_img

Was bietet das Javascript Plugin?

Mit dem mmenu ist es möglich, aus dem aktuellen Menü ein off-Canvas Menü zu erstellen. Mit an Bord sind professionelle Animationen, Farbwahl, mehrere Ebenen. Es kann so gut wie alles eingestellt werden, um es den eigenen Anforderungen anzupassen. Es kann festgelegt werden, von welcher Seite es in das Sichtfeld rutscht oder welche Animationen im Menü zu sehen sind. Zudem kann es aussehen wie eine App-Auswahl, wie man sie z.B. vom mobilen Betriebssystem Android kennt. Es kann ein komplettes Suchverzeichnis erstellt werden, ähnlich einem Telefonbuch, sodass der Nutzer einfach den Menüpunkt finden kann, den er braucht. Der Kreativität für dieses Plugin sind beinahe keine Grenzen gesetzt, sofern man weiß, welche Einstellungen getätigt werden müssen.

Nutzer kennen Off-Canvas

Das wichtigste an dem Menü ist seine Benutzerfreundlichkeit. Das Off-Canvas Menü ist ein bewährtes Prinzip, das aus der Welt der nativen Apps übernommen wurde und Webseiten genau so wirken lassen kann. Somit sollte jeder Nutzer, der mit Smartphones vertraut ist, das Menü einfach verstehen und sich direkt zurechtfinden können. Zudem bietet es eine gelungene Abwechslung zu den teilweise unübersichtlichen und zu oft verwendeten Drop-Down Menüs mobiler Webseiten.

Kosten (Stand September 2016)

Derzeit kostet die kommerzielle Lizenz für ein einzelnes Projekt für das mmenu jQuery Plugin 7.50$. Für eine unlimitierte Anzahl an Installationen kostet die kommerzielle Lizenz 50$. Damit bekommt man für sein Geld Einiges geboten, denn das Plugin bietet eine einfache Integration in bereits bestehende CMS Systeme durch seine relativ simple Syntax. Außerdem steht es direkt als WordPress Plugin zum Download bereit.

Download

Wenn man sich einen Eindruck des Plugins machen möchte, kann man es auf der Webseite des Herstellers in Aktion sehen, herunterladen und kostenlos ausprobieren.

Zum Plugin

Bootstrap 4 Update – Was ändert sich?

Das weltweit beliebteste CSS-Framework bekommt ein Update auf die mittlerweile vierte Version. Die wichtigsten Änderungen – und ob sich ein Umstieg auf Version 4 lohnt – haben wir hier kurz zusammengefasst.

bootstrap-4-update-was-aendert-sich

Die wichtigsten Änderungen

1. Aus Less werde Sass

Bootstrap verwendet jetzt Sass als Präprozessor für seine CSS-Dateien. Laut der eigenen Webseite von Bootstrap kann Sass schneller kompiliert werden als Less.

2. Der Design-Trend Karten wurde aufgenommen

Seit einiger Zeit ein beliebter Design Trend im Webdesign: Karten sind ein gutes Mittel, flexibel responsive Inhalte einer Webseite darzustellen. Bekanntestes Beispiel dürfte Pinterest sein. Auch das hat das Framework erkannt und ersetzt Panels, Wells und Thumbnails jetzt durch die neue Komponente „Cards“.

3. Internet Explorer 8 wird nicht mehr unterstützt

Laut CanIUse (Stand Juni 2016) hat der Internet Explorer 8 nur noch eine fast zu vernachlässigende Prozentzahl von 0,61% Nutzeranzahl weltweit. Daher wird das Twitter Framework ihn ab jetzt nicht mehr unterstützen und kann nun flexible Größen für Schriften und einzelne Komponenten nutzen. Für IE8 Support sei Bootstrap 3 anzuraten.

4. Das Grid-System wird weiter verbessert

Das ohnehin schon sehr ausgereifte Grid System wird erweitert und verbessert. Die bislang verwendeten Mixins wurden komplett überarbeitet und an die Anforderungen mobiler Geräte angepasst.

5. Sämtliche JavaScript Plugins wurden aktualisiert

In der neuen Version sind sämtliche Plugins nach dem aktuellen ECMAScript 6 Standard geschrieben und profitieren nun von den neuesten JavaScript Erweiterungen. Sie unterstützen die Univeral Module Definition und sind einfach anzupassen.

6. Flexbox Layouts sind da

Die neue Art und Weise Objekte zu positionieren ist nun auch in Bootstrap angekommen. Das Gridsystem und andere Komponenten basieren auf dem neuen Flexbox Modell.

7. Reboot ist das neue Normalize.css

Erweiterungen im CSS Reset wie Box Sizing, Paddings und Margins sind alle in nur einer Sass-Datei vereint.

8. Änderungsmöglichkeiten vereinfacht

Genau wie die restlichen Veränderungen haben vor allem auch die Stylesheet-Dateien vom Update profitiert. Sämtliche Änderungen können nun leicht in Sass-Variablen geändert werden und müssen nicht mehr umständlich in einzelnen CSS Dateien geändert werden, wie noch in Version 3.

9. Dokumentation wird zukünftig vereinfacht

Die Dokumentation wurde komplett in Markdown umgeschrieben und mit Plugins erweitert, damit einfacher das gefunden werden kann, was gesucht wird. Eine Verbesserung der Dokumentationssuche steht noch aus.

10. Und viel, viel mehr!

Benutzerdefinierte Formulare, Klassen für Abstände und Dienstskripte, Popups und Tooltips und noch vieles mehr wurden der neuesten Bootstrap-Version hinzugefügt.

Lohnt sich ein Update auf Bootstrap 4?

Genau wie bei WordPress Updates ist es auch bei einem komplexen Framework wie Bootstrap eine heikle Sache, einfach upzudaten. Da es sich um ein sehr weitreichendes und grundlegendes Update des Framework handelt, ist ein Update einer Bootstrap-Webseite nur bei einem Relaunch sinnvoll. Es müssten unzählige Änderungen in den Stylesheet-Dateien getätigt werden, die noch nicht komplett absehbar sind. Bootstrap 4 befindet sich derzeit noch in der Alpha Version. Daher ist ein Update noch keine gewinnbringende Option. Bis zum offiziellen Release der Version 4 wird sich noch viel verändern. Jedoch kann man sicher sein, dass zukünftige Projekte von den Entwicklungen des Framework und seiner neuen Version 4 profitieren werden.

Quelle: http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ (Stand Juni 2016)

12 WordPress Plugins, die auf keinen Fall fehlen dürfen!

Der Erfolg von WordPress kommt nicht zuletzt durch seine große Anpassungsfähigkeit. Plugins tragen einen großen Teil zur Beliebtheit des Content-Management-Systems bei. Wir haben hier unsere Top 12 der WordPress Plugins aufgelistet, die in keiner Installation fehlen sollten.

 1. Visual Composer (kostenpflichtig)

visual-composer-wordpress-plugin-ideesign-koeln
https://vc.wpbakery.com/

Eine Allzweckwaffe, um responsive WordPress Seiten zu bauen. Der Visual Composer gestaltet den Standard Editor von WordPress um und legt in der festgelegten Breite des Inhalts ein responsives Grid an. Dazu bietet es viele Komponenten, die einfach per Drag und Drop verschoben, bearbeitet und genau an die eigenen Vorstellungen angepasst werden können.

2. Slider Revolution (kostenpflichtig)

slider-revolution-wordpress-plugin-ideesign-koeln

https://revolution.themepunch.com/

Die „Slider Revolution“ ist einer der beliebtesten Slider, die man für WordPress finden kann. Einzelne Slides können mit dem WYSIWYG Editor wie in einem handelsüblichen Grafikprogramm bearbeitet werden und verschoben werden. Ob Full Screen Slider mit Videoinhalt und komplexen Animationen oder einfacher Slideshow. Der Revolution Slider ist für mobile Endgeräte geeignet und lässt sich mit ein wenig Einarbeitungszeit für viele Anwendungsgebiete sehr gezielt anpassen.

3. Black Studio TinyMCE Widget (kostenlos)

blackstudio-tiny-mce-widget-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/black-studio-tinymce-widget/

Mit dem Plugin „Black Studio TinyMCE Widget“ ist es endlich möglich, den kompletten TinyMCE Editor von WordPress auch im Widgetbereich zu verwenden. So lässt sich z.B. der Footer, falls dort ein Widget Bereich existiert, einfach mit Bildern und bereits implementierten Plugins, Shortcodes und Custom Styles ausstatten.

4. WordPress SEO by Yoast (kostenlos)

yoast-seo-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/wordpress-seo/

Mit mehr als 1 Millionen aktiven Installationen (Stand Mai 2016) ist das kostenlose Plugin „Yoast SEO“ eins der beliebtesten SEO Plugins auf dem Markt. Zu seinen Funktionen zählen die Seitenanalyse, automatische Meta-Tag & Link Anpassung, XML Sitemaps, RSS Optimierung, .htaccess und robot.txt Bearbeitung. Es ist bereit für Multi-Site Installationen und bietet eine Import & Export Funktion für andere SEO Plugins.

5. Updraft Plus (Grundversion kostenlos)

updraft-plus-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/updraftplus/

Updraft Plus unterstützt WordPress Backups in viele der bekannten Cloud-Dienste, E-Mail und andere Übertragungsarten. Die Backups können auch automatisch nach Plan an den gewählten Dienst geschickt werden. Dabei trennt das Plugin bei Bedarf auch Multi-Site Archive oder unterschiedliche Sprachen in ihre jeweiligen Seiten.

6. Duplicate Post Plugin (kostenlos)

duplicate-post-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/duplicate-post/

Bis WordPress diese Funktionalität selbst einführt, bleibt nichts sich übrig als sich auf das kostenlose Plugin „Duplicate Post“ zu verlassen: Das Plugin dupliziert Seiten, Beiträge und Custom Posts zuverlässig und erstellt die Kopie standardmäßig als Entwurf.

7.  Contact Form 7

contact-form-7-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/contact-form-7/

Das Plugin „Contact Form 7“ macht es einfach, Kontaktformulare zu erstellen. Mit Shortcode-Funktionalität, Anpassung der Formular und E-Mail-Benachrichtigungen.

8. Advanced Custom Fields (Basisversion kostenlos)

advanced-custom-fields-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/advanced-custom-fields/

In seiner Grundfunktionalität bietet „Advanced Custom Fields“ die Möglichkeit, für festgelegte Beitragsarten, einzelne Seiten oder andere frei einstellbare Zuweisungsregeln extra Bearbeitungsfelder festzulegen. Mittels PHP können diese Custom Fields genau dort ausgegeben werden, wo sie gebraucht werden. Erweiterungen machen das Plugin universal einsetzbar für verschiedene Inhaltstypen und bietet weitere Templates für eine noch komfortablere Erstellung von angepassten Feldern.

9. WP Smush

wp-smush-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/wp-smushit/

Einfach WP Smush installieren und ohne Qualitätsverlust die Dateigröße von Bildern beim Upload verkleinern lassen.

10. iThemes Security (Basisversion kostenlos)

ithemes-security-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/better-wp-security/

iThemes Security ist eine umfassende Security Suite, die bei keiner Wordpress-Installation fehlen sollte. Das Thema Sicherheit hat aufgrund seiner hohen Verbreitung für WordPress mittlerweile eine sehr hohe Bedeutung und darf auf keinen Fall vernachlässigt werden.

11. Admin Menu Tree Page View

admin-menu-tree-page-view-wordpress-plugin-ideesign-koeln

https://de.wordpress.org/plugins/admin-menu-tree-page-view/

Sehr praktisches Werkzeug, denn es listet die einzelnen Seiten der Installation in einem Hover Menu neben der eigentlichen Menüleiste auf. Seiten können in dem aufgeklappten Menü einfach erstellt und direkt benannt werden, auch innerhalb anderer Seiten.

12. Email Address Encoder

email-address-encoder-ideesign-koeln

https://wordpress.org/plugins/email-address-encoder/

Verhindert, dass Emailadressen von Email Spam Bots erkannt werden, indem es sie in dezimal und hexadezimal Einheiten verschlüsselt.

5 Tipps für eine schnellere Webseite

In Zeiten von HighSpeed-Internet und mobilen Endgeräten möchte man nicht lange auf Informationen warten oder unnötig Datenvolumen verbrauchen. Abgesehen davon ist die Ladegeschwindigkeit einer Webseite ein Google Ranking-Faktor. Wir geben 5 Tipps, wie man die eigene Webseite schneller macht. 

5-tipps-fuer-schnellere-webseite-ideesign-koeln

Nutzer lesen das Internet nicht wie ein Buch, sondern suchen sich gezielt ihre Informationen. Deshalb sollten diese möglichst schnell und einfach gefunden werden. Da sind einige Sekunden Wartezeit bis zum Aufbau einer Webseite eine gefühlte Ewigkeit und die Absprungraten von langsamen Webseiten entsprechend hoch. Wir haben ein paar der einfachsten Möglichkeiten zusammengetragen, Webseiten zu entschlacken und die Ladegeschwindigkeit zu erhöhen. Wer direktes Feedback haben will, ob seine Seite schneller geworden ist oder wie der aktuelle Status der Seite ist, kann sie auf Google Pagespeed Insights testen.

1. Dateien reduzieren und zusammenlegen

Jede Zeile Code, ob CSS, HTML, PHP oder andere, müssen vom Server und dem Browser des Nutzers verrechnet werden. Je mehr Code, desto länger dauert es, bis eine Webseite für den Nutzer vollständig angezeigt wird. Deshalb ist es wichtig, Dateien möglichst klein und präzise zu halten. Leerzeichen und Absätze, die zwar die Übersichtlichkeit des Codes verbessern, sind der Performance der Seite abträglich.

Eine Webseite lädt schneller, je weniger Anfragen ein Browser an einen Server stellen muss. Für jede eingebundene Datei wird eine Anfrage gestellt. Daher ist es naheliegend, am Ende der Entwicklungsarbeiten gleiche Dateitypen in einer Datei zu vereinen und diese dann zu minimieren. Wichtig ist dabei, dass man nur die Dateien zusammenlegt, die an einer ähnlichen Stelle oder zur selben Zeit auf der Webseite geladen werden sollen. So sollte man z.B. JavaScript-Dateien im Footer der Seite einbinden, damit sie nach dem Rendern der gesamten Seite geladen werden. Das Minimieren kann man mit seinem Code-Editor oder mit einem Online-Tool wie minifycode.com erledigen.

2. Bilder optimieren

Bilder sind die Teile einer Webseite, die die Ladegeschwindigkeit am meisten strapazieren können. Am besten werden sie verlustfrei mit einem Programm komprimiert. Die kostenpflichtigen Programme wie Adobe Photoshop und Affinity Photo (Mac) eignen sich mit ihrer vielseitigen Bildbearbeitung und differenziert einstellbaren Kompression sehr gut für den Webbereich.  Im kostenlosen Segment bieten sich als Alternativen Gimp (Windows & Mac) und Paint.NET (Windows) an. Darüber hinaus gibt es Online-Tools, mit denen man die Dateigröße von Bildern reduzieren kann. Es empfiehlt sich eine Kompression ohne sichtbare Bildfehler.

Kostenpflichtig:
Adobe Photoshop (Windows & Mac)
Affinity Photo (Mac)

Kostenfrei:
Gimp (Windows & Mac)
Paint.net (Windows)
JPEGmini Lite (Mac)

Online:
compressor.io
fotosverkleinern.de

3. Daten serverseitig komprimieren

Ein weiterer Punkt bei der Speed-Optimierung einer Webseite ist die serverseitige Komprimierung von Daten. Unkomprimierte Dateien brauchen länger, um geladen zu werden, wodurch das Nutzer-Erlebnis leidet. gzip oder deflate sind Kompressionsalgorithmen für den Server. Sie komprimieren die Dateien auf dem Server, bevor sie vom Browser des Nutzers geladen werden. Um das zu erreichen, muss die .htaccess Datei auf dem Server dahingehend angepasst werden, dass dieser die Inhalte der Webseite komprimiert an den Browser des Besuchers übergibt. Vorausgesetzt, der Server unterstützt die Komprimierung von Dateien. Für einen Apache-Server funktioniert die Kompression mittels DEFLATE mit folgendem Code:

Die Angabe „AddOutputFilterByType DEFLATE“ gibt an, dass ein gewisser Dateityp mit dem „DEFLATE“ Algorithmus komprimiert werden soll. Die Angabe „text/html“ definiert hier speziell, dass Text im HTML-Format komprimiert werden soll. Diese Angabe kann durch verschiedene Dateitypen ersetzt werden. Im angelegten Fall wurden svg+xml Bilder mit der „AddType“ Angabe als Dateityp hinzugefügt, da dies standardmäßig nicht der Fall ist.

Eine ausführliche englische Anleitung dazu findet sich hier. Für einen IIS-Server gibt es bei Microsoft eine deutsche Anleitung.

4. Skripte in den Footer und asynchron laden lassen

Zunächst sollten sämtliche Skripte in den Footer, damit sie gemäß der DOM-Struktur nach den HTML-Elementen geladen werden. Es gibt aber auch Angaben, um alle Skripte und CSS-Angaben im Header-Bereich zu lassen und trotzdem die Performance nicht zu beeinträchtigen. Durch eine einfache Angabe in der Einbindung lassen sich Skripte, die von anderen Webseiten kommen, asynchron laden. Das bedeutet, die Skripte werden erst geladen, wenn der Rest der Webseite bereits geladen wurde. Denn sollte die Quelle des Skripts lange für eine Antwort brauchen oder ist nicht erreichbar, würde das die Webseite erheblich verlangsamen. Daher kann folgender Code für Skripte benutzt werden, die von anderen Webseiten hinzugeladen werden sollen. Diese Angaben stellen für moderne Browser (IE ab Version 10) kein Problem dar und sollten wie gewünscht ausgeführt werden.

1. Das „async“ – Attribut

Die Angabe „async“ lässt externe Skripte gleichzeitig mit der Seite laden, sodass sich die Webseite vollständig aufbauen kann, während das Skript lädt. Wichtig dabei ist die Angabe „async“ (ohne Anführungszeichen) hinter der Pfadangabe des Skripts.

2. Das „defer“ – Attribut

Die Angabe „defer“ lässt Skripte erst ausführen, nachdem die Seite geparst wurde. Damit ist die Seite bereits nutzbar, nur das Skript wird noch hinzugeladen. Das eignet sich eher für Skripte, die nicht sichtbar ausgeführt werden. Skripte, die essenziell für die Nutzerführung sind, empfehlen sich mit „async“ zu laden und/oder in den Footer zu packen.

5. Webhosting-Paket überprüfen und ggf. Provider wechseln

Viele Provider bieten für Beträge unter 10 € pro Monat das klassische Shared-Webhosting. Das bedeutet, dass die eigene Webseite auf einem Server mit sehr vielen anderen Kunden liegt. Je nach Größe des Providers und des gebuchten Pakets können das durchaus ein paar hundert Kunden sein, mit denen man sich einen Server teilt. Das wiederum bedeutet, dass die Leistung des Servers durch alle darauf enthaltenen Webseiten geteilt werden muss. Wenn dann zufällig dreihundert WordPress-Installationen auf diesem Server vorhanden sind, geht das natürlich zu Lasten meiner eigenen Website-Performance.

Die hochpreisigen Shared-Webhosting-Pakete zeichnen sich in der Regel dadurch aus, dass sie einerseits zusätzliche Leistung bieten (mehr E-Mail-Adressen, mehr Speicherplatz, mehr FTP-Zugänge, etc.), aber oft auch eben dadurch, dass sie auf Servern liegen, die deutlich weniger Kunden verwalten müssen, als die aus dem Niedrigpreis-Sektor. Und das mündest zwangsläufig in eine bessere Performance.

Nicht alle Provider weisen darauf hin, wie viele Kunden sie parallel auf einem Server verwalten. Und die Angabe ist natürlich auch nicht immer gleichbedeutend, da nicht jeder Kunde für eine Ressourcen-intensive Webseite steht. Aber es gibt durchaus Hoster, die ihre Paketpreise mit solchen Angaben ergänzen, bzw. lohnt es sich durchaus, beim eigenen Provider anzurufen, das zu erfragen und ggf. ein Upgrade durchzuführen.

Fazit

Nicht erst seitdem Google den PageSpeed offiziell als Rankingfaktor eingeführt hat, ist es wichtig, die Ladegeschwindigkeit der eigenen Webseite zu überprüfen und ggf. zu optimieren. Das Komprimieren von Dateien und Bildern ist dabei der erste Schritt. Das asynchrone Laden von JavaScript-Dateien und die serverseitige Komprimierung erfordern sicher ein wenig mehr als reines Basiswissen. Aber für alles gibt es gute und kostenlose Online-Tools, die einem dabei helfen, die Nutzerfahrung durch Erhöhung des PageSpeeds zu verbessern. Und wenn alles nicht hilft, hilft ja vielleicht der Wechsel zu einem anderen Hoster.