De steeds populairder wordende mobiele apparaten, hoe groter de pijn gevoeld tijdens het scrollen de meeste sites.Dat is waarom, sinds 2012, de webmaster werd gebruikt oplossing dat maakt het bekijken van de middelen op schermen met een lage resolutie comfortabeler - adaptieve lay-out.
huidige trend
Vandaag, ongeveer vijf miljard mensen in de wereld gebruik maken van mobiele telefoons, met een derde van hen hebben smartphones.Daarom wordt mobiel dataverkeer steeds belangrijker voor site-eigenaren.Waarschijnlijk zal een dergelijke bron van bezoekers in de tijd alleen maar toenemen.
Bots snel gereageerd op deze trend.Grote bedrijven "Yandex" en Google maakte significante veranderingen in de ranking algoritmen sites in de zoekresultaten, rekening houdend met de beschikbaarheid van adaptieve lay-out en design.Simpel gezegd, web-gebaseerde middelen die zijn geoptimaliseerd voor mobiele telefoons, smartphones en tablets, zal een voordeel ten opzichte van hun concurrenten.
definitie van adaptieve lay
Adaptive layout - een methode voor het creëren van een skelet webpagina, de locatie van de blokken te veranderen automatisch in overeenstemming met de schermresolutie van het apparaat waarop het wordt bekeken.Dat wil zeggen, deze aanpak gemaakt specifieke modellen voor verschillende machtigingen.Het wordt verkregen door het schrijven van een speciale CSS-faylov.Ranshe probleem enigszins anders opgelost.Ontwikkelaars moest veel meer "gebaren" te maken, het creëren vёrstku en het ontwerp van de basisversie van de site en doet hetzelfde voor de mobiel.Afhankelijk van het scherm van het apparaat waarop Internet project te bekijken met de bestaande mobiele platform, loopt de juiste versie van de site.
Deze aanpak is in vele opzichten niet meer gerechtvaardigd is, en de meeste webmasters niet stellen over het maken van een mobiele versie.Vervang nu een dergelijk bevel kwam adaptieve lay-out.Door het creëren van een raamwerk site met behulp van deze technologie, de web-meester concentreert al haar inspanningen op het creëren van een versie van het project, en bezoekers kunnen hetzelfde niveau van comfort moet het zien als een big-screen computer en een mobiele telefoon, smartphone of tablet.
Voordelen van adaptieve lay
Welke voordelen heeft de adaptieve lay-out van sites?Eerder werd opgemerkt dat het voordeel de correcte weergave van alle blokken van de pagina op elk apparaat.Het is ook een positief aspect van deze aanpak in de creatie van een sjabloon kan het tempo van de uitvoering van de wijzigingen die worden genoemd.Wat betekent dit?
Bij aanwezigheid op de plaats van de twee platforms vёrstku wijzigingen in de behoefte te implementeren in de eerste versie van het werk, en dan - in de mobiele.Als er wijzigingen in de code waren zeer aanzienlijk, kan het proces van het maken van deze veranderingen sterk vertraagd.Wanneer adaptieve opleggen werk op de site wordt uitgevoerd in een enkel bestand.Wijzigingen in de layout van de webpagina gelijkelijk binnenkort verschijnen in de productieversie en mobiel.
Het nadeel van deze aanpak een aantal webmasters genaamd de complexiteit van de uitvoering ervan.Maar met de komst van CSS 3 een template van adaptieve lay-out was zeer eenvoudig.Zelfs de meest ervaren webmasters kunnen uw site gemakkelijk te bekijken op een mobiel apparaat te maken.
principes en kenmerken van adaptieve lay
Welke principes liggen aan de basis van adaptieve lay-out in web design?
- Het gebruik van "rubber" type lay-out.
- "Rubber" beeld.
- Met behulp van de media queries (media-queries).
- De noodzaak om te denken aan mobiele apparaten met de aanvang van de lay-out.
Van deze fundamentele principes van deze methode van het maken van een sjabloon volgen de volgende functies adaptieve lay-out:
1. Ontwerp en creatie van de site ontwerp, rekening houdend met het werk op het hele spectrum van vergunningen: van mobiel naar displays breedbeeld.
2. Positionering met behulp van Cascading Style Sheets-technologie met de media queries, die verscheen in CSS 3.
3. Programmering aan de kant van zowel de client en server voor overdracht naar mobiele apparaten kleinere volume en de beeldresolutie.
belangrijk aspect, gezien het feit dat creëerde een aangepaste lay-out - resolutie matrix populaire elektronische apparaten.Een dergelijke aanpak in het ontwerp maakt surfen op het web op elk scherm is zeer comfortabel.Maar hoe weet je welke de stijlen moeten omvatten?
Waar vёrstku adaptieve lay-out beginnen?
meeste sites zijn zo gemaakt dat op de schermen van smartphones en tablets verschijnen schuifbalken die niet zo handig om te surfen, en het ontwerp en de lay-out van vele internet projecten gewoon "zweven".De websites gemaakt voor het leren van web design, bevat een groot aantal verschillende apparaten, schermresoluties, waaronder de kosten uitmaken van uw site.
Adaptive layout, waarvan voorbeelden vaak te vinden, heeft vele voordelen.Wat te onthouden in deze benadering van een pagina-indeling te maken?
begon te werken aan een sjabloon, is het belangrijk regelmatig te testen hoe goed de weergegeven inhoud en lay-out van de blokken op verschillende schermen.Om dit te doen, soms gewoon de breedte van het browservenster.File groottes krijgt media queries en verandert de locatie van de blokken, waardoor significante veranderingen.Een goed hulpmiddel voor het testen van de template adaptieve lay-out kan zijn sites die de schermen van mobiele apparaten van verschillende modellen na te bootsen.Deze diensten zullen zorgen voor gedetailleerde en evalueren hoe het eruit ziet in het ontwerp toont een verscheidenheid aan mobiele apparaten.
Alhoewel de techniek van het adaptieve layout is niet zo eenvoudig, zal de ontwikkeling vrucht binnenkort dragen.
