Kategorie: 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

Automatische Silbentrennung mit CSS3

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

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

Kategorien: Internet Web-Design

Geschwindigkeit von Webseiten analysieren – pagespeed.de

Es gibt zahlreiche Möglichkeiten die Performance von Webseiten zu analysieren. So auch mit Pagespeed, worüber ich bei Perun gelesen habe. Auch wenn noch nicht sehr viele nützliche Infos verfügbar sind, gefällt mir der minimalistische Ansatz. Vielleicht wird der Serbice in Zukunft noch um weitere Funktionen ergänzt.

Eine Alternative dazu ist mittlerweile in jedem modernen Browser eingebaut. Im Lieferumfang der Entwicklerwerkzeuge findet sich ein Reiter „Netzwerk“, mit dem untersucht werden kann, welche Komponenten die Webseite ausbremsen. Lediglich bei Firefox muss man mit dem Plugin Firebug nachhelfen.

Zu Pagespeed

Kategorien: Internet Web-Design

Vector Maps – SVG-Karten mit jQuery

Interaktive Karten auf Webseiten sind ein toller Blickfang und können für verschiedene Zwecke eingesetzt werden. Mit modernen Webtechnologien lassen sich mittlerweile vektorisierte Land- oder Weltkarten realisieren, komplett ohne Flash. Stattdessen kommt bei den beiden jQuery-Plugins jQuery Vector Maps und jVectorMap SVG und JavaScript zum Einsatz.

Die Plugins werden von Firefox, Chrome, Opera, Safari und IE9 unterstützt. jQuery Vector Maps ist dabei eine modifizierte Version von jVectorMap, mit einigen Veränderungen und neuen Funktionen. Beide Plugins bieten auf ihrer Homepage eine ausführliche Dokumentation und einige Beispielkarten an. So ist es unter anderem möglich, eigene Karten zu erstellen oder die Farben anzupassen.

jVectorMap – Weltkarte

Kostenloses, responsives HTML5-Template

Bei EGrappler gibt es seit wenigen Tagen ein kostenloses, responsives HTML5-Template zum Download. Das Template hört auf den Namen „Brownie“ und ist primär für Portfolio- oder Business-Webseiten ausgelegt. Nichtsdestotrotz kann das Template als Basis für ein modernes Design dienen und an die eigenen Bedürfnisse angepasst werden. Auch die gute Dokumentation ist dabei sehr hilfreich.

Neben einem Slider auf der Startseite sind auch eine Fotogallerie, ein Kontaktformular, eine Blog-ähnliche Ansicht und ein- bis vierspaltige Layouts vorhanden. Das Template ist in validem HTML5 und CSS3 erstellt und soll auf allen aktuellen Browsern ohne Probleme funktionieren. Außerdem passt sich das responsive Layout automatisch auf die Auflösung von Desktop, Tablet und Smartphone an. Eine Demo von „Brownie“ gibts direkt bei EGrappler.

Download Brownie-Template

HTML5-Nachfolger HTML.Next in Entwicklung

Obwohl HTML5 vermutlich erst im Jahr 2014 fertiggestellt sein wird, hat das W3C (World Wide Web Consortiums) mit der Entwicklung am Nachfolger begonnen. Die neue HTML-Version trägt vorerst den Namen HTML.Next. Außerdem hat das W3C aufgerufen, erste Vorschläge für HTML.Next einzusenden.

Gleichzeitig plant man weiterhin mit der WHATWG (Web Hypertext Application Technology Working Group) zusammenzuarbeiten. Die WHATWG setzt sich aus Mitarbeitern der Browserhersteller Mozilla und Opera zusammen. Auch einige W3C-Mitglieder sind Teil von WHATWG. Die WHATWG arbeitet schon länger an einem Nachfolger für HTML5. Wenn es nach der WHATWG geht, soll die nächste HTML-Version ohne Versionsnummer auskommen und stattdessen dynamisch weiterentwickelt werden. Es ist davon auszugehen, dass HTML.Next auf einem Vorschlag der WHATWG basieren wird.

