Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von Media Queries im Internet Explorer nach.

respond.js

Das Script liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

• respond.js - unkomprimierte Quelldatei
• respond.js - komprimierte Version
• respond.js - WordPress-Plugin

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.

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Facebook-API im Footer eingebunden?

Eine häufige Ursache ist die Einbindung der Facebook-JavaScript-API im Footer de Website. In den letzten Jahren haben wir eigentlich gelernt, bestimmte Scripte am Ende der Seite einzubinden um den visuellen Seitenaufbau nicht auszubremsen. Der Internet Explorer 7/8 mag das allerdings nicht und zeigt den Facebook-Like-Button nicht an.
Um dieses Problem zu beheben müsst ihr die Facebook-API vor dem Like-Button einbinden.

dieser Code:

<script src="http://connect.facebook.net/de_DE/all.js#xfbml=1"></script>

Muss also vor diesem Code im Dokument eingebunden werden:

<fb:like href="<?php echo get_permalink(); ?>" show_faces="false" font="lucida grande" width="450" layout="button_count" action="like" send="true"></fb:like>

Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier.

Ob es sinnvoll ist die Scripte aus dem Footer zu entfernen, nur um den »gefällt mir«-Button auch im IE zu sehen muss natürlich jeder für sich selbst entscheiden.

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.

Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 trotz korrekt vergebenem z-index Layout-Elemente falsch an. Bei Drop-Down-Navigationen oder ähnlichen überlappenden Bereichen kann dieser Fehler daher zu etlichen grauen Haaren führen. Ein Live-Beispiel des Bugs findet ihr hier. Der z-index-Bug lässt sich auf verschiedene Arten lösen. Eine sehr schnelle und komfortable Variante bietet jQuery. Mit wenigen Zeilen Code kann die fehlerhafte Funktionalität im IE7 nachgerüstet werden.
Da ich genau dieses Problem vor wenigen Tagen lösen musste, möchte ich euch hier einen möglichen Lösungsweg zeigen.

Folgender JavaScript-Code reicht aus um den Fehler zu beheben. jQuery muss natürlich bereits im Dokument eingebettet sein.
Da der Bug nicht in allen Browsern auftritt, sollte der Code über einen Conditional Comment nur für die entsprechende Internet Explorer Version geladen werden. Das folgende Beispiel zeigt die Integration inkl. dem Conditional Comment für den IE7.

<!--[if IE 7 ]>
    <script>
    $(function() {
        var zIndexFix = 1000;
        $('div').each(function() {
            $(this).css('zIndex', zIndexFix);
            zIndexFix -= 10;
        });
    });
    </script>
<![endif]-->

Ob es sinnvoll ist einen solchen Bug mit JavaScript zu lösen muss je nach Projekt individuell bewertet werden. Sofern der Seitenbesucher JavaScript deaktiviert hat besteht der Fehler nämlich nach wie vor. Das hier gezeigte Beispiel ist nur eine Lösung von vielen.

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.

Mit Conditional Comments lassen sich verschiedene Internet Explorer Versionen gezielt ansprechen um für den entsprechenden Browser abgewandelten - IE optimierten - Quellcode auszugeben.
Das ist ja auch bitter nötig wie wir alle wissen. Doch nicht nur die Desktop-Versionen lassen sich mit diesen Kommentaren beeinflussen - auch die mobile Version, die Bestandteil von Microsofts mobilen Betriebssystem Windows Phone 7 ist, kann angesprochen werden.

Mobile IE Conditional Comment

Und so sieht der Conditional Comment für den mobilen Internet Explorer aus.

<!--[if IEMobile]>
   Alles was hier steht wird nur vom mobilen IE interpretiert.
<![endif]-->

Eine fantastische Lösung die verschiedenen Browser anzusprechen und dabei die Anzahl der HTTP-Requests möglichst gering zu halten bietet übrigens die Boilerplate-Lösung. Hierbei wird immer dem <html>-Tag per Conditional Comment eine Klasse hinzugefügt die Ihr anschließend im Stylesheet ansprechen könnt.

• Conditional Comments in HTML 5 Boilerplate

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.

