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

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:
http://www.antary.de/wp-content/uploads/2011/11/css_selection.html

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!

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:

Einfach den unten stehenden Code kopieren und selbst ausprobieren. Zum ändern der Farbe reicht es aus, wenn ihr jeweils die “background”-Eigenschaft anpasst. Fragen könnt ihr gerne in den Kommentaren stellen.

input[type="submit"] {
    font-size: 20px;
    padding: 4px 12px;

    background: #004577;
    border: 1px solid transparent;
    color: white;

    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
    outline: none;

    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;

    -moz-transition: .6s;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;

    -webkit-box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                        rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                        rgba(0, 0, 0, .6) 0 1px 2px;
    -moz-box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                     rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                     rgba(0, 0, 0, .6) 0 1px 2px;
    box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
                rgba(255, 255, 255, .6) 0 25px 30px -12px inset,
                rgba(0, 0, 0, .6) 0 1px 2px;
}

input[type="submit"]:hover, input[type="submit"]:active {
    background: #0094FF;
}

UPDATE 17.10.2011

Habe schnell ein Demo mit zwei Beispielen erstellt. Wirklich nur Quick’n'Dirty. Ihr könnt es unter folgendem Link einsehen:
http://www.antary.de/wp-content/uploads/2011/06/css3buttons.html

CeeBox

ColorBox

FancyBox

GreyBox

jQuery Lightbox Plugin (balupton edition)

jQuery lightBox plugin

NyroModal

Pixbox

Pirobox Extended

popeye

prettyPhoto

Slimbox 2

• 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.

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:

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.

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

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…

Trend 1: Logos & Headers mit Übergröße

