Wat ass Responsive Design? (Explainer Video an Infografik)

reaktiounsfäeger Webdesign

Et huet e Joerzéngt gedauert fir reaktiounsfäeger Webdesign (RWD) zënter Mainstream ze goen De Cameron Adams huet fir d'éischt virgestallt d'Konzept. D'Iddi war genial - firwat kënne mir keng Site designen, déi dem Viewport vum Apparat upassen, op deem et gekuckt gëtt?

Wat ass Responsive Design?

Responsive Web Design (RWD) ass eng Webdesign Approche fir Handwierkssäiten z'ënnerstëtzen fir eng optimal Betragserfarung ze bidden - einfach Liesen an Navigatioun mat engem Minimum u Gréisst, Panning a Scrollen - an enger breeder Palette vun Apparater (vun Handyen op Desktop Computer) iwwerwaacht). E Site dee mat RWD entwéckelt ass passt de Layout un d'Betreiungsëmfeld mat fléissenden, proportionnéierte Gitter, flexibel Biller, an CSS3 Medienufroen, eng Erweiderung vun der @media Regel.

Wikipedia

An anere Wierder, Elementer wéi Biller kënnen ugepasst ginn wéi och de Layout vun dësen Elementer. Hei ass e Video deen erkläert wéi reaktiounsfäeger Design ass wéi och firwat Är Firma et soll implementéieren. Mir hu kierzlech den Highbridge Site reaktiounsfäeger ze sinn a schaffen elo un Martech Zone datselwecht ze maachen!

D'Methodologie fir e Site reaktiounsfäeg ze bauen ass e bësse langweileg well Dir musst eng Hierarchie zu Äre Stiler hunn déi op Basis vun der Gréisst vum Viewport organiséiert sinn.

Browser si selbstbewosst vun hirer Gréisst, sou datt se d'Stilblieder vun uewen no ënnen lueden, an déi uwendbar Stiler fir d'Gréisst vum Bildschierm froen. Dëst bedeit net datt Dir verschidde Styleblieder fir all Gréisstebildschierm designt, Dir musst just déi néideg Elementer verréckelen.

Mat enger mobiler éischt Mentalitéit operéieren ass de Baseline Standard haut. Best-in-class Marken denken net nëmmen drun, ob hire Site mobilfrëndlech ass, mee iwwer déi ganz Clientserfahrung.

Lucinda Duncalfe, monetär CEO

Hei ass eng Infografik vu Monetate déi potenziell Virdeeler illustréiert fir e reaktiounsfäegt Design fir verschidde Geräter ze kreéieren:

Reaktiounsfäeger Web Design Infographic

Wann Dir e reaktiounsfäege Site an Aktioun wëllt gesinn, weist Äert Google Sexualmoral Browser (ech gleewen datt Firefox déi selwecht Feature huet) fir Highbridge. Elo wielt Kuckt> Entwéckler> Entwéckler Tools vum Menu. Dëst lued e puer Tools am ënneschten Deel vum Browser. Klickt op déi kleng mobil Ikon ganz lénks vun der Entwéckler Tools Menübar.

reaktiounsfäeger-Testen-Chrom

Dir kënnt d'Navigatiounsoptiounen uewen benotze fir d'Vue vu Landschaft op Porträt z'änneren, oder souguer eng Zuel vu virprogramméierte Viewportgréissten auswielen. Dir musst vläicht d'Säit nei lueden, awer et ass dat coolst Instrument op der Welt fir Är reaktiounsfäeg Astellungen z'iwwerpréiwen a sécherzestellen datt Äre Site op all Apparate gutt ausgesäit!

3 Comments

  1. 1
  2. 2

    Villmools Merci Douglas fir dëse gutt erklärten Artikel. Ech muss domat averstanen obwuel op der Inhalter Säit vun Saachen. Fir déi meescht vun de Siten maachen mir e reaktiounsfäeger Layout net genuch. Mir brauchen reaktiounsfäeger Inhalt. Awer fir déi méi Basis Websäite wäerte mir sécher Äre gutt dokumentéierten Artikel benotze wéi Dir dëst handelt!

Wat denks du?

Dëse Site benotzt Akismet fir Spam ze reduzéieren. Léiert wéi Är Kommentarfaten veraarbecht ginn.