kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Tools


Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Beitrag zu Ende lesen

Den Falz einer Website anzeigen lassen: Where is the fold?

Der Falz einer Website beschreibt die unterste Linie, die ein Besucher ohne scrollen zu müssen noch sehen kann. Je nachdem welche Monitorauflösung und welchen Browser ein Besucher verwendet, ändert sich der Viewport und somit auch die Höhe des Falzes. Bei der Konzeption und Gestaltung einer Website sollte daher unbedingt darauf geachtet werden, dass alle wichtigen Seitenelemente wie die Hauptnavigation, das Logo und ein erster Abschnitt des Inhalts, sich bei möglichst vielen Usern oberhalb des Falzes befinden. Anderenfalls muss der Besucher scrollen um die Website wie gewünscht benutzen zu können.

Beitrag zu Ende lesen

Einfachere CSS-Sprites mit ‚Sprite Cow‘

Ich habe euch vor einiger Zeit einen Online Generator für CSS-Sprites vorgestellt der sowohl die grafische Sprite, als auch den entsprechenden CSS-Quellcode generiert. Heute möchte ich euch auf ein alternatives Tool aufmerksam machen, das bei mir einige Wochen ein Leben als ungenutztes Lesezeichen fristen musste. Zu unrecht wie sich gestern herausstellte.
Sprite Cow ist kein Online-Generator im eigentlichen Sinn - vielmehr erleichtert er die Arbeit mit Sprites ohne, dass einem die Arbeit komplett abgenommen wird. Und genau hier liegt in meinen Augen der entscheidende Vorteil.

Beitrag zu Ende lesen

Websites auf verschiedenen Endgeräten testen: Screenfly

Ich möchte euch gerne ein weiteres Online-Tool vorstellen, mit dem ihr eure Website auf verschiedenen Viewports testen könnt. Der Dienst nennt sich Screenfly und simuliert eine Vielzahl an (mobilen) Endgeräten. Angefangen bei Desktop-Computern über Smartphones und TV-Geräte bis hin zu Tablets werden alle gängigen Devices abgedeckt.
Besonders gut gefällt mir, dass nicht nur die Apple-Geräte berücksichtigt werden, sondern eben auch Blackberry, Android und Co. Darüber hinaus lässt sich auch noch vom Portrait- in den Landscape-Modus wechseln.

Beitrag zu Ende lesen

Farben vom Hex-Wert in RGB/RGBA konvertieren

Wir haben in CSS die Möglichkeit Farbwerte auf unterschiedliche Weise anzugeben. Sehr populär ist hier sicher der Hexadezimal-Wert (z.B. #00FF00). Gerade bei modernen Web-Projekten macht es allerdings durchaus Sinn die Farben im RGBA-Farbmodus (Rot, Grün, Blau, Alpha) anzugeben, da so über CSS die Alpha-Transparenz berücksichtigt werden kann.
Der "HEX 2 RGBA Color Calculator" wandelt eure Farben in den RGBA-Modus um und erspart euch so lästige Arbeit. Die Transparenz lässt sich anschließend über einen Schieberegler intuitiv anpassen.

Beitrag zu Ende lesen

Welche Technologien nutzt eine Website?

Wenn ihr erfahren möchtet welche Technologien eine Website einsetzt, sei es nun Apache, WordPress, HTML5 oder jQuery, dann schaut euch mal das Web-Tool "Under The Site" an.
Nach Eingabe der URL listet der Dienst alle verwendeten Technologien und Dienste auf, ergänzt durch eine kurze Erklärung.
Ein sehr interessantes Tool um fremde Websites und die dort zum Einsatz kommenden Funktionen einmal unter die Lupe zu nehmen.

Beitrag zu Ende lesen

Mobile Websites online testen: Media Query Previewer für iPhone und iPad

Media Queries und Responsive Web Design sind die aktuellen Buzzwords der Webdesign-Szene. Gemeint ist damit eine Website, die mithilfe der CSS-Technik "Media Query" für unterschiedliche Ausgabemedien und Displaygrößen optimiert wurde. Da die mobile Web-Nutzung rasant zunimmt, muss eine zeitgemäße Website auch auf Smartphones und Tablet-PCs eine gute Figur machen.
Wie ihr eine Website für iPhone, iPad & Co. optimiert, habe ich in einem früheren Artikel bereits beschrieben. Nun möchte ich euch ein Online-Tool vorstellen, mit dem sich die Darstellung auf iPhone und iPad simulieren lässt.

Beitrag zu Ende lesen