Bei WebM handelt es sich um einen recht neuen Video-Standard der unter anderem von Google entwickelt wurde aber auch seitens Mozilla und Opera gestützt wird. Der Vorteil liegt laut Google in einer besseren Performance und einem angenehmeren Lizenzmodell. In den drei entsprechenden Browsern Chrome, Firefox und Opera können WebM Videos nativ abgespielt werden. Microsoft und Apple hingegen benötigen in den aktuellen Browserversionen (noch?) ein entsprechendes Plugin um WebM-Videos abspielen zu können. Für den erst kürzlich veröffentlichten Internet Explorer 9 hat Google nun das entsprechende Plugin veröffentlicht.

• WebM-Plugin für Internet Explorer 9
• Aktueller Browser-Support für WebM-Videos

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.

Microsoft hat heute früh gegen 6:00 Uhr die neuste Generation des Internet Explorers zum Download bereitgestellt. Zuvor wurde laut Firmenangaben der Release Candidate des IE9 mehr als 40 Mio. mal heruntergeladen und getestet. Der Internet Explorer 9 kann entweder manuell per Download installiert werden oder installiert sich über das Windows-Update. Allerdings wird für den neuen Browser mindestens Windows Vista bzw. Windows 7 benötigt. Für Mac oder Linux steht der Internet Explorer wie gewohnt nicht zur Verfügung.
Für Webentwickler und -designer wird dank des neuen IEs der Arbeitsalltag um einiges leichter. Der Internet Explorer 9 unterstützt moderne Techniken wie CSS3 und HTML5 und bietet eine drastisch verbesserte Performance dank Hardware-Beschleunigung.

Einen ausführlichen Test der neuen Internet Explorer-Funktionen aus Sicht der Webentwickler findet Ihr bei hier:

• Der Internet Explorer 9 aus Entwicklersicht

Herunterladen könnt Ihr den IE9 hier:

• Internet Explorer 9 Download

Übrigens: Das CSS3-Präfix für den Internet Explorer 9 lautet -ms-.

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.

Vor kurzem hat Microsoft mit IE6Countdown eine eigene Seite zur „Ausrottung“ des Internet Explorer 6 veröffentlicht. Das Ziel dieser Seite besteht darin aufzuklären warum der IE6 nichtmehr zeitgemäß ist und wie Internet-User auf einen modernen Browser updaten können. Angeboten wird hier als Alternative natürlich die moderne Version des Internet Explorers 9.
Webdesigner können die Aktion mit der eigenen Website unterstützen. Über ein Code-Snippet oder das WordPress-Plugin.

Browser-Update in Website integrieren

Wenn Ihr die Aktion unterstützen möchtet, so könnt Ihr ein Code-Snippet in Eure HTML-Seite einbinden. Über einen Conditional Comment wird allen Besuchern mit älteren IE-Versionen ein Update angeboten.

Dienste dieser Art gibt es natürlich verschiedene – ich persönlich bevorzuge eine Methode die dem Besucher eine große Auswahl an verschiedenen, empfehlenswerten Browsern vorstellt.

• Code-Snippet des IE6 Countdown

Alternativ könnt Ihr auch ein WordPress-Plugin verwenden. Allerdings integriert sich das Plugin nach der Installation nicht selbstständig in Euer Blog sondern muss über ein neues Template-Tag eingebunden werden. Hier stellt sich mir die Frage ob Ihr Euch durch das Plugin überhaupt Arbeit erspart – denn auch der Conditional Comment muss manuell eingebunden werden.

Das WordPress-Plugin findet Ihr in der offiziellen Plugin-Directory

• IE6 Countdown WordPress-Plugin

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.

Microsoft hat im Rahmen der MIX 2010 eine Platform Preview des Internet Explorer 9 veröffentlicht. Neben HTML5, CSS3 und SVG-Support soll die kommende Version auch deutlich schneller werden. Das klingt doch schonmal gut!
Leider ist es mir selbst verwehrt die Testversion zu installieren, da mindestens Windows Vista mit Service Pack 2 benötigt wird. Wenn Ihr also die Möglichkeit besitzt Euch das Ganze einmal anzuschauen, so freue ich mich über Feedback!
Die ersten Tweets und Posts zu diesem Thema sind auf jeden Fall überdurchschnittlich positiv.

• Microsoft Internet Explorer 9 (IE9) Test Drive

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.

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.

