Kategorie: Web-Design

Website-Lokalisierung: Ein ganzheitlicher Ansatz

Wenn Unternehmen den Schritt in Richtung Internationalisierung wagen, ist es wichtig, die eigene Website jeweils an das lokale Publikum anzupassen. Das Übersetzen des Webseiteninhaltes in eine andere Sprache ist dabei jedoch nur die halbe Miete. Denn wer auf ausländischen Märkten auch Erfolg haben will, muss bei der Lokalisierung der Website einen ganzheitlichen Ansatz verfolgen. Hier gibt es einen kurzen Einblick, was dabei alles beachtet werden muss.

Den globalen Markt erobern

Für Unternehmer, die sich in ausländische Märkte vorwagen wollen, gilt die Devise: Think globally, act locally. Mit anderen Worten, selbst, wenn das Unternehmen international tätig sein soll, ist es wichtig, verschiedene Kundenstämme möglichst lokal anzusprechen. Dabei lohnt es sich neben Englisch auch, die Website in anderen Sprachen, wie Spanisch, Französisch, Arabisch etc. zur Verfügung zu stellen. Neben der Sprache sind aber auch die jeweiligen kulturellen oder länderspezifischen Eigenheiten relevant.

Die Vorteile von Website-Lokalisierung sind enorm. Denn der Einstieg in einen neuen Markt kann schließlich nur funktionieren, wenn auch Nicht-Sprachentalente die Webseiteninhalte verstehen. Das stärkt nicht nur die Umsatzzahlen, sondern auch die Kundentreue. Denn wenn große Unternehmen konkret auf die Bedürfnisse und Kultur der Kunden eingehen, können sie schließlich auch mehr Kundennähe erzeugen.

Kriterien für die Lokalisierung

Viele glauben, dass zur Lokalisierung einer Website für einen bestimmten Markt lediglich der Text übersetzt werden muss. Aber weit gefehlt! Damit sich die jeweilige Zielgruppe auch wirklich angesprochen fühlt, ist ein ganzheitlicher Ansatz wichtig, der auch kulturelle, religiöse oder rechtliche und technische Aspekte miteinbezieht. So wird sichergestellt, dass die Website im Ausland auch ihren Zweck erfüllt.

Inhalte

In erster Linie muss natürlich der ganze Webseiteninhalt in die passende Sprache übersetzt werden. Dafür ist es wichtig, sich Experten für die Übersetzung der Website zu holen. Denn nur Muttersprachler, die auch über lokales Wissen verfügen, leisten hierbei einen guten Job. Ansonsten passieren leicht sprachliche Fauxpas, die die Zielgruppe verwirren.

Das klassische Beispiel ist das im Deutschen gebräuchliche Wort „Handy“, das im englischsprachigen Raum so nicht verstanden wird. Ähnliche Verwirrung entsteht durch das Wort „public viewing“, das in Deutschland meist im Zusammenhäng mit öffentlichem Fußballschauen verwendet wird, in Amerika jedoch eine öffentliche Leichenaufbahrung bezeichnet. Wer über solche Unterschiede nicht Bescheid weiß, wird schnell missverstanden.

Relevanz

Eine wichtige Frage bei der Lokalisierung ist: Sind die Inhalte auch relevant? Nicht alles, was für ein Land wichtig ist, muss für das nächste ebenso gelten. Das betrifft beispielsweise Details, wie einen Telefonservice, der nicht in der jeweiligen Landessprache verfügbar ist, nationale Zertifizierungen oder lokale Ansprechpartner. Ausländische Zielgruppen können mit diesen Informationen meist wenig anfangen. Deshalb macht es nicht zwangsmäßig Sinn, alle Inhalte zu lokalisieren. Bei manchen Informationen ist es unter Umständen sogar besser, sie einfach wegzulassen.

Länderspezifische Anpassungen

Mit der Übersetzung des Textes werden natürlich auch länderspezifische Dinge relevant, wie beispielsweise ausländische Währungen oder Adressformate. Deutsche Unternehmen verpassen eine gute Gelegenheit, wenn etwa der Bestellvorgang nicht so konfiguriert wurde, dass auch Österreichische und Schweizer Postleitzahlen erkannt werden. Doch auch Maßeinheiten und Details wie typografische Besonderheiten müssen bei einem ganzheitlichen Lokalisierungsansatz angepasst werden.

