Wat is Responsive Design en hoe werkt Responsive Design?

Geplaatst op 01-09-2014 door Responsive Design is een websitetechniek die bij uitstek de beste techniek is om uw website geschikt te maken voor alle soorten pc-resoluties, tablets en smartphones. Al hoewel deze term veel gebruikt wordt is het niet voor iedereen duidelijk hoe deze techniek precies werkt en welke werkzaamheden er bij komen kijken.

In dit blogartikel zal ik responsive design in gemakkelijke en duidelijke taal uitleggen zodat ook lezers met weinig technische kennis van website technieken de werking van responsive design zullen begrijpen.

Wat is Responsive Design?

Responsive design is een websitetechniek waarbij de breedte en hoogte (resolutie) van de pc of mobiele media van de bezoeker continu wordt gemonitord en waarbij de website zich hierop live aanpast. Responsive design is een geweldige oplossing om uw website op elke pc en mobiele media volledig en goed zichtbaar te maken, ongeacht het systeem, de breedte van de monitor of ingestelde resolutie

Hoe werkt Responsive Design?

Een website bestaat uit diverse soorten bestanden. De bestanden met de meeste impact op het ontwerp zijn de HTML bestanden en de CSS bestanden. De HTML bestanden van de website bepalen de indeling en structuur. Probeer dit te visualiseren als de muren van een huis. De CSS bestanden bepalen de opmaak van de website. Dit kunt u zien de hoogte, breedte en lengte van de muren, maar ook de kleuren van de muren etc.

De samenwerking tussen de HTML bestanden en de CSS bestanden bepalen de uitstraling & look van de website.

Responsive Design HTML en CSS

Responsive Design speelt hierbij een tussenpersoon. Responsive Design meet de breedte en hoogte van het medium/apparaat waarmee de website wordt bekeken en geeft deze meting door aan de CSS bestanden. Via het CSS bestand kan dan worden bepaald welke afmetingen en kleuren er doorgegeven worden aan de HTML bestanden.



Zo kan bij een PC bepaald worden dat een onderdeel van de pagina, bijvoorbeeld een blok tekst, een breedte heeft van 750 pixels, maar bij een smartphone dit blok een breedte krijgt van 250 pixels. Bij dit proces kunnen alle opmaak aspecten veranderd worden. Hierbij kunt u denken aan kleur, breedte, hoogte, lettergrootte, achtergrondkleur, afbeeldingen, randen etc.

Welke werkzaamheden kom er kijken bij Responsive Design?

Bij de ontwikkeling van de website kan er gekeken worden voor welke mediums er rekening gehouden moeten worden. De ontwerper weet dan precies voor welke resoluties hij de opmaak moet regelen. Bij een smartphone bijvoorbeeld heb je te maken met 2 formaten, namelijk als de bezoeker de telefoon rechtop heeft (staand/portrait model) of in de breedte (landscape model). Dit geld ook voor de tablet.

Een overzicht van de meeste gebruikte resoluties waarvoor ontworpen wordt.

Responsive Design HTML en CSS

PC / Laptop

  • Standaardbreedte voor de pc 1024 pixels
  • Populaire resolutie voor laptops 1366 / 1440 / 1280 pixels (optioneel)
  • Fullscreen resolutie voor pc 1600 / 1680 / 1920 pixels (optioneel)

Tablet
  • Liggend model (landscape) 1024 pixels
  • Staand model (portrait) 768 pixels

Smartphones
  • Liggend model (landscape) 320 / 480 pixels
  • Staand model (portrait) 480 / 520 pixels


De ontwerper moet rekening houden met elk onderdeel van de site dat een andere opmaak vereist bij wijziging van de resolutie. Je kunt hierbij denken dat bijvoorbeeld een menu-item van de navigatie dus bijvoorbeeld 5 keer opgemaakt moet worden.

Indien het ontwerp van de site erg complex is en/of de website veel verschillende unieke pagina ontwerpen heeft zal dit veel impact hebben op de hoeveelheid uren die de ontwerp nodig heeft voor het project. Daarbij heeft de ontwerper ook toegang nodig tot deze mediums om de site te kunnen testen. Dit allemaal heeft impact op de grootte van het project.

Waarom is Responsive Design zo populair?

Voor webdesigners / ontwikkelaars is Responsive design de enige beschikbare techniek om op een goede manier de website op te maken voor alle resoluties en mediums. Daarom zal ook ten alle tijden deze term naar voren komen een verkoopgesprek of meeting.

Daarbij is het een gegeven feit dat de markt van tablets explosief is gegroeid de afgelopen jaren en het bezoek van websites op zowel tablet als op een smartphone ook flink is gestegen. Daarnaast is ook de techniek van PC & laptops flink verbeterd en worden er steeds meer verschillende resoluties aangehouden.

Om uw website optimaal te kunnen aanbieden aan uw bezoekers, voor pc, tablets en mobiel is deze techniek onontkoombaar. Het gebruik van internet is volop geïntegreerd in huidige cultuur en in de toekomst zal internet en techniek een nog grotere rol spelen in ons leven. Niet meegaan met deze techniek staat bijna gelijk in niet meegaan met de tijd. Zeker omdat uw toekomstige klanten en websitebezoekers wel meegaan met de tijd en techniek.

Welke Responsive Design resoluties moet u nemen?

Het is altijd verstandig eerst goed te kijken hoeveel bezoekers uw website momenteel heeft en vanaf welk medium uw bezoekers uw website bekijken. Want ook al is het verstandig deze techniek toe te passen op uw website, als u geen bezoekers heeft die gebruiken maken van deze techniek blijft het zonde van uw geld.

Met bezoekerstatistieken zoals Google Analytics of Piwik kan er heel nauwkeurig getraceerd worden welke medium en welke resoluties uw bezoekers gebruiken. Op basis van dit rapport kan er gekeken worden of er gelijk voor responsive design gekozen moet worden of dat het in combinatie moet met een marketingpakket die u helpt bezoekers aan te trekken. Dit klinkt wellicht als een verkoop praatje, maar het is echt zonde van uw geld als u deze investering plaatst zonder dat er gebruik van wordt gemaakt.

Laat u altijd goed adviseren over Responsive Design

Zoals in vorige paragraaf besproken is het altijd goed eerst onderzoek te doen maar ook te kijken naar uw doelgroep. Op basis van deze feiten is het maken van een keuze welke responsive design resoluties u wilt toepassen beter en meer verantwoord. Graag help ik uw met deze keuze.

Populair



Overige berichten

Nieuwsbrief aanmelden

* Verplichte velden

Een vrijblijvende offerte?

Heeft u vragen, wilt u een vrijblijvende offerte aanvragen of bent u op zoek naar vrijblijvend advies voor uw website en/of drukwerk? Dan kunt u te allen tijden contact met ons opnemen.
Timeless Design
Didamseweg 25c
7037 DJ (Loer)beek
Gemeente Montferland
T.A.V. Frank van der Heijden
Tel: 0316 - 2000 16
Mobiel 06 53541887
E-mail: info@timelessdesign.nl
naar
boven
Copyright © Timeless Design 2014 | Alle rechten voorbehouden   |   Privacy Verklaring   |   Cookie Verklaring