Best practices voor responsief webontwerp

door Bradley Nice, Content Manager bij ClickHelp.com - software documentatie tool

Google heeft officieel Responsive Web Design aanbevolen als voorkeursmethode voor het bouwen van mobiele websites. Als u een website of blog hebt, is het tijd om te overwegen over te schakelen naar responsief ontwerp in plaats van afzonderlijke mobiele en tabletvriendelijke websites te onderhouden.

Als het concept van Responsive Web Design (RWD) nieuw voor u is, zijn hier de veelgestelde vragen over deze techniek.

Waarom zou ik mijn website overschakelen naar RWD?

Uw website ziet er geweldig uit op het bureaublad, maar het is misschien niet waar als uw site wordt bekeken op een smartphone of tablet. Zodra u het ontwerp responsief maakt, ziet de website er op alle schermen goed (en leesbaar) uit.

Met Responsive Design kunt u één ontwerp maken en het past zich automatisch aan op basis van de schermgrootte van het mobiele apparaat. Deze aanpak biedt tal van voordelen:

  • Het bespaart tijd en geld omdat u geen afzonderlijke websites voor desktops en mobiele telefoons hoeft te onderhouden.
  • Responsive Design is goed voor de SEO van uw website (zoekranglijst), omdat elke pagina op uw site een enkele URL heeft en dus Google juice behouden blijft. U hoeft zich geen zorgen te maken over situaties waarin sommige sites naar uw mobiele site linken, terwijl andere naar uw desktopsite linken.
  • Uw Google Analytics-rapporten geven een beter beeld van het gebruik van uw site, omdat de gegevens van mobiele en desktopgebruikers worden geconsolideerd.
  • Hetzelfde zal gelden voor de statistieken voor sociaal delen (Facebook Likes, Tweets, + 1's), omdat de mobiele en desktopversies van uw webpagina's dezelfde URL hebben.
  • Responsieve ontwerpen zijn eenvoudiger te onderhouden omdat er geen componenten aan de serverzijde zijn. U hoeft alleen de onderliggende CSS van een pagina te wijzigen om het uiterlijk (of de lay-out) op een bepaald apparaat te wijzigen.

Wat moet ik weten om aan de slag te gaan met Responsive Design?

Responsive Design is pure HTML en CSS. U maakt regels in CSS die van stijl veranderen op basis van de schermgrootte van het apparaat van de gebruiker.

U kunt bijvoorbeeld een regel schrijven die zegt dat als de schermgrootte van een gebruiker kleiner is dan 320 pixels, de zijbalk niet wordt weergegeven of als de schermgrootte groter is dan 1920 pixels (breedbeeld-bureaublad), de lettergrootte van de body wordt vergroot tekst naar 15 px.

Hoe controleer ik of een bepaalde website Responsive Design gebruikt?

Dat is eenvoudig. Open die website in een willekeurige desktopbrowser en wijzig het formaat van de browser. Als de lay-out van de site verandert naarmate u de grootte wijzigt, reageert het ontwerp.

Als ik de Responsive Design-aanpak gebruik, werkt mijn website dan met oudere browsers?

Meestal ja. RWD gebruikt CSS3-mediaquery's en HTML5 (voor betere semantiek) die niet worden ondersteund in oudere versies van IE. Er zijn echter op JavaScript gebaseerde oplossingen - respond.js en bijvoorbeeld moderniseren - die de kracht van CSS3 en HTML5 naar oudere browsers, inclusief IE6, brengen.

Speelt Responsive Design mooi met advertentienetwerken zoals Google AdSense?

Als u advertenties op uw website gebruikt, moet u de indelingen zorgvuldig kiezen, omdat brede eenheden (zoals het leaderboard van 728 × 60 pixels) mogelijk niet op een mobiel scherm van 320 px passen. Ik gebruik liever standaard rechthoekige eenheden (zoals 300 × 250), omdat ze gemakkelijk op smartphoneschermen en breedbeelddesktops passen.

Er zijn duizenden mobiele apparaten. Welke schermresoluties moet mijn responsieve website ondersteunen?

Ik zou aanraden breekpunten in te stellen voor ten minste de volgende viewports in uw CSS3 Mediaqueries - 320 px (iPhone-landschap), 480 px (iPhone-portret), 600 px (Android-tablets), 768 px (iPad + ~ Galaxy Tabs) en 1024 px (iPad-landschap en desktops).

Hoe begin ik met Responsive Web Design? Goede tutorials?

Hier zijn online bronnen om u op weg te helpen:

Websites: Net Magazine, Smashing Magazine, CSS Tricks en Web Designer Wall

Videozelfstudies: YouTube, Netto's

Presentaties: PowerPoint Decks

Podcasts: Shop Talk, 5by5 Web Show en The Industry

Twitter: @RWD, @NetMag en @SmashingMag

Wat zijn de nadelen van het gebruik van Responsive Design?

  • Extra kilobytes naar uw webpagina omdat ze CSS-stijlen en JavaScript-bestanden moeten downloaden die anders niet nodig waren.
  • Afbeeldingen. U wilt geen afbeeldingen met een hogere resolutie op uw mobiele site weergeven, maar dat is moeilijk te bereiken met een responsief ontwerp (tenzij u gebruikmaakt van een tijdelijke oplossing op de server zoals Adaptive Images en Sencha.io).
  • Pogingen om een ​​responsieve laag toe te voegen aan uw bestaande website. Soms is het logischer om helemaal opnieuw te beginnen in plaats van uw bestaande website met vaste breedte vloeiend te maken.

Misschien ook interessant voor u: Responsieve lay-outs Gratis EBOOK

Fijne dag!

Bradley Nice,
Content Manager op ClickHelp.com - beste online documentatie-tool voor SaaS-leveranciers