Natürlich darf nicht vergessen werden, bei der Website-Lokalisierung auch auf das länderspezifische Rechtssystem zu achten. Denn viele Bestimmungen, was Datenschutz, Impressumspflicht, Widerrufspflichten etc. betrifft, können sich von Land zu Land oft unterscheiden.

Bilder und Design

Auch designtechnisch gibt es ein paar Dinge, die beachtet werden sollten. So wird in arabischen Ländern beispielsweise von rechts nach links gelesen. Das kann Einfluss auf die Anordnung der Bilder und Designelemente auf der Website haben. Auch die Wortlänge kann Probleme bereiten. Durch die Übersetzung mancher Wörter ergeben sich in anderen Sprachen oft viel längere Begriffe, die dann vielleicht nicht mehr in bestimmte Boxen oder auf Buttons passen.

Was die Auswahl der Bilder betrifft, ist ebenfalls Vorsicht geboten. Denn was im europäischen Raum als wenig problematisch gilt, wie etwa Bilder von leicht bekleideten Personen, ist in einigen arabischen Ländern möglicherweise ein nicht so gern gesehenes Motiv. Selbst bei der Farbgestaltung können sich kulturelle Unterschiede ergeben. Die Farbe Weiß wird in Europa etwa meist mit Unschuld oder Reinheit verbunden, während sie in Asien für Trauer und Tod steht.

Sichtbarkeit und Technik

Damit die Website im Ausland auch gefunden wird, spielen auch die SEO-Freundlichkeit und die jeweiligen Metadaten eine große Rolle. Bestimmte Dinge sollten bei der Lokalisierung deshalb immer angepasst werden, wie etwa Website-Title, Meta-Description, URL-Pfade, Ankertexte der Links, Alt-Attribute von Bildern etc.

Hier ist auch wichtig, an das CMS zu denken, denn es sollte die Lokalisierung möglichst gut unterstützten. Dabei lohnt sich, bereits vor dem Eintreten in den neuen Markt ein System auszuwählen, das dafür besonders gut geeignet ist. Dafür ist wichtig, dass das CMS-Backend in mehreren Sprachen zur Verfügung steht und das Hinzufügen von neuen Sprachversionen keine Probleme darstellt.

Wer also darüber nachdenkt, das eigene Geschäftsmodell auch im Ausland anzubieten, tut gut daran, bei der Website trotzdem lokal zu denken. Denn nur wenn die Website eines Unternehmens sich in Sprache, Kultur und Relevanz an die lokale Zielgruppe anpasst, wird sie letztendlich auch von den dortigen Kunden akzeptiert.

Kategorien: Internet Web-Design

Adobe Flash ist tot!

Adobe Flash Logo

Was vor einigen Jahren nicht viel mehr als eine kleine Hoffnung war, ist heute fast schon Realität: Adobe Flash ist mittlerweile in die Bedeutungslosigkeit verschwunden und dürfte spätestens im Jahr 2020 komplett tot sein.

Die neuesten Statistiken von Google belegen dies eindrucksvoll. Während Adobe Flash Mitte 2014 bei 80 Prozent aller Chrome-Nutzer mindestens einmal pro Tag genutzt wurde, ist dieser Wert Anfang 2018 auf unter 8 % gesunken. Damit wird der subjektive Eindruck untermauert und es kann zweifelsfrei behauptet werden, dass Webseiten mit Flash-Inhalten sehr exotisch geworden sind.

Adobe selbst ist der Trend auch nicht verborgen geblieben und hat bereits letztes Jahr das Ende von Flash für 2020 angekündigt. Ab Ende 2020 wird der Flash Player nicht mehr zum Download angeboten werden und es werden auch keine Updates mehr veröffentlicht. Wer aktuell noch auf Flash setzt hat also noch etwas weniger als drei Jahre Zeit um auf moderne Techniken wie beispielsweise HTML5 oder WebGL umzusteigen.

Specifically, we will stop updating and distributing the Flash Player at the end of 2020 and encourage content creators to migrate any existing Flash content to these new open formats.

