Standard dimensioner sites: funktioner, krav og anbefalinger

Teknologi udvikling af hjemmesider - en meget mangesidet proces. Men alle dens faser kan opdeles i to hovedkomponenter - en funktionel og en ydre kappe. Eller, som på mellemlang webmaster Beg End og frontend hhv. Mennesker, der har købt deres hjemmesider i webudvikling studier, ofte naivt at tro, at det er nødvendigt at fokusere kun på funktionelt, og det vil være den rigtige beslutning. Men dette er sandt i en meget, meget sjældne tilfælde, som regel for nystartede virksomheder i projekter på den fase af beta-test. Resten af grafisk design og brugerflade er simpelthen forpligtet til at overholde webudvikling standarder og være komfortable.

Den første hjørnesten vender mod grænsefladen designer eller designer - er bredden af webstedets layout. Efter alt, er det nødvendigt at trække grænseflader for hende. Intuitivt er der to tilgange - enten at lave særskilte layout for hver af de populære skærmopløsninger, eller du kan oprette en version af hjemmesiden for alle kort. Begge muligheder ville være forkert, men første ting først.

Standard bredde i pixels for det websted, du nogensinde har brug for

Forud for udviklingen af adaptiv layout massefænomen har været udviklingen af et site med tusindvis af pixels bredt. Dette tal blev valgt af den simple årsag - at stedet blev placeret på enhver skærm. Og der er en vis logik, men lad os antage, at en person er stadig mindst HD-skærm på skrivebordet. I dette tilfælde vil dit layout virke lille strimmel i midten af skærmen, hvor alt er støbt i et bunke, og på siderne af den enorme ikke-rummet. Lad os nu antage, at en person kom til dit websted fra en tablet med en skærm på 800 pixels i bredden, og er markeret i indstillingerne "Vis webstedet den fulde version." I dette tilfælde vil din hjemmeside også blive vist forkert, da simpelthen ikke passer ind i skærmen.

Ud fra disse overvejelser, kan vi konkludere, at en fast bredde for layout, vi bare ikke passer, og du ønsker at finde en anden måde. Lad os analysere ideen om en særskilt layout for hver skærm bredde.

Layout til alle lejligheder

Hvis du har valgt som en strategi til at skabe layouts for alle skærmstørrelser til rådighed på markedet, så dit websted vil være den mest unikke på internettet. Efter alt, i dag er det simpelthen umuligt at dække hele række enheder i et forsøg på at lave en nøjagtig indstilling for hver valgmulighed. Men hvis du fokuserer på de mest populære skærm opløsning og screen-enheder, ideen er god. Dens eneste ulempe - de finansielle omkostninger. Efter alt, når designeren grænseflade designer og koder vil blive tvunget til 5 eller 6 gange for at udføre det samme arbejde, vil projektet koste uforholdsmæssigt oprindeligt plantet til budget priser.

Derfor prale et væld af versioner til forskellige skærme kan være, bortset fra at den sider-odnostranichniki hvis formål - at sælge et produkt, og sørg for at gøre det godt. Tja, hvis du ikke er en af dem Landing, en multi-site, det er indlysende yderligere.

De mest populære størrelser af sider

Et kompromis mellem de to yderpunkter er en tegning af layout til tre eller fire skærmstørrelser. Blandt dem, skal man være et layout til mobile enheder. Resten skal tilpasses til små, mellemstore og store stationære skærm. Hvordan vælger bredden på sitet? Nedenfor præsenterer vi HotLog statistik tjeneste for maj 2017 som viser os fordelingen af populariteten af forskellige skærmopløsning på enheden, samt dynamikken i forandring i denne indikator.

Af tabellen er det muligt at lære at bestemme størrelsen af det websted, du vil bruge. Derudover kan det konkluderes, at den mest almindelige i dag er skærmformatet på 1366 x 768 pixels. Disse skærme er installeret i et budget bærbar, så deres popularitet er naturligt. Det næste mest populære er en Full HD-skærm, der er den gyldne standard for film, spil, og derfor at skabe sitelayouts. Yderligere i tabellen, vi ser tillader mobile enheder 360 x 640 pixels, samt forskellige udformninger af stationære og mobile skærme bagefter.

design layout

Så efter at have analyseret statistikken, kan vi konkludere, at den optimale bredde af sitet har 4 varianter:

1. Version laptops med 1366 pixels bredt.
2. Full HD-versionen.
3. 800 pixels i bredden størrelse layout til visning på små stationære skærme.
4. Mobil version af hjemmesiden - 360 pixels i bredden.

Antag, at vi har besluttet, hvad du vil bruge størrelsen af genererede kildekode for webstedet. Men et sådant projekt ville stadig være dyrt. Så overveje flere muligheder, denne gang uden brug af en fast bredde.

Lav en fleksibel indretning

Der er en alternativ tilgang, som vi behøver kun at justere for den mindste størrelse på skærmen, og den blotte størrelse af steder vil blive bedt procent. I dette tilfælde de interface elementer såsom menuer, knapper og logoer, kan defineres i absolutte tal, med fokus på den mindste størrelse af skærmens bredde i pixels. Blokke med indholdet, tværtimod, vil blive strakt i henhold til den angivne procent af bredden af skærmen området. Denne fremgangsmåde giver ikke registrere størrelsen af lokaliteten som begrænsninger for designeren og talentet til at slå denne nuance.

