Tipps & Tricks fürs Webdesign
Wir geben Ihnen nützliche Tipps wie Sie in CSS Sprites generieren. Außerdem viele weitere hilfreiche Tricks.
Der grafische CSS-Generator Spritebox hilft bei der Erstellung von CSS-Klassen und IDs zur korrekten Positionierung von Sprites. Unter Verwendung der CSS-Eigenschaft backgroundposition ordnet das Tool Bereiche einer Grafik den passenden Blockelementen einer Website zu.Um den benötigten CSS-Code zu ...
Der grafische CSS-Generator Spritebox hilft bei der Erstellung von CSS-Klassen und IDs zur korrekten Positionierung von Sprites. Unter Verwendung der CSS-Eigenschaft backgroundposition ordnet das Tool Bereiche einer Grafik den passenden Blockelementen einer Website zu.Um den benötigten CSS-Code zu einem Sprite-Bild zu erzeugen, können Sie wahlweise durch die Eingabe einer URL-Adresse den Dienst auf ein im Internet vorliegendes Bild verweisen oder eine Datei hochladen. Das Bild wird anschließend im Hintergrund der Seite dargestellt.Neue Sprite-Bereiche entstehen durch Drag-und-Drop mit der Maus. Sprite-Bereiche können Sie problemlos skalieren und verschieben. Wer auf eine hohe Präzision Wert legt, kann durch das Drücken der Z-Taste eine dynamische Lupe aufrufen und die Details der Sprite-Aufteilung einsehen.Mit der Tastenkombination Umschalttaste+Z lässt sich die Skalierungsstufe anpassen. Mit der Taste X können Sie dem Sprite ein Fadenkreuz aus dynamischen Hilfslinien hinzufügen, die das Bild pixelgenau ausmessen. Nach dem Anlegen, Positionieren und Benennen der einzelnen Sprites genügt ein Klick auf die grüne Schaltfläche, um den benötigten CSS-Code zu erzeugen. Spritebox.net basiert auf HTML5, CSS3 und jQuery. Das Tool unterstützt neben Firefox und Webkit auch Opera als Browser. Der Internet Explorer bleibt jedoch außen vor.
HTML: Automatisches Skalieren verhindern
Die meisten mobilen Browser skalieren HTML-Websites ganz automatisch auf die volle Breite des Viewports herunter. Mit dem folgenden Tag im <head>-Abschnitt der Seite können Sie den Browser anweisen, die Breite des Viewports auf die tatsächliche Breites des mobilen Geräts zu setzen und die automatische Skalierung zu deaktivieren (Skalierungsfaktor 1:1):
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Test und Tuning: Websites benchmarken
Um zwei Versionen einer Website oder zwei Hosting-Anbieter anhand derselben Website im direkten Vergleich zu testen, können Sie den Dienst whichloadsfaster.com nutzen. Nach Aufruf der Adresse www.whichloadsfaster.com klicken Sie zuerst auf die Schaltfläche Try my own matchup.Danach genügt es, die URLs der betreffenden Websites einzugeben und schon führt ein Klick auf die Schaltfläche Go zum Ziel - das Resultat wird in Millisekunden angezeigt. Um mehrere Websites gleichzeitig zu überprüfen, startet man den Test mit einem Klick auf die Schaltfläche Race. Nach wiederholtem Ausführen identischer Tests bekommt man einen Durchschnittswert aller Versuche.Wer an seiner Website Optimierungen durchführt und die Ladezeiten der Website nicht nur bloß messen, sondern auch langfristig überwachen möchte, ist mit dem Dienst Showslow generell ganz gut bedient.Der Dienst erfasst in regelmäßigen Zeitintervallen Messdaten aus den Diensten YSlow, Page Speed und Dynarace Ajax Edition, um dem Benutzer ein möglichst vollständiges Bild der Leistungsentwicklung zu liefern. Sowohl die Registrierung als auch die Nutzung des Dienstes sind kostenlos.
