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

Schöne Buttons mit CSS3 erstellen

Im Rahmen eines kleinen Webprojekts für mein Studium, habe ich heute ein HTML-Formular erstellt. Da ich unbedingt schöne Buttons wollte, habe ich mich das erste Mal richtig mit CSS3 auseinandergesetzt. Wirklich toll was damit alles möglich ist.

Ich habe mir einen Button mit abgerundeten Ecken, leichtem Farbverlauf und Schatten gebastelt. Der Text hat ebenfalls einen leichten Schattenwurf bekommen und beim drüberfahren wird die Farbe der Buttons gewechselt, mit Animation natürlich. Anzumerken wäre noch, dass alles rein in CSS realisiert wurde und keine Grafiken zum Einsatz kommen. Auch am HTML-Code muss nichts geändert werden. Die Buttons funktionieren im Firefox 4, Opera 11.11 und Chrome 12 einwandfrei. Im IE9 muss man lediglich auf die Animation beim Hovern verzichten.

Hier das Ergebnis. Links im normalen Zustand, rechts wenn man mit der Maus drüberfährt:

(mehr …)

Linksammlung – jQuery Lightbox Scripts

Da ich gerade für ein Projekt eine Lightbox suche, wollte ich euch einige auf jQuery basierende Lightbox Scripts vorstellen. Einfache Scripte mit nur wenigen Funktionen oder Projekte die schon lange nicht mehr aktualisiert wurden, habe ich nicht aufgeführt. Insgesamt sind es zwölf Alternativen geworden.

(mehr …)

Kategorien: Internet Web-Design

Präsentation über CSS3

Gerade bin ich über eine sehr tolle Präsentation zum Thema CSS3 gestolpert.Folgende Themen werden auf insgesamt 103 Seiten behandelt:

  • Everything you ever wanted to know about CSS3 selectors
  • Transparency and new color formats, including RGBA
  • New ways to work with backgrounds, including CSS gradients, multiple background images and natively supported CSS sprites
  • Rounded corners and border images
  • Box and text shadows
  • Transforms, transitions and their potential downsides
  • New values, including calc(), attr() and new units
  • Browser support information and techniques to take advantage of the exciting new stuff with respect to browsers of the past, to create experiences that are enjoyable for everyone

Die Präsentation wurde von Lea Verou erstellt und sollte unbedingt mit der Betaversion von Firefox 4 angeschaut werden. Falls dies nicht möglich ist, kann man auf die Online-Version zurückgreifen.

Kategorien: HTML5 & CSS3 Web-Design

Browser auf HTML5-Kompatibilität testen

Unter html5test.com hat Niels Leenheer einen Test veröffentlich, um Browser auf ihre HTML5-Unterstützung hin zu testen. Ähnlich wie beim Acid3-Test werden Punkte vergeben, um die unterschiedlichen Browser besser vergleichen zu können. Das Ergebnis wird übersichtlich zusammengefasst und zeigt genau auf, welche HTML5-Funktionen bereits unterstützt werden und welche noch nicht.

Allerdings muss man bedenken, dass die Spezifikation von HTML5 noch nicht fertig ist und sich daher noch einiges ändern kann. Zudem räumt der Entwickler ein, dass der Test nur überprüft ob die Funktionen im Browser bereit stehen. Die richtige Implementierung bzw. Umsetzung werden nicht näher geprüft.

Aktuell können maximal 300 Punkte erreicht werden. Hier eine kleine von mir erstellte Übersicht:

Browser Punkte
Firefox 3.6.8 139
Firefox 4.0 beta 2 189
Chrome 5.0.375.125
197
Chrome 6.0.472.22 dev
217
Internet Explorer 8
27
Opera 10.60
159
Safari 5.0.208
208

Kategorien: HTML5 & CSS3 Web-Design

Grafiken und Bilder verlustfrei komprimieren

Im Internet sollte man bei Bildern und Grafiken immer auf eine angemessene Dateigröße achten. Natürlich sollte die Qualität darunter nicht leiden. Deshalb verwende ich persönlich sehr gerne das verlustfreie Grafikformat PNG.

Es gibt auch die Möglichkeit, mit Optimierungen eine Datei verlustfrei zu verkleinern.
Hier kommt der kostenlose Service PunyPNG ins Spiel. Dort kann man Grafiken (PNG, JPG, GIF) bis 350 KByte hochladen und optimieren lassen. Anschließend erscheint eine Übersicht mit den hochgeladenen Dateien und die gesparte Dateigröße. Nun kann man die optimierte Datei wieder herunterladen. Bei mehreren Bildern kann man auch eine ZIP-Datei mit allen Bildern herunterladen.

Zur Veranschaulichung habe ich zwei Beispieldateien hochgeladen. Wie ihr sehen könnt, wurden die zwei PNGs insgesamt um 39,2 KByte verkleinert.

Gut zu wissen: Webdesigntrends 2010

Minimalistisches Design - Fortschritt oder Rückschritt?

Minimalistisches Design – Fortschritt oder Rückschritt? (Quelle: http://www.markenpersonal.de)

Nicht mehr lange, dann ist es getan. Das Jahr geht zu Ende. Überall beginnt es zu weihnachten. Die Zeit wird besinnlicher. Und uns stehen zahlreiche Jahresrückblicke ins Haus, bevor wir letzten Endes das neue Jahr willkommen heißen. Während der Eine noch über das vergangene Jahr mit all seinen Höhen und Tiefen sinniert, fiebert der Andere schon 2010 entgegen.

Auch im Web hat sich in den letzten Jahren durchaus viel getan. Web 2.0. Social Communities. eCommerce. Das spiegelte sich natürlich auch im Erscheinungsbild des www wieder. Altbekanntes wurde verbessert, neue Technologien ersetzten alte und ermöglichten ganz neue Vorgehensweisen der Web-Präsentation. Traditionen wurden über den Haufen geworfen, neue Trends entstanden.

Und auch für das neue Jahr 2010 gibt es Tendenzen und Richtungen, in die die Gestaltung geht. Zwar ändert sich nicht alles am 1. Januar, doch die Entwicklung vom Beginn des Jahres bis jetzt zeigt doch recht klar, in welche Richtung der Weg gehen könnte. Das reicht von der optischen Gestaltung, der Platzierung von Headern und übergroßen Footern bis hin zum erneut auflebenden Retro-Look der im Gegensatz zum einschlägigen Minimalismus steht.

Die Trends unterscheiden sich nicht von Grund auf von dem was 2009 aktuell war. Und was auch immer der Anwender, Designer oder Programmierer von den Trends halten mag, ob sie gefallen oder nicht, hängt sicherlich auch von persönlichen Faktoren ab. Dennoch wollen wir uns die Trends zumindest ansehen, um gewappnet zu sein, mitreden zu können und uns evtl. weiterzuentwickeln…

(mehr …)

Kategorien: Web-Design