Responsiv nettside

Et responsivt nettsted ( RWD , engelsk responsivt webdesign  : responsivt webdesign ) er et nettsted der design har som mål å bruke forskjellige prinsipper og teknikker for å gi en komfortabel konsultasjon på skjermer i veldig forskjellige størrelser. Brukeren kan dermed konsultere det samme nettstedet gjennom et bredt spekter av enheter (dataskjermer, smarttelefon , nettbrett, TV, etc.) med samme visuelle komfort og uten å måtte bruke horisontal rulling eller zooming inn / ut på berøringsenhetene inkludert, manipulasjoner som noen ganger kan forringe brukeropplevelsen , både lesing og navigering. Et responsivt nettsted er et eksempel på grensesnittets plastisitet .

Prinsipp

Begrepet reaktivt nett tenker nytt over måten å designe nettleseruter på, siden det ikke lenger er et spørsmål om å designe så mange ruter som det er familier med terminaler, men å designe et reaktivt grensesnitt. Dermed dupliseres ikke informasjonskildene og de tekniske basene. Dette genererer stordriftsfordeler ved utforming og vedlikehold av nettsteder.

Hovedkomponenter

Et nettsted designet etter RWD-prinsippet bruker CSS3 mediespørringsteknologi , en utvidelse av regelen for @mediaå tilpasse oppsettet til konsultasjonsmiljøet takket være et flytende rutenett der det forskjellige innholdet på siden er ordnet.

Teknisk

Konseptet med RWD, som beskrevet av Ethan Marcotte, er basert på de tre tekniske elementene nevnt ovenfor.

Hvis mediespørsmål ofte blir fremmet som det viktigste tekniske elementet i responsiv webdesign, for Marcotte E., brukes de bare til å gjøre noen endringer i grensesnittet når bruken av flytende nett ikke gjør det mulig å løse alle spørsmål knyttet til produkttilpasningsevne.

Denne “hellige treenigheten”, som Raphaël Goetter kaller det, blir noen ganger kritisert, noen Tatt i betraktning at væskegitteret ikke er nødvendig for å ha et helt reaktivt produkt.

For å lette opprettelsen av reaktive modeller på nettet, og dermed spare tid, er det mange rammer innen responsiv CSS ( Bootstrap , Foundation, Gumby, Skeleton ...).

Design og tilnærminger

Konseptet med RWD kommer med spredning av nettsteds konsultasjonsterminaler. Det er to forskjellige tilnærminger til responsivt nettstedsdesign som du bør huske på.

Responsiv nedbrytning

Fra og med desktopversjonen av nettstedet blir visse elementer som utgjør websiden gradvis omformatert etter hvert som skjermbredden avtar, når de ikke bare fjernes. Det er et spørsmål om å tilpasse designet til den laveste definisjonen på skjermen. Det hyppigste og mest talende tilfellet er byttet fra et nettsted med flere kolonner i stasjonær versjon, til bare en i mobilversjon.

Noen ganger settes det spørsmålstegn ved denne metoden i webdesignersamfunnet, siden en smarttelefon i virkeligheten vil laste inn desktopversjonen av nettstedet og mobilversjonen, og derfor laste ned unødvendige stildata og bilder som kan være tunge fra et mobilnettverk.

Mobil først (første mobil)

Begrepet mobil først kan betraktes som en tenkemåte der konstruksjonen av et ergonomisk grensesnitt for mobile terminaler vil være favorisert før det etableres ergonomi for en " stasjonær  " terminal  . Denne tanken tar sikte på å forbedre brukeropplevelsen (UX).

Utviklingen av et ergonomisk grensesnitt under begrensning av et lite visningsrom tvinger til å rense så mye som mulig elementene som er synlige for sluttbrukeren. En trend som vi finner mer og mer i ergonomien til nettgrensesnitt.

Denne tanken favoriseres i økende grad av verktøy beregnet på oppretting av nettsteder. For eksempel er Wordpress og Drupal CMS designet for å integrere dette " mobile first  " -alternativet  . Den konstante økningen i salget av "  smart tilkoblede enheter  " (PC, smarttelefon og nettbrett) har økt interessen for å produsere RWD-modeller for de fleste innholdsstyringsverktøy . Joomla CMS ! tilbyr også designmodeller som integrerer den responsive dimensjonen.

For å gå videre integrerer nye innholdsstyringssystemer " responsiv webdesign " i designet. Noen CMS som Rubedo integrerer innbyggingssystemer ved hjelp av Fluid Grids og tillater (takket være Media Queries) å definere elementene på sidene som skal vises i henhold til media ved hjelp av enkle avkrysningsruter.

Variasjoner

Det responsive webdesignet kan brukes til andre bruksområder på nettstedet. Alt som bruker webteknologier kan betraktes som responsivt. Det er således mulig å designe responsive HTML-e-poster, responsive mobile HTML5-applikasjoner eller Facebook Responsive applikasjoner .

Merknader og referanser

  1. “  responsive website  ” , Le Grand Dictionnaire terminologique , Office québécois de la langue française (åpnet 6. november 2019 ) .
  2. "  responsive web design  " , Le Grand Dictionnaire terminologique , Office québécois de la langue française (åpnet 6. november 2019 ) .
  3. (i) Zoe Nick Pettit , "  Beginner's Guide to Responsive Web Design  " , TeamTreehouse.com blogg,8. august 2012.
  4. (in) Zoe Mickley Gillenwater , "  Crafting quality media queries  " ,21. oktober 2011.
  5. (in) "  Mobile Web, introduksjon og ordliste  " , Alsacréations,15. oktober 2012.
  6. W3C @media regel .
  7. (en) Ethan Marcotte , "  Fluid Grids  " , A List Apart,3. mars 2009.
  8. Marcotte E., Responsive Web Design, A Book Apart , Eyrolles, Paris, 2 nd  utgave, 2012.
  9. Marcotte E., Responsive Web Design, A Book Apart, Eyrolles, Paris, 2 nd  edition, 2012. s. 64.
  10. GOETTER R., Responsive Web Design, Alsacréations, tilgjengelig på: http://www.alsacreations.com/livres/lire/1320-responsive-web-design.html .
  11. https://wordpress.org/mobile/
  12. (in) "  Mobile for Drupal 8  "buytaert.net , Dries Buytaert ,24. oktober 2011(åpnet 8. september 2020 ) .
  13. Arnaud Lemercier , "  Responsivt webdesign: Andre bruksområder  " ,31. desember 2012.