Nettstedutviklingsteknologi er en svært mangefasettert prosess. Men likevel kan alle dens stadier deles inn i to hovedkomponenter - det funksjonelle og det ytre skallet. Eller, som det er vanlig blant nettredaktører, henholdsvis back-end og front-end. Folk som bestiller nettsidene sine fra webutviklingsstudioer tror ofte naivt at det er verdt å fokusere kun på funksjonalitet, og dette vil være den riktige avgjørelsen. Men dette er sant i svært, veldig sjeldne tilfeller, vanligvis for oppstartsprosjekter på beta-teststadiet. Ellers er grafisk design og brukergrensesnitt bare nødvendig for å overholde nettutviklingsstandarder og være praktisk.
Den første hjørnesteinen som grensesnittdesigneren, eller designeren, står overfor, er bredden på nettstedets layout. Tross alt, for det er det nødvendig å tegne grensesnitt. Rent intuitivt oppstår to tilnærminger – enten lag separate oppsett for hver populære skjermoppløsning, eller lag én versjon av nettstedet for alle skjermer. Og begge alternativene vil være feil, men først.
Standard nettstedsbredde i pikslerfor Runet
Før utviklingen av adaptiv layout var utviklingen av et nettsted med en bredde på tusen piksler et massefenomen. Denne figuren ble valgt av én enkel grunn - slik at siden passer inn i hvilken som helst skjerm. Og dette har sin egen logikk, men la oss anta at en person fortsatt har minst en HD-skjerm på et skrivebord. I dette tilfellet vil oppsettet ditt virke som en liten stripe midt på skjermen, hvor alt er klistret sammen i en haug, og på sidene er det en enorm ubrukt plass. La oss nå anta at en person får tilgang til nettstedet ditt på et nettbrett med en 800px bred skjerm og "Vis hele nettstedet" er merket av i innstillingene. I dette tilfellet vil nettstedet ditt også vises feil, siden det rett og slett ikke passer inn på skjermen.
Ut fra disse betraktningene kan vi konkludere med at en fast bredde for layout definitivt ikke passer for oss, og vi må se etter en annen måte. La oss analysere ideen om et separat oppsett for hver skjermbredde.
Layouts for alle anledninger
Hvis du som strategi har valgt å lage layouter for alle skjermstørrelser på markedet, vil siden din være den mest unike på hele Internett. Tross alt er det rett og slett umulig i dag å dekke hele spekteret av enheter, og prøve å finjustere for hvert alternativ. Men hvis du fokuserer på de mest populære oppløsningene til skjermer og enhetsskjermer, så er ikke ideen dårlig. Den eneste ulempen er økonomiske kostnader. Når alt kommer til alt, når en grensesnittdesigner, en designer og en koder blir tvunget til å gjøre det samme arbeidet 5 eller 6 ganger, vil prosjektet kosteuforholdsmessig høyere enn den opprinnelig budsjetterte prisen.
Derfor kan bare énsides nettsteder skryte av en overflod av versjoner for forskjellige skjermer, hvis formål er å selge ett produkt og sørge for å gjøre det bra. Vel, hvis du ikke har en av disse landingene, men et nettsted med flere sider, bør du tenke videre.
Mest populære nettstedstørrelser
Et kompromiss mellom de to ytterpunktene er å gjengi oppsettet for tre eller fire skjermstørrelser. Blant dem må man være en layout for mobile enheter. Resten bør tilpasses små, mellomstore og store skrivebordsskjermer. Hvordan velge bredden på nettstedet? Nedenfor presenterer vi HotLog-tjenestestatistikken for mai 2017, som viser oss fordelingen av popularitet til ulike enhetsskjermoppløsninger, samt dynamikken til denne indikatoren.
Fra tabellen kan du finne ut hvordan du bestemmer størrelsen på nettstedet du vil bruke. I tillegg kan vi konkludere med at det vanligste formatet i dag er en skjerm på 1366 x 768 piksler. Slike skjermer er installert i budsjettbærbare datamaskiner, så deres popularitet er naturlig. Den nest mest populære er Full HD-skjermen, som er gullstandarden for videoer, spill og derfor for å lage nettstedsoppsett. Lenger i tabellen ser vi oppløsningen til mobile enheter 360 x 640 piksler, samt ulike alternativer for stasjonære og mobile skjermer etter den.
Designing layout
SåEtter å ha analysert statistikken kan vi konkludere med at den optimale sidebredden har 4 variasjoner:
- Bærbar versjon med 1366px bredde.
- Full HD-versjon.
- En 800px bred layout for visning på små stasjonære skjermer.
- Mobilversjon av nettstedet - 360 piksler bredt.
La oss si at vi har bestemt hvilken størrelse vi skal bruke for den genererte kilden for nettstedet. Men et slikt prosjekt vil fortsatt være kostbart. Så la oss se på flere alternativer, denne gangen uten å bruke en fast bredde.
Gjør oppsettet fleksibelt
Det er en alternativ tilnærming, når det er verdt å tilpasse seg kun til minimumsskjermstørrelsen, og selve sidestørrelsene vil bli satt av prosenter. Samtidig kan slike grensesnittelementer som menyer, knapper og logo settes i absolutte verdier, med fokus på minimumsstørrelsen på skjermbredden i piksler. Blokker med innhold, tvert imot, vil bli strukket i henhold til den angitte prosentandelen av bredden på skjermområdet. Denne tilnærmingen lar deg slutte å oppfatte størrelsen på nettsteder som en begrensning for designeren og dyktig slå denne nyansen.
Hva er det gyldne snitt og hvordan kan det brukes på nettsideoppsett?
Selv i renessansen prøvde mange arkitekter og kunstnere å gi kreasjonene sine den perfekte formen og proporsjonen. For svar på spørsmål om verdiene til en slik andel henvendte de seg til dronningen av alle vitenskaper - matematikk.
Siden antikken har en del blitt oppfunnet som øyet vårt oppfatter som det mest naturlige og elegante,fordi den er allestedsnærværende i naturen. Oppdageren av formelen for et slikt forhold var en talentfull gammel gresk arkitekt ved navn Phidias. Han regnet ut at hvis den største delen av andelen er relatert til den mindre som helheten er relatert til den større, så vil en slik andel se best ut. Men dette er tilfellet hvis du ønsker å dele objektet asymmetrisk. Denne andelen ble senere k alt det gylne snitt, som fortsatt ikke overvurderer betydningen for kulturens verdenshistorie.
Tilbake til webdesign
Det er veldig enkelt - ved å bruke det gylne snitt kan du designe sider som vil være så behagelige for det menneskelige øyet som mulig. Ved å beregne i henhold til definisjonen av formelen for det gyldne snitt får vi det irrasjonelle tallet 1, 6180339887 …, men for enkelhets skyld kan vi bruke en avrundet verdi på 1, 62. Dette vil bety at blokkene på siden vår skal være 62 % og 38 % av helheten, uansett størrelsen på den genererte kilden for nettstedet du bruker. Du kan se et eksempel i dette diagrammet:
Bruk ny teknologi
Moderne teknologi for nettstedlayout gjør det mulig å formidle ideen om en planlegger og designer nøyaktig, så nå har du råd til å implementere mer dristige ideer enn ved begynnelsen av Internett-teknologier. Du trenger ikke lenger å tenke hardt over størrelsen på siden skal være. Med bruken av slike ting som blokkadaptiv layout, dynamisk lasting av innhold og fonter, har utvikling av nettsteder blitt mye mer behagelig. Tross alt er disse teknologienefærre restriksjoner, selv om de fortsatt er der. Men som du vet, uten grenser ville det ikke vært noen kunst. Vi foreslår at du bruker én virkelig kreativ designtilnærming – det gyldne snitt. Med den kan du effektivt og vakkert fylle arbeidsområdet, uansett hvilke nettstedstørrelser du angir i malene dine.
Hvordan øke arbeidsplassen til nettstedet
Det er en god sjanse for at du ikke har nok plass til å passe alle UI-elementene i en liten layout. I dette tilfellet må du begynne å tenke kreativt eller enda mer kreativt enn du gjorde før.
Maksim alt frigjør plass på nettstedet ved å skjule navigasjonen i hurtigmenyen. Det er logisk å bruke denne tilnærmingen ikke bare på mobile enheter, men også på stasjonære datamaskiner. Tross alt trenger ikke brukeren å se hele tiden på hvilke overskrifter som er på nettstedet ditt - han kom for innholdet. Og brukerens ønsker må respekteres.
Et eksempel på en god måte å skjule menyen på er følgende layout (bildet nedenfor).
I det øvre hjørnet av det røde området kan du se et kryss, ved å klikke på som vil skjule menyen i et lite ikon, slik at brukeren er alene med innholdet på nettstedet.
Dette er imidlertid valgfritt, du kan forlate navigasjonen, som alltid vil være i sikte. Men du kan gjøre det til et vakkert designelement, og ikke bare en liste over populære lenker på nettstedet. Bruk intuitive ikoner i tillegg til eller til og med i stedet for tekstlenker. det er det sammevil tillate nettstedet ditt å gjøre mer effektiv bruk av skjermplass på brukerens enhet.
Den beste nettsiden er responsiv
Hvis du ikke vet hvilken layout du skal velge for siden, så er alt enkelt for deg. For å spare på utviklingskostnader og samtidig ikke miste publikum på grunn av dårlig layout for en eller annen enhet, bruk responsiv design.
Responsiv design er en design som ser like bra ut på forskjellige enheter. Denne tilnærmingen vil tillate nettstedet ditt å være forståelig og praktisk selv på en bærbar datamaskin, til og med på et nettbrett, til og med på en smarttelefon. Denne effekten oppnås ved automatisk å endre bredden på arbeidsområdet på skjermen. Ved å bruke responsive stilark for nettstedet ditt tar du den beste avgjørelsen som mulig.
Hva er forskjellen mellom responsiv design og nettsideversjoner
Responsiv design skiller seg fra mobilversjonen av nettstedet ved at i sistnevnte tilfelle mottar brukeren en html-kode som er forskjellig fra den stasjonære. Dette er en ulempe med tanke på optimalisering av serverytelse så vel som søkemotoroptimalisering. I tillegg blir det vanskeligere å beregne statistikk for ulike versjoner av siden. Den adaptive tilnærmingen har ikke disse ulempene.
Responsivitet for ulike enheter oppnås gjennom en layout med en prosentandel av bredden spesifisert eller ved å overføre blokker til tilgjengelig plass (i det vertikale planet på en smarttelefon i stedet forhorisont alt på skrivebordet), eller lage individuelle oppsett for forskjellige skjermer.
Finn ut mer om responsiv design og utvikling i veiledningene våre.
