Hoe populairder mobiele apparaten worden, hoe ongemakkelijker scrollen op de meeste sites wordt gevoeld. Daarom gebruiken webmasters sinds 2012 een oplossing die het bekijken van bronnen op schermen met een lage resolutie comfortabeler maakt - adaptieve lay-out.
Moderne trend
Tegenwoordig gebruiken ongeveer vijf miljard mensen op aarde mobiele telefoons, waarvan een derde een smartphone heeft. Daarom wordt mobiel verkeer steeds belangrijker voor website-eigenaren. Het is aannemelijk dat zo'n bron van bezoekers in de loop van de tijd alleen maar zal groeien. Zoekmachines reageerden snel op deze trend. Grote bedrijven "Yandex" en Google hebben aanzienlijke wijzigingen aangebracht in hun algoritmen voor het rangschikken van sites in zoekresultaten, rekening houdend met de beschikbaarheid van adaptieve lay-out en ontwerp. Simpel gezegd, webbronnen die zijn geoptimaliseerd voor mobiele telefoons, smartphones en tablets zullen enig voordeel hebben ten opzichte van hun concurrenten.
Responsieve lay-outdefinitie
Adaptieve lay-out is een methode om een webpaginaframe te maken,automatisch de locatie van de blokken wijzigen in overeenstemming met de schermresolutie van het apparaat waarop het wordt bekeken. Dat wil zeggen dat met deze benadering afzonderlijke stijlen worden gemaakt voor verschillende resoluties. Dit effect wordt bereikt door speciale CSS-bestanden te schrijven.
Eerder werd het probleem een beetje anders opgelost. Ontwikkelaars moesten veel meer "lichaamsbewegingen" maken, de lay-out en het ontwerp van de hoofdversie van de site maken en hetzelfde doen voor de mobiele versie. Afhankelijk van het scherm van het apparaat waarop het internetproject met het beschikbare mobiele platform werd bekeken, werd de juiste versie van de site gelanceerd.
Deze aanpak rechtvaardigde zichzelf in veel opzichten niet, en de meeste webmasters zijn nooit begonnen met het maken van een mobiele versie. Nu is deze volgorde vervangen door adaptieve lay-out. Door met deze technologie een siteskelet te maken, concentreert de webmaster al zijn inspanningen op het creëren van één versie van het project, en bezoekers kunnen het met hetzelfde comfort bekijken, zowel op een groot computerscherm als op een mobiele telefoon, smartphone of tablet.
Voordelen van responsieve lay-out
Wat zijn de voordelen van een adaptieve website-indeling? Eerder werd al opgemerkt dat het voordeel is dat alle paginablokken op elk apparaat correct worden weergegeven. Een positief aspect van deze benadering bij het maken van een sjabloon is ook de snelheid waarmee wijzigingen worden doorgevoerd. Wat betekent dit?
Als de site twee platforms had, moesten de wijzigingen in de lay-out zijneerst implementeren in de werkende versie, en dan in de mobiele versie. Als de wijzigingen in de code behoorlijk significant waren, zou het proces om dergelijke wijzigingen aan te brengen lang kunnen duren. Met adaptieve lay-out worden werkzaamheden op de site in één bestand uitgevoerd. Wijzigingen in de lay-out van de webpagina zullen even snel worden doorgevoerd in zowel de productie- als de mobiele versie.
Het nadeel van deze aanpak noemen sommige webmasters de complexiteit van de implementatie. Maar met de komst van CSS 3 is het maken van een responsieve lay-outsjabloon vrij eenvoudig geworden. Zelfs onervaren webmasters kunnen hun site mobielvriendelijk maken.
Principes en kenmerken van adaptieve lay-out
Welke principes liggen ten grondslag aan de responsieve lay-outmethode in webdesign?
- Het type vloeiende lay-out gebruiken.
- "Rubber" afbeeldingen.
- Mediaquery's gebruiken (mediaquery's).
- De noodzaak om vanaf het begin van de lay-out na te denken over mobiele apparaten.
Van deze fundamentele principes van deze methode voor het maken van een sjabloon, volgen de volgende kenmerken van adaptieve lay-out:
1. Ontwerpen en creëren van een website-ontwerp rekening houdend met het werk aan het hele scala aan resoluties: van mobiel tot breedbeeldschermen.
2. Lay-out met trapsgewijze stijlbladen met behulp van mediaquerytechnologie geïntroduceerd in CSS 3.
3. Programmering aan de zijkant van zowel de client als de server om afbeeldingen te verzenden naar mobiele apparaten met een kleiner formaat en een kleinere resolutie.
Een belangrijk aspect, rekening houdend met welke adaptieve lay-out wordt gecreëerd, isresolutiematrix van populaire elektronische apparaten. Deze benadering van ontwerpontwikkeling maakt surfen op het web op elk scherm zeer comfortabel. Maar hoe weet je welke je in stijlen moet opnemen?
Waar te beginnen met een responsieve lay-out?
De meeste websites zijn zo gemaakt dat er schuifbalken verschijnen op de schermen van smartphones en tablets, die niet zo handig zijn om te surfen, en het ontwerp en de lay-out van veel internetprojecten "zweven". Websites die zijn gemaakt voor het aanleren van webdesign, bevatten verschillende schermresoluties van verschillende apparaten, waaronder het de moeite waard is om de pagina's van uw site in te delen.
Adaptieve lay-out, waarvan voorbeelden vrij vaak te vinden zijn, heeft veel voordelen. Waar moet u op letten bij het op deze manier benaderen van de paginalay-out?
Als je aan een sjabloon begint te werken, is het belangrijk om periodiek te testen hoe goed de inhouds- en lay-outblokken op verschillende schermen worden weergegeven. Om dit te doen, is het soms voldoende om de breedte van het browservenster te wijzigen. Het stijlbestand ontvangt de mediaquery en herpositioneert de blokken, waardoor belangrijke wijzigingen worden aangebracht. Een goed hulpmiddel voor het testen van een responsieve lay-outsjabloon kunnen sites zijn die de schermen van mobiele apparaten van verschillende modellen nabootsen. Met dergelijke services kunt u zorgvuldig overwegen en evalueren hoe het ontwerp eruitziet op de schermen van verschillende mobiele apparaten.
Hoewel de technologie van zo'n responsieve lay-out niet zo eenvoudig is, zal het beheersen ervan zeer snel vruchten afwerpen.
