Blog-Text-Suche

Meist gelesene Posts

Trocknungsverfahren für Kräuter und Gewürze
96003 mal gesehen   21.03.2014
Heiliger des Monats März: Oscar Romero
94576 mal gesehen   24.03.2014
Blogst Du hier!
75435 mal gesehen   21.10.2009
Verschwörungstheorien
75384 mal gesehen   19.05.2010

Archiv

Abonnieren für RSS-Reader

RSS 0.91Nachrichten
RSS 2.0Nachrichten

Von Pixeln und Größe

Responsives Webdesign


Wer von uns hätte vor 15 Jahren gedacht, dass das "Internet" mal so wichtig würde?
Heute für viele unvorstellbar: kein Wikipedia, keine Online-Nachrichten, kein Youtube, keine schnelle Suche nach einer Telefonnummer auf Google. Kein Facebook, kein Twitter, keine schnellen E-Mails...
Und all das funktioniert nur, weil Millionen meiner Kollegen, die weltweite Gilde der Webmaster, Programmierer und Webdesigner seit vielen Jahren Inhalte eingeben, Strukturen vernetzen und Webseiten gestalten.
Und das "Web" immer weiter weben und entwickeln.

Vor etwa 5 Jahren habe ich mir das erste Smartphone gekauft. OK, ich geb's zu: es war das allererste iPhone...
Damals gab es ja nix anderes ("wir hatten ja nichts") womit man komfortabel unterwegs, mobil im Internet surfen konnte und Mails abrufen konnte. Der Bildschirm dieses ersten iPhones hatte ein Größe von 320 x 480 Pixeln. Nach Nokia-Handys und Palm-Organizern riesig groß!
Mittlerweile gibt es mobile Geräte von vielen Herstellern und in den unterschiedlichsten Bildschirmgrößen.
Neben den kleinsten Smartphones mit einer Bildschirmgröße von 240 x 320 Pixel gibt es Tablet-Computer mit Auflösungen von 768 x 1024 Pixeln und all das dann auch noch im Querformat...

Viele bisherige Internet-Auftritte passen nicht auf die kleinen Bildschirme, da sie ja für große Computer-Bildschirme entwickelt wurden. Und auch wenn's passt, sind doch viele Schaltflächen (Buttons) nicht lesbar oder mit dicken Fingern (nicht empört sein, ich spreche von mir :-) auf kleinen Screens schlecht bedienbar.
Folgerichtig ist die aktuell edelste Aufgabe für Webdesigner, die Web-Seiten in passenden Auflösungen für diese unterschiedlichen Bildschirmgrößen zu liefern. Der Doppelklick auf Text, um diesen in die richtige, lesbare Größe zu zoomen oder die (bei der Vorstellung des ersten iPhones durch Steve Jobs bejubelte) Geste des "Pinch & Zoom" bei der man mit 2 Fingern den Inhalt "auseinanderzieht" um ihn zu vergrößern, soll beendet werden.

von Muhammad Rafizeldi (Google+) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia CommonsDie neue Entwicklung nennt sich "responsive webdesign" was etwa mit "reaktionsfähiges Webdesign" beschrieben werden kann und ist durch den Einsatz moderner Standards wie HTML5, CSS3 und etwas Javascript umsetzbar.
Dazu fragt der Browser, wie groß der Bildschirm des Gerätes ist und liefert dann über eine Art "Weiche" (die "media queries") die richtigen Maße.
Ist bei einem großen Bildschirm der Internet-Auftritt zum Beispiel dreispaltig - sind auf einem kleinen Smartphone dann alle Spalten untereinander. Auch Inhalte wie Bilder und Textbreiten, Schriftgrößen sollten sich dem Bildschirm optimal anpassen. Fehlt der Platz für ein horizontales Menu mit nebeneinander angeordneten Buttons, können die Buttons zum Beispiel als Schaltflächen untereinander dargestellt werden.

3 verschiedene Größen sollte man in zukünftigen Internet-Auftritten mindestens berücksichtigen:
- Smartphones: 320px bis 480px
- Tablets: 768px bis 1024px
- Computer-Desktop: 1024px+

und die Varianten für quer gehaltene Geräte. Mit ständig neu hinzukommenden Geräten und größen kann der Aufwand durchaus auf 5 oder mehr Größen hinauslaufen. Mehr Aufwand für uns Webdesigner aber auch besserer Nutzen für den Anwender, der sich nicht an ein starres Design anpassen muss, sondern umgekehrt flexibel bedient wird.  
Ein einfacher Test
auf responsives Webdesign besteht in der momentan wahrscheinlich meist ausgeübten Geste unserer Zunft: auf einem Desktop-Rechner mit der Maus die untere rechte Ecke des Browser-Fensters anfassen und dasOpens external link in new window Fenster verkleinern und vergrößern (klicken zum Anzeigen). Dabei sieht man recht deutlich wie der Auftritt sich verhält.

Wir sind momentan dabei, die ersten Kunden-Auftritte responsive umzusetzen.
Auch unsere eigenen Auftritt Opens external link in new windowwww.kpunkt.com haben wir begonnen, so umzubauen, dass er mit möglichst vielen Geräten flexibel funktioniert.

Mit diesen kostenlosen Online-Tools kann man beliebige Adressen testen:  
Opens external link in new windowhttp://www.active-value.de/responsive-design-viewer/
Opens external link in new windowhttp://mattkersley.com/responsive/

Zum Vertiefen des Themas:
Opens external link in new windowhttp://t3n.de/news/tipps-tools-fuer-besseres-485235/

Und bei allen Menschen, die sich eigentlich gar nicht für Webdesign interessieren und das hier trotzdem gelesen haben, möchte ich mich entschuldigen und bedanken. Sorry folks - it's my Blog and I like it :-)



Wolfgang KurtzWolfgang Kurtz

ist
Mit-Inhaber der Kölner Internet-Agentur Öffnet externen Link in neuem FensterKpunkt.

Er war brotloser Künstler, glücklicher Bioladner und "regionaler Ansprechpartner des Bundesverbandes Naturkost" bevor er 1992 seine Werbeagentur gründete.

Heute gestaltet er Internetauftritte für viele Naturkost-Firmen und hat mit seinem Team auch die technischen Voraussetzungen für den Heuschrecke-Blog geschaffen.


Sein Faible für Computer und technisches "Spielzeug" und seinen unerschütterlichen Glauben an positive Utopien bringt er in diesen Blog ein.

  •  
  • 0 Kommentar(e)
  •  

Mein Kommentar

Bitte obigen Code eintragen

Benachrichtige mich, wenn jemand einen Kommentar zu dieser Nachricht schreibt.



Ihr Kommentar wird in der Regel am nächsten Arbeitstag freigeschaltet.

Spams, Links, rechtswidrige und anonyme Kommentare können nicht berücksichtigt werden.


Zurück