[Responsive Webdesign] Gute Quellen/Tutorials zum Einstieg Frage [Responsive Webdesign] Gute Quellen/Tutorials zum Einstieg zu Favoriten hinzufügen

Daumen hoch 1 Daumen runter

Moin!

Ich möchte die Darstellung meiner Seiten sukzessive für die Darstellung auf mobilen Endgeräten optimieren.

Google hat dazu ja schon ein paar rudimentäre Tipps gegeben.

Könnt ihr mir ein paar Tipps zum Einstieg geben? Meine Fragen wären unter anderem:

  • Gibt es eine Art Framework?
  • Wo finde ich eine universell einsetzbare Weiche?
  • Welche Endgeräte sollte ich beachten, welche kann ich außer Acht lassen?
  • Was habe ich vergessen? :-)

Danke im voraus! Laughing

Antworten


Diese Antwort als GUT bewerten 2 Diese Antwort als SCHLECHT bewerten

Hallo Jan,

nachdem ich eben gut 20 Minuten für meine Antwort gebraucht habe und diese beim Speichern einfach ins Nirvana verschwand versuche ich es nun noch einmal...
Ich selbst kenne mich mit Webdesign auch nicht sehr gut aus, Informiere mich jedoch sehr stark da ich meine Projekte selbst Designe. So habe ich vor kurzem auch angefangen mir gedanken zu Responsivem Webdesign zu machen und einiges an Quellen gefunden. Eine sehr zuverlässige Quelle ist hier elmastudio.de wo Ellen sehr viel zu diesem Thema schreibt.

Frameworks gibt es im Netz wirklich sehr viele zu finden, gerade heute habe ich einen alten Artikel in einer Zeitschrift zu diesem Thema gelesen. Jedoch solltest du dir hier nicht nur die Frameworks anschauen sondern auch mal nach Grid Systemen ausschau halten, diese helfen dir auch schon ein ganzes Stück weiter. Eine Liste von Frameworks habe ich dir hier zusammengetragen:

Eine universelle Weiche wären z.B. CSS Media Queries, diese richten sich an die Pixelbreite des jeweiligen Mediums (Anzeigenbereichs). Hier solltest du auch wirklich auf die Pixelbreite setzen und nicht etwa die Medien bezeichnung wie "handhelt" einsetzen da Smartphones z.B. meist nicht darauf reagieren. Ein Mobile First design Hilft dir natürlich auch weiter.

/* smartphones in landscape mode */
@media screen and (min-width: 480px) {
...
}
/* tablets in portrait mode */
@media screen and (min-width: 768px) {
...
}
/* tablets in landscape mode */
@media screen and (min-width: 1024px) {
...
}
/* standard laptop screens */
@media screen and (min-width: 1220px) {
...
}
/* bigger desktop screens */
@media screen and (min-width: 1440px) {
...
}

Bei den Endgeräten arbeite ich nur mit Smartphones, Tablets, Net- sowie Notebooks, PC's und TV und natürlich Retinadisplay welche uns in Zukunft immer mehr beschäftigen werden.

Hier kommen wir gleich zu einem weiteren Punkt den du beim Responsiven Designen beachten solltest, Retinadisplays. Diese hochauflösenden Displays zeigen Grafiken und Icons oft sehr verpixelt und unscharf wesegen ich beim Designen einer Webseite heute auf CSS3 setze. Auch HTML5 ist keine schlechte wahl und in meinen Augen auch schon reif zur verwendung. Mit CSS3 lassen sich viele Grafiken ersetzen und so eine Webseite schlanker gestalten. Außerdem hat man weniger Arbeit mit der Anpassung an Retinadisplays.

Auch für Icons gibt es eine sehr tolle Lösung in meinen Augen, Icon Fonts. Diese sind immer scharf und können noch dazu in allen erdenklichen größen ausgegeben werden. Das schöne dabei ist, man benötigt nicht für jede größe ein neues Icon, dies macht die Webseite schlanker und die Icons lassen sich auch ohne Probleme mit CSS3 gestallten.

Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Hallo Jan,

im allgemeinen muss ich sagen arbeite ich mich selbst erst in das Thema ein, habe jedoch schon einiges gelesen und viele quellen dazu gefunden. Eine der quellen die mich am weitesten gebracht haben ist <a href="http://www.elmastudio.de/category/webdesign/responsive-webdesign-2/">elmastudio.de</a>.

Frameworks gibt es einige im Internet, gerade heute habe ich einen alten Artikel in einer <a href="http://www.heise.de/kiosk/special/ct/11/09/links/084.shtml" title="Links aus der Zeitschrift">Zeitschrift</a> gelesen das sich mit diesem Thema beschäftigt.

Vorlagen:
<ul><li><a href="http://twitter.github.com/bootstrap/index.html">Bootstrap</a></li>
<li><a href="http://foundation.zurb.com/">Foundation Zurb</a></li>
<li><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and up</a></li>
<li><a href="http://www.yaml.de/">Yaml (auf Deutsch dokumentiert)</a></li>
</ul>

Als Weiche würde ich nicht CSS Media Queries einsetzen und ein Mobile first Layout wäre natürlich auch eine gute Idee. Persönlich bin ich kein Fan von Javascript Lösungen. Bei den Media Queries

/* smartphones in landscape mode */
@media screen and (min-width: 480px) {
...
}
/* tablets in portrait mode */
@media screen and (min-width: 768px) {
...
}
/* tablets in landscape mode */
@media screen and (min-width: 1024px) {
...
}
/* standard laptop screens */
@media screen and (min-width: 1220px) {
...
}
/* bigger desktop screens */
@media screen and (min-width: 1440px) {
...
} 

Bei den Endgeräten würde ich nicht auf die Art sondern auf die Pixel setzen da Smartphones z.B. "handhelt" ignoriert. Ansonsten kann man alte Handys und sehr kleine Displays außer acht lassen. Jedoch sollte man auf größere Medien wie TV Geräte eingehen da diese sicherlich in zukunft häufiger zum einsatz kommen könnten.

Beim Responsiven Designen fällt mir noch das Thema Grid Systeme ein. Diese erleichtern das Arbeiten und Designen ernorm.
Außerdem rate ich auf CSS3 sowie HTML5 zu setzen, vor allem ersteres ist wichtig da die Umsetzung der Webseite mit vielen Grafiken nicht nur die Ladezeit erhöht sondern auch durch die Retinadisplays stark erschwert werden.
Ein Nettes gimmik sind auch Icon-Fonts welche Retinadisplay freundlich sind, sehr gut zum anpassen und die Ladezeiten verringern.

Ich hoffe ich konnte dir ein wenig weiterhelfen, auch wenn ich kein Fachmann in diesem Thema bin und selbst noch etliches lernen muss...

Designideen:

http://mediaqueri.es/

Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Hi Jan,

schau doch mal auf der Website http://www.responsive-design-test.de/ vorbei. 

Dort gibt es Informationen zu unterschiedlichen Frameworks, Tipps und Tricks zur Umsetzung und ein Art Responsive Design Tester, mit dem Du Dir eine Website in unterschiedlichen Auflösungen bzw. Endgeräten anzeigen lassen kannst.

Gruß Max

Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

Kann mich YAML nur anschließen! Eine große Hilfe und Arbeitsersparnis!

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten