Bent u de kudde of leidt u de kudde?
3 juli 2015
Google Analytics, wat is dat?
16 juli 2015

Responsive, adaptive of mobiel

Veel van onze (nieuwe) opdrachtgevers hebben een adaptive website in plaats van een responsive design. Als je dan aangeeft dat het niet responsive is zijn een hoop mensen de kluts kwijt. Daarom ben ik eens op zoek gegaan naar een duidelijk antwoord hierop, tot mijn verbazing was ik er na 10-15 artikelen nog niet helemaal over uit wat het beste antwoord er nou op was. Ik heb toen besloten om het voor mezelf op een rijtje te zetten en gelijktijdig er een mooi artikel over te schrijven!

Maar mijn website is toch al responsive?

Om responsive en adaptive goed uit te kunnen leggen moet eerst het verschil tussen fixed en fluid worden uitgelegd.

Fixed of fluid?

Een fixed ook wel static genoemd is zoals de naam vermoed statisch. Dit betekent dus dat de website niet mee schaalt op smartphones.
een fluid ook wel liquid genoemd is gemaakt met percentages. Daardoor schaalt het wel allemaal netjes mee op verschillende schermen.

Responsive design

Binnen een responsive design word gebruikt gemaakt van het fluid principe. Bijvoorbeeld “deze afbeelding is 25% van de totale breedte.” Als je scherm dan 1200pixels breed is dan is de afbeelding dus 300pixels. Mocht je scherm een smartphone zijn dan is het meestal 320pixels (staand) dus is de afbeelding dan 80pixels breed.
Na verloop van tijd en je krijgt teveel afbeeldingen op de pagina verdwijnt op een klein scherm hierdoor ook de tekst, om dit te voorkomen zijn er zogenaamde breeklijnen ingesteld. Op deze breekpunten kunnen ontwerpers gaan “schuiven” met de verschillende elementen. Daardoor is de website nog mobiel vriendelijk. Wilt u een goed voorbeeld van een mooi responsive design zien? Lees dan deze blog verder via uw mobiele device (scan de code)
getCode

Adaptive design

Er zijn twee belangrijke punten die verschillen bij een adaptive design ten opzicht van een responsive design.
Een adaptive design vloeit niet mee met het scherm net zoals een responsive design. Een adaptive design schaalt in sprongen. Het grote verschil:

  • Een responsive design heeft breekpunten om de veranderingen door te voeren, maar het schaalt ook gelijktijdig tussen de verschillende breekpunten.
  • Een adaptive design werkt ook met breekpunten, maar schaalt niet verder en het blijft dus tussen die breekpunten hangen.

Om dit heel duidelijk te kunnen zien kunt u eens naar Liquidapsive.com gaan. Daar is de mogelijkheid om rechts bovenin te kunnen wisselen tussen responsive, adaptive, static en liquid. Verkleint u op hetzelfde moment de browser of zit u mobiel, dan kunt u de verschillen goed zien.

Mobiele website

Dan is er ook altijd nog de optie om een losse website te maken voor mobiel, maar is dat nog wel slim tegenwoordig?

  • Het kost meer tijd om te onderhouden
  • het kost meer om het te laten ontwikkelen
  • Het kost meer moeite om alles bij te houden

Tegenwoordig kan elk gerenommeerd webdevelopment bureau een goeie responsive website neerzetten!

 Ik heb toch al een mobiele website?

Mocht u meer informatie willen neem gerust contact op met ons team!
Hieronder nog een klein interessant filmpje over responsive en adaptive!

[youtube id=”T6MCkGWSXa0″ mode=”normal” autoplay=”no”] 

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *