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 | Keine Kommentare

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.

Automatische Silbentrennung mit CSS3

2. August 2012, 18:14 von Tobi | 7 Kommentare

CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.

Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.

<html lang="de">

<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>

Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.

p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “&shy;­” gekennzeichnet sind.

Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.

TinyPNG- PNG-Dateien stark verkleinern

30. Juli 2012, 18:10 von Tobi | Keine Kommentare

TinyPNG ist ein kostenloser Onlinedienst, mit dem PNG-Dateien verkleinert werden können. Im Gegensatz zum bereits vorgestellten PunyPNG, arbeitet TinyPNG verlustbehaftet. Dadurch erzielt TinyPNG jedoch auch deutlich bessere Komprimierungsergebnisse. Laut eigenen Angaben soll die Größe von PNGs um bis zu 70% reduziert werden. Die sichtbare Qualität soll jedoch kaum beeinträchtigt werden. Eine vorhandene Alpha-Transparenz bleibt selbstverstänlich erhalten.

Es können bis zu 20 Bilder auf einmal hochgeladen werden, wobei jede Datei maximal 1 MByte groß sein darf. Anschließend werden die PNGs verarbeitet und können nach kurzer Wartezeit heruntergeladen werden. Die Ersparnis wird sowohl in KByte als auch in Prozent angezeigt.

zu TinyPNG

Seite 1 von 41234