Microsoft hat nur wenige Wochen nach dem Beginn der Entwicklung den Internet Explorer 9 für 2010 angekündigt.
Unter anderem sollen beim IE9 CSS3, HTML5 und DirectX mit an Bord sein. Eine ausführliche Stellungnahme findet sich im offiziellen Internet Explorer Blog. Wie die ersten Anzeichen (ich sag nur ACID3) vermuten lassen, könnte bald tatsächlich alles besser werden im Microsoft-Land. Doch wir wollen uns nicht schon wieder zu früh freuen...

• The Windows Internet Explorer Weblog

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.

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.

Wie sich in den letzten Tagen bereits ankündigte steht ab sofort der Download des Internet Explorers 8 zur Verfügung. Über die neuen Features für Webdesigner habe ich in der Vergangenheit bereits berichtet.

Offizielle Download-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.

Wie hier bereits angekündigt, steht seit dem 23. Januar diesen Jahres der Release Candidate des IE8 zur Verfügung. Der RC ist die fast fertige Version des in Kürze erscheinenden Internet Explorer 8. Laut Microsoft muss nur noch an Details gefeilt werden, dann geht's endlich los mit dem besten IE aller Zeiten.
Ihr merkt, selbst ich freue mich ein bisschen.

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

Heute zeigte mir ein Kollege die neue Full-Flash-Werbekampagne von Mini Cooper. Er war begeistert - und das soll was heißen. Ich war es auch.
Mini Cooper hat Din-A4-Anzeigen geschaltet um das neue Cabrio-Modell zu promoten. Die Anzeige selbst sagt nicht viel aus, die Werbung an sich leistet jedoch erstaunliches: Sofern man über die Mindestvoraussetzungen (Windows-Rechner und Internet Explorer 6+ sowie Webcam) verfügt, taucht man mit dieser Werbung in eine Welt der bisher nie da gewesenen Produktpräsentation ein.

Faszinierend

Der Trick ist folgender: Man begibt sich mit der Anzeige (oder einem Ausdruck der Anzeige) in der Hand auf die Website von Mini, aktiviert seine Webcam und hält die Anzeige in die Linse. Man sieht sich selbst auf dem Monitor, doch es erscheint zusätzlich das neue Cabrio-Modell als 3D-Rendering auf der Anzeige stehend. Je nachdem wie man die Anzeige hält oder dreht, ändert sich auch der Blickwinkel auf das Auto-Modell. Eine - wie ich finde - bombastische Idee!
Absolut nachteilig ist hingegen, dass die Werbung nur von Windows-Usern mit Webcam und Internet Explorer gesehen werden kann; was auf mich leider nicht zutrifft. Ich wollte Euch eigentlich ein selbst gedrehtes Video der Kampagne zeigen, leider verfügten die zwei Windows Rechner die mir heute zur Verfügung standen nicht über eine Webcam - mein Mac nicht über Windows/Internet Explorer ... das ist mehr als nur bedauerlich...

Da bleibt mir leider nicht viel mehr als Euch auf das "Making-Of" der Kampagne zu verweisen. Zumindest ist dieses Video ebenfalls absolut sehenswert. Sofern Ihr die Aktion ausprobiert habt, würde ich mich natürlich über ein Feedback freuen ob das in der Realität auch so gut funktioniert.

Links zum Artikel

Download: Werbeanzeige als PDF-Dokument

Link zur Produktseite: http://www.mini.de/webcam

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.

Wie WebSlices für den Internet Explorer 8 erstellt werden habe ich ja bereits in einem Artikel beschrieben. Nun stelle ich Euch das Firefox 3 Plugin "WebChunks" vor. Dieses Plugin ermöglicht die Darstellung von WebSlices im Mozilla Browser, wenngleich nicht ganz so komfortabel wie im IE8. Für alle die den Internet Explorer nicht nutzen wollen oder können ist dies eine empfehlenswerte Alternative. (Und das Icon gefällt mir auch besser)

WebChunks-Plugin für Firefox herunterladen

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.

WebSlices ermöglichen das Abonnieren von Seiteninhalten ähnlich wie RSS. Diese Funktion ist eine Neuerfindung des bald erscheinenden Internet Explorers 8.
Wird ein WebSlice abonniert, so erscheint ein entsprechender Eintrag in den Favoriten. Per Klick öffnet sich ein kleines Fenster und zeigt die herausgelösten Inhalte an. In diesem Artikel erkläre ich wie Ihr mittels Mikroformaten WebSlices erstellt.

