Kategorie-Archiv: Design

Responsive Screen Geräte-Mockups

Ja, ein sehr englischer Titel heute. Jeder kennt sicher die Vorschau-Bilder für Theme-Downloads, welche einen Eindruck geben, wie eine Webseite auf den einzelnen Endgeräten dargestellt wird. Ich habe mir für diesen Zweck ein PSD-Template gekauft (welches übrigens auch wunderbar mit Pixelmator funktioniert).

Das Ganze gibt es für nur $8 bei GrapicRiver (Envato):

Reponsive Screen Mockup Pack

Gerade wenn man häufiger Themes erstellt und verkaufen möchte, ist dies sicher die optimalste Präsentation für das eigene Produkt. Alternativ könnte man so natürlich auch sehr komfortabel Referenzen auf der eigenen Webseite vorstellen oder ähnliches. Ich bin jedenfalls sehr begeistert – schließlich sind unendlich viele Gerätekombinationen enthalten.

Ich habe vor dem Kauf jedenfalls nicht besonders lange gezögert – mehr als 5.000 Käufe können hier einfach nicht lügen.

Wenn ein Entwickler Photoshop öffnet

In diesem Blogpost möchte ich einfach mal zeigen, dass auch ein Entwickler hin und wieder ganz ansehnliche Dinge produzieren kann. In der Kopfzeile steht übrigens nur Photoshop, weil das der Anfang war – damals noch mit einer Schülerversion von CS2 (lang ists her). Mittlerweile spare ich mir das Geld und setze komplett auf Pixelmator (siehe App-Store). Alle Ergebnisse (bis auf das Erste), welche hier zu sehen sind, stammen aus Pixelmator. Für mich eins der genialsten Programme in Sachen Preis/Leistung.

Damit das Ganze etwas chronologisch geordnet ist, fange ich mit einer Webseite an, welche ich bereits seit 2007 betreibe – mal mehr, mal weniger. Und bevor jemand fragt: Aktuelle ist eine „weniger“-Zeit.

Fotoseite: klein0r.de

Früher konnte ich den Content der Seite nicht so richtig zuordnen. Eigentlich war es für mich immer ein technischer Spielplatz… Kein richtiges Thema, wenig Inhalt und jede Menge PHP-Spielereien. Das „CMS“ ist von mir selbst geschrieben, und auch das Design ist auf meinem Mist gewachsen. So kann ich wenigstens sagen, dass die Seite zu 100% aus meiner Hand stammt. Nichts gekauft, kein fertiges Zeug genutzt. Würde ich heute bestimmt nicht noch einmal so machen – aber es hat mich zumindest in meiner Entwicklerlaufbahn weiter gebracht … zumindest bilde ich mir das ein:

klein0r.de - Design

Irgendwie ist es mir viel zu schade, das Ganze wegzuwerfen und beispielsweise durch Wordpress zu ersetzen – dafür ist einfach zu viel Arbeit reingeflossen. Aber über kurz oder lang wird irgendetwas mit der Domain passieren. Ich weiß nur noch nicht so genau was.

Portfolio: kleine-photo.com

Während die vorige Seite eigentlich mehr Blog als Galerie sein sollte, brauchte ich noch ein Portfolio. Dieses sollte vom Namen her auch mehr auf mich hinweisen. Nun möchte man natürlich auch nicht einfach irgendetwas zeigen, sondern nur das Beste. Daher ist der Inhalt dementsprechend schmal. Die Seite ist auch komplett selbst gebaut – so spare ich mir Wartungsarbeiten und Updates. Außerdem ist es ja bewusst schmal gehalten. Der Rahmen basiert auf dem CSS-Framework YAML – einfach aus dem Grund, dass es schnell gehen sollte. Ein richtiges CMS gibt es nicht – und auch keine Datenbank. Alles wird aus dem Filesystem geladen – so brauche ich nur einen Ordner mit Fotos in ein Verzeichnis packen, und das Teil macht den Rest. Optimal. Die Fotos werden dabei auch automatisch optimal angeordnet, um den Platz anständig zu nutzen.

