Google hat in den GoogleLabs einen neuen Dienst namens "Browser Size" veröffentlicht. Hier lässt sich ablesen wieviel Prozent der User welchen Teil einer Website sehen können (Viewport). Die Werte variieren bekanntermaßen aufgrund verschiedener Auflösungen und Monitorgrößen und individuellen Einstellungen stark. Die Statistik wird als semitransparenter Overlay über der aufgerufenen Website angezeigt und kann minimal angepasst werden. Eine Überraschung bietet der Dienst erstmal nicht, da die Werte soweit bekannt sind. Ärgerlich hingegen ist, dass eine verwertbare Ansicht nur auf linksbündige Seiten zutrifft. Hier wird in Zukunft sicherlich noch einiges zu tun sein.

• Google Browzer Size

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Schriftglättung unter OS X Snow Leopard ist je nach Schriftfarbe und Hintergrundgestaltung im Safari ein wenig zu stark geraten - mitunter wirkt die Schrift einfach zu fett.
Dieses Problem kann mit einem simplen CSS-Snippet das auf den body oder einen beliebigen anderen Selektor angewendet wird behoben werden. Möglich wird dies durch Safaris WebKit-Engine.

CSS-Code

Und so geht's. Einfach folgenden Code in Euer Stylesheet kopieren und den Selektor ggf. anpassen. Das war es auch schon. Der Screenshot oben zeigt im direkten Vergleich die "normale" Schriftglättung (oben) und die mittels CSS manipulierte (unten).

body {
  -webkit-text-stroke:1px transparent;
}

@media only screen and (max-device-width:480px) {
  body{-webkit-text-stroke:0 black;}
}

Achtung!
Der CSS-Code ist nach CSS 2.1 nicht valide.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Textarea in Safari und Chrome verfügt über einen Anfasser in der unteren rechten Ecke der es dem Seitenbesucher ermöglicht die Größe des Eingabefeldes selbst zu bestimmen.
Eigentlich eine gute Sache, will man doch nicht ganze Aufsätze in ein winziges Textfeld schreiben müssen. Doch häufig zerstört eine manuell vergrößerte textarea das Seitenlayout. Abhilfe kommt wie so oft per CSS3.

Die ‹textarea› mit resize beeinflussen

Die folgenden CSS3 Befehle sollten selbsterklärend sein - mittels resize-Attribut können die Anfasser eines Elements vom Standardwert aus verändert werden. Bei der textarea bedeutet dies, dass die Anfasser (zumindest teilweise) deaktiviert werden können; andere Elemente die im default über keine resize-Funktion verfügen können mit diesem Attribut anschließen per Maus auf die gewünschte Größe aufgezogen werden.

textarea { resize: none;}

textarea { resize: both;}

textarea { resize: vertical;}

textarea { resize: horizontal;}
 

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wer es noch nicht mitbekommen hat erfährt es jetzt. Firefox (alle Versionen) hat in den globalen Browser-Charts endlich den Internet Explorer (6) überholt. Das bedeutet zwar bei Weitem noch nicht, dass die IE6 User ausgestorben sind, ist aber zumindest eine Bewegung in die richtige Richtung. Wer sich für die detaillierte Statistik (derer es natürlich viele gibt) interessiert wird hier fündig.

• October 2009 browser stats: Firefox finally passes IE6

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wer sich einmal anschauen möchte was für 3D-Effekte mit der Webkit-Engine und Safari möglich sind, der sollte folgenden Link nicht verpassen.

• 3D-Transformation

Wer keinen Safari-Browser nutzt kann sich als Entschädigung wenigstens ein Video dieser Technik anschauen.

• Video der 3D-Transformation

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe hat heute Nacht zum zweiten Mal für eine Stunde die Tore für eine Registrierung beim Projekt Browser Labs geöffnet! Dank Twitter war ich sofort zur Stelle und kann Euch somit zeigen was sich dahinter verbirgt.
Eins ist jetzt schon sicher: Auf eine solche RIA hat so mancher Webdesigner (mich eingeschlossen) lange gewartet.

Adobe Browser Labs: Die Features

Es gibt zahlreiche Emulatoren, Websites, Anwendungen und Work-Arounds um die Darstellung einer Website in den verschiedenen Browserumgebungen zu testen. Genau an dieser Stelle setzt auch Adobe Browser Labs an und bietet Euch in Lightroom/Bridge ähnlichem Interface die Möglichkeit Eure Websites in verschiedenen Browsern zu testen. Zusätzlich kann der ausgewählte Browser jedoch auch auf einem bestimmten Betriebssystem simuliert werden. Aktuell bietet Browser Labs folgende Browsersimulationen:

• Firefox 3.0 (OS X)
• Firefox 3.0 (Windows XP)
• Firefox 2.0 (OS X)
• Firefox 2.0 (Windows XP)
• Internet Explorer 7.0 (Windows XP)
• Internet Explorer 6.0 (Windows XP)
• Safari 3.0 (OS X)

Adobe Browser Labs: Die Ansichten

Ihr habt die Wahl eure Seite auf drei verschiedene Wege zu testen. Zunächst wäre hier der "1-up-View". Am oberen Fensterrand gebt Ihr zunächst die URL der Seite ein und wählt anschließend die Browserumgebung. Im Hauptfenster wird nun die Seite so dargestellt wie sie eben auch im zuvor gewählten Browser ausschauen würde.
Der "2-up-View" splittet das Hauptfenster vertikal und ermöglicht so einen direkten Vergleich zweier Browser. Scrollt Ihr die Seite, so scrollen beide Ansichten parallel mit. Leider kann in keiner Ansicht bisher geklickt werden, was Tests bzgl. Interaktionen (noch ?) unmöglich machen. Sollte der Monitor zu klein sein, so kann die Ansicht von 75% bis 200% skaliert werden.
Als letztes steht Euch der Modus "Onion Skin Mode" zur Verfügung. Hier werden ebenfalls zwei Browser-Darstellungen miteinander verglichen, jedoch werden die Seiten semitransparent übereinander ausgerichtet. So werden ungewollte Abweichungen sofort bemerkt. Über einen Transparenz/Opazität-Regler kann die Deckkraft der beiden Ansichten gesteuert werden.