Mikroformate zur Einbettung von WebSlices

WebSlices definieren sich über Microsofts neue Mikroformate "hslice", "entry-title" und "entry-content". Diese drei Formate müssen vorhanden sein um ein WebSlice darzustellen. Ebenso muss das Element dem die Klasse "hslice" zugewiesen wurde über eine ID verfügen.

hslice

Dieses Mikroformat muss die anderen beiden Mikroformate beinhalten. Es bildet den äußeren Rahmen des WebSlices.

entry-title

Dieses Mikroformat muss innerhalb von "hslice" verwendet werden. Es stellt den Titel des WebSlices dar. Dieser erscheint in den Favoriten oder der Lesezeichen-/WebSliceleiste.

entry-content

Dieses Mikroformat beschreibt den Inhalt des Webslices. Es darf mehrfach verwendet werden und kann weitere HTML-Elemente enthalten.

Beispiel zur Verwendung

Folgendermaßen könnten die Mikroformate angewendet werden.

<div class="hslice" id="idname">
 <h1 class="entry-title">Titel des WebSlice in den Favoriten</h1>
 <div class="entry-content">
  <h2>Überschrift</h2>
  <p>Absatz</p>
 </div>
</div>

Bei der Ausgabe des WebSlices wird um das Mikroformat "entry-content" ein BODY generiert. Dieser hat jedoch leider die selben Eigenschaften wie die Mutter-Seite. Demzufolge werden auch per CSS vergebene Attribute angewendet. Microsoft "löst" dieses Problem mit dem Vorschlag dem BODY der Website eine ID zuzuweisen und diese über CSS anzusprechen.

WebSlice ausprobieren

Nach diesem Absatz habe ich einen Test-WebSlice verlinkt. Sofern Ihr den Internet Explorer 8 nutzt, erscheint beim hovern des Bereichs ein entsprechendes Icon. Ein Klick auf dieses Icon abonniert den Inhalt.

Link: Testseite besuchen

WebSlice-Icon deaktivieren

Wie oben veranschaulicht, erscheint ein kleines Icon sofern ein Inhalt als WebSlice erkannt wird. Soll dies nicht geschehen, so kann die Icon-Anzeige über folgenden META-Header deaktiviert werden.

<meta name="slice" scheme="IE" content="off"/>

Weitere Informationen

Da ich das WebSlice-Icon ewig gesucht habe, erspare ich Euch diese Misere und poste gleich den Link zum offiziellen Download von Microsoft. Das Paket enthält das Icon in Größen von 16-256 Pixeln sowie im PNG und GIF-Format. Also alles was das Herz begehrt.

Download: WebSlice-Icon herunterladen

Mit WebSlices lassen sich selbstredend noch deutlich komplexere Inhalte darstellen. Hier könnt Ihr Euch noch weiter mit dem Thema befassen. Beachtet auch meinen Artikel IE8 Release Candidate kommt. Was ist zu tun?

• Microsoft Guideline für WebSlices

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 Beta2 des neuen Microsoft Browsers "Internet Explorer 8" ist ja seit geraumer Zeit zu Testzwecken verfügbar. Nun steht in Kürze das "Release Candidate" zur Verfügung.
Diese vorletzte Version soll Webdesigner und Developer auf die Ankunft des neuen Browsers vorbereiten. Doch was ist zu beachten? In diesem Artikel erläutere ich kurz die für Webdesigner relevanten Punkte.

Standardkonforme CSS/HTML-Darstellung

Der Internet Explorer 8 wird CSS2.1 besser interpretieren als alle seine Vorgänger. Das "Sorgenkind" IE kann somit schon sehr bald der Vergangenheit angehören. In der Beta1 des IE8 wurde bereits relevante ACID2-Test gemeistert und sogar Bestandteile vom geplanten CSS3 werden unterstützt. Zusätzlich werden wohl auch schon HTML5 Tags unterstützt.
Da die vielfältigen Korrekturen jedoch nicht unerhebliche Änderungen in der Rendering-Engine des Browsers erfordern, wurde bereits in der Beta2 eine Fallback-Lösung integriert: Sollte eine Internetseite im Internet Explorer 8 nicht fehlerfrei dargestellt werden, so kann eine IE7-Ansicht emuliert werden. Seitens des Webdesigners kann ein META-Header in die Seite eingebaut werden der den IE8 zwingt eine Seite auf bestimmte Art und Weise darzustellen.

