Standard dimensjoner sider: funksjoner, krav og anbefalinger

Teknologiutvikling av nettsteder - en svært mangesidig prosess. Likevel har alle stadier kan deles inn i to hoveddeler - en funksjonell og en ytre kappe. Eller, som i mellom webmaster henholdsvis Beg End og Front End. Folk som kjøpte sine nettsider i webutvikling studioer, ofte naivt å tro at det er nødvendig å fokusere kun på funksjonell, og det vil være den riktige avgjørelsen. Men dette er sant i en svært, svært sjeldne anledninger, vanligvis for start-ups av prosjekter på scenen for betatesting. Resten av grafisk design og brukergrensesnitt er rett og slett nødt til å følge med webutvikling standarder og være komfortabel.

Den første hjørnesteinen vender grensesnittet designer eller designer - er bredden av nettstedet layout. Tross alt, er det nødvendig å trekke grensesnitt for henne. Intuitivt er det to tilnærminger - enten for å lage egne oppsett for hver av de populære skjermoppløsninger, eller du kan opprette en versjon av nettstedet for alle kart. Begge alternativene ville være galt, men det viktigste først.

Standard bredde i piksler for området du trenger

Før utviklingen av adaptive oppsettet massefenomen har vært utviklingen av et nettsted med tusenvis av piksler bredt. Dette tallet ble valgt for en enkel grunn - at området ble plassert på en skjerm. Og det er en viss logikk, men la oss anta at en person er fortsatt minst HD-skjerm på skrivebordet. I dette tilfellet vil layouten virke liten stripe i midten av skjermen, der alt er støpt i en haug, og på sidene av den enorme non-plass. Nå la oss anta at en person kom til nettstedet ditt fra en tablett med en skjerm på 800 piksler i bredden, og det er merket av i innstillingene "Vis nettstedet fullversjonen." I dette tilfellet, vil nettstedet også vises feil, som rett og slett ikke passer inn i skjermen.

Fra disse betraktninger, kan vi konkludere med at en fast bredde for layout, vi bare ikke passer og du vil finne en annen måte. La oss analysere ideen om en egen layout for hvert skjermbredden.

Oppsett for alle anledninger

Hvis du har valgt som en strategi for å skape oppsett for alle skjermstørrelser tilgjengelig på markedet, da nettstedet vil være den mest unike i Internett. Tross alt, i dag er det rett og slett umulig å dekke hele spekteret av enheter i et forsøk på å lage en nøyaktig innstilling for hvert alternativ. Men hvis du fokuserer på de mest populære skjermoppløsning og skjerm, ideen er god. Dens eneste ulempen - de økonomiske kostnadene. Tross alt, når designeren grensesnitt designer og koder vil bli tvunget til 5 eller 6 ganger for å utføre det samme arbeidet, vil prosjektet koste uforholdsmessig opprinnelig plantet til rimelige priser.

Derfor kan skilte med en overflod av versjoner for forskjellige skjermer kan være, bortsett fra at nettstedene-odnostranichniki som har som formål - å selge ett produkt, og sørg for å gjøre det godt. Vel, hvis du ikke er en av dem Landing, en multi-site, står det til grunn videre.

De mest populære størrelsene nettsider

Et kompromiss mellom de to ytterligheter er en tegning av oppsettet for tre eller fire skjermstørrelser. Blant dem, må man være et oppsett for mobile enheter. Resten må være tilrettelagt for de små, mellomstore og store PC-skjermen. Hvordan velge bredden på siden? Nedenfor presenterer vi HotLog tjenestestatistikk for mai 2017, som viser oss fordelingen av populariteten til ulike skjermoppløsning på enheten, samt dynamikken i endringen i denne indikatoren.

Fra tabellen er det mulig å lære å bestemme størrelsen på området du ønsker å bruke. I tillegg kan det konkluderes med at den vanligste i dag er skjermformat på 1366 x 768 piksler. Disse skjermene er installert i et budsjett bærbar PC, slik at deres popularitet er naturlig. Den nest mest populære er en full HD-skjerm, som er gullstandarden for filmer, spill, og derfor for å lage nettstedet oppsett. Videre i tabell ser vi tillater mobilenheter 360 x 640 piksler, så vel som forskjellige utførelsesformer av stasjonære og mobile skjermer etterpå.

design layout

Så, etter å ha analysert statistikken, kan vi konkludere med at den optimale bredden på stedet har 4 varianter:

1. Versjon bærbare datamaskiner med 1366 piksler bred.
2. Full HD-versjon.
3. 800 piksler i bredden størrelse layout for visning på små stasjonære skjermer.
4. Mobile versjon av nettstedet - 360 piksler i bredden.

Anta at vi bestemte oss for hva du ønsker å bruke størrelsen på genererte kildekoden for nettstedet. Men et slikt prosjekt ville fortsatt være kostbart. Så vurdere flere alternativer, denne gangen uten bruk av en fast bredde.

Lag en fleksibel layout

Det er en alternativ tilnærming som vi bare trenger å justere for den minste størrelsen på skjermen, og selve størrelsen på områder vil bli spurt prosent. I dette tilfellet grensesnittet elementer som menyer, knapper og logoer, kan defineres i absolutte verdier, med fokus på minimumsstørrelsen av bredden av skjermen i bildepunkter. Blokker med innholdet, tvert imot, vil bli strukket i henhold til den angitte prosent av bredden av skjermen området. Denne tilnærmingen gjør ikke registrerer størrelsen på området som begrensninger for designeren og talent til å slå denne nyanse.

