Standardmått platser: funktioner, krav och rekommendationer

Teknikutvecklingen av webbplatser - en mycket mångfacetterad process. Men alla dess stadier kan delas upp i två huvudkomponenter - en funktionell och en yttre mantel. Eller som på medellång webmaster Beg End och Front End respektive. Personer som köpt sina webbplatser i studios webbutveckling, ofta tror naivt att det är nödvändigt att fokusera enbart på funktionell, och det kommer att vara rätt beslut. Men detta är sant i en mycket, mycket sällsynta tillfällen, oftast för nystartade projekt i det skede av beta-testning. Resten av grafisk design och användargränssnitt helt enkelt skyldiga att följa webbstandarder utveckling och vara bekväm.

Den första hörnstenen inför gränssnittsdesigner, eller designer - är bredden på sidans utseende. När allt kommer omkring är det nödvändigt att dra gränssnitt för henne. Intuitivt finns två tillvägagångssätt - antingen för att göra separata layouter för varje populära skärmupplösningar, eller så kan du skapa en version av webbplatsen för alla kartor. Båda alternativen skulle vara fel, men det viktigaste först.

Standard bredd i pixlar för webbplatsen du någonsin behöver

Före utvecklingen av adaptiva layout massfenomen har varit utvecklingen av en webbplats med tusentals pixlar bred. Denna siffra valdes för en enkel anledning - att platsen placerades på en skärm. Och det finns en viss logik, men låt oss anta att en person är fortfarande minst HD-skärm på skrivbordet. I detta fall kommer din layout verkar liten remsa i mitten av skärmen, där allt är gjuten i en hög och på sidorna av den enorma icke-space. Låt oss nu anta att en person kom till din webbplats från en tablett med en skärm på 800 pixlar i bredd, och kontrolleras i inställningarna "Visa webbplatsen den fullständiga versionen." I detta fall kommer din webbplats också visas felaktigt som helt enkelt inte passar in i skärmen.

Från dessa överväganden kan vi konstatera att en fast bredd för layouten, vi bara inte passar och du vill hitta en annan väg. Låt oss analysera idén om en separat layout för varje skärmbredd.

Layouter för alla tillfällen

Om du har valt som en strategi för att skapa layouter för alla skärmstorlekar som finns på marknaden, då din webbplats kommer att vara den mest unika på Internet. När allt kommer omkring är det i dag helt enkelt omöjligt att täcka hela olika enheter i ett försök att göra en exakt inställning för varje alternativ. Men om du fokuserar på de mest populära monitor upplösning och skärmanordningar, är tanken god. Dess enda nackdel - de finansiella kostnaderna. När allt kommer omkring, när designern gränssnittsdesigner och programmerare kommer att tvingas att 5 eller 6 gånger för att utföra samma arbete, kommer projektet att kosta oproportionerligt ursprungligen planterats till låga priser.

Därför skryta ett överflöd av versioner för olika skärmar kan vara förutom att sites-odnostranichniki vars syfte - att sälja en produkt och vara säker på att göra det bra. Tja, om du inte är en av dem Landing, en multi-site, står det att resonera vidare.

De mest populära storlekar platser

En kompromiss mellan de två ytterlighet är en ritning av layouten för tre eller fyra skärmstorlekar. Bland dem, måste man vara en layout för mobila enheter. Resten måste anpassas för små, medelstora och stora skrivbordet. Hur man väljer bredden på sajten? Nedan presenterar vi HotLog statistik tjänster för maj 2017, som visar oss fördelningen av populariteten av olika skärmupplösning på enheten, liksom dynamiken i förändringar i denna indikator.

Av tabellen är det möjligt att lära sig att bestämma storleken på den plats som du vill använda. Dessutom kan man dra slutsatsen att det i dag det vanligaste formatet är skärmen i 1366 x 768 punkter. Dessa skärmar är installerade i en budget laptop, så deras popularitet är naturligt. Den näst mest populära är en Full HD-skärm, vilket är den gyllene standarden för filmer, spel, och därför att skapa plats layouter. Vidare i tabellen ser vi tillåter mobila enheter 360 x 640 pixlar, samt olika utföranden av stationära och mobila skärmar efteråt.

design layout

Så efter att ha analyserat statistiken kan vi konstatera att den optimala bredden på platsen har 4 varianter:

1. Version bärbar dator med en bredd på 1366 bildpunkter.
2. Full HD-version.
3. 800 pixlar i bredd storlek layout för visning på små datorskärmar.
4. Mobil version av webbplatsen - 360 pixlar i bredd.

Antag att vi bestämt vad du vill använda storleken på genererade källkoden för webbplatsen. Men ett sådant projekt skulle fortfarande bli kostsamt. Så överväga fler alternativ, denna gång utan att använda en fast bredd.

Gör en flexibel layout

Det finns en alternativ metod som vi bara behöver justera för den minsta storleken på skärmen, och med beaktande av storleken av platser kommer att bli ombedd procent. I detta fall, de gränssnittselement såsom menyer, knappar och logotyper, kan definieras i absoluta termer, med fokus på den minsta storleken av bredden på skärmen i pixlar. Block med innehållet, tvärtom, att sträckas enligt angiven procent av bredden på skärmytan. Detta tillvägagångssätt gör inte identifiera storleken på webbplatsen som begränsningar för designer och talang för att slå denna nyans.

