Kritisches, selbständiges Denken und auch die “Hausfrauen-Logik” sollte jedes Kind in Schule oder Familie erlernen und nie wieder ganz abschalten, egal was es kritisch zu beleuchten gibt 😉

Aktuell: Responsive Design

An diesem Konzept scheiden sich die Geister. Die Idee ist nicht schlecht. Das Problem: eigentlich uralt. Webseiten “skalieren” oft nicht. Zum teil absichtlich (position: absolute; statt relaitve;) zum teil auch weil es bisher “nicht gut” funktioniert hat seine Div-Breiten in Prozent anzugeben und vor allem ein pixel-genaues Umsetzen der Design-Vorlage nicht (ohne weiteres?) möglich war.

Trotzdem ist ein relatives Layout mit %prozentualen% Breiten- und Höhenangaben klar im Vorteil, wenn man es auf Geräten mit unterschiedlich grossen/kleinen Displays betrachtet.

Prozentual skaliert, fixed-Pixel nicht.

Weiteres Problem: Wenn der IPod-Touch die Website skaliert. Was ist dann noch lesbar? Ohne dass ich wieder hinein zoomen muss?

Die Antwort: Responsive Design.

Das heisst: man definiert in seiner CSS, bei welcher Browser-Breite welche CSS-Angaben verwendet werden sollen.

Hier ein Beispiel:

/*
IPad's Resolutions: Display	1st generation & 2: 1024 × 768 px 132 PPI 4:3 aspect ratio
3rd , 4th, & Air: 2048×1536 px 264 PPI
Mini 1st generation: 1,024x768 px 163 PPI 7.9 in (200 mm) diagonal
Mini 2nd generation: 2048×1536 px 326 PPI 7.9 in (200 mm) diagonal

IPhone: Zudem verbaut Apple erstmals ein Retina-Display, dessen Bildauflösung von 480 × 320 Pixel beim iPhone 3GS auf 960 × 640 Pixel vervierfacht wurde.
*/
/* IPhone1 */
@media screen and (min-width: 480px) {
	.content {
		float: left;
		background-color: red;
	}
}
/* IPod touch */
@media screen and (min-width: 640px) {
	.content {
		float: right;
		background-color: blue;
	}
}
/* IPhone 3GS */
@media screen and (min-width: 960px) {
	.content {
		float: right;
		background-color: geen;
	}
}
/* IPad & most devices */
@media screen and (min-width: 1024px) {
	.content {
		float: left;
		background-color: yellow;
	}
}
/* really large screens */
@media screen and (min-width: 2048px) {
	.content {
		float: left;
		background-color: magenta;
	}
}

.content {
	position: relative;
	width: 100px;
	height: 100px;
}

Die Gefahr: Was wenn die ganze Seite von der Benutzerfreundlichkeit her “scheisse” wird, weil man ewig scrollen muss um den gewünschten Teil der Seite zu sehen?

Dann ist es ja besser ich lasse alles beim alten, und zoome rein… auf den Teil den ich gerade sehen will.

Also muss man vermutlich nicht nur ein paar Divs neu anordnen… sondern auch die Navigation überdenken.

Evtl. erweiterten JavaScript-Code aktivieren (Navigationsbuttons auf 1x1cm verkleinern und nur Symbole anzeigen?) falls ein Mobiles Mini-Display die Seite betrachtet.

“Betrachtet man eine mobile Webseite aus der Perspektive der Performance, also z. B. des Verkaufs, dann kommt man unabdinglich zum Thema Usability, denn letztendlich basiert ja die ganze Idee von Responsive auf bessere Zugänglich- und Bedienbarkeit.”

Credits: http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-schrott-ist/

Leute die Geld mit dem Versprechen machen, jemanden zu UX-Designern auszubilden nur um dabei selbst stein-reich zu werden: Clever.

“User experience (UX) designer incorporates aspects of user focused design considerations which include information architecture, user centered design, user testing, interaction design, and occasionally visual design.[16]”

Und hier direkt die kritische Betrachtung von Responsive Design: http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-schrott-ist/

liked this article?

  • only together we can create a truly free world
  • plz support dwaves to keep it up & running!
  • (yes the info on the internet is (mostly) free but beer is still not free (still have to work on that))
  • really really hate advertisement
  • contribute: whenever a solution was found, blog about it for others to find!
  • talk about, recommend & link to this blog and articles
  • thanks to all who contribute!
admin