Hva er det gylne snitt, og hvordan du bruker nettsidene til oppsettet?

Selv i renessansen mange arkitekter og kunstnere prøvde å gi sine kreasjoner den perfekte form og proporsjoner. For svar på spørsmål om konsekvensene av slike proporsjoner, henvendte de seg til dronningen av alle vitenskaper - matematikk.

Helt siden dagene i antikken ble oppfunnet av andelen som våre øyne oppfatter som den mest naturlige og elegant, fordi det er allestedsnærværende i naturen. Oppdageren av formelen for dette forholdet var en talentfull gresk arkitekt som heter Phidias. Det er beregnet at hvis de fleste av de andeler angår lav som helhet gir en større, da denne andelen vil se brønn. Men i dette tilfellet, hvis du ønsker å dele asymmetrisk objekt. Denne andelen ble senere kalt det gylne snitt, som fortsatt ikke overvurdere dens betydning for verdens kulturhistorie.

La oss gå tilbake til webdesign

Det er veldig enkelt - ved hjelp av det gylne snitt kan du designe sider som vil være mest behagelig for det menneskelige øyet. Beregnet i henhold til formelen for det gyldne snitt, finner vi det irrasjonelle tall 1,6180339887 ..., men for enkelhets skyld kan du bruke den avrundede verdien av 1.62. Dette vil bety at vår side blokkene bør være 62% og 38% av hele, uansett hvilken størrelse genererte kildekoden for nettstedet du bruker. Eksempel kan du se på følgende ordning:

Bruk av ny teknologi

Moderne teknologi layout nettsteder lar deg nøyaktig formidle ideer av designer og designer, så nå kan du råd til gjennomføring av dristigere ideer enn ved begynnelsen av Internett-teknologi. Ikke lenger trenger mye å puslespill over hva som bør være på størrelse med et nettsted. Med bruk av slike ting som blokk adaptive oppsettet, dynamisk lasting av innhold og fonter, web site utvikling har blitt mange ganger morsommere. Tross alt, disse teknologiene har mindre restriksjoner, selv om de er. Men som du vet, uten begrensning, ville det ikke være noen kunst. Vi foreslår at du bruker en virkelig kreativ tilnærming til design - det gyldne snitt. Med det, vil du være i stand til å effektivt og pent fylle arbeidsområdet, uansett hvilken størrelse eller nettsteder du spurte i malene dine.

Hvordan øke arbeidsområdet nettstedet

Sjansen er at du ikke vil ha nok plass til å huse alle grensesnittet elementer i utformingen av den lille størrelsen. I dette tilfellet, må du begynne å tenke kreativt, eller enda mer kreativ enn du gjorde før.

Maksimal frigjøre plass på tomten som mulig, skjule navigasjons i pop-up menyen. Denne tilnærmingen er logisk å bruke ikke bare mobil, men også på skrivebordet. Tross alt, ikke brukeren trenger hele tiden å se på hva har overskrifter på nettstedet ditt - det har kommet for innhold. En bruker ønsker å bli respektert.

Et eksempel på en god måte å skjule menyen er følgende oppsett (bildet under).

I det øvre hjørnet av røde området, kan du se et kryss, klikker du på menyen som gjemmer seg i et lite ikon, slik at brukeren alene med innholdet på nettstedet.

Men dette er valgfritt, kan du la navigasjons som alltid er i sikte. Men du kan gjøre det til en vakker design element, ikke bare en liste over linker på det populære nettstedet. Bruk intuitive ikoner i tillegg til tekst linker eller erstatte dem. Det vil også tillate nettstedet til mer effektiv bruk av plass på skjermen på enheten.

Beste nettsted - adaptive

Hvis du ikke vet hvilken du skal velge et oppsett for området, alt bare for deg. For å spare utviklingskostnader og samtidig ikke miste publikum på grunn av dårlig layout for noen enhet, bruker responsive web design.

Adaptive kalles en design som ser på forskjellige enheter like godt. Denne tilnærmingen gjør at nettstedet skal være tydelig og lett selv for en bærbar PC, i det minste på tegnebrettet, selv på en smarttelefon. Det oppnås denne effekten skyldes automatiske endringer i arbeidsområdet til skjermbredden. Ved hjelp av adaptive stilark for området, du tar den riktige avgjørelsen mulig.

Hva skiller den adaptive design av tilgjengeligheten av ulike versjoner av nettstedet ditt

Responsiv utforming er forskjellig fra mobilsiden, slik at i det sistnevnte tilfelle, at brukeren mottar en HTML-kode, som er forskjellig fra skrivebordet. Dette er en ulempe fra det synspunkt av å optimalisere ytelsen til serveren, samt søkemotor optimalisering. I tillegg, jo vanskeligere blir det å vurdere statistikken i henhold til ulike versjoner av nettstedet. En adaptiv metode er fri for mangler.

Tilpasningsevne for forskjellige enheter er oppnådd på grunn av utformingen bredde eller Prosent via transportblokker i den tilgjengelige plass (i vertikalplanet i stedet for den horisontale smart på en stasjonær), eller de enkelte utforminger ved å opprette forskjellige skjermer.

Du kan lære mer om responsiv design og utvikle du kan fra bøker.