Adobe Browser Labs: Weitere Features

Sehr angenehm wird die Steuerung von Browser Labs mittels Hot Keys. Die wichtigsten Funktionen können per Tastatur angesteuert werden wodurch in wenigen Sekunden die Ansicht verändert und beurteilt werden kann.
Solltet Ihr Eure Websites nur in einigen der oben genannten Browsern testen wollen, so können darüber hinaus sogenannte Browser-Sets angelegt werden die nur bestimmte Testumgebungen beinhalten.

Fazit

Adobe Browser Labs überzeugt mich auf ganzer Linie. Neben einem schicken Interface und sehr zügiger Darstellung finde ich das Tool einfach nur saupraktisch. Verbesserungswürdig ist in jedem Fall der Browser-Support. Hier fehlen einige Browser (bsp. Chrome, IE8, Opera) komplett, was aber sicher nicht ewig der Fall sein dürfte.
Fast ebenso wichtig finde ich es, dass der Webdesigner die Seite auch benutzen kann. Eine nicht zerschossene Darstellung ist hier nur die halbe Miete.

Was meint Ihr?

Was haltet Ihr von Adobe Browser Labs? Habt Ihr selbst schon Tests machen können oder wartet Ihr auf die nächste Möglichkeit euch zu registrieren? In welchen Browsern testet Ihr Eure Sites für gewöhnlich?

Link: Adobe Browser Labs

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wer sich bisher immer geärgert hat, dass Firebug nur im Firefox funktioniert der hat nun allen Grund zur Freude! Mit Firebug Light kann der unverzichtbare Web-Development-Helfer auch im Internet Explorer (IE), Safari und Opera aktiviert werden. Das ist besonders praktisch, da für gewöhnlich im Internet Explorer einiges mehr an Bugfixing notwendig ist als im Firefox.
Dies alles ist zwar nicht wirklich neu, aber besser man erfährt es spät als nie.

Firebug Lite einbinden

Die Aktivierung von Firebug Lite ist kinderleicht. Kopiert einfach folgendes JavaScript-Snippet in den head Eurer Seite und schon wird Firebug Lite im Internet Explorer, Opera und Safari angezeigt.

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

Selbstverständlich muss das JavaScript nach dem Bugfixing wieder entfernt werden ;)

Firebug-Lite-Website

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Apple hat die neuste Version von Safari veröffentlicht. Nachdem die Beta zur Safari 4 schon einige Zeit zum Download bereit stand, kann nun die finale Version genutzt werden.
Einige neue Funktionen sowie ein Video der Beta-Version habe ich vor einiger Zeit in einem Artikel vorgestellt.

Safari 4 Website

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Apple hat seinen hauseigenen Browser Safari in Version 4 Beta öffentlich zur Verfügung gestellt. Neben diversen technischen Neuerungen wie einer deutlich ausgereifteren CSS3- sowie HTML5-Interpretation überrascht der Browser mit einer spitzen Geschwindigkeit. Auch die JavaScript-Unterstützung wurde enorm verbessert.
Das Interface kann mich ebenfalls überzeugen: Die Top-Sites (meistbesuchten Seiten) sind nun in Form einer 3D-Wall als Startseite verfügbar und die Lesezeichen zeigen favorisierte Websites im CoverFlow-Modus an.
Um Euch einen schnellen ersten Eindruck vom Design des kommenden Browser zu geben habe ich mir die Beta gezogen und Euch flott ein kleines Video erstellt. Viel Spaß.

Das neue Interface von Safari 4 Beta

Links zum Thema

Mehr Informationen zur beta von Safari 4 findet Ihr hier:

• Apple
• AppStrom
• Spiegel-Online

Download

Die Beta von Safari 4 könnt Ihr Euch hier runterziehen

Download: http://www.apple.com/de/safari/download

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Thumbnail Galerien sind langweilig? Jetzt nicht mehr! Denn mit "PicLens" aus dem Hause "CoolIris" steht der Generation Web nun ein mächtiges wie sensationelles und kostenloses Plugin für Firefox, Internet Explorer und Safari zur Verfügung das so manch trockene Bildergalerie in eine spannende 3D-Bilderwand verwandelt.

"PicLens" unterstützt bereits einige der populärsten Bildplattformen des Internets wie Google Bildsuche, Flickr, MySpace, Facebook, Picasa und andere. Das Plugin lässt sich kinderleicht installieren und bietet dem glücklichen User eine dreidimensionale Fullscreen-Bildergalerie die sich intuitiv mit der Mouse scrollen und heranzoomen lässt. Auch eine Slideshow aller Bilder wird unterstützt. Somit wird jede noch so langweilige und langandauernde Bildsuche zum Erlebnis!

"Das ist doch nur Spielerei" sagt jetzt sicher der ein oder andere ... und das kann ich nichtmal von der Hand weisen ... aber warum sollte man sich den Aufenthalt im Web nicht so "gemütlich" wie möglich gestalten? Es gibt nunmal Dinge im Leben die braucht man nicht. Aber wenn man sie einmal hat will man sie auch nicht wieder hergeben.

Mehr Informationen und alle Downloads zu "PicLens" findet man auf der offiziellen Herstellerseite.

Diesen Artikel habe ich erstmals auf blog.euroweb.de veröffentlicht und für Kulturbanause.de übernommen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.