Webdesign Blog

Manchmal möchte man seinen Besuchern die Möglichkeit geben auch mit dem Keyboard auf einer Webseite zu navigieren. Man möchte aber vielleicht nicht unbedingt dem User eine Keymap einblenden so dass er sehen kann welche Knöpfe es nun zu drücken gilt, um vor und zurück zu kommen. Es bieten sich also die Pfeiltasten an, da diese bereits ohne Erklärung für vor und zurück stehen. Da diese Tasten aber leider schon von den meisten Programmen vorbelegt sind muss man den Umweg über Javascript gehen um eine vernünftige, halbwegs kompatible Lösung an den Start zu bekommen. Dieses kleine Script ermöglicht die Pfeiltastennavigation mit den Cursor-Tasten Rechts und Links

Durch Tastendruck werden nun die Links mit den IDs “previous_page_link” und “next_page_link” ausgeführt.

Viel Spaß beim navigieren!

Viele Kunden sind der Meinung, der komplette Inhalt ihrer Webseite solle ohne zu scrollen zu lesen sein, da man ja dem angeblich so “scrollfaulen” Leser nicht zumuten möchte, das kleine Mausrädchen zu benutzen.
Es wird also die Behauptung aufgestellt niemand würde auf Webseiten scrollen.

Dieses Vorurteil ist nicht nur falsch, sondern stellt den Grafikdesigner vor eine meist sehr schwierig zu lösende Aufgabe: Die Inhalte einer Webseite samt Logo, Claim und Content auf einen kleinen Bildschirm unter zu bringen und natürlich dann auch noch übersichtlich, nicht überladen und klar strukturiert.

Mademyday hat mit einer Webseite mit dem gleichen Titel eindrucksvoll bewiesen, dass das Vorurteil nicht stimmt: Versuchen Sie es selbst: mal sehen ob Sie scrollen

Niemand scrollt auf Webseiten

Oft kommt der ambitionierte Webdesigner in die Verlegenheit “Screenshots” seiner Arbeit an Kunden zu senden. Meistens passt aber eine Webseite nicht komplett auf einen Screen – man ist also gezwungen mehrere Screenshots einer Webseite herzustellen und diese dann anschließend im Grafikbearbeitungsprogramm zu einem großen Bild zusammen zu setzen. Das kann ganz schön nervig sein. Vor allem wenn die Webseiten größer und länger werden…

Durch das wunderbare AddOn “Screengrab” für Firefox kann man diese Aufgabe mit nur 2 Klicks erledigen. Sehr praktisch findet WebdesignHamburg:

Screengrab für Firefox

so sieht das Ganze aus, wenn man die Startseite von Webdesignhamburg mit dem AddOn bearbeitet:

Google hat wieder zugeschlagen; Google Squared sieht auf den ersten Blick gleich extrem vielversprechend aus. Dabei ist der Name Programm. Squared macht aus Suchergebnissen nach Kategorien sortierte Übersichtstabellen. So können schnell interessante Parameter von einzelnen Ergebnissen wunderbar miteinander verglichen werden oder die von Google erzeugten Tabellen auch noch mit eigenen weiteren sinnvollen Tabellenspalten (Kategorien) erweitert werden. Alles unklar? Nun gut – versuchen wir es anhand eines Beispiels zu veranschaulichen.

Man sucht über Google Squared nach Hunderassen. Squared erzeugt uns eine Tabelle mit den Spalten, Rassenname, Bild, Beschreibung, Herkunftsland, Lebenszeit, Gewicht,….. So bekommt man ohne große Recherche eine tabelarische Übersicht über alle von Google auffindbaren Hunderassen präsentiert, die man noch mit einer beliebigen Spalte erweitern kann.

Die vollständige Tabelle findet sich hier.

Gut nicht wahr? Das Ganze kann man natürlich auch wunderbar als Produktvergleich, Kaufberatung oder zum Preisvergleich und dergleichen nutzen. Wichtig dabei wäre nur, dass man eben eine Spalte Preis mit erzeugt wenn diese nicht schon von vorneherein von Google erstellt worden ist. Google erweitert also das Suchen um eine Dimension – die verticale – ab jetzt neu: 2 Dimensionale Suchergebnisse von Google. Ausprobieren lohnt sich unter:
http://www.google.com/squared/

Wir Webdesigner lieben den Internetexplorer – diese Liebe geht hauptsächlich auf Version 6 dieses tollen Programms zurück, welche Jahrelang allen Webdesignern weltweit das Leben schwer machte. Der Internetexplorer 6 und Konsorten unterstütz viele Standards nicht und zeigt manchen astreinen HTML und CSS Code einfach völlig anders an als jeder normale Browser.
Trotzdem muss man immernoch Webseiten so erstellen, dass Sie auf diesem Browser “gut” aussehen, da es immernoch Menschen gibt, die diesen Browser verweden und immer noch nicht auf die bereits erschienen Version 8 geupdated haben.
Was macht man aber wenn man als Entwicklungsumgebung gar nicht Windows benutzt oder auf seinem Windows den Internetexplorer bereits auf eine neuere Version geupdated hat? (Microsoft macht es einem extrem schwer, mehrere Versionen des gleichen Programms gleichzeitig installiert zu haben)

Richtig! Man sucht sich einen Service im Netz, der einem die Seiten in jeder beliebigen Version des Internetexplorers rendert!
Der IE-Renderer ist die ideale Software für diese Zwecke:
zu finden und auszuprobieren gibts diese hier:
http://ipinfo.info/netrenderer/

Die Zeiten in denen es genügte eine Font-Family in seinem Stylesheet zu deklarieren sind vorbei. Früher waren Systeme wie z.B. Linux oder sogar Apple nur als verschwindend kleinen Prozentsatz bei den Besuchern einer Webseite vertreten. Da aber Open-Source Software und freie Betriebssysteme immer besser und Apple Computer immer beliebter werden und auf diesen nicht zwangsläufig die gängigen Websafefonts einer Windowsinstallation installiert sind muss man im Stylesheet Alternativen deklarieren. Dies geschieht ganz einfach in dem man im “Font-Family:” Tag einfach mehrere “Families” per Komma getrennt hintereinander deklariert. Der Browser wählt dann immer die erste Familie aus, die auf dem Computer gerade installiert ist. Anbei nun eine Liste mit den (Windows) Schriftarten und den dazu gehörigen Pendants für Mac und Linux:

Eine viel ausführliche Liste findet man zB unter:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
oder auch unter:
http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/