atelier21 – Büro für Gestaltung | Responsive Webdesign
1783
page-template-default,page,page-id-1783,page-child,parent-pageid-547,airplane-mode-disabled,airplane-mode-no-qm,ajax_fade,page_not_loaded,,select-theme-ver-4.1,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

Respon­sive Web­de­sign

»The con­trol which desi­gners know in the print medium, and often desire in the web medium, is sim­ply a func­tion of the limi­ta­tion of the prin­ted page. We should embrace the fact that the web doesn’t have the same cons­traints, and design for this fle­xi­bi­lity. But first, we must “accept the ebb and flow of things.«

John Allsopp – A Dao of Web Design

Was ist Respon­sive Web­de­sign?

Eine opti­male Lösung zur Umset­zung einer Web­site für unter­schied­li­che Bedien­kon­zepte und End­ge­räte bie­tet das soge­nannte Respon­sive Web­de­sign. Eine nach die­sem Kon­zept erstellte Web­site passt sich dyna­misch auf die Dis­play-Größe und wei­tere Gerä­te­ei­gen­schaf­ten an und stellt die Seite für das jewei­lige Gerät in opti­ma­ler Weise dar.

Respon­sive Web­de­sign stellt eine aktu­elle Tech­nik zur Ver­fü­gung, die es ermög­licht mit Hilfe von HTML5 und CSS3 Media-Que­ries eine ein­heit­li­che und opti­mierte Anzei­gen von Inhal­ten einer Web­site gerä­te­über­grei­fend zu gewähr­leis­ten und somit eine gleich­blei­bende Benut­zer­freund­lich­keit zu bie­ten.

Bedeu­tung von Respon­sive Web­de­sign

Respon­sive Web­de­sign ist die Zukunft der moder­nen Web­seite. Respon­sive Web­de­sign ist kein Trend! Stu­dien zum Absatz mobi­ler End­ge­räte bele­gen eine ste­tige Zunahme der Ver­käufe von Tablets und Smart­pho­nes.

»Form fol­lows func­tion« – beim Respon­sive Web­de­sign fol­gen Funk­tion, Design und Inhalt der jewei­li­gen Bild­schirm­auf­lö­sung des ver­wen­de­ten Desk­tops, Tablet-Com­pu­ters oder Smart­pho­nes.

User Cent­red Design

Respon­sive Web­de­sign ist benut­zer­zen­trier­tes Design und passt sich dem Ver­hal­ten des Nut­zers an, und nicht wie gegen­wär­tig, der Nut­zer den meist starr kon­stru­ier­ten Lay­outs kon­ven­tio­nel­ler Web­sites und Online-Shops.

Vor­teile des Respon­sive Web­de­signs

Der stei­gende Markt­an­teil von Smart­pho­nes und Tablets wie iPhone und iPad erzwin­gen auch das Umden­ken beim Gestal­ten von Web­sei­ten. Wurde bis dato für eine Bild­schirm­auf­lö­sung von maxi­mal 1000px Breite auf dem Com­pu­ter- Desk­top opti­miert, muss heut­zu­tage auf eine Viel­zahl ver­schie­de­ner End­ge­räte Rück­sicht genom­men wer­den. Anwen­der grei­fen zuneh­mend mit Smart­pho­nes und Tablets aufs Inter­net zu.

Bei einer strik­ten Tren­nung von Mobil-, Tablet und Desk­top-Ver­sion der Web­site, also einer Web­site, die sich nicht dyna­misch anpasst, ent­steht ein erhöh­ter Pfle­ge­auf­wand von redak­tio­nel­lem Con­tent und Bild­ma­te­rial. Dazu kommt, dass die Web­site unter Umstän­den für zukünf­tige Tablet- oder Smart­phone-For­mate eine dritte oder vierte Ver­sion des Lay­outs benö­tigt.