Google möchte Flash mit Chrome 76 standardmäßig deaktivieren, was für Juli 2019 geplant ist. Nutzer sollen das Flash-Plugin aber manuell wieder aktivieren können. Mit Chrome 87 im Dezember 2020 soll der Flash Player vollständig entfernt werden. Auch Microsoft will den Flash-Support mittelfristig beenden. Zwischen Mitte und Ende 2018 soll Microsofts Edge aktualisiert werden und frägt dann in jeder Sitzung nach, ob Flash ausgeführt werden darf oder nicht. Beim Internet Explorer 11 ändert sich vorerst nichts. Zwischen Mitte und Ende 2019 soll Flash im IE 11 und Edge standardmäßig deaktiviert werden, bevor es Ende 2020 komplett entfernt werden wird.

Google stellt Material Design Icons kostenlos zur Verfügung

Google Logo 2015

Mit Veröffentlichung von Android 5.0 Lollipop hat Google das neue Material Design inklusive vieler neuer Icons eingeführt. Erst vor wenigen Tagen habe ich entdeckt, dass Google alle Icons kostenlos zur Verfügung stellt.

Neben dem PNG- und SVG-Dateiformat sind die Icons auch als Webfont verfügbar. Damit können die Icons ganz einfach per Stylesheet über Google Web Fonts eingebunden oder alternativ auch lokal gehostet werden. Mittels CSS lässt sich die Größe und die Farbe der Icons verändern. Die von Google bereitgestellte Anleitung enthält weitere Details.

Alls Icons sind völlig kostenlos erhältlich und stehen unter der CC-BY 4.0 Lizenz. Sie können auch in kommerziellen Projekten genutzt werden. Laut Google können die Icons sogar ohne Hinweis in der “About”-Seite verwendet werden, auch wenn dieser wünschenswert wäre. Ein Verkauf der Icons ist hingegen verboten.

Google Material Design Icons

Google Material Design Icons

Kategorien: Internet Web-Design

Heise veröffentlicht 1-Klick-Social-Media-Buttons mit Datenschutz

c't Shariff Logo

Vor mehr als drei Jahren hat Heise eine einfache Lösung zum Einbinden der Sharing-Buttons von diversen sozialen Netzwerken veröffentlicht. Die “2 Klicks für mehr Datenschutz” genannte Lösung setzt dabei auf deaktivierte Buttons, die keinerlei Daten mit Dritten austauschen. Erst beim Anklicken durch den Anwender werden die Buttons aktiviert und können anschließend ganz normal genutzt werden. Neben einer deutlich besseren Ladezeit dient die zweistufige Lösung somit dem Erhalt der Privatsphäre und einem besseren Datenschutz.

Dank des gut umgesetzten WordPress-Plugins kam die Heise-Lösung bei vielen Webseiten und Blogs zum Einsatz. Auch ich habe das Plugin mit meinem Redesgin im Dezember 2011 eingeführt und verwende es noch immer.

Im November 2014 hat Heise einen Nachfolger der beliebten 2-Klick-Buttons vorgestellt. Die neue Lösung hört auf den Namen Shariff und ersetzt die bisherige 2-Klick-Lösung. Hauptvorteil von Shariff ist die einfachere Benutzung, da nur noch ein Klick notwendig ist. Des Weiteren sind die Buttons moderner und auffälliger gestaltet. Die Lösung ist bei Heise auf allen Seiten im Einsatz und kann dort genauer angeschaut werden.

Das Shariff-Projekt wird bei GitHub entwickelt, wo auch der Quellcode zum Download bereit steht. Für WordPress existieren zwei Plugins: Shariff Wrapper und Shariff for WordPress. Beide Plugins befinden sich noch in einer frühen Entwicklungsphase und bieten im Vergleich zum “2 Click Social Media Buttons”-Plugin deutlich weniger Einstellungsmöglichkeiten. Ich warte noch ein paar Wochen, bevor ich mich für ein Plugin entscheide und auf Shariff umsteigen werde.

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.

Kategorien: Internet Web-Design

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”

Kategorien: HTML5 & CSS3 Web-Design

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

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

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.

Kategorien: Internet Web-Design