Responsive Webdesign – Muss oder Zeitverschwendung?

[gbwolf]

Momentan bastle ich (wieder/noch immer) an meinem Wordpress-Template, bzw., ich versuche, das Standard-Template anzupassen. Eine Überlegung ist jetzt, das Ganze mit "Responsive Webdesign" zu ergänzen, also einer Anzeige, die kompatibel für die Browser von Mobilgeräten ist.
Meine Zielgruppe sind Jugendliche, ich rechne also schon damit, dass einige über das Smartphone meine Seite besuchen werden. Andererseits rechne ich nicht damit, so viele Leser zu haben, dass sich der Aufwand lohnt.

Hat jemand von euch sich schon mit diesem Thema beschäftigt? Womöglich sogar einen guten Weg gefunden, das umzusetzen, ohne einen Riesenaufwand zu betreiben? Oder Erfahrung mit dem Kauf entsprechender Templates?

Die bislang von mir gefundenen Templates, die mir einigermaßen gefallen, haben alle den Nachteil, dass sie ein Riesenbild als Banner in Szene setzen. Da ich aber nunmal keine Fotografin bin und als Produkt nichts habe, das visuell so stark in Szene gesetzt werden soll, suche ich nach etwas, das mehr an eine klassische Homepage erinnert und mit eigenen Grafiken versehen werden kann.

[Runaway]

Ein tolles Ergebnis fördert es schon zutage. Mein Kollege hat sich auf der Arbeit stark dafür gemacht, daß die Firmenhomepage darauf umgestellt wird und ich finde das Ergebnis sehr eindrucksvoll. Gemacht hat das Ganze jedoch eine externe Webdesignerin. Das Ganze basiert in unserem Fall auf Joomla.

Das Killer-Argument sind aber die Besucher. Wenn du ähnlich viele Besucher bei dir hast wie ich bei mir, dann würde ich fast sagen, es lohnt sich nicht, denn dafür ist es meines Erachtens zu aufwendig.

Das Riesenbild im Banner ist im Moment State of the Art und da könnte ein lizenzfreies Bildarchiv weiterhelfen. Im RD wird das Ganze dann entweder kleiner dargestellt oder weggelassen.

[gbwolf]

Da ich in diesem Jahr mindestens 2-3 Lesungen in Bibliotheken geben werde und der Jugendthriller eventuell in einer Klasse als Lektüre durchgenommen wird, hoffe ich natürlich auf ein paar Besucher, aber die Zahlen werden jenseits denen von Firmen oder bekannten Autoren liegen. Dennoch reizt mich das Responsive Webdesign. Vor allem weil Schüler ja – wie gesagt – heutzutage tendenziell per Smartphone im Netz sind. So ein vorgefertigtes Design mit Responsive-Komponente bekommt man schon um die 40 Dollar. 
Nur diese Riesenbilder, die finde ich einfach nicht schick und man muss immer scrollen, um die Informationen zu finden, nachdem einen das Bild erschlagen hat. Für den Header würde ich sogar einmal bei einer Illustratorin anfragen oder bei befreundeten Hobbyfotografen. Die meisten wirklich guten Kostenlos-Bilder findet man ja früher oder später leider an jeder Ecke.

Früher oder später werde ich mich sicherlich wieder mit dem Thema beschäftigen, weil ich es auch im Zusammenhang mit Öffentlichen Bibliotheken und Marketing interessant finde.

Edit: Momentan bin ich ja eher dabei, mir zusätzlich die Datenbank zu zerschießen, weil ich ein zweites Wordpress installiere. 

Edit: Hat schon jemand mit Yui oder Yaml gearbeitet und auf Wordpress angepasst?

[sirwen]

Ich habe mich in letzter Zeit mit responsive Design auseinandergesetzt und muss sagen, dass es schon sehr angenehm ist, wenn eine Seite für mobile Geräte gestaltet ist. Aber bevor du diesen Schritt wagst, würde ich mir echt die Besucherzahlen anschauen. Grosse Banner sind im übrigen nicht so ein Problem, das lässt sich einfach mit den CSS-Eigenschaften width und max-width lösen. Wenn du z.B. ein Bild auf width: 100% machst, wird es immer so breit wie der Display bzw. das Browserfenster.

Eine elegante Lösung ohne Breakpoints ist z.B. ein sogenanntes Masonry-Layout, davon gibt es auch Wordpress-Layouts (ich habe meine Homepage so gelöst).
http://masonry.desandro.com/

Ansonsten kann ich gerne ein paar Links zu Templates und Frameworks posten, wenn ihr wollt. Es gibt heutzutage massenweise tolle Vorlagen ... allerdings setzen die meisten schon vertieftere CSS-Kenntnisse voraus.

Je nachdem, wie viel Inhalt man auf der Homepage will, würde sich auch ein Single-Page-Design anbieten. Bei wenig Content ist es praktisch, alles auf eine Seite zu schmeissen, die dann nur einmal geladen wird. Die Anzeige von Elementen lässt sich dann z.B. mit Slides steuern.