Zusam­men­fas­send las­sen sich fol­gende Vor­teile benen­nen:

  • Unter­schied­li­che End­ge­räte und Nut­zer­grup­pen kön­nen opti­mal bedient wer­den
  • gerä­te­über­grei­fen­den Fle­xi­bi­li­tät
  • Kos­ten­ef­fi­zi­ent, da nicht meh­rere Ver­sio­nen einer Seite par­al­lel gepflegt wer­den müs­sen
  • Inhalte müs­sen nicht mehr­fach ange­legt wer­den, wovon beson­ders Web­sei­ten mit häu­fig wech­seln­dem redak­tio­nel­len Inhal­ten pro­fi­tie­ren
  • Zukunfts­si­cher, auch künf­tige Gerä­te­ge­ne­ra­tio­nen wer­den unter­stützt
  • Zeit­ge­mäß: Berück­sich­ti­gung der mas­siv zuneh­men­den Nut­zung von Smart­pho­nes und Tablet-Com­pu­tern wie iPhone, iPad und Android-Geräte
  • Opti­mie­run­gen für Geräte mit Touch­dis­plays

Ver­stärkte Nut­zung des Inter­nets über mobile End­ge­räte

Dank respon­si­ven Web­de­signs kön­nen unter­schied­li­che Nut­zer­grup­pen und End­ge­räte opti­mal bedient wer­den. In Zei­ten rasant wach­sen­der Absatz­zah­len von mobi­len End­ge­rä­ten und mas­siv zuneh­men­der Inter­net­nut­zung mit­tels Tablet-PCs und Smart­pho­nes bil­det Respon­sive Web­de­sign eine zeit­ge­mäße, gerä­te­über­grei­fende Kom­mu­ni­ka­ti­ons­stra­te­gie.

Opti­mie­rung für Smart­pho­nes und Tablet-Com­pu­ter mit Touch­dis­plays

Geräte mit Touch­steue­rung wer­den im klas­si­schen Web­de­sign nicht aus­rei­chend berück­sich­tigt. Navi­ga­ti­ons­ele­mente lie­gen zu nahe bei­ein­an­der, For­mu­lar­fel­der und But­tons sind zu klein um mit dem Fin­ger getrof­fen zu wer­den etc.

Mit­tels respon­si­vem Web­de­signs las­sen sich diese Schwach­stel­len kom­for­ta­bel lösen.

Fazit

Respon­sive Web­de­sign berück­sich­tigt die spe­zi­fi­schen Anfor­de­run­gen der unter­schied­li­chen End­ge­räte und opti­miert Struk­tur und Dar­stel­lung dyna­misch für den jewei­li­gen Gerä­te­ty­pen. Es bie­tet so stets das best­mög­li­che Nut­zer­er­leb­nis und senkt zugleich die Kos­ten für den Betrieb des Inter­net­auf­trit­tes.

Unsere Leis­tun­gen

  • Design und Kon­zep­tion respon­si­ver Web­sei­ten
  • Kon­zep­tion für Smart­pho­nes und Tablet-Com­pu­ter
  • Inter­ak­tive Pro­to­ty­pen
  • Gerä­te­über­grei­fende und auf­lö­sungs­ab­hän­gige Navi­ga­ti­ons­kon­zepte
  • Ent­wurf von Designs, die fle­xi­bel auf die Bild­schirm­grö­ßen von Desk­tops, Tablets oder Smart­pho­nes reagie­ren
  • Web­sites reak­ti­ons­fä­hig gestal­ten und für mobile Geräte opti­mie­ren
  • Opti­mie­rung spe­zi­ell für Touch-Devices
  • Web­ty­po­gra­fie: Opti­mie­rung der Les­bar­keit und Dar­stel­lung für unter­schied­li­che Gerä­te­klas­sen
  • reak­ti­ons­fä­hige Typo­gra­phie und Web­fonts
  • Kon­zep­tion und Lay­out für fle­xi­ble Ras­ter und Bild­grö­ßen