Respondo

Responsive webdesign

responsive design image

Respondo is een bedacht design welke een vaste breedte heeft. Je bent waarschijnlijk gewend om op deze manier websites te maken. Door middel van de volgende tutorial gaan we hier een fluid design van maken. Dat wil zeggen dat de site dan over de gehele breedte van het beeldscherm van de gebruiker te zien is. Daardoor wordt de site dus beter voor mobiele apparaten.

Omdat voor elkaar te krijgen zullen we nog wel een aantal aanpassingen moeten doen. Dit om er voor te zorgen dat de afbeelding en teksten niet in elkaar gedrukt worden en daardoor nog steeds slecht leesbaar zijn voor op een mobiel apparaat. Dit gaan we doen door middel van zo gehete Media Queries. Doormee bepaald de browser zelf de afmetingen van het scherm waarop de site weergegeven wordt. De browser ziet daardoor dus zelf of je apparaat een desktop, tablet of mobiel is.

Daarnaast moeten we ervoor zorgen het menu voor mobiele gebruikers groter is dan hij nu is. We gaan het menu dan onder elkaar plaatsen in plaats van naast elkaar. Daarnaast worden de knoppen wat groter zodat mobiele gebruikers beter op de knoppen kunnen drukken. Niets is zo frustrerend om op een mobiel steeds in te moeten zoomen omdat een knop te klein is om op te drukken.