{"id":580,"date":"2011-03-28T21:56:05","date_gmt":"2011-03-28T19:56:05","guid":{"rendered":"http:\/\/johannes-heuckeroth.de\/blog\/?p=580"},"modified":"2018-04-10T20:10:29","modified_gmt":"2018-04-10T18:10:29","slug":"photoblog-design-pfnphoto-com","status":"publish","type":"post","link":"https:\/\/johannes-heuckeroth.de\/blog\/webdesign\/photoblog-design-pfnphoto-com\/","title":{"rendered":"Photoblog Design PFNPHOTO.COM"},"content":{"rendered":"<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg\" alt=\"\" title=\"screenshot\" width=\"500\" class=\"alignleft size-full wp-image-585\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg 1128w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot-300x255.jpg 300w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot-1024x870.jpg 1024w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/a><\/p>\n<p><\/p>\n<h3>Konzept<\/h3>\n<p>Seit Anfang 2008 ver\u00f6ffentliche ich auf meinem Photoblog <a href=\"http:\/\/pfnphoto.com\">pfnphoto.com<\/a> regelm\u00e4\u00dfig Fotografien von mir, neben dem Design meine gro\u00dfe Leidenschaft. Mit der bisherigen L\u00f6sung war ich lange zufrieden, aber mit der Zeit wuchs der Wunsch mehr M\u00f6glichkeiten zu haben. Im Folgenden will ich einen Einblick in die Entstehung der neuen Website geben, was etwas techniklastig ausf\u00e4llt. <\/p>\n<p><!--more--><\/p>\n<p>Bisher war die Website sehr einfach gestrickt: Foto hochladen, Foto angucken, das wars. F\u00fcr die schnelle Ver\u00f6ffentlichung und Betrachtung von einzelnen Fotos, sowohl f\u00fcr mich als Betreiber als auch f\u00fcr den Besucher als Nutzer eine optimale L\u00f6sung. Das Design war sehr reduziert und voll auf die Wirkung des einzelnen Fotos und das schnelle Durchblicken der Fotos abgestimmt.<\/p>\n<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/pfnphotocom-old.png\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/pfnphotocom-old.png\" alt=\"\" title=\"pfnphotocom-old\" width=\"500\" class=\"alignleft size-full wp-image-581\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/pfnphotocom-old.png 1134w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/pfnphotocom-old-300x216.png 300w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/pfnphotocom-old-1024x738.png 1024w\" sizes=\"(max-width: 1134px) 100vw, 1134px\" \/><\/a><\/p>\n<p>In dieser Reduziertheit lag sowohl der Vorteil aber auch der gro\u00dfe Nachteil. Den mit der Zeit kam der Wunsch auch mal Serien zu ver\u00f6ffentlichen, oder einen l\u00e4ngeren Text zu einem Foto zu schreiben. Genug Gr\u00fcnde um das Design und das Contentmanagementsystem im Hintergrund einer gr\u00fcndlichen \u00dcberarbeitung zu unterziehen. <\/p>\n<p>In der knapp bemessenen Zeit zwischen Abgaben und Beginn meines Praktikumssemester am 1.M\u00e4rz nahm ich mir drei Tage Zeit, an denen ich das Redesign durchpeitschen wollte. Von der ersten Skizze am Mittwochmittag bis zur Vollendung am Samstagvormittag gab es also viel zu tun. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/skizze.jpg\" alt=\"\" title=\"skizze\" width=\"500\" height=\"353\" class=\"alignleft size-full wp-image-583\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/skizze.jpg 500w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/skizze-300x211.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Grunds\u00e4tzlich musste die neue Version folgende Funktionalit\u00e4t haben:<\/p>\n<ul>\n<li> Einstiegsseite mit \u00dcberblick \u00fcber die besten Fotos, die neuesten Blogposts und eine \u00dcbersicht \u00fcber meine Fotoserien.<\/li>\n<li> M\u00f6glichkeit Fotoserien zu ver\u00f6ffentlichen (SERIES)<\/li>\n<li> \u00dcbersichtsseite f\u00fcr alle ver\u00f6ffentlichten Fotos (ARCHIVES)<\/li>\n<li> \u00dcber Mich Seite (ABOUT)<\/li>\n<li> BLOG<\/li>\n<\/ul>\n<p><\/p>\n<h3>Umsetzung<\/h3>\n<p>Statt viel Zeit mit einem Layout-Dummy in Photoshop zu verbrauchen, entschied ich mich, ausgehend von einer Skizze, den Code gleich zu schreiben und das Design dabei zu entwickeln. Das spart Zeit und bietet die M\u00f6glichkeit das Design direkt live im Browser zu beurteilen. Ich begann mit dem Code der Startseite, dem wichtigen Einstiegselement der neuen Seite. Ich plante au\u00dferdem, die Seite f\u00fcr verschiedene Bildschirmaufl\u00f6sungen zu optimieren, was im Code viel einfacher und schneller geht, und live auch wesentlich besser zu beurteilen ist, als anhand eines statischen Layouts in Photoshop oder einem sonstigen Programm. <\/p>\n<p>Warum unterschiedliche Versionen f\u00fcr unterschiedliche Aufl\u00f6sungen?<br \/>\nBei meinen Fotos ist es mir sehr wichtig, sie m\u00f6glichst gro\u00df zu pr\u00e4sentieren. Dabei bin ich nat\u00fcrlich immer gewissen Restriktionen unterlegt, abh\u00e4ngig von den Systemen meiner Besucher. Um flexibel zu sein, und jedem Besucher die f\u00fcr seine Aufl\u00f6sung maximale Gr\u00f6\u00dfe der Fotos zug\u00e4nglich zu machen, entschied ich mich f\u00fcr das Arbeiten mit <a href=\"http:\/\/www.drweb.de\/magazin\/media-queries-mobile-version-von-websites-mit-css3-erstellen\/\">Media Queries<\/a>. Media Queries sind eine sehr sch\u00f6ne M\u00f6glichkeit von CSS3, verschiedene CSS Definitionen f\u00fcr die gleichen HTML Elemente, abh\u00e4ngig von der Bildschirmaufl\u00f6sung, anzubieten. Das hei\u00dft ich schreibe eine HTML-Version und definieren das Layout dieser Seite je nach Aufl\u00f6sung \u00fcber das CSS verschieden. <\/p>\n<p><\/p>\n<p>In meinem Fall waren das folgende Aufl\u00f6sungen:<\/p>\n<ul>\n<li>Aufl\u00f6sung \u00fcber 1228px: Bekommt den vollen Genu\u00df mit Fotos in der Breite 1128px<\/li>\n<li>Aufl\u00f6sung zwischen 768 und 1024px: Reduzierte Gr\u00f6\u00dfe mit 896 Pixeln Breite, z.B. f\u00fcr iPad und iPhone4<\/li>\n<li>Aufl\u00f6sung zwischen 468 und 767px: Contentbreite 436px<\/li>\n<\/ul>\n<p>Die letzte Gr\u00f6\u00dfe zielt nat\u00fcrlich vor allem auf Smartphones mit geringen Aufl\u00f6sungen ab. Ausprobieren durch Verkleinerung des Browserfensters!<br \/>\n<\/p>\n<p>Hier einige Screenshots:<\/p>\n<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg\" alt=\"\" title=\"screenshot\" width=\"500\" class=\"alignleft size-full wp-image-585\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot.jpg 1128w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot-300x255.jpg 300w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/screenshot-1024x870.jpg 1024w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/ipad-screen.jpg\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/ipad-screen.jpg\" alt=\"\" title=\"ipad-screen\" width=\"500\" class=\"alignleft size-full wp-image-589\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/ipad-screen.jpg 1128w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/ipad-screen-300x133.jpg 300w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/ipad-screen-1024x456.jpg 1024w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/iphone-screen1.jpg\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/iphone-screen1.jpg\" alt=\"\" title=\"iphone-screen1\"  width=\"500\" class=\"alignleft size-full wp-image-588\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/iphone-screen1.jpg 1128w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/iphone-screen1-300x200.jpg 300w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/iphone-screen1-1024x684.jpg 1024w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/smal1.jpg\"><img decoding=\"async\" src=\"http:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/smal1.jpg\" alt=\"\" title=\"smal\"  width=\"500\" class=\"alignleft size-full wp-image-590\" srcset=\"https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/smal1.jpg 565w, https:\/\/johannes-heuckeroth.de\/blog\/wp-content\/uploads\/2011\/03\/smal1-294x300.jpg 294w\" sizes=\"(max-width: 565px) 100vw, 565px\" \/><\/a><\/p>\n<p><\/p>\n<p>Nat\u00fcrlich lie\u00dfe sich das Ganze noch viel weiter treiben und feiner abstimmen, das lie\u00df mein begrenztes Zeitfenster allerdings nicht zu.<br \/>\nEin sch\u00f6nes Beispiel f\u00fcr dieses Modell ist die Website von <a href=\"http:\/\/edenspiekermann.com\/\">Edenspiekermann<\/a>.<\/p>\n<p>Nachdem der HTML-CSS-Prototype (noch v\u00f6llig ungestaltet, nur die Anordnung der Elemente als graue K\u00e4sten) fertiggestellt war, begann ich mit der Einrichtung des Contentmanagementsystems auf dem Server. Bei der alten Version kam das sehr schlanke System Pixelpost zum Einsatz, welches voll und Ganz auf den Einsatz f\u00fcr Photoblogs optimiert ist. In meiner neuen Version entschied ich mich f\u00fcr WordPress, welches wesentlich mehr M\u00f6glichkeiten hat. <\/p>\n<p>Zudem setze ich es schon auf diversen anderen Websites (z.B. auf diesem Blog) ein und kenne mich relativ gut aus. Trotzdem war es diesmal viel Neuland, da ich meine bisherigen WordPress-Layouts immer ausgehend von einem bestehenden Theme entwickelte, w\u00e4hrend diesmal alle Seiten bis auf den Blog von Grund auf neu konstruiert wurden. <\/p>\n<p><\/p>\n<p>Auf dem Server begann ich dann nach und nach verschiedene Designelemente einzubinden, Seiten zu erstellen und mit Inhalt zu f\u00fcllen. F\u00fcr die Funktionalit\u00e4t der Startseite kam einiges an jquery zum Einsatz, z.B. der <a href=\"http:\/\/nivo.dev7studios.com\/\">Novo Slider<\/a> f\u00fcr das Slider-Intro. Schwierigkeit hierbei war, den Slider bei den verschiedenen Gr\u00f6\u00dfen zum Laufen zu bringen. Letztendlich blieb mir nur die Variante in zweimal einzubinden, und je nach Aufl\u00f6sung einen auszublenden. Bei der kleinsten Gr\u00f6\u00dfe f\u00e4llt er ganz weg. Diese Variante wirkt sich nat\u00fcrlich nicht gerade gut auf die Ladezeiten aus, in dieser Hinsicht ist die Startseite sicher mehr als suboptimal. <\/p>\n<p>Daran zeigt sich auch, das meine &#8222;Coder&#8220;-F\u00e4higkeiten doch sehr beschr\u00e4nkt sind, es gibt sicher f\u00fcr vieles an diesem Design eine bessere Umsetzungsm\u00f6glichkeit. Trotzdem bin ich mit der Umsetzung recht zufrieden und sehr froh \u00fcber die neuen M\u00f6glichkeiten meine Fotografien in das richtige Licht zu stellen. <\/p>\n<p>Als n\u00e4chstes steht dann irgendwann diese Website an &#8230; mit der ich auch nicht mehr zufrieden bin. Wer den Text bis hierhin gelesen hat, d\u00fcrfte zum Beispiel festgestellt haben, dass sich l\u00e4ngere Texte Wei\u00df auf Schwarz nicht unbedingt optimal lesen lassen \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Konzept Seit Anfang 2008 ver\u00f6ffentliche ich auf meinem Photoblog pfnphoto.com regelm\u00e4\u00dfig Fotografien von mir, neben dem Design meine gro\u00dfe Leidenschaft. Mit der bisherigen L\u00f6sung war ich lange zufrieden, aber mit der Zeit wuchs der Wunsch mehr M\u00f6glichkeiten zu haben. Im Folgenden will ich einen Einblick in die Entstehung der neuen Website geben, was etwas techniklastig [&hellip;]<\/p>\n","protected":false},"author":491,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,30,3],"tags":[58,57,60,59],"class_list":["post-580","post","type-post","status-publish","format-standard","hentry","category-in-eigener-sache","category-screendesign","category-webdesign","tag-blodesign","tag-photoblog","tag-redesign","tag-relaunch"],"_links":{"self":[{"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/posts\/580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/users\/491"}],"replies":[{"embeddable":true,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/comments?post=580"}],"version-history":[{"count":20,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/posts\/580\/revisions"}],"predecessor-version":[{"id":844,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/posts\/580\/revisions\/844"}],"wp:attachment":[{"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/media?parent=580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/categories?post=580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johannes-heuckeroth.de\/blog\/wp-json\/wp\/v2\/tags?post=580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}