BrowserLab – Websites in mehreren Browsern testen

BrowserLab ist ein Onlinedienst von Adobe, der vor allem für Webdesigner interessant ist. Mit dem Dienst können Webseiten ohne großen Aufwand in unterschiedlichen Browsern unter diversen Betriebssystemen getestet werden. Dazu wird lediglich die URL der gewünschten Webseite eingegeben und BrowserLab erstellt automatisch Screenshots der Seite mit unterschiedlichen Browsern. Die Screenshots werden jedes Mal neu erstellt und werden nach wenigen Sekunden angezeigt.

Aktuell werden folgende Browser und Betriebssysteme unterstützt, weitere sollen in Zukunft dazukommen:

  • Chrome 13.0 – Windows
  • Chrome 14.0 – Windows
  • Firefox 5.0 – OS X
  • Firefox 5.0 – Windows
  • Firefox 7.0 – OS X
  • Firefox 7.0 – Windows
  • Internet Explorer 6 – Windows
  • Internet Explorer 7 – Windows
  • Internet Explorer 8 – Windows
  • Internet Explorer 9 – Windows
  • Safari 5.1 – OSX

Die Screenshots können sowohl einzeln, als auch nebeneinander angezeigt werden. Um Unterschiede besonders deutlich zu machen, können zwei Screenshots zusätzlich halbtransparent übereinander dargestellt werden.

Zur Nutzung von BrowserLab wird ein Adobe-Account benötigt. Der Dienst kann bis 12. April 2012 kostenlos getestet werden. Danach wird er eventuell kostenpflichtig, was jedoch noch nicht feststeht.

Zu Adobe BrowserLab

Farbe von markiertem Text mit CSS anpassen

In allen Browsern ist die standarmäßige Darstellung von markiertem Text auf weiße Schrift und blauen Hintergrund gesetzt. In letzter Zeit sehe ich jedoch immer mehr Webseiten, die sich davon abwenden. Einerseits um markierte Textstellen besser lesbar zu machen, andererseits um das Design noch einheitlicher zu gestalten.

Farbige Textmarkierungen können mit Hilfe von CSS realisiert werden. Dabei lassen sich die Text- und Hintergrundfarbe von markiertem Text ändern. Unterstützt wird der „selection“-Selektor von Opera ab Version 9.5, vom Internet Explorer ab Version 9, von Chrome und Safari. Firefox kann seit Version 3.6 ebenfalls damit umgehen.

