Ontwerpen voor web en tablets - Responsive Design

• Mei 4, 2024

De term Responsive loopt al een tijdje voorop, maar wat betekent dit precies? Het internet is in de loop der jaren sterk veranderd, van een voornamelijk op tekst gebaseerd platform naar een interactieve, boeiende, multi-media en multi-device omgeving.

Webpagina's zijn de afgelopen tien jaar gewijzigd om de verbeteringen aan te brengen in het internet en de apparaten die we gebruiken om het te bekijken. Over apparaten gesproken, we hebben verschillende soorten om uit te kiezen, waaronder computers, mini-computers, tablets en smartphones. Naarmate het aantal apparaten en hun variaties toenemen, wordt een probleem duidelijk. Elk apparaat en elke variant van een apparaat heeft zijn eigen schermgrootte.

Toen we alleen websites voor desktop- en laptopcomputers moesten ontwerpen, was onze belangrijkste overweging hoe we ervoor konden zorgen dat de webpagina hetzelfde weergaf, ongeacht de computer of webbrowser. Het antwoord was om te ontwerpen voor de beste webbrowsers en de meest voorkomende schermresoluties. Dat werkte voor een korte tijd. Een ander probleem werd duidelijk toen deze parameters bleven veranderen. Het schermformaat voor mijn eerste computer was 800 x 600 en ik vond het sowieso geweldig. Toen werd 1024 x 800 de norm. Nu zijn computers gegroeid tot 27 inch en groter. Dus de doelresolutie voor een website bleef veranderen.

Net toen we begonnen te genieten van het ontwerpen voor deze grotere schermen, nam de populariteit van de smartphone en tablet enorm toe, met hun coole apps maar kleinere schermen. Er wordt zelfs voorspeld dat smartphones en tabellen vaker dan computers zullen worden gebruikt om het web binnen enkele jaren te bekijken. Aanvankelijk waren er slechts enkele mobiele apparaten. Dus begonnen we met het ontwerpen van zowel een hoofdwebsite voor de computergebruiker als een tweede site voor de mobiele gebruiker. Maar dit loste het probleem niet volledig op, omdat we nog steeds aan het ontwerpen waren voor indelingen met een vaste breedte.

Nu kunt u er niet vanuit gaan welk apparaat de kijker zal gebruiken om uw website te bekijken. Ontwerpen voor bepaalde vaste schermformaten is dus niet langer het beste antwoord op het probleem. We hebben een manier nodig om de schermgrootte van het apparaat van de gebruiker te bepalen en de webpagina dienovereenkomstig weer te geven. Vandaar een responsief webontwerp, dat CSS gebruikt om de schermbreedte te bepalen en om een ​​webpagina naar behoefte weer te geven. Dit stelt ons in staat om slechts één website te hebben die indien nodig in meerdere versies verandert.

Video-Instructies: Responsive Web-App Design PostelOntwerpen (Mei 2024).