“rem” vereinfacht Nutzung flexibler Schriftgrößen

3. Oktober 2013, 11:50 von Tobi | Keine Kommentare

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.

HTML5 UP: Kostenlose und moderne HTML5-Templates

29. Juni 2013, 12:52 von Tobi | 1 Kommentar

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

24. April 2013, 18:06 von Sponsored | Keine Kommentare

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

19. März 2013, 18:27 von Tobi | 5 Kommentare

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

Windows 8 Design mit CSS3 und jQuery nachbauen

5. März 2013, 19:03 von Tobi | Keine Kommentare

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

21. Februar 2013, 19:00 von Tobi | Keine Kommentare

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

2. Februar 2013, 19:56 von Tobi | 1 Kommentar

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

JPEGmini – JPEG-Dateien stark verkleinern

7. Oktober 2012, 16:08 von Tobi | 1 Kommentar

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

21. September 2012, 10:43 von Tobi | Keine Kommentare

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.

Amazon Redesign auch in Deutschland

14. August 2012, 12:48 von Tobi | 2 Kommentare

Amazon Logo

Anfang des Jahres berichtete ich vom Redesign bei Amazon.com. Seit einigen Tagen wurde das neue Design auch in Deutschland für wenige, zufällig ausgewählte Kunden freigeschaltet.

Wie im unteren Screenshot erkennbar ist, orientiert sich die Optik dabei am Vorbild von Amazon.com. Die Seite wirkt aufgeräumter und besser strukturiert. Das typische Amazon-Feeling bleibt aber erhalten. Auffällig ist die große Weißfläche und der weitgehende Verzicht auf blaue und orange Elemente. Stattdessen wird im neuen Design viel mit Grau gearbeitet. Im komplett neuen Header sticht das mittig platzierte Suchfeld ins Auge, das noch größer als bisher ist. Außerdem gibt es ein neues Icon für den Warenkorb und rechts daneben befindet sich der Wunschzettel. Auch die linke Navigationsleiste wurde überarbeitet. Die Unterkategorien erscheinen erst beim Überfahren mit der Maus.

Insgesamt möchte Amazon mit dem Redesign die Produkte klarer in den Vordergrund stellen. Gleichzeitig wird der Fokus auf eigene Produkte und Services gelegt. Beispielsweise Kindle, MP3-Download, E-Books und Apps.

Seite 1 von 41234