Hvad er det gyldne snit, og hvordan du bruger websider til layoutet?

Selv i renæssancen mange arkitekter og kunstnere forsøgte at give hans kreationer den perfekte form og proportioner. For svar på spørgsmål om konsekvenserne af et sådant omfang, at de henvendte sig til dronningen af alle videnskaber - matematik.

Lige siden de dage i oldtiden blev opfundet af den andel, som vores øjne opfatter som den mest naturlige og elegante, fordi det er allestedsnærværende i naturen. Opdageren af formlen for dette forhold var en talentfuld græsk arkitekt ved navn Phidias. Det er beregnet, at hvis de fleste af andelene angår lav som helhed giver et større, så denne andel vil se godt. Men i dette tilfælde, hvis du ønsker at opdele asymmetrisk objekt. Denne andel senere blev kaldt det gyldne snit, der stadig ikke overvurdere dens betydning for verdens kulturhistorie.

Lad os gå tilbage til webdesign

Det er meget simpelt - ved hjælp af den gyldne snit, kan du designe sider, der vil være mest tiltalende for det menneskelige øje. Opgjort efter formlen for det gyldne snit, finder vi det irrationelle tal 1,6180339887 ..., men for nemheds skyld kan du bruge den afrundede værdi på 1,62. Dette vil betyde, at vores side blokke bør være 62% og 38% af det hele, uanset hvilken størrelse genereret kildekoden til det websted, du bruger. Eksempel du kan se på nedenstående skema:

Anvendelse af ny teknologi

Moderne teknologi layout hjemmesider giver dig mulighed for præcist at formidle ideer designeren og designeren, så nu kan du råd gennemførelsen af dristige ideer end ved indgangen til internet-teknologi. Ikke længere brug for meget at puslespillet over, hvad skal være på størrelse med et websted. Med fremkomsten af sådanne ting som blok adaptive layout, dynamisk belastning af indhold og skrifttyper, web site udvikling er blevet mange gange sjovere. Efter alt, disse teknologier har færre restriktioner, selvom de er. Men som du ved, uden begrænsning, ville der ikke være kunst. Vi foreslår, at du bruger en virkelig kreativ tilgang til at designe - det gyldne snit. Med det, vil du være i stand til effektivt og pænt udfylde arbejdsområdet, uanset hvilken størrelse eller steder du spurgt i dine skabeloner.

Hvordan kan man øge arbejdsområde websted

Chancerne er, at du ikke vil have plads nok til at rumme alle de interface elementer i layoutet af den lille størrelse. I dette tilfælde bliver du nødt til at begynde at tænke kreativt, eller endnu mere kreative end du gjorde før.

Maksimal ledig plads på sitet som muligt, gemmer navigationen i pop-up-menuen. Denne tilgang er logisk at bruge ikke kun mobil, men også på skrivebordet. Efter alt, behøver brugeren ikke brug for al den tid til at se på, hvad har overskrifter på dit websted - det er kommet til indhold. En bruger ønsker at blive respekteret.

Et eksempel på en god måde at skjule menuen er følgende layout (billedet nedenfor).

I øverste hjørne af det røde område, kan du se et kryds, skal du klikke på den menu, der gemmer sig i et lille ikon, der forlader brugeren alene med hjemmesidens indhold.

Men dette er valgfrit, kan du lade den navigation, der altid er i syne. Men du kan gøre det et smukt design element, ikke bare en liste af links på det populære site. Brug intuitive ikoner i tillæg til tekst links eller endda udskifte dem. Det vil også give dit websted til en mere effektiv udnyttelse af skærmplads på din enhed.

Bedste hjemmeside - adaptive

Hvis du ikke ved, hvilken du skal vælge et layout for webstedet, alt til dig. For at spare på omkostningerne til udvikling og samtidig ikke miste publikum på grund af dårlig layout for nogle skal der anvendes lydhør webdesign.

Adaptive kaldes et design, der ser ud på forskellige enheder lige godt. Denne tilgang vil give dit websted for at være klar og let selv for en bærbar computer, i det mindste på tabletten, selv på en smartphone. Det opnåede denne effekt skyldes automatiske ændringer i arbejdsområdet på skærmen bredde. Ved hjælp af adaptive style sheets til webstedet, er du tager den rigtige beslutning muligt.

Hvad adskiller den adaptive design af tilgængeligheden af forskellige versioner af dit website

Responsive design er forskellig fra den mobile websted, så i sidstnævnte tilfælde, at brugeren modtager en html-kode, som er forskellig fra skrivebordet. Dette er en ulempe fra synspunkt optimering af serveren, samt søgemaskine optimering. Hertil kommer, jo sværere bliver det at overveje statistikken i henhold til forskellige versioner af sitet. En adaptiv tilgang er blottet for mangler.

Tilpasningsevne til forskellige enheder er opnået på grund af layoutet bredde eller Procenter via transport blokke i den tilgængelige plads (i det lodrette plan i stedet for den horisontale smartphone på en desktop), eller de individuelle layouts ved at skabe forskellige skærmbilleder.

Du kan læse mere om responsive design og udvikle du kan fra bøger.