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.

Tipps & Tricks fürs Webdesign

© 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

image.jpg

© 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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…