Also, zusammengefasst: Responsive Design ist keine Hexerei, aber sehr Inhalt-abhängig. D.h., für jede Homepage muss eine individuelle, passende Lösung gefunden werden.

[gbwolf]

Danke für die Tipps, sirwen! Links finde ich immer interessant.
In Sachen CSS muss ich noch einiges Aufholen, aber mir macht das auch Spaß. Aber du hast sicherlich Recht, dass die Besucherzahlen stimmen sollten. Vorläufig wird es aus Zeitgründen wohl eine recht einfache Seite geben. Aber die sollte schon sauber sein und nicht zu billig aussehen. *seufz* Vielleicht kaufe ich auch ersteinmal ein Template ein. Single-Content wird es nicht werden. Momentan plane ich pro Roman eine Seite + SF/andere Veröffentlichungen, eine Startseite und ein Blog. Ich muss mich mit dem Thema Responsive Design auch noch so weit außeinandersetzen, dass ich weiß, wie so etwas überhaupt auf einem Mobilgerät aussehen könnte.

[Aphelion]

Edit: Momentan bin ich ja eher dabei, mir zusätzlich die Datenbank zu zerschießen, weil ich ein zweites Wordpress installiere. 

Nur am Rande, weil es ja eigentlich nicht Thema ist: Da könnte vielleicht eine Multisite-Installation von Wordpress sinnvoller sein. (Dabei hat man *eine* Installation, über die man mehrere Seiten verwalten kann, die dann unabhängig voneinander existieren können: mit jeweils eigener Domain, als Subdomain oder auch "nur" als normaler Pfad, auf dessen korrekten Namen ich nicht komme... "domain.xy/wasichmeine")

[sirwen]

Bevor du anfängst, irgendwas zu programmieren, würde ich mir erst einmal den Inhalt aufschreiben und gliedern. Für ein Layout, das responsive sein sollte (und allgemein im modernen Webdesign), ist es von Vorteil, in Blöcken/Boxen zu denken und vom Spaltenlayout wegzukommen. Sobald du die Struktur in Blöcken definiert hast, kannst du diese herumschieben und unterschiedlich anordnen. Responsive heisst, dass du mit der gleichen HTML-Struktur durch unterschiedliches CSS ein anderes Layout bekommst.
Manche setzen auf variable Breiten, d.h., das Layout wird durch relative Grössen in Prozent statt Pixeln definiert. Aber auch durch normales Fliessen von div-Elementen erreichst du schon Responsiveness (irks, was für ein Wort  ).

Und bevor du ein Template kaufst, schreib mir doch eine PN .

Ich stelle morgen Mal eine Linkliste zu diesem Thema zusammen.

EDIT: Hier schon einmal ein paar meiner Lesezeichen zusammengeklaubt ..

Frameworks:

http://foundation.zurb.com/
http://responsive.gs/
http://www.getskeleton.com/
http://speckyboy.com/2012/11/05/10-lightweight-minimal-responsive-grid-frameworks/
http://lessframework.com/

Ist zum Teil ein wenig kompliziert, aber wenn du dein Browserfenster kleiner und grösser machst, wirst du sehen, was die Idee dahinter ist. Ich finde die Prinzipien jedenfalls sehr aufschlussreich.

Nützliche Tools:
http://resizemybrowser.com/
http://www.99lime.com/elements/
http://www.gridsystemgenerator.com/ (Jaaa, ich bin voll der Raster-Nerd, aber es hilft wirklich, Designs sehen besser aus ...)

Eine umfassende Sammlung:
http://bradfrost.github.com/this-is-responsive/resources.html

Und noch ein bisschen Inspiration:
http://designmodo.com/responsive-design-examples/

[sirwen]

So, ich noch einmal. Mit einer Handvoll Links mehr.

Noch einmal Frameworks für Raster-Nerds:
http://thisisdallas.github.com/Simple-Grid/
http://www.responsivegridsystem.com/
http://imperavi.com/kube/ (für Fortgeschrittene)

Rund um Wordpress:
http://html5blank.com/
https://www.yootheme.com/widgetkit
http://speckyboy.com/2012/10/25/10-free-minimal-and-responsive-wordpress-themes/
http://queryposts.com/ (Übersicht von WP-Funktionen, jetzt nicht unbedingt direkt responsive)

CMS-Alternative zu WP:
http://anchorcms.com/

Ich habe nicht alles im Detail angeschaut, aber als Anregungsmaterial ist das glaube ich schon Mal eine kleine Übersicht, oder?

[Muetzenschaf]

Da ich gerade an einem neuen Aufbau für meinen Blog und Portfolio arbeite, habe ich auch mich in diese Richtung etwas mal schlauer gemacht und ich muss jetzt feststellen, das mein Layout dafür überhaupt nicht ausgelegt ist, da ich zwei Contents nebeneinander haben werde.
Werd mir doch eine eigene mobile Seite mit Jquery bauen.

Aber ich werd mir mal die Links durchlesen. Irgendwann werde ich es sicher noch brauchen.^^