Folgender Befehl wird benötigt um eine Seite im IE7-Quirks-Mode anzuzeigen:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Hinsichtlich der CSS/HTML Interpretation ist der neue Internet Explorer zwar deutlich besser als alles bisher dagewesene aus dem Hause Microsoft, jedoch haben Firefox und Opera nach wie vor die Nase vorne.

Verbesserte Barrierefreiheit

In Punkto Barrierefreiheit macht der IE8 ebenfalls große Fortschritte! Die neue Funktion "Caret Browsing" ermöglicht dem User eine vereinfachte Bedienung der Website mittels Tastatur. Hierbei soll ähnlich komfortabel navigiert werden wie innerhalb einer Textverarbeitungssoftware.
Die zweite neue Funktion nennt sich "Adaptive Zoom". Hier muss eine Website nicht immer wieder von neuem gezoomt werden, sondern es kann ein individueller Wert in den Einstellungen vergeben werden. Die gesamte Ansicht innerhalb des IE8 wird dann immer in der gewünschten Zoomstufe dargestellt.
Bahnbrechend ist zudem die Unterstützung von ARIA (Accessible Rich Internet Applications). Diese Technologie erleichtert die Benutzung von Ajax/JavaScript gestützen Internet-Applikationen die sich dank ARIA nicht länger als Kette von statischen Seiten verstehen, sondern als ausführbares Programm.

WebSlices

WebSlices sind eine Neuerfindung des IE8. Ähnlich den aus Safari bekannten "WebClips", die Ausschnitte der Website als Widget ins Dashboard von MacOS Leopard hinzufügen, ermöglichen die "WebSlices" das abonnieren von Inhalten ähnlich wie RSS. Wird ein "WebSlice" abonniert, so öffnet sich ein Widget und zeigt die entsprechenden Inhalte an. So können häufig genutzte Funktionen dargestellt werden, ohne, dass der User die entsprechende Seite immer wieder neu ansurfen muss.
"WebSlices" müssen vom Webdesigner in die Seite integriert werden, bzw. als solche ausgezeichnet werden. Dies funktioniert mittels Mikroformaten. Enthält eine Seite WebSlices, so wird dies durch ein neues Icon gekennzeichnet. Ebenfalls kann der Browser über einen META-Header auf das Vorhandensein von "WebSlices" aufmerksam gemacht werden.

In-Private Browsing/Blocking

Der In-Private-Modus des IE8 hat ja bereits als "Pornomodus" im Internet die Runde gemacht. Aber was wird überhaupt geblockt?
Es muss unterschieden werden zwischen "In-Private-Browsing" und "-blocking". Beim "In-Private-Browsing" werden der Browserverlauf, Formulardaten, Passwörter, temporäre Internet-Dateien und Cookies nicht gespeichert.
"In-Private-Blocking" hingegen schützt den User vor Inhalten von fremden Websites. Im Extremfall werden dort jedoch wichtige und sehr komfortable Tools wie GoogleMaps, oder GoogleAnalytics geblockt. Es bleibt abzuwarten ob der User seine Privatsphäre und den Datenschutz gegen Komfort tauscht. Frank hat sich zu diesem Thema ausführlich geäußert.

Web-Developer-Tools

Der Internet Explorer 8 beinhaltet ein sehr Firebug-ähnliches Feature mit welchem Webentwickler leichter arbeiten können. Neue Funktionen sucht man hier vergeblich, die Implementierung ist dennoch löblich. Insbesondere für die Fehlersuche ist ein solches Entwicklertool Gold wert.

Der IE8 kann noch mehr ...

Allerdings beziehen sich diese Funktionen eher auf verbesserte Performance und Benutzerfreundlichkeit. Da ich in diesem Artikel eher auf die für Webdesigner wichtigen Neuerungen eingehen wollte vernachlässige ich alles weitere.

Die neuen Funktionalitäten wie "WebSlices" o.ä. werde ich zu gegebener Zeit ausführlicher behandeln.

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.