Webstedudviklingsteknologi er en meget mangefacetteret proces. Men stadig kan alle dens stadier opdeles i to hovedkomponenter - den funktionelle og den ydre skal. Eller, som det er kutyme blandt webmastere, henholdsvis back-end og front-end. Folk, der bestiller deres hjemmesider fra webudviklingsstudier, tror ofte naivt på, at det er værd kun at fokusere på funktionalitet, og det vil være den rigtige beslutning. Men dette er sandt i meget, meget sjældne tilfælde, norm alt for opstartsprojekter på beta-teststadiet. Ellers kræves det blot, at det grafiske design og brugergrænsefladen overholder webudviklingsstandarder og er praktiske.
Den første hjørnesten, som grænsefladedesigneren, eller designeren, står over for, er bredden af webstedets layout. Når alt kommer til alt, for det er det nødvendigt at tegne grænseflader. Rent intuitivt opstår der to tilgange – enten lav separate layouts for hver populær skærmopløsning, eller lav én version af siden til alle skærme. Og begge muligheder vil være forkerte, men først og fremmest.
Standard webstedsbredde i pixelsfor Runet
Før udviklingen af adaptivt layout var udviklingen af et websted med en bredde på tusind pixels et massefænomen. Denne figur blev valgt af en simpel grund - så siden passer ind i enhver skærm. Og dette har sin egen logik, men lad os antage, at en person stadig har mindst en HD-skærm på et skrivebord. I dette tilfælde vil dit layout virke som en lillebitte strimmel midt på skærmen, hvor alt er klistret sammen i én bunke, og på siderne er der en enorm ubrugt plads. Lad os nu antage, at en person får adgang til dit websted på en tablet med en 800px bred skærm, og "Vis hele webstedet" er markeret i indstillingerne. I dette tilfælde vil dit websted også blive vist forkert, da det simpelthen ikke passer ind på skærmen.
Ud fra disse overvejelser kan vi konkludere, at en fast bredde til layoutet absolut ikke er egnet for os, og vi skal se efter en anden måde. Lad os analysere ideen om et separat layout for hver skærmbredde.
Layouts til alle lejligheder
Hvis du som strategi har valgt at skabe layouts til alle skærmstørrelser på markedet, så vil dit websted være det mest unikke på hele internettet. Det er trods alt simpelthen umuligt i dag at dække hele rækken af enheder og forsøge at finjustere for hver mulighed. Men hvis du fokuserer på de mest populære opløsninger af skærme og enhedsskærme, så er ideen ikke dårlig. Dens eneste ulempe er økonomiske omkostninger. Når alt kommer til alt, når en grænsefladedesigner, en designer og en koder er tvunget til at udføre det samme arbejde 5 eller 6 gange, vil projektet kosteuforholdsmæssigt højere end den oprindeligt budgetterede pris.
Derfor kan kun én-sides websteder prale af en overflod af versioner til forskellige skærme, hvis formål er at sælge ét produkt og sørge for at gøre det godt. Nå, hvis du ikke har en af disse landinger, men et websted med flere sider, så bør du tænke videre.
Mest populære webstedsstørrelser
Et kompromis mellem de to yderpunkter er at gengive layoutet til tre eller fire skærmstørrelser. Blandt dem skal man være et layout til mobile enheder. Resten bør tilpasses til små, mellemstore og store desktop-skærme. Hvordan vælger man bredden på siden? Nedenfor præsenterer vi HotLog-tjenestestatistikken for maj 2017, som viser os fordelingen af popularitet for forskellige enhedsskærmopløsninger samt dynamikken i denne indikator.
Fra tabellen kan du finde ud af, hvordan du bestemmer størrelsen på det websted, du vil bruge. Derudover kan vi konkludere, at det mest almindelige format i dag er en skærm på 1366 gange 768 pixels. Sådanne skærme er installeret i budgetbærbare computere, så deres popularitet er naturlig. Den næstmest populære er Full HD-skærmen, som er guldstandarden for videoer, spil og derfor til at lave hjemmesidelayouts. Længere i tabellen ser vi opløsningen på mobile enheder 360 gange 640 pixels, samt forskellige muligheder for desktop- og mobilskærme efter den.
Designer layout
SåEfter at have analyseret statistikkerne kan vi konkludere, at den optimale sidebredde har 4 variationer:
- Bærbar version med 1366 px bredde.
- Fuld HD-version.
- Et 800px bredt layout til visning på små stationære skærme.
- Mobilversion af webstedet - 360 pixels bred.
Lad os sige, at vi har besluttet, hvilken størrelse der skal bruges til den genererede kilde til webstedet. Men sådan et projekt ville stadig være dyrt. Så lad os se på flere muligheder, denne gang uden at bruge en fast bredde.
Gør layoutet fleksibelt
Der er en alternativ tilgang, når det er værd at tilpasse sig kun til den mindste skærmstørrelse, og selve webstedsstørrelserne vil blive sat i procent. Samtidig kan sådanne grænsefladeelementer som menuer, knapper og logo indstilles i absolutte værdier med fokus på minimumsstørrelsen af skærmbredden i pixels. Blokke med indhold vil tværtimod blive strakt i henhold til den angivne procentdel af skærmområdets bredde. Denne tilgang giver dig mulighed for at stoppe med at opfatte størrelsen af websteder som en begrænsning for designeren og dygtigt slå denne nuance.
Hvad er det gyldne snit, og hvordan kan det anvendes til websidelayout?
Selv i renæssancen forsøgte mange arkitekter og kunstnere at give deres kreationer den perfekte form og proportion. For at få svar på spørgsmål om værdierne af en sådan andel henvendte de sig til dronningen af alle videnskaber - matematik.
Siden antikken er en del blevet opfundet, som vores øje opfatter som den mest naturlige og elegante,fordi det er allestedsnærværende i naturen. Opdageren af formlen for et sådant forhold var en talentfuld gammel græsk arkitekt ved navn Phidias. Han beregnede, at hvis den største del af andelen er relateret til den mindre, som helheden er relateret til den større, så vil en sådan andel se bedst ud. Men dette er tilfældet, hvis du vil opdele objektet asymmetrisk. Denne andel blev senere kaldt det gyldne snit, som stadig ikke overvurderer dets betydning for kulturens verdenshistorie.
Tilbage til webdesign
Det er meget enkelt - ved at bruge det gyldne snit kan du designe sider, der vil være så behagelige for det menneskelige øje som muligt. Ved at beregne efter definitionen af det gyldne snitformel får vi det irrationelle tal 1, 6180339887 …, men for nemheds skyld kan vi bruge en afrundet værdi på 1, 62. Dette vil betyde, at blokkene på vores side skal være 62 % og 38 % af det hele, uanset hvilken størrelse den genererede kilde for det websted, du bruger. Du kan se et eksempel i dette diagram:
Brug nye teknologier
Moderne hjemmesidelayoutteknologier gør det muligt præcist at formidle ideen om en planlægger og designer, så nu har du råd til at implementere mere vovede ideer end ved begyndelsen af internetteknologier. Du behøver ikke længere at tænke grundigt over, hvad størrelsen på siden skal være. Med fremkomsten af ting som blokadaptivt layout, dynamisk indlæsning af indhold og skrifttyper er udvikling af websteder blevet meget mere behagelig. Det er disse teknologier trods altfærre restriktioner, selvom de stadig er der. Men som du ved, uden grænser ville der ikke være nogen kunst. Vi foreslår, at du bruger én virkelig kreativ designtilgang - det gyldne snit. Med det kan du effektivt og smukt fylde arbejdsområdet, uanset hvilke webstedsstørrelser du angiver i dine skabeloner.
Sådan øger du webstedets arbejdsområde
Der er en god chance for, at du ikke har plads nok til at passe alle UI-elementerne ind i et lille layout. I dette tilfælde bliver du nødt til at begynde at tænke kreativt eller endnu mere kreativt, end du gjorde før.
Maksim alt frigør plads på webstedet ved at skjule navigationen i pop op-menuen. Det er logisk at bruge denne tilgang ikke kun på mobile enheder, men også på desktops. Brugeren behøver jo ikke hele tiden at kigge på, hvilke overskrifter der er på din side – han kom for indholdet. Og brugerens ønsker skal respekteres.
Et eksempel på en god måde at skjule menuen på er følgende layout (billede nedenfor).
I det øverste hjørne af det røde område kan du se et kryds, hvis du klikker på det, skjules menuen i et lille ikon, så brugeren er alene med indholdet af hjemmesiden.
Dette er dog valgfrit, du kan forlade navigationen, som altid vil være i syne. Men du kan gøre det til et smukt designelement og ikke kun en liste over populære links på siden. Brug intuitive ikoner som supplement til eller endda i stedet for tekstlinks. det er det sammevil give dit websted mulighed for at udnytte skærmpladsen på brugerens enhed mere effektivt.
Den bedste hjemmeside er responsiv
Hvis du ikke ved, hvilket layout du skal vælge til siden, så er alt nemt for dig. Brug responsivt design for at spare på udviklingsomkostningerne og samtidig ikke miste dit publikum på grund af dårligt layout på en enhed.
Responsivt design er et design, der ser lige godt ud på forskellige enheder. Denne tilgang vil gøre det muligt for dit websted at være forståeligt og praktisk, selv på en bærbar computer, selv på en tablet, selv på en smartphone. Denne effekt opnås ved automatisk at ændre bredden af skærmens arbejdsområde. Ved at bruge responsive style sheets til dit websted, træffer du den bedst mulige beslutning.
Hvad er forskellen mellem responsivt design og hjemmesideversioner
Responsivt design adskiller sig fra mobilversionen af webstedet ved, at i sidstnævnte tilfælde modtager brugeren en html-kode, der er forskellig fra den stationære. Dette er en ulempe i forhold til optimering af serverydelse samt søgemaskineoptimering. Derudover bliver det sværere at beregne statistik for forskellige versioner af siden. Den adaptive tilgang har ikke disse ulemper.
Responsivitet for forskellige enheder opnås gennem et layout med en procentdel af bredden angivet eller ved at overføre blokke til den tilgængelige plads (i det lodrette plan på en smartphone i stedet forvandret på skrivebordet), eller opret individuelle layouts til forskellige skærme.
Lær mere om responsivt design og udvikling i vores selvstudier.
