Kategorie: Web-Design

WordPress Blog für mobile Geräte optimieren

WordPress Logo

Die meisten Webseitenaufrufe kommen immer noch von Desktop-Browsern. Allerdings ist die Zahl der mobilen Besucher in den letzten Jahren deutlich gestiegen. Mit immer leistungsfähigeren und höher aufgelösten Smartphones und Tablets wird dieser Trend in Zukunft weiterhin anhalten. Dennoch bieten noch immer einige Blogs kein angepasstes Layout für mobile Besucher an. Nachfolgend möchte ich kurz einige Möglichkeiten aufzeigen, wie ein Blog auf Basis von WordPress für mobile Geräte optimiert werden kann.

Externe Dienste

Die einfachste Möglichkeit für eine mobile Version ist der Weg über einen externen Online-Dienst. Diese Variante ist aber alles andere als optimal und sollte nur als Notlösung zum Einsatz kommen. Einige Dienste bedienen sich am bereitgestellten RSS- oder Atom-Feed und geben diesen einfach als HTML-Seite aus. Das Ergebnis ist kein ästhetisches Vergnügen und auch die Funktionalität ist sehr eingeschränkt. Bei gekürzten Feeds stößt diese Lösung sowieso sehr schnell an ihre Grenzen.

Andere Dienste greifen direkt auf die Webseite zurück und stellen diese in einer optimierten Form dar. Aber auch hier gilt, dass keine Wunder zu erwarten sind. Google stellt beispielsweise einen Proxy-Server zur Verfügung, welcher den Webseiteninhalt quasi ohne Stylesheet ausgibt. Der Proxy kann unter “http://google.com/gwt/x?u=” aufgerufen werden. Hier der Link für meinen Blog: http://google.com/gwt/x?u=antary.de

WordPress Plugins

Wenn das aktuell eingesetzte WordPress-Theme nicht responsiv ist und ein Themewechsel nicht in Frage kommt, kann auf Plugins zurückgegriffen werden. Die Plugins analysieren den User-Agent des Browsers und entscheiden anschließend, ob das normale Theme oder ein mobiles Theme an den Besucher ausgeliefert werden soll. Besucher die mit Smartphone oder Tablet auf eine Webseite zugreifen, bekommen demnach das vom Plugin erzeugte mobile Theme zu sehen.

Beliebte Plugins sind unter anderem WPtouch Mobile Plugin , WPMobile Apps oder Mobile Smart. Auch der Alleskönner Jetpack bietet eine entsprechende Funktionalität an. Alle Plugins sind schnell eingerichtet und die mobile Ansicht kann den eigenen Bedürfnissen angepasst werden.

Responsives WordPress-Theme

Eine mittlerweile sehr oft genutzte Methode für eine mobile Webseite sind sogenannte responsive Themes. Moderne responsive Themes arbeiten auf Basis von CSS3 Media Queries und passen sich automatisch an bestimmte Gerätekategorien an. Viele Themes arbeiten mit vier unterschiedlichen Kategorien: Smartphone, Tablet, Notebook und Desktop. Für jede Geräteklasse lässt sich das Design eigenständig anpassen.

Inzwischen existieren sehr viele WordPress-Themes, die als responsiv ausgegeben werden. Nichtsdestotrotz sollten die Themes vor dem Einsatz überprüft werden, da viele nur eine rudimentäre Funktionalität mitbringen. Hilfreich dabei ist mein Artikel “Responsive Webdesigns testen“.

Wer ein neues responsive Theme sucht, sollte sich Make genauer anschauen. Das kostenlose Theme bietet viele Anpassungsmöglichkeiten und hat sich bereits bei vielen Projekten in der Praxis bewährt.

“rem” vereinfacht Nutzung flexibler Schriftgrößen

Es existieren unterschiedliche Möglichkeiten die Schriftgröße im Webdesign zu definieren. Am häufigsten werden sicherlich “px”, “em” und “%” verwendet. Die jeweiligen Nachteile liegen auf der Hand. “px” ist eine absolute Größenangabe und findet vorrangig in festen Designs Anwendung. Gerade im Bezug auf Responsive Webdesign und “Mobile First” ist aber eine flexible Gestaltung der Schriftgröße fast unumgänglich.

