Zurück zum Blog

Das Netz hat eine Website mehr. Unsere!

Das grüne Monster hat einiges zu bieten. Hier erfährt jeder Neugierige, der zu faul ist Firebug aufzumachen, was für Plugins und Technologien wir verbaut haben und wat dat Schnukkelchen so kann.

Was geht´n hier?

Ich führe euch mal schnell durch einige der Funktionen und Extras:

  • Startseite mit Randomvideos im Hintergrund und dazu passender selbstgebauter Textslider (über das Backend pflegbar). Macht ruhig mal ein paar Reloads :).
  • Social-Drag: Rechts an der Seite könnt ihr Sidewide unsere sozialen Profile aus dem Browserrand ziehen. Mobile sieht es etwas anders aus, da schiebt sich auf Touchevent die restliche Seite raus (ähnlich wie bei Facebook und Co).
  • Die Footer-Navigation ist fix und führt euch durch die Seite. Immer, wenn der Content zu lang wird, faded ein Schatten ein, damit man die Navigation besser separieren kann.
  • Wie dir sicher aufgefallen ist, sieht der Browserscroller hier etwas anders aus. Das liegt an Scrollpane (Dazu mehr in einem späteren Hater-Artikel)
  • Arbeiten: Im Masonrylook mit Endlessscrolling kannst du einige unserer Referenzen erkunden. Auch diese Seite ist natürlich fully responsive und passt sich deiner Browsergröße an (die Container verändern die Größe und brechen ggf. um). Wenn du auf eine Referenz klickst, passiert etwas Magie. Das Bild wandert eine Ebene höher und es werden alle Informationen zu der Referenz eingeblendet. Von hier aus kannst du auch mit den Pfeiltasten zwischen den Referenzen hin und her springen oder mit Escape den Modus verlassen. Unser Script merkt sich wo du warst, bringt das Bild an den ursprünglichen Platz und dich wieder da hin wo du vor dem Scrollen warst. Außerdem kannst du jede Referenz (sofern du sie magst) über unsere selbstgebauten Social-Sharing-Plugins mit deinem Netzwerk teilen.
  • Die ganze Website ist Retina Ready. So sehen unsere Icons etc. auch auf deinem neuen Macbook geil aus.
  • Team: Hier stellen wir uns selbst vor. Wenn du mit der Maus über unsere Köpfe fährst, bewegt sich der Schnurrbart aus dem Logo auf das jeweilige Gesicht und passt seine Form und Position so an, dass es optimal auf das Bild passt. Außerdem gibt es hier noch einiges zu erkunden. Schaue selbst.
  • Blog: Hier befindest du dich gerade. Es wird regelmäßig mehr und weniger sinnvolle Posts von uns über unsere Arbeit, Ideen, Codebeispiele, Tipps & Tricks und vieles mehr geben. Du kannst uns Kommentare hinterlassen, den Blog durchsuchen, alle Posts zu bestimmten Tags finden, oder alle Beiträge nach Autoren durchsuchen. Natürlich ist hier Googles Autoren-Schema hinterlegt und wir haben jeweils eigene Autorenseiten: Fynn, Florian
  • Dann gibt es noch die aufwendige Kontaktseite. Hier seht ihr im Hintergrund eine Google Map in unserer neuen CI und darauf ein animiertes Kontaktformular. Da wo unser Logo auf der Karte platziert ist, liegt unser Büro. Wenn ihr auf den Schnurrbart klickt, seht ihr um welche Adresse es sich handelt. Und schickt uns mal ne Nachricht und schaut euch an was dann passiert ;)
  • Außerdem haben wir natürlich ne nette 404er. Da lohnt es sich mal nach etwas Beknacktem zu suchen.

Jetzt zu dem Codekram:

Diese Website ist wie fast alles was wir bauen mit WordPress als CMS realisiert und nutzt im Backend im Grunde nur Standards. Keine Custom Types oder Ähnliches.Es gibt lediglich zwei große Kategorien: Blog und Arbeiten. Arbeiten ist in die Unterbereiche „Print“, „Web“ usw. untergliedert. Diese Child-Kategorien dienen gleichzeitig als Navigation. Die Referenzen / Artikel sind dann über Tags miteinander verknüpft, wenn wir für eine Firma mehr als eine Sache gemacht haben.

Neben Sicherheitsplugins haben wir hier das All in One Seo Plugin im Einsatz, das jedoch bei einigen Bereichen durch eigene Strukturen überschrieben wird. Ansonsten ist alles selbst geschrieben. Wir nutzen jQuery für alle Effekte. Die meisten davon sind selbstgeschrieben und haben an nötigen Stellen lange Haare.

Das Stylesheet nutzt neben dem Grid z.B. die Mixins von Bootstrap und ist komplett in .less geschrieben und dann minified zu css compiled. Da unsere gesamte Website fully responsive ist haben wir das JavaScript zweigeteilt:

Es gibt eine Basis JS (script.js) und zwei verschiedene plugin.js in denen alle Plugins compressed liegen, aber eben nur jene, die wir in den jeweiligen Versionen benötigen.

Arbeiten

Hier nutzen wir Masonry, Endlessscrolling, Scrollpane API, Imageloader, viel Ajax und jQuery, einige CSS3 Zeilen inklusive 3D Transform html5 Elementen. Wer da genauer wissen will, wie diese Ansicht im Detail funktioniert, muss sich selbst durch den Code wursteln. Die eigentlichen Animationen sind nicht sonderlich kompliziert. Nur dabei noch auf Performance zu achten, Scrollpane immer mit sauberen Informationen zu versorgen (da sich die Scrollbars bei mehr Inhalten nicht von alleine anpassen) und das Ganze für etliche Browsergrößen zu optimieren, war schon etwas komplizierter.

Da wir in dem Overlay auch eigene Social-Sharing-Plugins verwenden, die sich automatisiert Bildinformationen, Title und Description von der angegebenen URL ziehen und darüber auch ihre Informationen für ihr Counting erhalten, war es notwendig hier auch per history push die URL anzupassen, wenn man eine Referenz öffnet. Es gibt also zu jeder Referenz noch eine zweite Seite neben der Ajax-Overlay Version die die Daten unter der sauberen URL /arbeiten/… bereitstellt. Hier landen User auch, wenn sie z.B. einen Link aus einem Social Network anklicken. Von da aus können sie natürlich auch zwischen den Referenzen springen. Das jedoch nicht per JavaScript sondern mit einer hauseigenen WordPress-Funktion.

Auf den Referenzseiten gibt es zwei Möglichkeiten, Inhalte darzustellen: 

  1. Über Bildern in max 820 Pixel. Diese haben jeweils einen Titel der im Backend über die Bildcaption gepflegt werden kann und
  2. über den Slider. Der Slider kann unendlich viele Bilder aufnehmen und wird über die Rechts-Links-Pfeile oder über die Action-Squares gesteuert. Es gibt den Slider in vier verschiedenen Größen. Je nach Browsergröße und dann noch immer als Retina-Version inklusive Lichtreflexen.

Jetzt hab ich keine Lust mehr und schreib irgendwann anders weiter. Das Projekt hat auf jeden Fall noch einige Highlights für dich bereitgestellt. Ich habe mit sehr viel Liebe zum Detail gearbeitet und hoffe das sieht man auch :)

Würd mich freuen, wenn ihr drunter schreibt was ihr von dem Ding hier haltet.

herrliche Grüße
Fynn

Arbeits & Socialverhalten

Mit dem Fortsetzen des Besuchs dieser Website akzeptieren Sie die Verwendung von Cookies. Für mehr Informationen und zur Änderungen der Cookie-Einstellungen auf Ihrem Computer, lesen Sie bitte den Datenschutz.

Ich akzeptiere