Vad är det gyllene snittet, och hur man använder webbsidor till layout?

Även i renässansen många arkitekter och konstnärer försökte ge hans skapelser den perfekta formen och proportioner. För svar på frågor om konsekvenserna av sådana proportioner, vände de sig till drottningen av alla vetenskaper - matematik.

Ända sedan dagarna av antiken uppfanns av den andel som vårt öga uppfattar som det mest naturliga och elegant, eftersom det är allmänt förekommande i naturen. Upptäckare formeln för detta förhållande var en begåvad grekisk arkitekt som heter Phidias. Det beräknas att om de flesta av de proportioner avser låg i sin helhet ger en större, då denna andel kommer att se bra. Men i detta fall, om du vill dela asymmetriskt objekt. Denna andel blev senare kallad det gyllene snittet, som fortfarande inte överskatta dess betydelse för världens kulturhistoria.

Låt oss gå tillbaka till webbdesign

Det är väldigt enkelt - med hjälp av det gyllene snittet, kan du designa sidor som är mest tilltalande för det mänskliga ögat. Beräknat enligt formeln för det gyllene snittet, finner vi det irrationellt tal 1,6180339887 ..., men för enkelhetens skull kan du använda den rundade värdet av 1,62. Detta innebär att vår sida block bör vara 62% och 38% av hela, oavsett vilken storlek genererade källkoden för den webbplats som du använder. Exempel kan du se på följande schema:

Användning av ny teknik

Modern teknik layout webbplatser kan du exakt förmedla idéer designern och formgivaren, så nu kan du råd att genomföra djärvare idéer än i början av Internet-teknik. Inte längre behöver mycket att fundera över vad som borde vara storleken på en webbplats. Med tillkomsten av sådana saker som blocket adaptiv layout, dynamisk belastning av innehåll och typsnitt, utveckling av webbplatsen har blivit många gånger roligare. När allt kommer omkring, dessa tekniker har färre begränsningar, trots att de är. Men som ni vet, utan begränsning, skulle det inte finnas någon konst. Vi föreslår att du använder en verkligt kreativ inställning till design - det gyllene snittet. Med det kommer du att kunna effektivt och fint fylla arbetsytan, oavsett storlek eller webbplatser du frågade mallar.

Hur man kan öka arbetsytan site

Chansen är stor att du inte kommer att ha tillräckligt med utrymme för att rymma alla gränssnittselement i utformningen av den lilla storleken på. I det här fallet måste du börja tänka kreativt, eller ännu mer kreativa än du gjorde tidigare.

Maximal frigöra utrymme på sajten som möjligt, dölja navigering i popupmenyn. Detta tillvägagångssätt är logiskt att använda inte bara mobil, utan även på skrivbordet. När allt kommer omkring, behöver användaren inte behöver hela tiden att titta på vad som rubriker på din webbplats - den har kommit för innehåll. En användare vill respekteras.

Ett exempel på ett bra sätt att dölja menyn är följande layout (bilden nedan).

I det övre hörnet av den röda området, kan du se ett kors, klicka på menyn som gömmer sig i en liten ikon, lämnar användaren ensam med webbplatsens innehåll.

Detta är dock frivilligt, kan du lämna navigering som alltid är i sikte. Men du kan göra det en vacker design element, inte bara en lista med länkar på den populära sajten. Använd intuitiva ikoner förutom textlänkar eller ens ersätta dem. Det kommer också att låta din webbplats för att mer effektivt utnyttjande av skärmutrymmet på enheten.

Bästa webbplats - adaptiv

Om du inte vet vilken du ska välja en layout för webbplatsen, allt bara för dig. För att spara på utvecklingskostnader och samtidigt inte förlora publiken på grund av dålig layout för någon enhet använder responsiv webbdesign.

Adaptiv kallas en design som ser ut på olika enheter lika bra. Detta tillvägagångssätt gör att din webbplats för att vara tydlig och lätt även för en bärbar dator, åtminstone på tabletten, även på en smartphone. Det uppnådde denna effekt beror på automatiska ändringar i arbetsområdet skärmens bredd. Med hjälp av adaptiva formatmallar för webbplatsen, du tar rätt beslut möjligt.

Det som skiljer den adaptiva utformningen av tillgången till olika versioner av din webbplats

Responsiv design skiljer sig från den mobila webbplatsen så att i det senare fallet får användaren en html-kod, som skiljer sig från skrivbordet. Detta är en nackdel ur synpunkt att optimera prestanda på servern, samt sökmotoroptimering. Dessutom, desto svårare blir det att betrakta statistiken enligt olika versioner av webbplatsen. En adaptiv metod saknar brister.

Anpassningsförmåga för olika enheter åstadkommes på grund av bredden orienteringen eller Procentsatser via transportblock i det tillgängliga utrymmet (i det vertikala planet i stället för den horisontella smartphone på ett skrivbord), eller de individuella layouter genom att skapa olika skärmar.

Du kan läsa mer om responsiv design och utveckla du kan från böcker.