Responsive Webdesign - Vorbereitung

[czesh]

Hallo Leute,

ich möchte mir eine responsive Webseite programmieren lassen,
d.h. ich bin selbst kein Programmierer.

Worauf muss ich bei der Gestaltung achten,
kann ich mich in der Gestaltung uneingeschränkt austoben,
und oder gibt es da Templates, die Mann füttern kann/muss?

Gibt es Unterschiede bei den Programmen, oder arbeiten die im Priinzip alle gleich?

Über hilfreiche Tips und Links werde ich mich sehr freuen.

Bis dahin,
Alles Gute im Neuen Jahr!

 

[Fuxx87]

Ich würde einfach mal bei themeforest.net vorbeischauen, da kannst du dir tolle Designvorlagen anschauen! Denn man muss ja nicht immer das Rad neu erfinden!

 

[czesh]

Hi Fuxx,

als Kreativer/Designer sollte ich schon versuchen,
ein eigenständiges Design zu gestalten.

Ich möchte lieber das System verstehen,
und mir dann meine Gedanken machen.

Etwas zu adaptieren kommt für mich nicht in Frage.

Aber danke für deine Hilfe!

 

[noltehans]

Hi czesh,

Worauf muss ich bei der Gestaltung achten,

ich würde mir erst einmal diverse Seiten in verschiedenen Auflösungen anschauen.
Diese Seite z.B. sieht bei einer 480er Breite so aus.
http://
So erkennst du sehr schnell, auf was du bei der Gestaltung achten musst.

Gibt es Unterschiede bei den Programmen, oder arbeiten die im Priinzip alle gleich?

Mit Programmen meinst du wahrscheinlich die verschiedenen CSS-Frameworks.
Und ja, alle arbeiten ungefähr nach dem gleichen Prinzip.

 

[animaterecords]

Schau doch mal hier, ist recht informativ mit guten Beispielen: http://www.responsive-webdesign.mobi/

 

[afr0kalypse]

Hi.
Für mich heißt Responsive Design, dass alle meine Inhalte auf allen möglichen Devices funktionieren.
Deshalb finde ich den Mobile-First Ansatz sehr gut. Das heißt, dass du dein kleinstes zu unterstützendes Device definierst und dein Design auf der minimalen Größe beginnst.
Auf größeren Devices kannst du dich dann immer mehr austoben.
Responsive Design heißt aber auch, dass man die Bedienbarkeit nicht außer Acht lassen darf.
Wenn du also ein Design entwirfst, dann denke auch daran, dass eine spätere Webapplikation mit diesem Design auch auf z.B. einem Smartphone mit (ausschließlich) Touch Gesten funktionieren muss, oder dass Elemente entsprechend groß genug sein müssen um bedienbar zu sein.

Ansonsten kannst du so kreativ sein wie du willst

 

[RootIT]

Der Ansatz von afrokalypse ist schon sehr gut beschrieben.

Die unterschiedlichen Designs sind ja eigentlich nicht viel anderes als anders positionierte und skalierte Elemente in deinem Layout. Also Wenn du das Design machen willst werde dir klar welche Elemente dir wichtig sind, wie sich diese auf welcher Auflösung am besten bedienen/anzeigen lassen und ob einige Elemente erst auf großen Bildschirmen sinnvoll sind.

Mobile First -> fange mit dem kleinsten Layout an und mache die Elemente immer größer bzw. füge welche hinzu.

Diese Technik hat sich als gängige Praxis durchgesetzt.

2. Entscheidung: Responsive oder für gängige Gerätetypen?

Der Unterschied liegt ganz kurz und knapp in den Breakpoints, also dort wo sich dein Design ändert.

mal kurz bei die-netzialisten.de kopiert

Die Breakpoints-Liste

• 320 Pixel (iPhone Hochformat)
• 480 Pixel (iPhone Querformat)
• 649 (Kleines Tablet Querformat)
• 768 Pixel (iPad Hochformat)
• 1024 Pixel (iPad Querformat)
• 1200 Pixel (Laptop)
• 1600 Pixel (Mega-Displays und TV)

wäre zum beispiel für gängige Geräte Typen

Bei einem wirklichen Responsive gibt es zwar gängige Breakpoints jedoch ist der Sinn und Zweck deutlich vom Design abhängig. Erst wenn es hier sinnvoll ist zu erweitern/verkleinern sollte auch ein Breakpoint gewählt werden. Das sieht man ganz gut wenn du dein Design einfach in verschiedene Auflösungen skalierst und guckst ob dies nach gut zu sehen, bzw du eine Schaltfläche noch bedienen könntest. Beim zweiten ist es wichtig nicht zu zoomen und es ist nur ein Anhalt weil die Pixel bei verschiedenen Geräten auch verschieden groß sind.

Die Technik dahinter ist ziemlich einfach und wird unter dem Link oben ebenfalls beschrieben.

Verschiedene CSS-Syntax pro Auflösung. Dies ist jedoch anhand des Designs zu erstellen.

 

[rebi00]

Sehr wichtig ist auch, dass das responsive Design gut durchdacht ist. Responsive Webdesign sollte für jede Grösse von Display etwas Sinnvolles anzeigen können. Selbst der Website Developer sollte dies immer vor Augen haben. Passend zu einer neuen Webseite würde ich auch und Suchmaschinenmarketing betreiben. Dadurch erhält die Seite auch die notwendigen Aufrufe.

 

[DevonMiles]

Eventuell macht auch der Einsatz eines Frameworks (z.B. Bootstrap) Sinn, das kann einem viel Arbeit ersparen, andererseits erfordert es auch eine gewisse Einarbeitungszeit. Wenn man sowas öfter braucht, lohnt sich das aber allemal.