Aus diesem Grund setzen viele moderne Designs auf “em”. Die relative Angabe der Größe mittels “em” birgt in der Praxis aber Probleme bei der Vererbung. Die “em”-Einheit richtet sich meist an der Schriftgröße des Elternelements aus. In simplen Designs ist das noch kein Problem. Bei komplexen Umgebungen mit vielen Verschachtelungen verliert man aber schnell den Überblick und die Gestaltung mittels “em” wird sehr aufwendig. Beispielsweise wird eine Schriftgröße welche als “0.875em” definiert ist, bei jeder Verschachtelung ein Stück kleiner.

“rem” als Lösung?

Die CSS3-Schriftgrößeneinheit “rem” (root em) könnte in Zukunft eine gute Lösung darstellen. “rem” vereint die Vorteile von “px” und “em”. Im Grund funktioniert “rem” genauso wie “em”, mit einem entscheidenden Unterschied: Die Nachteile bei der Vererbung sind nicht vorhanden, weil sich “rem” immer am Root-Element, also die Schriftgröße für html, orientiert.

Üblicherweise wird die Schriftgröße des Root-Elements auf “100%” gesetzt, was einer Standard-Schriftgröße von 16 Pixel entspricht. Alle weiteren mit “rem” definierten Schriftgrößen orientieren sich nun an diesem Ausgangswert. Zur Errechnung des “rem”-Werts muss nur die gewünschte Pixelgröße durch den Standardwert 16 geteilt werden. Nachfolgend ein kleines Beispiel:

html { font-size: 100%; } /* 16px Standard-Schriftgröße */
h1 { font-size: 1.875rem; } /* 30/16 = 1.875 */
h2 { font-size: 1.5rem; } /* 24/16 = 1.5 */
h3 { font-size: 1.25rem; } /* 20/16 = 1.25 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

Zur Anpassung der Schriftgröße reicht es aus, wenn die Standard-Schriftgröße der des Root-Elements geändert wird. Das Verhältnis aller definierten Schriftgrößen bleibt dabei unverändert.

Nachteile von “rem”

Wie immer gibt es jedoch Probleme mit älteren Browsern. Die Übersicht unter http://caniuse.com/rem zeigt genauere Details:

rem_support

Problematisch ist im Grunde nur der IE vor Version 9. Auch Opera Mini kann mit “rem” nichts anfangen, was jedoch zu verschmerzen ist. Wenn diese Browser vernachlässigt werden können ist der Einsatz von “rem” absolut empfehlenswert.

Andernfalls muss eine Fallback-Lösung verwendet werden, welche jedoch nicht optimal ist.

html {
    font-size: 100%;
}
h1 {
    font-size: 30px;
    font-size: 1.875rem;
}
h2 {
    font-size: 24px;
    font-size: 1.5rem;
}
h3 {
    font-size: 20px;
    font-size: 1.25rem;
}
p {
    font-size: 14px;
    font-size: 0.875rem;
}

Ältere Browser verwenden den Pixelwert und ignorieren die “rem”-Angabe. Moderne Browser können diese jedoch Nutzen und überschreiben somit den zuerst angegebenen Pixelwert.

Weitere Infos gibts im Artikel “CSS-Tipp: rem als Einheit für Schriftgröße nutzen” bei Elmastudio.

Kategorien: HTML5 & CSS3 Web-Design

HTML5 UP: Kostenlose und moderne HTML5-Templates

Im Internet existieren viele kostenlose Webtemplates, die aber von der Qualität des Quelltexts und der Optik oft nicht überzeugend sind. Die Templates von HTML5 UP gehören definitiv nicht dazu. Aktuell stehen 14 sehr unterschiedliche Templates zum kostenlosen Download bereit. Egal ob man Fotos präsentieren, einen Blog betreiben oder eine Unternehmenswebseite gestalten möchte, für alle Bedürfnisse ist ein passendes Template vorhanden. Dank der Creative-Commons-Lizenz können die Templates frei angepasst und sogar kommerziell verwendet werden. Einzige Voraussetzung ist ein Verweis auf HTML5 UP.

Alle Templates sind auf Basis von HTML5 und CSS3 umgesetzt. Sie sind vollständig responsiv aufgebaut und für Tablets sowie Smartphones optimiert. Außerdem ist eine JavaScript-Bibliothek in Form von jQuery enthalten. Bei HTML5 UP können alle Templates auf einer Demoseite genauer betrachtet werden. Sogar für die Darstellung auf Tablets und Smartphones ist eine Vorschau vorhanden.

Download HTML5UP Themes

HTML5UP

(via)

Design vs Inhalt im Web

Wer eine eigene Webseite im Netz zum Erfolg bringen will, muss sich mit unterschiedlichsten Thematiken befassen. Zu Beginn steht zweifelsfrei die Herausforderung klar zu definieren welche Art von Inhalt man auf der geplanten Onlineplattform transportieren will und an welches Zielpublikum sich selbiger richten soll. Hat man diese zwei Grundfragen geklärt geht es an das Webdesign, das beide Punkte, also sowohl die Zielgruppe als auch den gewählten Inhalt attraktiv mit einander verbinden soll, sozusagen die grafische Brücke zwischen Botschaft und Empfänger. Hier streiten sich die Geister. Onlineredakteure und Texter sehen im gewählten Inhalt, das Maß aller Dinge und die Königsdisziplin im Internet, Webdesigner widersprechen heftig und sehen im Design der Homepage den entscheidenden Faktor, ob eine Homepage ankommt oder nicht. Der objektive Webmaster möchte natürlich die perfekte Kombination von beidem. Eine Vielzahl an kostenlosen Webdesign Vorlagen kann helfen das richtige Layout für seine eigene Seite zu finden. Beide Richtung sind sich hingegen in einer Frage einig: Aktualität ist das „A“ und „O“ eines Internetauftrittes und dies gilt für zeitgemäßes Design ebenso wie für den Content.

Web 2.0 und der Wandel der Kommunikationsstrukturen

Spätestens seit Web 2.0 müssen sich Eigentümer von Webseiten allerdings noch auf eine weitere Ausgangssituation einstellen. Onlinekommunikation ist nicht mehr eindimensional, sondern interaktiv. User wollen sofort über Inhalte reflektieren können, Inhalte teilen, Bewertungen zu Produkten und Dienstleistungen abgeben und oder Verbesserungsvorschläge posten oder kommentieren. Damit ist der Weg vom Homepagebetreiber zum User und zurück kurz wie nie zuvor geworden. Wer Kommunikation offen zu lässt und schnell und qualitativ reagiert, hat die besten Karten für nachhaltigen Erfolg in der Hand. Insbesondere die Verschränkung des eigenen Webauftrittes mit sozialen Netzwerken wie Facebook, Google Plus, Twitter und Pinterest birgt enorme Chancen für den Erfolg in sich. Noch immer gibt es Webseitenbetreiber die sich vor einer Flut negativer Reaktionen fürchten und nur darauf warten bis ein sogenannter „Shitstorm“ (eine Flut an Negativpostings) über sie hereinbricht. Fakt ist, eine Webseite – und ist sie noch so gut gemacht – kann ein schlechtes Produkt nicht gut machen, darüber muss man sich von Beginn an im Klaren sein. Ein positiver Webauftritt gehört aber heute nicht nur zum guten Ton, sondern insbesondere daran wie Marken mit ihren Kunden im Web 2.0 umgehen, zählt für viele zu einem wichtigen Kriterium für Markentreue.

Redaktionsplan von Vorteil

Wer sich auf das Web 2.0 einlässt der muss sich im Klaren sein, das mit den neuen Marktchancen auch viel und vor allem kontinuierliche Arbeit einhergeht. Zielführend ist daher bei jedem Onlineprojekt eine Redaktionsplanung, also die Festlegung „Was werde ich Wann und Wie“ kommunizieren. So ist einerseits gewährleistet, dass es laufend aktuellen und damit interessanten Content gibt, andererseits, dass man sich im Vorfeld Gedanken machen muss und meist qualitativ entbehrliche Schnellschüsse vermieden werden. Außerdem lassen sich die Themen, die man kommunizieren möchte so auch auf die unterschiedlichen Kanäle (eigene Homepage, Facebook Seite, Google Plus Bereich, Twitter, Just.me usw.) abstimmen und so interessant halten.

Responsive Webdesigns testen

Responsive Webdesigns werden immer beliebter und sind vor allem bei Blogs schon relativ weit verbreitet. Kein Wunder, denn damit lassen sich Webseiten relativ einfach auf verschiedene Ausgabegrößen bzw. für unteschiedliche Gerätekategorien (Smartphone, Tablet, Notebook, Desktop) anpassen.

Während der Entwicklung und beim Testen von responsiven Webdesigns kann jedoch ein erhöhter Aufwand gefordert sein. Daher sollten Test-Werkzeuge eingesetzt werden, die Tests vereinfachen und gleichzeitig auch noch Zeit sparen. Hier eine kleine Übersicht einiger nützlicher Werkzeuge zum Testen von responisven Designs.

Zu beachten ist, dass die Tools aufgrund ihrer Funktionsweise nicht immer hundertprozentig pixelgenau arbeiten. Außerdem simulieren die Tools nur die Auflösung und können gerätespezifische oder betriebssystemabhängige Einstellungen nicht berücksichtigen.

Am I Responsive

Nach Eingabe der gewünschten URL wird die Webseite in vier verschiedenen Auflösungen angezeigt: 320 x 480 (Smartphone), 768 x 1.024 (Tablet), 1.280 x 800 (Notebook) und 1.600 x 990 (Desktop). Durch die Verkleinerung und Darstellung in verschiedenen Geräten bietet die Webseite eine sehr gute Übersicht, wie sich das Design unter den vier Auflösungen verhält. Genauere Details sind jedoch leider nicht mehr erkennbar. “Am I Responsive” ist daher vor allem für den groben Überblick zu empfehlen.

Am I Responsive

Chrome

Für Google Chrome existieren einige Erweiterungen, mit welchen Webseiten in bestimmten Auflösungen komfortabel angezeigt werden können. Beispielsweise Window Resizer, responsiView, Responsive Tester oder Resolution Test.

Demonstrating Responsive Design

Das Online-Tool von Jamie Reynolds bietet fünf verschiedene Gerätegrößen in einer schicken Darstellung.

Demonstrating Responsive Design

Firefox – Bildschirmgrößen testen

Mit den Tools für Web-Entwickler bietet Firefox eine eigene Möglichkeit, Webseiten mit bestimmten Auflösungen zu testen. Das Tool “Bildschirmgrößen testen” lässt sich im Menü über den Punkt “Web-Entwickler” aufrufen oder mit Hilfe der Tastenkombination Strg + Shift + M.

Responsinator

Responsinator zeigt die gewünschte Webseite in zehn vordefinierten Varianten an, darunter gängige Geräte wie das iPhone 4, iPhone 5, Kindle oder das iPad. Das Tool ist auch als Bookmarklet verfügbar.

Responsive Web Design Testing Tool

Das Online-Tool von Matt Kersley zeigt die zu testende Webseite in fünf verschiedenen Auflösungen an: 240 x 320, 320 x 480, 480 x 640, 768 x 1.024 und 1.024 x 768. Das Tool lässt sich auch wunderbar als Bookmarklet einsetzen, wie Ben Keen in seiner Lösung aufzeigt.

Screenfly

Screenfly bietet eine moderne Oberfläche und einige vordefinierte Auflösungen an. Des Weiteren können Scrollbars eingeblendet werden und es lässt sich auch eine eigene Auflösung bestimmen.

Screenfly

Kategorien: Internet Web-Design

Windows 8 Design mit CSS3 und jQuery nachbauen

Nach gefühlten 100 Jahren mal wieder ein Artikel von mir über das Thema Web-Design. Bei Google+ hat Sergej heute einen Link gepostet, den ich sehr interessant fand: “Windows 8 Animations“.

Wie der Name schon sagt geht es um die neue Windows 8 Oberfläche und wie man diese mit HTML5, CSS3 und JavaScript bzw. jQuery realisieren kann. Neben dem ausführlichen Tutorial ist auch ein Demo vorhanden, welche das beeindruckende Ergebnis zeigt. Die Demo läuft in aktuellen Versionen von Firefox, Opera, Chrome und Safari. Ebenso im Internet Explorer 10.

Zum Tutorial “Windows 8 Animations”

Oracle veröffentlicht 3 wichtige Java-Updates

Am gestrigen Tag veröffentlichte der Java-Entwickler Oracle 3 wichtige Updates.  Die 3 besonders kritischen Sicherheitslücken werden in die höchste Gefahrenstufe 10 eingeordnet. Es handelt sich hierbei um die mit CVE-Nummern gekennzeichneten Schwachstellen:  2013-1484, 2013-1486 und 2013-1487.

Betroffen sind einige Bibliotheken, Deployment-Komponenten und das in der Vergangenheit schon mehrfach durch Sicherheitslücken aufgefallene Management Extensions.

Die 3 Sicherheitslücken und eine 4. die unter der CVE-Nummer: 2013-1485 geführt wird, betreffen die Ausführung von Java-Applets. Besonders brisant daran ist, dass dieses Verfahren auch bei der elektronischen Steuererklärung (ELSTER) und bei der offiziellen AusweisApp zur Anwendung kommt.

Auch die als “Lucky 13″ bekannt gewordene Lücke, wird mit diesem Update ebenfalls behoben. Es handelt sich hierbei um eine Schwachstelle in der TLS/SSL-Implementierung. Diese Schwachstelle ist seit einiger Zeit bekannt, wird aber als noch nicht ausnutzbar eingestuft und daher von Oracle auch “nur” mit 4.3 Gefährdungspunkten von maximal 10 eingeordnet.

Oracle rät Java möglichst bald zu aktualisieren.

The Noun Project: viele kostenlose Vektor-Icons

Beim “The Noun Project” handelt es sich um eine große Sammlung von kostenlosen Piktogrammen bzw. Icons. Das Noun Project setzt nicht auf die üblichen Symbole, sondern bietet mitunter sehr abwechslungsreiche und extravagante Icons an. Dadurch kann sich das Projekt deutlich von anderen Icon-Verzeichnissen abheben. Insgesamt stehen einige Tausend Symbole zum Download bereit, die alle als Vektorgrafiken (SVG-Format) verfügbar sind. Zum auffinden bestimmter Icons hilft die Suchfunktion.

The Noun Project

Alle Symbole sind kostenlos erhältlich. Viele stehen unter Public Domain Lizenz zur Verfügung, d.h. sie können völlig kostenlos und ohne Quellenangabe verwendet werden. Daneben gibt es auch Symbole, die unter CC0 oder CC BY 3.0 stehen. CC0 entspricht praktisch der Public Domain Lizenz. CC BY 3.0 erlaubt ebenfalls eine private und kommerzielle kostenlose Nutzung, verlangt aber die Nennung des Autors und der Herkunft.

Zum The Noun Project

Kategorien: Internet Web-Design

JPEGmini – JPEG-Dateien stark verkleinern

Mit TinyPNG und PunyPNG habe ich bereits zwei Onlinedienste vorgestellt, die PNG-Dateien verkleinern können.

Wie der Name schon sagt ist JPEGmini speziell für JPEG-Dateien geeignet. Hochgeladene Dateien können bis auf ein Fünftel der Ausgangsgröße verkleinert werden. Der Algorithmus orientiert sich dabei an der menschlichen Wahrnehmung. Trotz der verlustbehafteten Verkleinerung unterscheiden sich die optimierten Dateien nicht vom Original. Auch bei genauer Untersuchung konnte ich keine Unterschiede feststellen.

JPEGmini kann kostenlos und ohne Registrierung benutzt werden. Allerdings können nur einzelne Datein mit maximal 50 Megapixel verarbeitet werden. Registrierte Anwender können mehrere Dateien gleichzeitig hochladen und Bilder direkt nach Picasa und Flickr senden.

Zu JPEGmini

JPEGmini

HTML5 soll 2014 erscheinen, HTML5.1 im Jahr 2016

html5_logo

Das W3C (World Wide Web Consortium) möchte HTML5 unbedingt bis Ende 2014 fertig stellen. Dafür werden einige geplante Neuerungen gestrichen und aus HTML5 herausgenommen. Diese werden dann als Erweiterungen separat weiterentwickelt. Falls sie rechtzeitig fertig werden, sollen die Erweiterungen dann doch noch in HTML5 aufgenommen werden. Ansonsten bleiben sie unabhängige Erweiterungen. Außerdem sollen Tests von bereits im Internet verwendeten Funktionen deutlich geringer ausfallen. Dies betrifft beispielsweise SVG oder MathML.

Des Weiteren wurde festgelegt, dass HTML5.1 bereits im Jahr 2016 erscheinen soll. Die Version wird neue Funktionen ebenfalls in Form von Erweiterungen beinhalten. Verzögern sich geplante Funktionen, werden sie aus HTML5.1 herausgenommen und entsprechend in HTML5.2 integriert werden.