Browser

Die Kernfunktion eines Browser ist die Darstellung von Websites. Früher wurden Website noch für bestimmte Browser oder Browserversionen optimiert, heute ist muss eine professionelle Website in allen Browsern funktionieren. Dabei kommt es nicht darauf an, dass eine Website in allen Browser identisch aussieht. Die fehlerfreie Darstellung und die uneingeschränkte Funktionalität stehen im Vordergrund. Immer im Rahmen der Möglichkeiten des Browsers.

Für den Webdesigner ist der Browser längst auch eine Entwicklungsumgebung geworden. Mit Hilfe von Debug-Konsolen und Plugins ersetzt der Browser längst manch umfangreichen Code-Editor. Auch viele designorientierte Arbeiten, insbesondere die Gestaltung auf Basis von CSS3, werden im Browser erledigt. Das Stichwort in diesem Zusammenhang ist „Design in the browser“.

Adobe Edge Inspect (ehem. Shadow) im Praxistest

adobe-shadow-ios-icon

Adobe Shadow wurde vor einigen Wochen veröffentlicht und soll insbesondere Frontend-Entwicklern helfen Websites für verschiedene mobile Endgeräte, Displaygrößen etc. zu erstellen. Im Gegensatz zu allen anderen mir bekannten Tools simuliert Adobe Shadow die Ansicht nicht sondern synchronisiert den Entwicklungsstand der Website auf verschiedene Geräte. Dafür muss man die Geräte natürlich besitzen. Ich habe Adobe Shadow jetzt beim ersten echten Projekt praktisch eingesetzt und möchte euch meine Erfahrungen natürlich nicht vorenthalten.

Wichtiger Hinweis: Adobe Shadow wurde in Adobe Edge Inspect umbenannt. Neben einem neuen Icon und dem neuen Namen wurden die Funktionen jedoch beibehalten.

Beitrag zu Ende lesen

Webdesign für Tablets: Technische Daten im Überblick

tablet-os

Wenn ihr eine Website für mobile Endgeräte, insbesondere für Tablet PCs gestalten wollt, müsst ihr wissen mit welchen Einschränkungen, Abmessungen, Auflösungen und Möglichkeiten ihr es zu tun haben werdet. Der Tablet Markt wird allerdings zunehmend unübersichtlich und so ist es erfreulich, dass die Agentur NUISOL mit Tabletmania eine Website ins Leben gerufen hat, auf der Ihr technische Daten aller Tablet-Computer nachschlagen könnt. Neben der individuellen Display-Auflösung, dem verwendeten Betriebssystem und dem nativen Webbrowser eines Geräts könnt ihr auch statistische Durchschnittswerte - beispielsweise die gebräuchlichste Display-Auflösung - nachschlagen.

Beitrag zu Ende lesen

CSS3 Vendor-Prefixes per JavaScript erzeugen: -prefix-free

prefix-free-css3-script-logo

Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.

Beitrag zu Ende lesen

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen?

html5

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

Beitrag zu Ende lesen

Responsive Webdesign: Media Queries auch im IE6, IE7, IE8 … nutzen

internet-explorer-media-queries

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 min/max-width-Media Queries im Internet Explorer nach.

Beitrag zu Ende lesen

Den Falz einer Website anzeigen lassen: Where is the fold?

den-falz-einer-website-bestimmen-kulturbanause

Der Falz einer Website beschreibt die unterste Linie, die ein Besucher ohne scrollen zu müssen noch sehen kann. Je nachdem welche Monitorauflösung und welchen Browser ein Besucher verwendet, ändert sich der Viewport und somit auch die Höhe des Falzes. Bei der Konzeption und Gestaltung einer Website sollte daher unbedingt darauf geachtet werden, dass alle wichtigen Seitenelemente wie die Hauptnavigation, das Logo und ein erster Abschnitt des Inhalts, sich bei möglichst vielen Usern oberhalb des Falzes befinden. Anderenfalls muss der Besucher scrollen um die Website wie gewünscht benutzen zu können.

Beitrag zu Ende lesen

Facebook-Problem? Like-Button auch im IE7/IE8 anzeigen

ie7-ie8-facebook-like-button

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?

Beitrag zu Ende lesen