Ein trendy Kopfbereich macht Lust auf mehr. (Quelle: http://www.spoongraphics.co.uk/)

Intro-Seiten sind von Gestern. Sogar von Vorgestern, wenn nicht sogar von Vorvorgestern. Wie sonst aber erreicht man einen unvergessliches Erlebnis für den User, der auf die Seiten kommt? Trend im neuen Jahr wird sein, unvergessliche Eindrücke und Eye-Catcher-Elemente mittels riesiger Logos auf vergleichsweise großflächigen Logos einzunehmen. Im Extrem nehmen diese Header sogar den ganzen Bildschirm flächig ein, ohne eigentlichen und wichtigen Content zu präsentieren. Der Benutzer muss dafür einfach nur nach unten (oder zur Seite) scrollen. Das hilft vor allem dabei, da viele Anwender einfach klickfaul geworden sind. Immerhin sind sie schon von selbst auf die Seite gesurft. Da sollen die Weiteren Informationen einfach nur präsentiert werden, ohne das der Anwender noch viel zutun muss.

Trend 2: Handgemalte Layouts

So persönliche wie Urlaubsfotos: Handgemaltes Design (Quelle: http://www.casioexilimlab.com/)

Garantiert nichts Neues ist die Platzierung von händisch gemalten Layouts auf Internetpräsenzen. Sicherlich aber ist es eine eigene Kunst für sich solche Layouts zu entwickeln. Die einen beherrschen sie, andere würden gerne, haben aber Angst es zu tun. Im Trend für 2010 geht es nun nicht darum die Site komplett im handgemalten Designglanz erstrahlen zu lassen, sondern vielmehr darum, an und für sich nüchtern daherkommende Sites durch akzentgebende eigenständig gescribbelten, gezeichneten oder gemaltet Grafiken mehr Identität und Personalität zu schenken. Handzeichnungen als Trend werden 2010 elementarer werden. Nicht im Mittelpunkt stehend, sondern vielmehr unterstützend und subtil.

Trend 3: Typo

Schrift setzt Akzente. (Quelle: http://www.montylounge.com/)

Eine schwierige Thematik im Bezug auf Trends ist die Gestaltung des Schriftbildes. Dies wird auch 2010 nicht anders sein. Nach wie vor ist Typgraphie ein schwieriges Feld. Usability wird groß geschrieben. Die einfach Benutzbarkeit mit modernen Schriften wird von vielen als Problemstelle indentifiziert. Webdesigner haben deshalb durchaus Angst, in Sachen Typo Neues auszuprobieren und alle Möglichkeiten auszuloten, die sich ihnen bieten. Momentan ist es noch undenkbar – und Ausnahmen bestätigen auch hier die Regel – Schriftschnitte zu vermischen. Drei Schnitte sind noch tragbar, während 7 schon zu viel des Guten sind. In Zukunft werden Schriften noch mehr ausgelotet werden. Sie werden kombiniert und den Bedürfnissen angepasst werden. Platziert man sie dann noch richtig auf der Präsenz, rückt die typografische Gestaltung in den Mittelpunk des Layouts. Das macht den eigentlichen Inhalt interessanter und setzt den Fokus auf Selbigen – ganz ohne die Site mit Bildern zu überladen.

Trend 4: Einseitige Layouts

Alle Infos auf einer Seite. (Quelle: http://www.vlourenco.com/)

Eine kompakte Site die sich auf das Wesentliche beschränkt: Das sind sog. One-Page-Layouts. Die Webpräsenz als Trend 2010 besteht nur aus einer einzigen Seite. Weg von einer umständliche Navigation hin zu einer Annäherung auf die Hauptpunkte. Der Vergleich mit einer elektronischen Visitenkarte eignet sich hierbei am besten. Einseitige Layouts sind persönliche Profile und keine Unternehmensdarstellung. Die Person die sich präsentiert, steht im Vordergrund.

Trend 5: Interaktives Intuitivdesign

100% Flash for Interactive Design. (Quelle: http://www.crowleywebb.com/)

Auch Flash hat seine Hoch-Zeit schon hinter sich. Gut erinnern wir uns an die Tage, an denen man keine Website benutzen konnte, ohne auf eine Benutzeroberfläche aus Flash zu stoßen. Teilweise musste man sogar auswählen, ob man eine Flash-Version oder die HTML-Version (dann aber ohne die tollen BlingBling-Effekte) benutzen wollte, wobei beide Varianten nicht durch ihre Umsetzung glänzten. Zum Glück wird Flash heutzutage viel besonnener eingesetzt. Zwar ist ein Trend in Richtung jQuery zu beobachten, jedoch ist Flash noch immer ein angemessenes Werkzeug, wenn es darum geht, Akzente auf einer Site zu setzen. Denn eines ist klar: Nichts ist so interaktiv wie Flash. 2010 geht der Trend in zwar wieder in Richtung Flash, es wird aber auf die Elemente beschränkt, die einen wirklichen Mehrwert auf die Site bringen. Das wird ein wahnsinnig intuitives Design ermöglichen.

Trend 6: Modale Boxen

Die modale Box (Quelle: http://davidwalsh.name)

Modale Boxen sind keineswegs neu. Sie nehmen im neuen Jahr jedoch erneut an Fahrt auf. Eine modale Box ist vergleichbar mir dem Pop-up 2.0. Wenn man hier im Blog auf die Bilder klickt, werden diese auch in modalen Boxen präsentiert. Sie schauen gut aus und wirken irgendwie edler. Sie sind einfach zu gestalten, leicht zu benutzen und bieten zugleich einen tauglichen Grad an Usability. Der Trend 2010 wird dazu führen, dass diese Art von Pop-ups noch weiter verbreitet und universal eingesetzt werden.

Trend 7: Minimalismus

Klare Linien, purer Auftritt (Quelle: http://www.janreichle.com/)

Mein persönlicher Lieblingstrend. Deshalb, da Minimalismus 2010 nicht mit dem Minimalismus dieser zahlreichen altertümlichen und verschlafenen Sites von gestern zu tun hat. Zeitgemäße minimalistische Websites bieten viel Luft und Weißraum, präsentieren die Essenz der Site und überraschen mit beeindruckendem Schriftbild und fantastischer Farbwelt. Minimalismus ist nicht kalt und gefühllos. Es ist warmes Design und bringt Dinge auf den Punkt.

Trend 8: Print-Layouts

"Printline" - Magazine im Web (Quelle: http://www.macalicious.com/)

Studien belegen, das Jahr für Jahr immer mehr Konsumenten der traditionellen Presse den Rücken zukehren in Richtung Online-Konsum. Was die Konsumenten dabei jedoch nicht verlieren möchten, ist der Komfort, den Sie vom Print her kennen. Viele Menschen sind regelrecht verliebt in ihre Lieblingszeitschrift. Viel weniger aber haben eine wirkliche Lieblingssite. Designer stehen nun vor der Herrausforderung, diese “Konvertierten” anwendergerecht und gemäß bestehender Gewohnheiten zu begrüßen. Die Entwicklung zeigt, das es durchaus einen Hand zu Layouts gibt, sie sich vom traditionellen Print zunehmend wenig unterscheiden. Content wird sorfältig aufbereitet, meist auf einer Seite. Das vom Print bekannte Layout schafft eine gewohnte Umgebung, bietet einen hohen Grad des so erwünschten Wohlfühlfaktors und sorgt für ein heimeliges Gefühl.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

1. Code besser layouten als das Design.

Wenn wir die Oberfläche der Site erstellst, ist sicherzustellen, dass man semantisch korrekten Code benutzt. Durch das Benutzen von beschreibenden Tags in den Seiten wird es Suchmaschinen ermöglicht den Content zu erfassen und ihn besser einordnen zu können. Zudem erleichtert das den Formungsprozess der Website selbst.

2. Schlüsselwörter benutzen, aber nicht missbrauchen.

Schlüsselwörter beschreiben den Inhalt deiner Site. Sie müssen zum Inhalt passen. Wichtig hierbei ist es, dass sie überall an den relevanten Positionen auf der Site erscheinen. Die Schlüsselwörter sollten in der URL, dem Seitentitel und den heading-tags erscheinen. Die Schlüsselwörter müssen auch im Fließtext der Seite auftauchen. Hier ist Besonnenheit gefragt, da eine Überfüllung mit Schlüsselwörtern wiederum ein schlechteres Ranking zur Folge hat.

3. Flash für Navigation vermeiden.

Es ist verführerisch einige brilliante Effekte und intuitive Navigationssysteme mit Flash zu implementieren. Man sollte davon aber die Finger von lassen. Suchmaschinen können Flash-Dateien nicht wirklich auslesen, je nach Programmiergeschick und Sprachversion in der Datei. Das bedeutet das Suchmaschinen die Site nicht erfassen und entsprechend indizieren können. Deshalb: Navigation ohne Flash realisieren.

4. Bilder nicht vergessen.

Es ist sicherzusetellen, dass das alt-Attribut von implementierten Bildern korrekt zu benutzen. Dessen Inhalt muss den Bildinhalt treffend beschreiben. Suchmaschinen können das Bild an sich selbst nicht interpretieren. Zeichnet man Bilder nicht aus, verpasst man zudem Traffic der durch die Bildersuche entsteht.

5. Keine generischen Links benutzen.

Das Wichtigste für Suchmaschinen sind die Links. Beim Verlinken auf den Content ist es deshalb wichtig, ein Schlüsselwort zu benutzen, das dem Zielcontent entspricht. Ein Beispiel: Ein Link der zum Freistellen von Haaren mit Photoshop führt, sollte statt: “Freistellen mit Photoshop” eher folgende Bezeichnung haben: Haarige Angelegenheiten: Freistellen mit Photoshop.