'Responsive Design' - Website für Desktop & Smartphone

Preisaktionen, Social Media, Blogger-Relations, Pressearbeit: Marketingmaßnahmen für euer Buch.


Was haltet ihr von Responsive Website?

Nie gehört. Interessiert mich auch nicht.
5
31%
Nie gehört, aber interessant.
5
31%
Kommt für mich nicht in Frage.
4
25%
Wichtig. Meine nächste Website soll auf Desktops, Tablets und Smartphones laufen.
2
13%
 
Abstimmungen insgesamt: 16

Benutzeravatar
MW
Beiträge: 663
Registriert: 08.10.2008, 20:51
Wohnort: berlin

'Responsive Design' - Website für Desktop & Smartphone

von MW (27.04.2012, 11:00)
Es gibt wieder einmal einen neuen Trend im Webdesign, der auch für die Gestatung einer neuen Autorenwebsite interessant sein könnte: Responsive Design. Dahinter steckt die Idee, dass eine Website sowohl auf dem Desktop-Pc gut aussieht, ebenso auf dem Tablet oder NetBook und sogar auf einem Smartphone schick ausschaut. Dies wird dadurch erreicht, dass sich die Elemente der Website (Logo, Menü, Artikel, etc.) - je nach Auflösung - neu zueinander ordnen können.

__

Anbei mal eine kleine Layoutreise zurück in die Zukunft (back to 800x600 Pixel):

Es war einmal vor langer Zeit, da stand man als Webdesigner vor der Herausforderung eine Website mit 800 x 600 Pixel zu designen - oder vielleicht doch lieber mit 800 × 600 Pixeln.

Diese willkommene Berechenbarkeit eines Layouts und seiner absehbaren Auswirkungen in freier Wildbahn änderte sich drastisch, als schlagartig die Monitore wuchsen. Plotzlich wurde ein 17 Zoll Monitor erschwinglich. Dann sogar eine unglaublich grosse Kiste mit sagenhaften 19 Zoll. Auf einmal musste man überlegen, ob eine Grafik bei 800 × 600 Pixel noch ihren Zweck erfüllt, gut aussieht und auch bei 1024 × 768 Pixeln nicht so viel Qualität verloren hat, dass ein Design wie PacMan 2.0 aussieht.

Der Schock saß tief, als ein Nachbar mit seinem 15" Flatscreen prahlte und kurz darauf quasi im Monatstakt neue Monitore mit immer höheren Auflösungen und detailreicheren Farbtiefen auf den Markt geschwemmt und fortan bei den Entwürfen einer Website berücksichtigt werden mussten. Ein willkommene Strategie, dass ein Entwurf sowohl bei geringer als auch bei hoher Auflösung gut aussieht, war das aus der Fotografie bekannter Passepartout. So orientierte man sich für den wichtigen Content an die kleinste Auflösung und baute in dem Bereich drum herum einfach eine schöne Landschaft aus Hintergrund, Texturen oder Bildern, die für die Seite nicht wichtig – bei hoher Auflösung aber sehenswert waren.

Aber damit nicht genug! Wahrscheinlich allein um uns Designer zu ärgern, hatte die Industrie einen weiteren fiesen Plan in der Tasche. Es reichte nicht länger aus, dass die Monitore immer und immer größer wurden – nein, auch das Seitenverhältnis sollte sich jetzt ändern. Aus dem guten alten 4 zu 3 wurde ein 16 zu 10, ein 16 zu 9 – und heute gibt es so viele verschiedene Seitenverhältnisse und Auflösungen, dass man eigentlich gar nicht mehr abschätzen kann, wie die Website auf welchem Monitor aussieht.

Also wie konnte man auch diesem Problem weitgehend Herr werden. Vielleicht konnte auch hier die Grundidee des Passepartouts weiterhelfen? Allerdings war es nun nahezu unmöglich, eine Seite so zu gestalten, dass sie sinnvoll auf den Bildschirm zentriert erscheint. Also beschlossen wir Designer, einfach von einer minimalen Höhe/Breite auszugehen. Links und rechts der eigentlichen Seite sollte dann unser bekanntes Passepartout erscheinen. In die Länge jedoch, könnte die Seite endlos wachsen. Hier war die Grundidee des Blogs ein guter Ansatzpunkt. Zunehmend wurde der erste Eindruck einer Seite im Kopfbereich als im Imagebereich benutzt. Zum Beispiel für Slider, nette Intros oder die wesentliche Werbeaussage. Alternativ bestand auch die Möglichkeit, eine Webseite einfach als Fullscreen zu entwerfen. Dies ging mit Flash noch ganz gut. Jedoch machte uns hier rasch Apple einen Strich durch die Rechnung, indem es Flash schlicht boykottierte. Trotzdem fanden sich Möglichkeiten, eine Seite als Vollbild darzustellen.

