Standaard afmetingen plaatsen: kenmerken, eisen en aanbevelingen

Technologische ontwikkeling van websites - een zeer veelzijdige proces. Maar alle stadia kunnen worden onderverdeeld in twee onderdelen - een functioneel en een buitenmantel. Of, zoals in het medium webmaster Beg End en Front End respectievelijk. Mensen die hun websites in web development studio's gekocht, vaak naïef zijn van mening dat het noodzakelijk is om alleen richten op functioneel, en het zal de juiste beslissing te zijn. Maar dit is het geval in een zeer, zeer zeldzame gevallen, meestal voor start-ups van projecten in het stadium van beta-testen. De rest van de grafische vormgeving en de gebruikersinterface zijn gewoon verplicht te voldoen aan web development standaarden en comfortabel zijn.

Een eerste pijler van tegenover de interfaceontwerper of ontwerper - de breedte van de site layout. Immers, is het noodzakelijk om interfaces te trekken voor haar. Intuïtief zijn er twee benaderingen - hetzij afzonderlijke lay-outs te maken voor elk van de populaire schermresoluties, of u kunt een versie van de site voor alle kaarten te maken. Beide opties zou verkeerd zijn, maar eerst iets anders.

Standaard breedte in pixels voor de site die u ooit nodig zult hebben

Voorafgaand aan de ontwikkeling van adaptieve lay-out massa fenomeen is de ontwikkeling van een site met duizenden pixels breed. Dit cijfer werd gekozen om een eenvoudige reden - dat de site op een scherm werd geplaatst. En er is een zekere logica, maar laten we aannemen dat een persoon is nog minstens HD-monitor op het bureaublad. In dit geval zal uw lay-out kleine strip lijken in het midden van het scherm, waar alles is gegoten in een stapel, en aan de zijkanten van de enorme non-ruimte. Laten we nu eens aannemen dat een persoon kwam om uw website van een tablet met een scherm van 800 pixels breed en wordt gecontroleerd in de instellingen "Laat de website van de volledige versie." In dit geval, uw website zal ook worden onjuist weergegeven, zoals gewoon niet passen in het scherm.

Uit deze overwegingen kunnen we concluderen dat een vaste breedte voor de lay-out, we passen gewoon niet en je wilt naar een andere weg te vinden. We kijken even naar het idee van een afzonderlijke lay-out voor elke breedte van het scherm.

Lay-outs voor alle gelegenheden

Als je hebt gekozen als een strategie om lay-outs voor alle schermformaten beschikbaar zijn op de markt, dan zal uw site de meest unieke in het internet. Immers, vandaag is het gewoon onmogelijk om het hele scala van hulpmiddelen aan de orde in een poging om een exacte instelling voor elke optie te maken. Maar als u zich richten op de meest populaire beeldscherm resolutie en de apparaten, het idee is goed. Het enige nadeel - de financiële kosten. Immers, als de design interface designer en programmeur zullen worden gedwongen om 5 of 6 keer om hetzelfde werk uit te voeren, zal het project onevenredig kost oorspronkelijk geplant tegen een betaalbare prijs.

Daarom beschikken over een overvloed aan versies voor verschillende schermen kan zijn, behalve dat de sites-odnostranichniki waarvan het doel - om een product te verkopen en zorg ervoor dat het goed te doen. Nou, als je niet een van die Landing, een multi-site, het staat om verder te redeneren.

De meest populaire formaten van de sites

Een compromis tussen de twee uitersten is een tekening van de opmaak van drie- of vier beeldformaten. Onder hen, moet men een lay-out voor mobiele apparaten. De rest moeten worden aangepast voor de kleine, middelgrote en grote desktop scherm. Hoe de breedte van de site kiezen? Hieronder presenteren we HotLog dienst statistieken voor mei 2017, die de verdeling van de populariteit van de verschillende schermresolutie van het apparaat, evenals de dynamiek van verandering in deze indicator laat zien.

Uit de tabel is het mogelijk om te leren hoe de grootte van de site die u wilt gebruiken te bepalen. Daarnaast kan worden geconcludeerd dat de meest voorkomende vorm van vandaag is het scherm in 1366 met 768 punten. Deze schermen zijn geïnstalleerd in een budget laptop, zodat hun populariteit is natuurlijk. De volgende meest populaire is een Full HD-monitor, dat is de gouden standaard voor films, games, en dus aan de site lay-outs te maken. Verder in de tabel zien we toestaan mobiele apparaten 360 x 640 pixels, alsmede verschillende uitvoeringsvormen van desktop- en mobiele schermen daarna.

ontwerp lay-out

Dus, na analyse van de statistieken, kunnen we concluderen dat de optimale breedte van de site heeft 4 verschillende varianten;

1. Versie laptops met 1366 pixels breed.
2. Full HD-versie.
3. 800 pixels in de breedte afmeting lay-out voor weergave op kleine desktop monitoren.
4. Mobiele versie van de site - 360 pixels in de breedte.

Stel dat we besloten wat je wilt om de grootte van de gegenereerde source code te gebruiken voor de site. Maar een dergelijk project zou nog steeds kostbaar. Dus overwegen meer opties, dit keer zonder het gebruik van een vaste breedte.

Maak een flexibele indeling

Er is een alternatieve benadering die we nodig hebben alleen maar aan te passen voor de minimale grootte van het scherm, en de enorme omvang van de locaties zal worden gevraagd procent. In dit geval is de interface-elementen zoals menu's, knoppen en logo's kunnen worden gedefinieerd in absolute termen, gericht op de minimale grootte van de breedte van het scherm in pixels. Blokkeert de inhoud daarentegen, wordt gestrekt volgens de gespecificeerde procent van de breedte van het schermgebied. Deze aanpak maakt het mogelijk niet de grootte van de site op te sporen als beperkingen voor de ontwerper en het talent om deze nuance te verslaan.

