|
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.
|
