WebdesignHamburg Blog

Per Pfeiltasten auf Webseite navigieren mit Jquery!

Sven Trogus — Fri, 30 Sep 2011 08:38:49 +0000

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

$(document).keyup(function (event) {
if (event.keyCode == 39) {
window.location = nextUrl
} else if (event.keyCode == 37) {
window.location = prevUrl
}
});

$(document).ready(function() {
var nextPage = $(”#next_page_link”)
var prevPage = $(”#previous_page_link”)
nextUrl = nextPage.attr(”href”)
prevUrl = prevPage.attr(”href”)
});

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

Viel Spaß beim navigieren!

Niemand scrollt auf Webseiten?

Sven Trogus — Thu, 01 Sep 2011 12:03:49 +0000

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

“Screenshot” einer gesamten Webseite erstellen

Sven Trogus — Fri, 11 Feb 2011 08:57:37 +0000

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 Squared – eine neue Dimension in der Websuche!

Sven Trogus — Tue, 07 Sep 2010 10:05:10 +0000

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/

Wie sieht meine Seite im Internetexplorer aus?

Sven Trogus — Wed, 11 Aug 2010 12:26:51 +0000

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/

Font-Family-Styles für mehrere Betriebssysteme.

Sven Trogus — Mon, 03 May 2010 07:47:11 +0000

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:

Windows	Mac	Linux
Arial	Arial	Nimbus Sans l
Verdana	Verdana	“DejaVu Sans”
Georgia	Georgia	“Century Schoolbook L”

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/

Ubuntu 10.4 coming soon!

Sven Trogus — Mon, 26 Apr 2010 10:07:13 +0000

Das neue Ubuntu wird bald erscheinen! Wir sind schon ganz gespannt darauf!

Viel Spaß beim ausprobieren!

verschiedene Stylesheets für verschiedene Bildschirmauflösungen.

Sven Trogus — Wed, 21 Apr 2010 07:44:13 +0000

Ich habe ein ganz wunderbares Script gefunden welches ermöglicht verschiedene Stylesheets für je nach Bildschirmgrößen zu laden. Dadurch kann man zum Beispiel ein seperates Stylesheet für Iphone und ähnliche mobile Geräte zur Verfügung stellen

Das ganze kommt natürlich in den Head bereich der Webseite – die Stylesheets liegen im Verzeichnis /css

Quelle:
http://www.warriorforum.com/website-design/10031-script-load-different-css-depending-screen-resolution.html

für alle die immernoch Internet Explorer 6 benutzen ein paar Hinweise warum sie das nicht mehr tun sollten.

Sven Trogus — Sun, 04 Apr 2010 16:14:31 +0000

Why Internet Explorer 6 Needs to Die and Go Away Forever from Eli Röss on Vimeo.

animierte Favicons für Ihre Webseite

Sven Trogus — Tue, 30 Mar 2010 11:35:56 +0000

Animierte Favicons sind eine feine Sache – gerade für Surfer, die etliche Tabs gleichzeitig offen haben (so wie ich).
Da verliert man schnell mal die Übersicht – gerade wenn eine Seite gar kein Favicon einsetzt.
Mit Hilfe von animierten Favicons kann man die eigene Seite noch etwas deutlicher im Browser hervorstechen lassen. Das Ganze lässt sich eigentlich ganz einfach realisieren. Man erstellt zunächst ein statisches Favicon mit Hilfe eines Online Favicon Generators – zusätzlich erstellt man ein animiertes Gif names “animiertes_favicon.gif” oder so ähnlich – welches die Animation beinhalten soll.
Nun läd man beide Dateien in den Wurzelordner der Webseite und fügt dem Headerbereich folgende HTML-Tags hinzu

Viel Spaß beim ausprobieren!