Wat is de gulden snede, en hoe de webpagina's om de lay-out te gebruiken?

Zelfs in de Renaissance vele architecten en kunstenaars probeerde zijn creaties van de perfecte vorm en verhouding geven. Voor antwoorden op vragen over de gevolgen van zulke proporties, wendden zij zich tot de koningin van alle wetenschappen - wiskunde.

Sinds de dagen van de oudheid werd uitgevonden door de verhouding waarin ons oog ziet als de meest natuurlijke en elegant, want het is alomtegenwoordig in de natuur. Ontdekker van de formule van deze verhouding was een getalenteerde Griekse architect genoemd Phidias. Het is berekend dat als de meeste van de verhoudingen betreft vanaf geheel verschaft een groter dan dit aandeel zal slecht uit. Maar in dit geval, als je wilt asymmetrisch object te verdelen. Dit aandeel werd later belde de gulden snede, dat nog steeds niet het belang ervan overschatten voor de wereld cultuurhistorie.

Laten we terug gaan naar web design

Het is heel simpel - met behulp van de gulden snede, kunt u pagina's die het meest een lust voor het menselijk oog zal zijn ontwerpen. Berekend volgens de formule van de gulden snede, vinden we het irrationele getal 1,6180339887 ..., maar voor het gemak kun je de afgeronde waarde van 1,62 te gebruiken. Dit betekent dat onze pagina blokkeert 62% en 38% van het geheel, ongeacht de grootte gegenereerde broncode voor de site die u gebruikt moet zijn. Zo kunt u zien op het volgende schema:

Het gebruik van nieuwe technologieën

Moderne technologie lay-out web sites kunt u op accurate wijze ideeën van de ontwerper en de ontwerper, dus nu kunt u de uitvoering van de bolder ideeën dan aan het begin van internet-technologie kunnen veroorloven. Niet langer hoeven veel te puzzelen wat moet de grootte van een site. Met de komst van zulke dingen als blok adaptieve lay-out, een dynamische belasting van de inhoud en lettertypen, website ontwikkeling is vele malen leuker geworden. Immers, deze technologieën hebben minder beperkingen, ook al zijn ze. Maar zoals u weet, zonder beperking, zou er geen kunst. We raden u aan een echt creatieve benadering van ontwerpen te gebruiken - de gulden snede. Met het, zult u in staat om de werkruimte efficiënt en mooi te vullen, ongeacht de grootte of de sites die u gevraagd om uw sjablonen.

Hoe de werkruimte site te verhogen

De kans is groot dat je genoeg ruimte om alle UI elementen om de lay-out van een klein formaat geschikt voor zal hebben. In dit geval, moet je om te beginnen met creatief denken, of zelfs meer creatief dan je voorheen deed.

Maximale vrije ruimte op de site mogelijk te maken, het verbergen van de navigatie in het pop-up menu. Deze benadering is logisch om niet alleen mobiel, maar ook op de desktop te gebruiken. Immers, hoeft de gebruiker niet de hele tijd moeten kijken naar wat er koppen op uw site - het is gekomen voor de inhoud. Een gebruiker wenst te respecteren.

Een voorbeeld van een goede manier om het menu te verbergen is het volgende layout (hieronder afgebeeld).

In de bovenste hoek van het rode gebied, kunt u zien een kruis, klikt u op het menu dat schuilt in een klein pictogram, zodat de gebruiker alleen met de inhoud van de website.

Echter, dit is optioneel, kunt u de navigatie die is altijd in het zicht te laten. Maar je kunt het een mooi design element, niet alleen een lijst van links op de populaire site. Gebruik intuïtieve pictogrammen in aanvulling op koppelingen tekst of zelfs te vervangen. Het zal ook uw site in staat te stellen efficiënter gebruik van de ruimte op het scherm op uw apparaat.

Beste Website - adaptive

Als je niet weet welke je moet een lay-out voor de site te kiezen, allemaal voor jou. Om te besparen op ontwikkelingskosten en op hetzelfde moment niet verliezen het publiek vanwege de slechte lay-out voor sommige apparaat, gebruik responsive webdesign.

Adaptive heet een ontwerp dat lijkt op verschillende apparaten even goed. Deze aanpak zal uw site duidelijk en gemakkelijk zijn, zelfs voor een laptop, althans op de tablet, zelfs op een smartphone. Zij bereikt dit effect door automatische veranderingen in het werkgebied van de breedte van het scherm. Met behulp van adaptieve style sheets voor de site, bent u het nemen van de juiste beslissing mogelijk te maken.

Wat onderscheidt de adaptieve ontwerp van de beschikbaarheid van de verschillende versies van uw website

Responsief ontwerp verschilt van de mobiele site zodat in het laatste geval de gebruiker een HTML-code ontvangt, die verschilt van het bureaublad. Dit is een nadeel vanuit het oogpunt van het optimaliseren van de prestaties van de server, evenals zoekmachine optimalisatie. Bovendien, hoe moeilijker het wordt om de statistieken te overwegen op basis van verschillende versies van de site. Een adaptieve benadering is verstoken van tekortkomingen.

Aanpasbaarheid voor verschillende apparaten wordt bereikt als gevolg van de breedte layout of Percentages transportinstallaties blokken in de beschikbare ruimte (in het verticale vlak plaats van de horizontale smartphone op een bureaublad) of de afzonderlijke weergaven door verschillende schermen.

U kunt meer informatie over responsive design leren en te ontwikkelen kun je uit boeken.