Website-ontwikkelingstechnologie is een zeer veelzijdig proces. Maar toch kunnen al zijn stadia worden onderverdeeld in twee hoofdcomponenten: de functionele en de buitenste schil. Of, zoals gebruikelijk onder webmasters, respectievelijk back-end en front-end. Mensen die hun websites bestellen bij webontwikkelingsstudio's zijn vaak naïef van mening dat het de moeite waard is om alleen op functionaliteit te focussen, en dit zal de juiste beslissing zijn. Maar dit geldt in zeer, zeer zeldzame gevallen, meestal voor startup-projecten in de bètatestfase. Anders zijn het grafische ontwerp en de gebruikersinterface gewoon vereist om te voldoen aan de webontwikkelingsnormen en handig te zijn.
De eerste hoeksteen waarmee de interfaceontwerper, of ontwerper, wordt geconfronteerd, is de breedte van de sitelay-out. Daarvoor is het immers noodzakelijk om interfaces te tekenen. Puur intuïtief ontstaan er twee benaderingen: ofwel maak aparte lay-outs voor elke populaire schermresolutie, of creëer één versie van de site voor alle schermen. En beide opties zullen verkeerd zijn, maar allereerst.
Standaard websitebreedte in pixelsvoor Runet
Vóór de ontwikkeling van adaptieve lay-out was de ontwikkeling van een site met een breedte van duizend pixels een massaverschijnsel. Dit cijfer is om één simpele reden gekozen - zodat de site op elk scherm past. En dit heeft zijn eigen logica, maar laten we aannemen dat een persoon nog minimaal een HD-monitor op een desktop heeft. In dit geval lijkt je lay-out een kleine strook in het midden van het scherm, waar alles op één hoop aan elkaar zit, en aan de zijkanten is er een enorme ongebruikte ruimte. Laten we nu aannemen dat een persoon uw website bezoekt op een tablet met een 800px breedbeeldscherm en dat "Toon volledige website" is aangevinkt in de instellingen. In dit geval wordt uw site ook verkeerd weergegeven, omdat deze simpelweg niet op het scherm past.
Uit deze overwegingen kunnen we concluderen dat een vaste breedte voor de lay-out absoluut niet geschikt is voor ons en dat we op zoek moeten naar een andere manier. Laten we het idee van een aparte lay-out voor elke schermbreedte analyseren.
Lay-outs voor alle gelegenheden
Als je als strategie hebt gekozen voor het maken van lay-outs voor alle schermformaten op de markt, dan zal je site de meest unieke op het hele internet zijn. Het is tegenwoordig immers gewoon onmogelijk om het hele scala aan apparaten te dekken en voor elke optie te proberen deze te verfijnen. Maar als je je concentreert op de meest populaire resoluties van monitoren en apparaatschermen, dan is het idee niet slecht. Het enige nadeel zijn de financiële kosten. Immers, wanneer een interface-ontwerper, een ontwerper en een codeur 5 of 6 keer hetzelfde werk moeten doen, kost het projectonevenredig hoger dan de oorspronkelijk gebudgetteerde prijs.
Daarom kunnen alleen sites van één pagina bogen op een overvloed aan versies voor verschillende schermen, waarvan het doel is om één product te verkopen en ervoor te zorgen dat het goed wordt gedaan. Nou, als je niet een van deze landingen hebt, maar een site met meerdere pagina's, dan moet je verder nadenken.
Meest populaire sitegroottes
Een compromis tussen de twee uitersten is het renderen van de lay-out voor drie of vier schermformaten. Onder hen moet een lay-out voor mobiele apparaten zijn. De rest moet worden aangepast voor kleine, middelgrote en grote desktopschermen. Hoe de breedte van de site kiezen? Hieronder presenteren we de HotLog-servicestatistieken voor mei 2017, die ons de verdeling van populariteit van verschillende schermresoluties van het apparaat laten zien, evenals de dynamiek van deze indicator.
Uit de tabel kunt u zien hoe u de grootte van de site kunt bepalen die u wilt gebruiken. Daarnaast kunnen we concluderen dat het meest voorkomende formaat tegenwoordig een scherm is van 1366 bij 768 pixels. Dergelijke schermen worden geïnstalleerd in budgetlaptops, dus hun populariteit is natuurlijk. De volgende meest populaire is de Full HD-monitor, de gouden standaard voor video's, games en dus voor het maken van websitelay-outs. Verder in de tabel zien we de resolutie van mobiele apparaten 360 bij 640 pixels, evenals verschillende opties voor desktop- en mobiele schermen erna.
Ontwerp lay-out
SoNa analyse van de statistieken kunnen we concluderen dat de optimale sitebreedte 4 variaties heeft:
- Laptopversie met een breedte van 1366px.
- Full HD-versie.
- Een 800px brede lay-out voor weergave op kleine desktopmonitoren.
- Mobiele versie van de site - 360 pixels breed.
Laten we zeggen dat we hebben besloten welke grootte we gaan gebruiken voor de gegenereerde bron voor de site. Maar zo'n project zou nog steeds kostbaar zijn. Laten we dus naar meer opties kijken, deze keer zonder een vaste breedte te gebruiken.
De lay-out flexibel maken
Er is een alternatieve benadering, wanneer het de moeite waard is om alleen aan te passen aan de minimale schermgrootte, en de sitegroottes zelf worden bepaald door percentages. Tegelijkertijd kunnen interface-elementen zoals menu's, knoppen en logo in absolute waarden worden ingesteld, waarbij de nadruk ligt op de minimale grootte van de schermbreedte in pixels. Blokken met inhoud daarentegen worden uitgerekt volgens het opgegeven percentage van de breedte van het schermgebied. Deze benadering stelt u in staat om de grootte van sites niet langer als een beperking voor de ontwerper te zien en deze nuance vakkundig te omzeilen.
Wat is de gulden snede en hoe kan deze worden toegepast op de lay-out van webpagina's?
Zelfs in de Renaissance probeerden veel architecten en kunstenaars hun creaties de perfecte vorm en verhouding te geven. Voor antwoorden op vragen over de waarden van een dergelijke verhouding wendden ze zich tot de koningin van alle wetenschappen - wiskunde.
Sinds de oudheid is er een verhouding uitgevonden die ons oog als de meest natuurlijke en elegante,omdat het alomtegenwoordig is in de natuur. De ontdekker van de formule voor een dergelijke verhouding was een getalenteerde oude Griekse architect genaamd Phidias. Hij berekende dat als het grootste deel van de proportie gerelateerd is aan de kleinere als het geheel gerelateerd is aan de grotere, dan zal een dergelijke proportie er het beste uitzien. Maar dit is het geval als u het object asymmetrisch wilt verdelen. Dit aandeel werd later de gulden snede genoemd, wat het belang ervan voor de wereldgeschiedenis van cultuur nog steeds niet overschat.
Terug naar webdesign
Het is heel eenvoudig - met behulp van de gulden snede kunt u pagina's ontwerpen die zo aangenaam mogelijk zijn voor het menselijk oog. Berekenen volgens de definitie van de gulden snede formule, krijgen we het irrationele getal 1, 6180339887 …, maar voor het gemak kunnen we een afgeronde waarde van 1, 62 gebruiken. Dit betekent dat de blokken van onze pagina 62 moeten zijn % en 38% van het geheel, ongeacht de grootte van de gegenereerde bron voor de site die u gebruikt. U kunt een voorbeeld in dit diagram zien:
Gebruik nieuwe technologieën
Moderne website-layouttechnologieën maken het mogelijk om het idee van een planner en ontwerper nauwkeurig over te brengen, dus nu kunt u het zich veroorloven om meer gedurfde ideeën te implementeren dan aan het begin van internettechnologieën. U hoeft niet langer na te denken over de grootte van de site. Met de komst van onder meer block adaptive layout, dynamisch laden van content en fonts is website ontwikkeling een stuk prettiger geworden. Deze technologieën zijn immersminder beperkingen, hoewel ze er nog steeds zijn. Maar zoals je weet, zou er zonder grenzen geen kunst zijn. We raden u aan één echt creatieve ontwerpbenadering te gebruiken: de gulden snede. Hiermee kunt u de werkruimte effectief en mooi vullen, ongeacht de grootte van de site die u in uw sjablonen instelt.
Hoe de werkruimte van de site te vergroten
De kans is groot dat je niet genoeg ruimte hebt om alle UI-elementen in een kleine lay-out te passen. In dit geval zul je creatief moeten gaan denken, of zelfs creatiever dan voorheen.
Maak maximaal ruimte vrij op de site door de navigatie in het pop-upmenu te verbergen. Het is logisch om deze aanpak niet alleen op mobiele apparaten te gebruiken, maar ook op desktops. De gebruiker hoeft immers niet de hele tijd te kijken welke koppen er op uw site staan - hij kwam voor de inhoud. En de wensen van de gebruiker moeten worden gerespecteerd.
Een voorbeeld van een goede manier om het menu te verbergen is de volgende lay-out (foto hieronder).
In de bovenhoek van het rode gebied ziet u een kruis, waarop u kunt klikken om het menu in een klein pictogram te verbergen, zodat de gebruiker alleen blijft met de inhoud van de website.
Dit is echter optioneel, u kunt de navigatie verlaten, die altijd in het zicht zal zijn. Maar je kunt er een mooi ontwerpelement van maken, en niet alleen een lijst met populaire links op de site. Gebruik intuïtieve pictogrammen naast of zelfs in plaats van tekstlinks. het is hetzelfdezal uw site in staat stellen om efficiënter gebruik te maken van de schermruimte op het apparaat van de gebruiker.
De beste website is responsive
Als u niet weet welke lay-out u voor de site moet kiezen, dan is alles eenvoudig voor u. Gebruik responsief ontwerp om te besparen op ontwikkelingskosten en tegelijkertijd uw publiek niet te verliezen vanwege een slechte lay-out voor een bepaald apparaat.
Responsief ontwerp is een ontwerp dat er op verschillende apparaten even goed uitziet. Deze aanpak zorgt ervoor dat uw site begrijpelijk en handig is, zelfs op een laptop, zelfs op een tablet, zelfs op een smartphone. Dit effect wordt bereikt door automatisch de breedte van het werkgebied van het scherm te wijzigen. Door responsieve stylesheets voor uw site te gebruiken, neemt u de best mogelijke beslissing.
Wat is het verschil tussen responsive design en websiteversies
Responsief ontwerp verschilt van de mobiele versie van de site doordat in het laatste geval de gebruiker een html-code ontvangt die verschilt van de desktopversie. Dit is een nadeel in termen van optimalisatie van serverprestaties en optimalisatie van zoekmachines. Bovendien wordt het moeilijker om statistieken te berekenen voor verschillende versies van de site. De adaptieve aanpak heeft deze nadelen niet.
Responsiviteit voor verschillende apparaten wordt bereikt door een lay-out met een percentage van de opgegeven breedte of door blokken over te brengen naar de beschikbare ruimte (in het verticale vlak op een smartphone in plaats vanhorizontaal op het bureaublad), of het creëren van individuele lay-outs voor verschillende schermen.
Lees meer over responsive design en ontwikkeling in onze tutorials.
