HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

Wir geben Ihnen nützliche Tipps wie Sie in CSS Sprites generieren. Außerdem viele weitere hilfreiche Tricks.

© Internet Magazin

Tipps & Tricks fürs Webdesign

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

© Internet Magazin

Benchmark zweier Versionen einer Website im direkten Vergleich miteinander (whichloadsfaster.com).

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.

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.