::selection {background: #ff0000; color: #ffffff;}
::-moz-selection {background: #ff0000; color: #ffffff;}

Ursprünglich war der neue Selektor Teil der CSS3-Spezifikation. Mittlerweile wurde der Support eingestellt und der Selektor ist in der neuesten Spezifikation leider nicht mehr vorhanden. Durch die breite Unterstützung auf Browserbasis bleibt der „selection“-Selektor aber weiterhin interessant. Einziger Nachteil beim Einsatz ist, dass dieser Selektor nicht valide ist.

Ich habe euch eine Demo mit drei verschiedenen Beispielen erstellt. Dort könnt ihr selbst testen und den Quellcode kopieren:
https://www.antary.de/wp-content/uploads/2011/11/css_selection.html

 

Kategorien: HTML5 & CSS3 Web-Design

Gewinnspiel: Webstandards-Magazin und 2 Bücher

Ich wurde vom Webstandards-Magazin angeschrieben, ob ich nicht zwei selbstkündigende Jahres-Abonnements in meinem Blog verlosen möchte. Obendrauf gibts noch zwei Bücher. Das Gewinnspiel findet ihr weiter unten.

Doch was ist das Webstandards-Magazin überhaupt? Es ist eine Print-Zeitschrift für Webdesigner, Webworker, Entwickler und allgemein alle, die im Bereich Web interessiert sind. Die Themen sind sehr breit gefächert und reichen von aktuellen News bis hin zu Programmierung, Usability, Social Media und Layoutgestaltung. Die Artikel der aktuellen Ausgabe könnt ihr der vergrößerten Version des Bildes entnehmen.

Die Print-Zeitschrift erscheint vierteljährlich und kostet pro Ausgabe 7,80 Euro. Für ein Jahresabo sind 28 Euro fällig.

1. Preis

Der erste Preis besteht aus dem Buch „Praxisbuch Web 2.0“ und einem Jahresabo des Webstandards-Magazin. Hier die Beschreibung des Buches:

Dieses Buch bietet Ihnen eine umfassende und praxisorientierte Darstellung der Designtrends und Techniken des Web 2.0. Von der charakteristischen Seiten-, Text- und Farbgestaltung über Barrierefreiheit und Usability bis hin zum Einsatz von AJAX, Mashups, Wikis, Blogs und Podcasts – mit diesem Buch lernen Sie, was eine Web 2.0-Site ausmacht und wie Sie diese selbst entwerfen und umsetzen können. Zahlreiche Schritt-für-Schritt-Anleitungen – etwa zur Erstellung von grafischen Elementen mit Photoshop oder zur Umsetzung eines CSS-Layouts – unterstützen Einsteiger und Profis bei der Gestaltung einzelner Elemente oder vollständiger Web 2.0-Sites.

2. Preis

Als zweiter Preis gibt es das Buch „Der erfolgreiche Webdesigner“ und ebenfalls ein Jahresabo des Webstandards-Magazin. Nachfolgend noch die Beschreibung des Buches:

Wer als Webdesigner erfolgreich sein will, muss vieles beherrschen. Er muss mit Kunden kommunizieren, Projekte akquirieren und Websites konzipieren. Er muss Webprojekte professionell umsetzen und dabei immer den aktuellen Stand der Technik und die aktuellen Trends kennen. Beruflicher Erfolg ist eben kein Zufall. Da sind Unterstützung und Hilfe vom Experten eine willkommene Lösung! Nils Pooker vermittelt Techniken, Strategien und Lösungen für Webdesigner, die erfolgreich sein wollen. In diesem Buch erfahren Sie alles über Kundengewinnung, Marketing, Usability und Konzeption sowie das wichtige Thema Forderungsmanagement, wenn Kunden einmal nicht zahlen. Kurzum – Sie erfahren alles, was Sie für professionelle und effiziente Arbeit wissen sollten. Sie erhalten viele Tipps, Hinweise und Hilfestellungen und lernen, wie Sie Ihre Tools sinnvoll, gezielt und effektiv einsetzen.

Wie könnt ihr gewinnen?

Zur Teilnahme am Gewinnspiel müsst ihr einen Kommentar in diesem Beitrag mit einer gültigen E-Mail-Adresse hinterlassen. Dafür erhaltet ihr 1 Los. Um eure Chance weiter zu erhöhen könnt ihr aber noch bis zu 4 weitere Lose verdienen.

  • Google+ (1 Los)
    Berichtet bei Google+ über dieses Gewinnspiel oder meinen Blog und verlinkt diesen Beitrag. Anschließend müsst ihr nur noch den Link zu eurem Google+-Beitrag in den Kommentar mit aufnehmen.
  • Blogbeitrag (3 Lose)
    Schreibt einen kurzen Beitrag über dieses Gewinnspiel in eurem eigenen Blog und verlinkt auf diesen Beitrag. Anschließend den Link zu eurem Blogbeitrag im Kommentar posten.

Die Gewinner werden von mir per Zufallsprinzip ausgelost. Anschließend benachrichtige ich beide Gewinner per Mail, achtet deshalb bitte auf eine gültige E-Mail-Adresse!

Das Gewinnspiel läuft bis Sonntag, 13. November 2011 um 20 Uhr. Allen Teilnehmern wünsche ich viel Glück!