Responsive

RWD, responsive web design, gaat over het vormgeven voor de vele soorten beeldschermen. Bij Technisch ontwerp staan al een aantal voorbeelden van apparatuur waarmee websites bekeken worden.

Tegenwoordig hebben ontwerpers rekening te houden

  • met beeldschermen van beamers, laptops, tablets, smartphones, smartwatches, digitale-tv en wat er nog meer ontwikkeld wordt
  • met een keur aan browsers en aanverwante software die broncode vertaalt naar bruikbaar beeld; en de mogelijkheid biedt tot interactieve besturing door gebruikers
  • met de afmetingen van verschillende papierformaten voor (nog steeds gewenst) drukwerk
  • met dikke-vinger bediening op tablets en smartphones.

Responsive design komt er op neer dat voor verschillende schermafmetingen verschillende stijlen worden gedefinieerd. De verschillende stijlen zijn gekoppeld aan onderscheidende voorwaarden. De belangrijkste voorwaarde is de breedte van het beeldscherm waar een site op wordt bekeken.
Een andere veel voorkomende voorwaarde is een stijldefinitie voor websites wanneer die worden geprint.

Layout

Op een klein scherm past minder dan op een groot scherm. Logisch. Niet alles kan zomaar verkleind worden. Denk bijvoorbeeld aan de leesbaarheid van teksten. Dat wordt dus kiezen. Wat laat je zien op een klein scherm. En in welke volgorde.

In principe kan je schalen. Het draait vooral om de breedte.
Door een grid te maken van kolommen die samen 100% breed zijn, is de breedte schaalbaar. Totdat de inhoud niet meer in de kolommen past. Of te klein (onleesbaar) geschaald wordt. Dan komen de kolommen onder elkaar met een breedte van 100%.

Navigatie

Een menu moet overzicht bieden.

Afbeeldingen

tekst

CSS

Belangrijke breekpunten zijn viewpoints van 992px en 600px breed.

Testen

Op ProtoFluid kan je jouw ontwerpen testen. Geef op welke url je wilt bekijken en blader door de verschillende schermafmetingen.
Over de vormgeving van deze site ben ik wel tevreden. Maar dat terzijde. 😉

Kijk verder:

  • In Responsive design staat specifieke informatie voor WordPress themes.
  • https://www.w3schools.com/css/css_rwd_intro.asp