Was ich zeigen möchte ist aber eher das Logo – das hat mich einige Zeig gekostet und etliche Entwürfe gebaucht. Ideen gab es jede Menge, aber nach einer kleinen Facebook-Abstimmung ist es schließlich folgendes geworden:

Logo kleine-photo.com

Später hat die Seite noch kleinere Spielereien bekommen, wie eine sticky Navigation mit ein paar Hover-Effekten, Lazy-Load der Bilder, einen Slider und vieles mehr. Insgesamt wirklich sehr schlank gehalten – das kommt den Ladezeiten zu Gute. Gefällt mir persönlich immer noch extrem gut. Nur der Inhalt fehlt am Ende ebenfalls. Viel Traffic ist dementsprechend auch nicht zu verzeichnen.

haus-automatisierung.com

Das Design der Seite ist gekauft und wurde per Child-Theme ein wenig angepasst. Insgesamt aber alles nichts wildes – eher funktional als spektakulär. Worauf ich ein wenig stolz bin, ist das Logo. Dieses wurde in maximal 30 Minuten mit Pixelmator gezaubert. Macht Euch selbst ein Bild:

Hausautomatisierung Logo

Ansonsten gab es natürlich noch jede Menge Kleinigkeiten, welche aber nicht so zeigenswert sind. Da ich für manche Dinge aber wirklich lange brauche, bleibe ich mit meinen Fingern aber doch lieber im Quellcode.

jQuery: One-Page Layouts mit OpenSource-PlugIns

Anfangs war ich ja etwas skeptisch was OnePage-Layouts angeht. Irgendwie fiel einigen Unternehmen der Start aber auch extrem schwer. So hat man genügend Seiten gesehen, die wirklich absolut schlecht gemacht waren. Mittlerweile lösen manche Landing-Pages aber auch echte WOW-Effekte in mir aus. Unterstrichen von genialen Fotos und tollen Animationen und Grafiken, bekommt man direkt einen positiven Eindruck und hat einfach Lust weiter zu scrollen.

Der aktuelle Trend für OnePages ist allerdings das sogenannte „parallax scrolling“ – das bedeutet, dass sich unterschiedliche Ebenen beim scrollen unterschiedlich schnell bewegen. So entsteht viel mehr Tiefe auf der Seite und alles wirkt einfach lebendiger.

Wer jetzt noch nicht verstanden hat was ich genau meine, der sollte sich durch folgende Links klicken:

Also, was braucht man denn nun um solch ein Layout zu bauen? Im Web existieren verschiedene Frameworks, welche einem alle einen relativ guten Start geben. Ich habe mich vom Bauchgefühl her aber bisher nur auf „cool kitten“ fixiert und bin insgesamt mit den Ergebnissen sehr zufrieden. Bisher konnte ich alles realisieren was ich mir vorgenommen habe. Außerdem bietet es einen einfachen Start in die Materie und man landet relativ schnell da, wo man hin möchte.

So habe ich als erstes eine Landing-Page für die Neugeborenen-Shootings meiner Freundin ins Leben gerufen, um mich mit der Materie etwas genauer auseinander zu setzen. Und ich muss sagen, dass ich mit den Ergebnissen sehr zufrieden bin. Leider unterstützen Mobilgeräte die Funktion noch nicht wirklich, und so muss man die Seite nebenbei nochmals für Mobilgeräte optimieren. Bisher habe ich auch noch keine Lösung gefunden, um diesen Effekt auf Mobilgeräten zu realisieren.

PHP: Fotos sinnig ausrichten und in Reihen einsortieren

In meinem kleinen Portfolio für Fotografie habe ich in letzter Zeit öfter das Problem gehabt, dass die Fotos schwer anzuordnen waren. So kam es, dass ein Querformat Bild kommt und direkt danach ein Hochformat etc. Also musste eine Lösung her, bei die Fotos den Platz optimal nutzen. Das heißt z.B. quer, quer, hoch, hoch, quer, hoch, hoch, quer, … Also immer so, dass die Hochformat-Fotos nebeneinander Platz finden.

Da ich sicherlich nicht der erste bin der auf das Problem gestoßen ist, möchte ich hier ein paar Sätze dazu schreiben wie man das Ganze lösen könnte. Ihr seid gerne dazu aufgerufen meinen Ansatz zu vervollständigen.

