Adaptieve lay-out voor websites

De steeds populairder wordende mobiele apparaten, hoe groter het ongemak gevoeld tijdens het scrollen de meeste sites. Dat is de reden waarom, sinds 2012, is uitgegroeid tot webmasters gebruiken oplossing die het bekijken van de middelen maakt met weinig meer comfortabele resolutie schermen - adaptieve lay-out.

De huidige trend

Vandaag de dag, ongeveer vijf miljard mensen in de wereld gebruik van mobiele telefoons, met een derde van hen hebben smartphones. Daarom wordt het mobiele dataverkeer steeds belangrijker voor website-eigenaren. Waarschijnlijk zal een dergelijke bron van de bezoekers de loop der tijd alleen maar toenemen.

Zoekmachines snel gereageerd op deze trend. Grote bedrijven "Yandex" en Google aanzienlijke veranderingen in hun algoritmen voor de rangschikking van websites in de zoekresultaten, waarbij rekening wordt gehouden met de beschikbaarheid van adaptieve lay-out en design. Simpel gezegd, web-based middelen die zijn geoptimaliseerd voor mobiele telefoons, smartphones en tablets, zal een voordeel ten opzichte van hun concurrenten.

Definitie van adaptieve lay-out

Adaptive lay-out - een methode voor het creëren van een kader van webpagina's, automatisch de locatie van de blokken te veranderen in overeenstemming met de resolutie van het scherm apparaat waarop het wordt bekeken. Dat wil zeggen, met deze aanpak je aparte stijlen voor een verscheidenheid van permissies. Dit effect wordt bereikt door speciale schrijven CSS-bestanden. het probleem enigszins anders voor opgelost. Ontwikkelaars moesten veel meer "gebaren" te maken, het creëren van vorstku en het ontwerp van de basisversie van de site en dat geldt ook voor het maken van een mobiel. Afhankelijk van het apparaat scherm, dat een Internet project is te bekijken met de bestaande mobiele platform, loopt de juiste versie van de site.

Deze aanpak is in veel opzichten niet meer gerechtvaardigd is, en de meeste webmasters niet ingesteld over het maken van een mobiele versie. Vervang nu een dergelijk bevel kwam adaptieve lay-out. Bij het maken van een site kader met behulp van deze technologie, de webmaster is het concentreren van al haar inspanningen op het creëren van een versie van het project, en bezoekers kunnen hetzelfde niveau van comfort hebben, zien het als een groot computerscherm en op uw mobiele telefoon, smartphone of tablet.

Voordelen van adaptieve lay-out

Wat zijn de voordelen van een adaptieve lay-sites? Eerder werd opgemerkt dat het voordeel is 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 de snelheid van het doorvoeren van veranderingen worden genoemd. Wat betekent het?


Als er voor het eerst werd toegepast op de plaats van de twee platforms vorstku gemaakt om de vereiste in de werkende versie veranderingen, en na - in de mobiele. Als er wijzigingen in de code vrij groot waren, kon het proces voor het maken van dergelijke veranderingen sterk vertraagd. Wanneer adaptieve vorstke werk op de site in een enkel bestand wordt uitgevoerd. Wijzigingen in het web pagina-indeling hetzelfde zal zijn binnenkort verschijnen als in een werkende versie, en mobiel.

Het nadeel van deze aanpak, een aantal webmasters genaamd de complexiteit van de uitvoering ervan. Maar met de komst van CSS 3 tot een adaptieve lay-sjabloon maken was zeer eenvoudig. Zelfs de meest ervaren webmasters kunnen uw site gemakkelijk te bekijken op een mobiel apparaat te maken.

De principes en kenmerken adaptieve lay-out

Welke principes ten grondslag liggen aan de methode van adaptieve lay-out in web design?

- Het gebruik van de "rubber" type lay-out.

- "rubber" beeld.

- Gebruik media queries (media-query's).

- De noodzaak om te denken aan mobiele apparaten met de aanvang van de lay-out.

Uit deze uitgangspunten van deze methode van het creëren van een template afgeleid adaptieve lay-out volgende kenmerken:

1. Ontwerp en productie van de site ontwerp, rekening houdend met het werk op het hele scala aan resoluties: van mobiel naar grootformaat displays.

2. plaatsen met behulp van cascading style sheets met media queries met behulp van technologie die verscheen in CSS 3.

3. programmering aan de zijde van zowel client en server voor het verzenden van beelden naar mobiele inrichtingen van kleinere grootte en resolutie.

Een belangrijk aspect, met het oog waarop creëert een adaptieve lay-out - resolutie matrix populaire elektronische apparaten. Een dergelijke benadering in het ontwerp zorgt ervoor dat surfen op het web op elk scherm is zeer comfortabel. Maar hoe weet je welke de moeite waard in stijlen op te nemen zijn?

Aan de slag vorstku adaptieve lay-out?

De meeste sites zijn zo gemaakt dat in de smartphone en tablet-schermen verschijnen schuifbalken die niet zo makkelijk om te surfen, en het ontwerp en de lay-out van veel internet projecten gewoon "float". Op websites, gemaakt om web design te leren, bevat een verscheidenheid aan schermresoluties van de verschillende apparaten, waardoor de gedrukte pagina's van uw site draagt.
Adaptieve lay-out, waarvan voorbeelden heel vaak kan worden gevonden, heeft vele voordelen. Wat te onthouden met deze aanpak tot de creatie van een pagina-indeling?

Aan de slag met de template, is het belangrijk periodiek hoe goed het testen van de weergegeven inhoud en lay-out van de blokken op verschillende schermen. Om dit te doen, soms verander eenvoudig de breedte van het browservenster. Bestand met de stijlen van de ontvangen media query en wijzigen van de locatie van de blokken, waardoor belangrijke wijzigingen. Een goed hulpmiddel om de adaptieve layout template te testen zou kunnen zijn sites die de schermen van mobiele apparaten van verschillende modellen na te bootsen. Deze diensten zullen toelaten om zorgvuldig te overwegen en te evalueren hoe het ontwerp eruit ziet op de displays van een verscheidenheid aan mobiele apparaten.

Hoewel de technologie van de adaptieve lay-out is niet zo eenvoudig, zal de ontwikkeling ervan vruchten zeer binnenkort dragen.