Doch hatte man sich gerade an die neuen Konzepte der Gestaltung gewöhnt, tauchten die ersten Netbooks im Markt auf. Kurz darauf folgten auch schon die Tablets. Und spätestens seitdem eine Website nicht nur auf einem 27" Monitor, einem 11" Netbook, 9,4" Tablet, sondern auch auf einem Handy-Minidisplay funktionieren soll, werden alle bisherigen Konzepte stark auf die Probe gestellt.

Eine Lösung könnte das 'Responsive-' oder auch 'Mobile-First'-Design sein. Bei diesem Ansatz gibt es keine 'Einheitslösung' für das Aussehen der Website. Vielmehr setzt sich eine Website aus vielen Einzelteilen zusammen, die sich je nach Auflösung unterschiedlich zusammenschieben.

Wie sinnvoll dieses Konzept ist, ob es Zukunft hat oder die Zukunft sein wird bleibt abzuwarten. Auf jeden Fall kommen wir wieder in die Genugtuung, uns ein Design zu überlegen, welches in etwa auf 800 x600 Pixeln funktionieren muss.

WAS HALTET IHR VON 'Responsive Websites'?
aktuelles sachbuch: "design kalkulieren"
www.designkalkulieren.de

artwork: www.designers-inn.de
schreiben: www.angenehme-vorstellung.de
thriller: www.marclinck.de
musik: www.linck-live.de

Benutzeravatar
David Damm
Beiträge: 448
Registriert: 19.10.2009, 12:07
Wohnort: Berlin

Re:

von David Damm (27.04.2012, 11:25)
Hallo,

in diesem Zusammenhang würde ich das Framework YAML erwähnen, das vor Kurzem in neuer Version (4) erschienen ist und eben genau die Dinge, die du genannt hast, berücksichtigt.
Es gibt eine Webseite mit vielen Komponenten/Inhalten, die dann in der Regel mittels CSS zusammengebaut/angeordnet werden. So kann die Webseite auf großen Bildschirmen wachsen und den Platz ausnutzen. Auf kleinen Bildschirmen, wie denen von Smartphones, wird dann eher alles untereinander angeordnet, die wichtigen Inhalte natürlich zuerst. Bei YAML läuft das unter dem Namen "Flexible Layout".
Meine Webseite für mein Buch erstelle ich genau damit.
www.yaml.de

Viele Grüße,
David.

Benutzeravatar
SandraR
Beiträge: 2674
Registriert: 25.11.2007, 07:17
Wohnort: Moskau

Re:

von SandraR (27.04.2012, 11:45)
Wir machen alle Internetanwendungen auch Smartphone und Tabletfähig. Ohne geht gar nicht, außer man will, dass der Kunde seine Webseite in einem Jahr in die Tonne tretten kann!
http://russland-buecher.ru und http://twitter.com/russlandbuecher und bei Facebook, XING und Brainguide Sandra Ravioli

malschaun
Beiträge: 481
Registriert: 29.05.2009, 17:31

Re:

von malschaun (27.04.2012, 14:56)
Hi,

fast jedes Handy hat mittlerweile schon eine 720p-Auflösung. Dann bietet eigentlich jeder Browser eine vernünftige Zoomfunktion ... was gibt es da groß zu optimieren? Eine gut durchdachte "Standard-Website" für den Desktop läuft doch auf fast jedem anderen Gerät. Ich hatte bisher noch nie Probleme damit. Und wenn es dann bald kein Flash mehr gibt, läuft alles überall, oder?

Selbst das BoD-Forum läuft auf meinem Handy einwandfrei ... das sagt doch alles cheezygrin

Grüße

Benutzeravatar
Siegfried
Beiträge: 5934
Registriert: 09.07.2008, 01:14
Wohnort: e-mail: dbs@digibuchservice.de