Die selbe Logik habe ich in einem anderen Fotoblog ebenfalls eingesetzt – da diese Lösung auf Bootstrap basiert und Bootstrap mittlerweile sehr verbreitet ist möchte ich genau dieses Beispiel nutzen damit es für euch auch leichter zu portieren ist.

Als erstes muss man alle Bilder laden und deren Seitenverhältnis ermitteln.

Das war ja noch wirklich einfach und das sollte man auch so hinbekommen – nur für die Vollständigkeit genannt. Im nächsten Schritt habe ich die Fotos nach Datum sortiert. Das geht ebenfalls ganz fix und ist natürlich optional:

Möchte man die Ausgabe auf ein paar wenige Fotos beschränken, hilf array_slice:

Jetzt kommt das eigentliche Herzstück der Sortierung. Erst der Code, dann eine kurze Erklärung dazu.

Wir gehen also über also Fotos und haben ein Array für die späteren Zeilen auf der Seite angelegt. Eine Zeile kann dabei beliebig viele Fotos enthalten. Für meinen Fall darf eine Zeile nur ein Querformat und zwei Hochformat-Fotos enthalten. Querformat-Fotos werden daher direkt in eine neue Zeile aufgenommen. Ist das Foto im Hochformat, wird es in eine temporäre Zeile gepackt. Hat diese Zeile zwei Einträge, wird sie angehängt und das temporäre Array geleert. Eigentlich sehr einfach gehalten. Der Trick ist am Ende nun einfach noch, dass eventuell noch ein Eintrag im temporären Array ist, den wir nicht vergessen dürfen. Das liegt daran, dass einfach nicht genug Hochformatfotos vorhanden waren.

Jetzt geht es an die Ausgabe. In diesem kurzen Beispiel nicht sonderlich sauber in ein Template gegossen – geht mehr um das grundlegende Verständnis:

Wir gehen also alle Zeilen durch die wir gesammelt haben und errechnen die Breite der Spalte. Hier ist das Grid-Layout von Bootstrap 3 sehr hilfreich, das wir einfach die Zahl 12 (welche für 100% Breite steht) durch die Anzahl der Fotos in der Spalte teilen können. Das letzte Foto orientiert sich noch am rechten Rand um eine schöne rechteckige Optik zu bekommen. Fertig.

In diesem Beispiel wird als Image-Source noch der Pfad auf dem Server – das muss natürlich angepasst werden.

Anfangs habe ich probiert die Logik in einer einzelnen Schleife abzubilden, aber das ist ja fast unmöglich und macht es extrem unübersichtlich. Der Code lässt sich auch super in eine Klasse kapseln und immer wieder verwenden. Das nehme ich mir auf jeden Fall noch vor.

Fragen?

Bootstrap 3 Migration Guide

Angenommen man hat ein tolles Projekt auf Basis von Bootstrap 2 erstellt und online genommen. Nun möchte man irgendwie doch auf dem aktuellen Stand bleiben und auf Bootstrap 3 wechseln. Schon funktionieren einige Dinge nicht mehr oder sehen eventuell ganz anders aus.

Genau bei diesem Punkt hat mir diese Seite sehr geholfen. Dort findet man eine super Aufstellung aller Klassen die sich so geändert haben. Im Idealfall muss man also nur ein Find & Replace im Projekt durchführen und ist fertig. Soviel zur Theorie – es bleibt in jedem Fall ein super Einstieg und eine große Hilfe.

php.net in neuem Gewand

Seit ich denken kann hat sich php.net in ein und dem selben Layout präsentiert – doch das hat sich vor kurzem geändert: Endlich wurde ein neues Design veröffentlicht. Meiner Meinung nach längst überfällig. Der neue Look tut der Seite wirklich gut und man findet sich weiterhin überall ohne Probleme zurecht.

Aktuell ist das Design zwar noch im Beta-Stadium, aber meiner Meinung nach sieht das alles schon sehr fertig und brauchbar aus. Ich konnte bisher keine Fehler oder Probleme feststellen. Daumen hoch!