Archiv für die Kategorie „Web-Design“ (16 Artikel)
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:
| 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 |
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
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.
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…
Gut zu wissen: 5 Tips zur SEO
Beschäftigt man sich mit Webdesign, bemerkt man schnell, das das Geschäft weit über die Designarbeit hinausragt. Was verlangt wird ist mehr als das pure Look & Feel einer Website zu erstellen. Oft ist es wichtig, sich auch direkt um den Code fürs Front End zu kümmern.
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…
Eine Site, viele Gesichter
Die Entwicklung von Websites bringt oft verschiedenste Probleme mit sich. Eines dieser Probleme: Die final umgesetzte und durchprogrammierte Site schaut im Browser irgendwie anders aus, als in der Entwicklungsumgebung.
Ansatz zur Problemlösung kann die Optimierung auf spezielle Browser sein. Doch derer gibt es viele. Wie schaut die Site in anderen Browsern aus, für die die Site nicht optimiert wurde? Welche Browser gibt es überhaupt und muss ich alle auf meinem Testsystem installiert haben?
BrowserShots. Check browser compatibility
browsershots.org schafft hier Abhilfe. Einfach Link zur Site (z.B. hochgeladen auf einen Testserver) eingeben, gewünschte Browser auswählen und staunen, wie entstellt die eigene Seite auf exotischen Browsern daherkommt – ganz ohne lästige Installation unbenötiger Browser. Versierte Anwender wählen noch Details wie Bildschirmgroße, Farbtiefe, Java-, JavaScript und Flash-Aktivierung aus.
Abschließend stehen die png-Screenshots als zip gepackt zum Download und Vergleichen bereit. So macht Optimierung Spaß!
Einheitliche Schreibweise für HTML5
Bisher benutzte die WHATWG HTML5 ohne Leerzeichen, während das W3C HTML 5 mit Leerzeichen verwendete.
Für die unterschiedliche Schreibweise gab es keine Gründe, vielmehr hat es sich durch einige Zufälle ergeben. Mittlerweile hat man sich auf HTML5 ohne Leerzeichen geeinigt.
PNG-Gamma-Bug (im IE) und die Lösung
links unverfälscht, rechts IE
Ab Version 7 kann der Internet Explorer mit transparenten PNGs umgehen. Allerdings besteht bei allen Versionen, auch im IE 8, ein weiteres Problem in Verbindung mit PNGs. Der IE interpretiert den hinterlegten Gamma-Wert in der PNG-Datei und stellt deshalb alle Grafiken ein wenig dunkler dar. Rechts habe ich ein Beispielbild hochgeladen. Je nach Monitor solltet ihr die Unterschiede erkennen.
Fairerweise muss man dazusagen, dass nicht direkt der IE die Ursache des Problems ist. Viel mehr ist das PNG-Format selbst die Wurzel allen Übels.
Wie kam es dazu?
Die Gamma Korrektur wurde eingeführt, um eine identische Darstellung von PNGs auf allen Plattformen (MAC, PC, …) zu ermöglichen. Wenn ein Bild alleine angezeigt wird ist alles OK. Verwendet man das PNG jedoch neben anderen Grafiken und Farben taucht ein neues Problem auf, welches deutlich unangenehmer als das Originale ist. Beispielsweise auf Webseiten sind die Farben nun uneinheitlich. Hier gibt es mehr Informationen, wie das Problem entstanden ist.
Lösung – TweakPNG
Wer PNGs in seinem Design benutzt, sollte daher den Gammawert aus den Bildern entfernen. Das geht ganz einfach mit dem Tool TweakPNG.
Öffnet das Bild mit dem Programm oder zieht es einfach per Drag&Drop in das Fenster. Nun seht ihr eine Übersicht aller Chunks. Dort einfach “gAMA” auswählen und löschen. Eigentlich könnt ihr alles löschen, was nicht als “critical” in der Spalte “Attributes” markiert ist.
Anschließend die Datei abspeichern und schon seid ihr fertig. Leider muss der Vorgang mit allen PNG-Dateien wiederholt werden.
Visuelle Rhetorik – How-To 1: Schrift und Gestaltungsraster
Dieses How-To zeigt den sinnvollen Einsatz eines Gestaltungsrasters in Verbindung mit Typografie. Dabei steht das dazu verwendete Programm (z.B. Adobe InDesign, Adobe Photoshop) weniger im Vordergrund als der Leitfaden zur Gestaltung einer schnell wirksamen textlichen Informationsdarstellung.
Beim Website-Erstellungsprozesses stößt man früher oder später auf die Frage, welcher Inhalt kommuniziert werden soll. Ist dieser Inhalt bei Websites meist unterschiedlich, so gilt für dessen Gestaltung umso mehr das Gesetz des Screen-Designs. Wichtiges Merkmal hierbei: Der Inhalt muss einfach und präszise zu erfassen sein – die Kommunikation muss schnell funktionieren. Teil 4 der Reihe “Visuelle Rhetorik” beschreibt, inwiefern Textgestaltung und Inhalt zusammenpassen müssen.
Sehr nützliches Tool zur Webseitenentwicklung – IETester
IETester ist ein sehr nützliches Tool für alle Webentwickler.
Das Programm beinhaltet die Versionen 5.5, 6.0, 7.0 und 8.0 des IEs.
Unter Windows kann standardmäßig nur eine Version des Internet Explorer installiert sein. Durch die Möglichkeit, verschiedene Versionen des Internet Explorers in Tabs zu öffnen, wird die Entwicklung von Webseiten deutlich vereinfacht.
IETester Homepage mit Download
Visuelle Rhetorik – Tutorial 1: Extraktion einer Farbpalette
Stimmungsbild für eine Website mit Thema Kaffee
Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.
Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe “Visuelle Rhetorik” wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.