Re:

von Siegfried (27.04.2012, 15:06)
Die eigentliche Frage ist doch: Warum dem Anwender überhaupt ein Design zumuten?

Letztlich ist eine Webseite doch nichts anderes als eine Art Desktop mit eine Vielzahl von einzelnen Fenstern. Die absehbare Dynamik beim Aufbau bzw. der Struktur einer Webseite kann doch völlig in die Verantwortung des Anwenders gelegt werden. Ob die einzelnen Fenster sich nun überlappen oder nicht, ob das Hauptmenue nun oben oder links oder rechts zu finden ist - warum muss das der Webseitengestalter festlegen.

Die Zukunft (Web4 ? cheezygrin ) könnte doch so aussehen: Webseiteninhalte werden nach Inhalt in einzelnen Fenstern zusammengestellt - die Position des Fensters innerhalb der Webseite legt der Anwender fest, was dann per Cookie o.ä. auf dem Rechner gespeichert wird. So gibt es zumindest einen Wiedererkennungseffekt.

Nehmen wir mal eine Webseite wie etwa die von "ShortNews" ( http://www.shortnews.de ). Jede Menge Kurztexte, Bildchen, Links. Die Spalte links ("Beliebteste News", "Heiss diskutiert") könnte durch den Anwender nach rechts oder nach unten verschoben werden. Der Teil mit den Kurzmeldung wird vom Anwender breiter gezogen und nach oben geschoben. Außerdem könnte der Anwender den Aufbau durch Aktivieren und Inaktivieren einzelner Fenster beeinflussen. Wenn mich bestimmte Bereiche nicht interessieren, schalte ich sie aus. Dynamisches Design in extremo! Vom Anwender bestimmt. So wie auf dem normalen PC-Desktop auch: Sechs Fenster auf, Positionierung freigestellt, Unnötiges wird weggeklickt.
Korrektorat: 1,- Euro zzgl. 19 % USt. pro angefangene 1.000 Zeichen // Layout Buchblock: 1,- Euro pro Seite zzgl. 19 % USt. // Buchcover 20,- oder 30,- Euro inkl. 19 % USt. // Sonderpreise auf Anfrage per E-Mail oder PN

Benutzeravatar
MW
Beiträge: 663
Registriert: 08.10.2008, 20:51
Wohnort: berlin

Re:

von MW (27.04.2012, 16:03)
@Siegfried: ein lustige Idee. Mal sehen. Vielleicht die Zukunft. Aber was wird dann aus Benutzerführung, Struktur- Navigations- oder Werbstartegien? Während aus Sicht des Kunden eine freie Anordnung der Inhalte wünschenswert ist, ist dies kaum im Sinne der Websitebetreiber. Aber wer weiß...

@maschaun: Hier geht es nicht darum, dass eine Seite auf einem Handy dargestellt werden KANN, sondern WIE. Beispielsweise ist bei einer normalen Website das Menü keineswegs benutzfreundich. Auch allee Buttons etc. sind nicht wirklich touch-freundlich. Und erst Recht ist bei normalen Seiten der Content nicht smartphone-optimiert. Aber was unterscheidet den Smartphone-Leser von einem Desktop-Leser und wie bekomme ich dies unter einen Hut. Und könnte ich es schaffen, eine Seite so zu gestalten, dass sie wirklich smartphone-optimiert ist und trotzdem auf großen Displays gut ausschaut.

Zur Verdeutlichung hier mal ein m.E. spannender Link mit Beispielen:

http://designmodo.com/responsive-design-examples/
aktuelles sachbuch: "design kalkulieren"

www.designkalkulieren.de



artwork: www.designers-inn.de

schreiben: www.angenehme-vorstellung.de

thriller: www.marclinck.de

musik: www.linck-live.de

Benutzeravatar
SandraR
Beiträge: 2674
Registriert: 25.11.2007, 07:17
Wohnort: Moskau

Re:

von SandraR (27.04.2012, 16:06)
Fällt dir eigentlich was auf? Es gibt hier auch andere Softwareheinis und trotzdem versucht hier keiner Werbung zu machen cheezygrin also lass doch einfach die Schleichwerbung bleiben.
http://russland-buecher.ru und http://twitter.com/russlandbuecher und bei Facebook, XING und Brainguide Sandra Ravioli

hassan
Beiträge: 60
Registriert: 11.08.2011, 11:47
Wohnort: Essen

Re:

von hassan (27.04.2012, 16:23)
richtig so, sags ihm. das darfst du, bist ja schon ein altmitglied, ist der begriff "fossil" dafür der korekte?

Benutzeravatar
Klonschaf
Beiträge: 532
Registriert: 18.04.2011, 15:35

Re:

von Klonschaf (27.04.2012, 16:40)
Also ich hab null Böcke, mir jedesmal meine eigenen Webseiten zu konfigurieren. Ich will das nur aufrufen und fertig. Um die Ergonomie und das Aussehen der Webseite muss sich der Webseitengestalter kümmern.

Benutzeravatar
Klopfer
Beiträge: 264
Registriert: 15.01.2011, 02:43
Wohnort: Berlin

Re:

von Klopfer (27.04.2012, 18:13)
Ist an sich eine gute Idee, aber man muss immer abwägen, ob die Kompromisse, die man dann beim Seitendesign eingehen muss, um die Seite so flexibel zu machen, das Ergebnis wert sind, oder ob es nicht doch sinnvoller ist, gleich ein eigenes abgestimmtes Design für mobile Endgeräte zu basteln. Manche Dinge (wie z.B. Hover-Effekte für das Einblenden von Untermenüs) funktionieren mit Touch-Bedienung nicht, da muss man eh dauernd anpassen.

Benutzeravatar
SandraR
Beiträge: 2674
Registriert: 25.11.2007, 07:17
Wohnort: Moskau

Re:

von SandraR (27.04.2012, 19:11)
Klopfer es gibt kleine schlaue Dienstprogramme die automatisch Seitenteile entsprechend dem Endgerät anpassen. Man muss das Rad nicht neu erfinden.
http://russland-buecher.ru und http://twitter.com/russlandbuecher und bei Facebook, XING und Brainguide Sandra Ravioli

Benutzeravatar
Siegfried
Beiträge: 5934
Registriert: 09.07.2008, 01:14
Wohnort: e-mail: dbs@digibuchservice.de

Re:

von Siegfried (27.04.2012, 20:18)
Klonschaf hat geschrieben:
Also ich hab null Böcke, mir jedesmal meine eigenen Webseiten zu konfigurieren. Ich will das nur aufrufen und fertig. Um die Ergonomie und das Aussehen der Webseite muss sich der Webseitengestalter kümmern.


Nur mal so am Rande:

Wer sich mit offenen Augen die neue MS-Office-Generation anschaut, der wird genau diesen Weg entdecken.

Nehmen wir Word 2010. Da gibt es das klassische Menü nicht mehr. Früher existierte ein Standard, der hieß CUA ("Common User Access"), wurde von der IBM im Jahre 1987 im Rahmen der SAA (Systems Application Architecture) entwickelt und 1989 als Standard verabschiedet. Durch diese Regelung beginnen Menüleisten von grafischer Software immer mit "Datei" und "Bearbeiten".

Microsoft hat diesen Standard mit der neuen Office-Software (ab Version 2007) gekillt. In Word 2007 bzw. 2010 gibt es "Menübänder". Die Reihenfolge der Menüs und die Inhalte der Menüs sind durch den User frei definierbar - die Menüs sind bekanntlich nicht fest programmiert, sondern können durch XML-Dateien frei definiert werden.

Natürlich gibt es einen Grundstandard - die Microsoft-Menü-Grundversion oder so etwas. Aber drehen und deichseln kann da jeder selbst. Interessanterweise wird in der neuen Ausgabe vom "Tempest" darauf Bezug genommen:

Tempest April 2012 - Ausgabe 14-04 Teil 1 hat geschrieben:
In Word kann man sich die Arbeit an längeren Texten wie Romanen erleichtern, indem man zwei Befehle in die Symbolleiste einfügt, mit Hilfe derer man im Text umblättern kann (im Beispiel aus Office 2010):
Oben "Symbolliste für den Schnellzugriff anpassen", "Weitere Befehle", "Alle Befehle", Nächste Seite" - Hinzufügen, "Vorherige Seite" - Hinzufügen.


Die Anwendungssoftware ist also bereits auf dem Weg zum userdefinierten dynamischen Erscheinungsbild. Die zunehmende Verwendung von XML zur Definition solcher Strukturen ist ein weiterer Hinweis in diese Richtung. Von daher ist die entsprechende Wahrscheinlichkeit im Bereich der Webseiten durchaus gegeben.
Korrektorat: 1,- Euro zzgl. 19 % USt. pro angefangene 1.000 Zeichen // Layout Buchblock: 1,- Euro pro Seite zzgl. 19 % USt. // Buchcover 20,- oder 30,- Euro inkl. 19 % USt. // Sonderpreise auf Anfrage per E-Mail oder PN

Benutzeravatar
MW
Beiträge: 663
Registriert: 08.10.2008, 20:51
Wohnort: berlin

Re:

von MW (28.04.2012, 09:48)
@SandraR: Zum Thema Schleich-Werbung: Kein Kommentar. Wenn du dich hier weiter austoben möchtest, klinke dich doch bitte wieder im eBook-Thread ein. Ich glaube, da wird das Thema von allen Seiten durchleuchtet/beleuchtet.

@SandraR: Zum Thema kleine Dienstprogramme: Nun, so viele kleine Dienstprogramme gibt es mE nicht. Da wären WP-Touch & CO, aber die verändern dann sehr stark und vor allem unkontrolliert das Design der Seite.

@Siegfried: Stimmt. Das neue Windows ist ein gutes Beispiel, wie Desktop und Mobile zusammenwächst.

@Klopfer: In der Tat ist dies der Hauptgrund, warum ich derzeit noch eine 'normale' Seite betreibe. Mit einer Desktopseite habe ich einfach viel mehr Möglichkeiten, den Besuchern etwas zu bieten.

Allerdings wächst die Zahl der 'mobilen'-Zugriffe auf eine Seite und da kommt man schon ins Grübeln, wie man für diese Leser eine Seite optimieren sollte. Bei einer Seite mit wenig wechselndem Inhalt geht die 2-Seiten-Strategie (desktop/mobile) noch ganz gut. Schreibt man recht viel, kann dies problematisch werden.
aktuelles sachbuch: "design kalkulieren"

www.designkalkulieren.de



artwork: www.designers-inn.de

schreiben: www.angenehme-vorstellung.de

thriller: www.marclinck.de

musik: www.linck-live.de

Benutzeravatar
Klonschaf
Beiträge: 532
Registriert: 18.04.2011, 15:35

Re:

von Klonschaf (28.04.2012, 10:03)
@Siegfried


In Ordnung, kann sein ... konnte ich natürlich nicht wissen, denn ich verwende kein Word, hatte das noch nie installiert. Im Fall einer solchen Anwendung, die man ja meist täglich nutzt, ist das auch sinnvoll, sich das nach eigenen Wünschen zusammenzuschrauben.

Aber Webseiten? Ich weiß nicht, es macht doch gerade den Reiz aus, dass Webseiten sich unterscheiden in Design und Funktion. Wären die genormt, hm, ich weiß gar nicht, ob ich das wollte - auch wenn die Bedienung vielleicht einfacher wäre ... was ich aber nicht mal glaube, also ich hatte noch nie ein Problem mit Webseiten (mit solchen komplexen Programmen wie Word o.ä. aber schon).

:D blink3

Benutzeravatar
mtg
Beiträge: 5681
Registriert: 20.01.2010, 09:59
Wohnort: Berlin

Re:

von mtg (28.04.2012, 10:29)
Ich finde es völlig legitim, sich in diesem Forum auch diesem Thema zu widmen ... schließlich besitzt ein Großteil der BoD-Autoren gar keine oder gerade mal eine jimdo/beepworld oder whatever-Website. Hier ist als Information angebracht. Dass es einige User mit umfassenden Hintergrundkenntnissen gibt, bedeutet ja nicht automatisch, dass alle User darüber verfügen ...

Wie war das mit der Kette und ihrem schwächsten Glied? angle:

Zurück zu „Buchvermarktung“


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Über BoD

BoD™ ist die führende deutsche Self-Publishing-Plattform. Seit mehr als 20 Jahren sind wir die Anlaufstelle für das einfache, schnelle und verlagsunabhängige Veröffentlichen von Büchern und E-Books. Bereits mehr als 40.000 Autoren haben sich mit uns den Traum vom eigenen Buch erfüllt.