Webbplatsutvecklingsteknik är en mycket mångfacetterad process. Men ändå kan alla dess stadier delas in i två huvudkomponenter - det funktionella och det yttre skalet. Eller, som är brukligt bland webbansvariga, back-end respektive front-end. Människor som beställer sina webbplatser från webbutvecklingsstudior tror ofta naivt att det är värt att bara fokusera på funktionalitet, och detta kommer att vara rätt beslut. Men detta är sant i mycket, mycket sällsynta fall, vanligtvis för startprojekt i betatestningsstadiet. Annars måste den grafiska designen och användargränssnittet helt enkelt följa webbutvecklingsstandarder och vara bekvämt.
Den första hörnstenen som gränssnittsdesignern, eller designern, möter är bredden på webbplatsens layout. När allt kommer omkring, för det är det nödvändigt att rita gränssnitt. Rent intuitivt uppstår två tillvägagångssätt - antingen gör separata layouter för varje populär skärmupplösning, eller skapa en version av sajten för alla skärmar. Och båda alternativen kommer att vara fel, men först till kvarn.
Standard webbplatsbredd i pixlarför Runet
Före utvecklingen av adaptiv layout var utvecklingen av en webbplats med en bredd på tusen pixlar ett massfenomen. Denna figur valdes av en enkel anledning - så att sajten passar in på vilken skärm som helst. Och detta har sin egen logik, men låt oss anta att en person fortfarande har åtminstone en HD-skärm på ett skrivbord. I det här fallet kommer din layout att verka som en liten remsa i mitten av skärmen, där allt sitter ihop i en hög, och på sidorna finns det ett enormt oanvänt utrymme. Låt oss nu anta att en person kommer åt din webbplats på en surfplatta med en 800px bred skärm och "Visa hela webbplatsen" är markerad i inställningarna. I det här fallet kommer din webbplats också att visas felaktigt, eftersom den helt enkelt inte passar in på skärmen.
Av dessa överväganden kan vi dra slutsatsen att en fast bredd för layouten definitivt inte är lämplig för oss och vi måste leta efter ett annat sätt. Låt oss analysera idén med en separat layout för varje skärmbredd.
Layouter för alla tillfällen
Om du som strategi har v alt att skapa layouter för alla skärmstorlekar på marknaden, då kommer din sida att vara den mest unika på hela Internet. När allt kommer omkring är det helt enkelt omöjligt idag att täcka hela utbudet av enheter och försöka finjustera för varje alternativ. Men om du fokuserar på de mest populära upplösningarna för bildskärmar och enhetsskärmar, så är idén inte dålig. Dess enda nackdel är finansiella kostnader. När allt kommer omkring, när en gränssnittsdesigner, en designer och en kodare tvingas göra samma arbete 5 eller 6 gånger, kommer projektet att kostaoproportionerligt högre än det ursprungligen budgeterade priset.
Därför kan bara ensidiga sajter skryta med ett överflöd av versioner för olika skärmar, vars syfte är att sälja en produkt och se till att göra det bra. Tja, om du inte har en av dessa landningar, utan en webbplats med flera sidor, bör du tänka vidare.
Mest populära webbplatsstorlekar
En kompromiss mellan de två ytterligheterna är att göra layouten för tre eller fyra skärmstorlekar. Bland dem måste man vara en layout för mobila enheter. Resten ska anpassas för små, medelstora och stora skrivbordsskärmar. Hur väljer man bredden på webbplatsen? Nedan presenterar vi HotLog-tjänststatistiken för maj 2017, som visar oss fördelningen av popularitet för olika enhetsskärmupplösningar, såväl som dynamiken i denna indikator.
I tabellen kan du ta reda på hur du bestämmer storleken på webbplatsen du vill använda. Dessutom kan vi dra slutsatsen att det vanligaste formatet idag är en skärm på 1366 gånger 768 pixlar. Sådana skärmar är installerade i budgetbärbara datorer, så deras popularitet är naturlig. Den näst mest populära är Full HD-skärmen, som är guldstandarden för videor, spel och därför för att skapa webbplatslayouter. Längre i tabellen ser vi upplösningen för mobila enheter 360 gånger 640 pixlar, samt olika alternativ för stationära och mobila skärmar efter den.
Designa layout
SåEfter att ha analyserat statistiken kan vi dra slutsatsen att den optimala webbplatsbredden har 4 varianter:
- Bärbar version med 1366px bredd.
- Full HD-version.
- En 800px bred layout för visning på små stationära skärmar.
- Mobilversion av webbplatsen - 360 pixlar bred.
Låt oss säga att vi har bestämt vilken storlek som ska användas för den genererade källan för webbplatsen. Men ett sådant projekt skulle ändå bli kostsamt. Så låt oss titta på fler alternativ, den här gången utan att använda en fast bredd.
Gör layouten flexibel
Det finns ett alternativt tillvägagångssätt, när det är värt att bara anpassa sig till den minsta skärmstorleken, och själva webbplatsstorlekarna kommer att ställas in i procent. Samtidigt kan sådana gränssnittselement som menyer, knappar och logotyp ställas in i absoluta värden, med fokus på minimistorleken på skärmens bredd i pixlar. Block med innehåll, tvärtom, kommer att sträckas enligt den angivna procentandelen av bredden på skärmområdet. Detta tillvägagångssätt låter dig sluta uppfatta storleken på webbplatser som en begränsning för designern och skickligt slå denna nyans.
Vad är det gyllene snittet och hur kan det tillämpas på webbsideslayout?
Även under renässansen försökte många arkitekter och konstnärer ge sina skapelser den perfekta formen och proportionerna. För svar på frågor om värdena för en sådan andel vände de sig till drottningen av alla vetenskaper - matematik.
Sedan antiken har en del uppfunnits som vårt öga uppfattar som den mest naturliga och eleganta,eftersom det är allestädes närvarande i naturen. Upptäckaren av formeln för ett sådant förhållande var en begåvad antik grekisk arkitekt vid namn Phidias. Han beräknade att om den större delen av andelen är relaterad till den mindre eftersom helheten är relaterad till den större, så kommer en sådan andel att se bäst ut. Men så är fallet om du vill dela objektet asymmetriskt. Denna andel kallades senare det gyllene snittet, som fortfarande inte överskattar dess betydelse för kulturens världshistoria.
Tillbaka till webbdesign
Det är väldigt enkelt - med det gyllene snittet kan du designa sidor som kommer att vara så tilltalande för det mänskliga ögat som möjligt. Genom att beräkna enligt definitionen av formeln för det gyllene snittet får vi det irrationella talet 1, 6180339887 …, men för enkelhetens skull kan vi använda ett avrundat värde på 1, 62. Detta kommer att innebära att blocken på vår sida bör vara 62 % och 38 % av helheten, oavsett storleken på den genererade källan för webbplatsen du använder. Du kan se ett exempel i detta diagram:
Använd ny teknik
Moderna webblayouttekniker gör det möjligt att korrekt förmedla idén om en planerare och designer, så nu har du råd att implementera mer vågade idéer än i början av internetteknik. Du behöver inte längre tänka hårt på hur storleken på sajten ska vara. Med tillkomsten av sådana saker som blockadaptiv layout, dynamisk laddning av innehåll och typsnitt har webbutveckling blivit mycket trevligare. När allt kommer omkring är dessa teknikerfärre restriktioner, även om de fortfarande finns där. Men som ni vet, utan gränser skulle det inte finnas någon konst. Vi föreslår att du använder en verkligt kreativ designstrategi - det gyllene snittet. Med den kan du effektivt och vackert fylla arbetsytan, oavsett vilka webbplatsstorlekar du anger i dina mallar.
Hur man ökar arbetsytan på sajten
Det finns en god chans att du inte har tillräckligt med utrymme för att passa in alla UI-element i en liten layout. I det här fallet måste du börja tänka kreativt eller ännu mer kreativt än du gjorde tidigare.
Maxim alt frigör utrymme på webbplatsen genom att dölja navigeringen i popup-menyn. Det är logiskt att använda detta tillvägagångssätt inte bara på mobila enheter utan även på stationära datorer. När allt kommer omkring behöver användaren inte titta hela tiden på vilka rubriker som finns på din sida – han kom för innehållet. Och användarens önskemål måste respekteras.
Ett exempel på ett bra sätt att dölja menyn är följande layout (bild nedan).
I det övre hörnet av det röda området kan du se ett kryss, genom att klicka på vilket kommer att dölja menyn i en liten ikon, vilket lämnar användaren ensam med innehållet på webbplatsen.
Detta är dock valfritt, du kan lämna navigeringen, som alltid är i sikte. Men du kan göra det till ett vackert designelement, och inte bara en lista över populära länkar på webbplatsen. Använd intuitiva ikoner utöver eller till och med istället för textlänkar. det är sammagör det möjligt för din webbplats att mer effektivt använda skärmutrymmet på användarens enhet.
Den bästa webbplatsen är responsiv
Om du inte vet vilken layout du ska välja för sajten, då är allt enkelt för dig. För att spara på utvecklingskostnader och samtidigt inte tappa din publik på grund av dålig layout för någon enhet, använd responsiv design.
Responsiv design är en design som ser lika bra ut på olika enheter. Detta tillvägagångssätt gör att din webbplats blir begriplig och bekväm även på en bärbar dator, till och med på en surfplatta, till och med på en smartphone. Denna effekt uppnås genom att automatiskt ändra bredden på skärmens arbetsområde. Genom att använda responsiva stilmallar för din webbplats fattar du det bästa möjliga beslutet.
Vad är skillnaden mellan responsiv design och webbversioner
Responsiv design skiljer sig från den mobila versionen av sajten genom att i det senare fallet får användaren en html-kod som skiljer sig från den stationära. Detta är en nackdel när det gäller serverprestandaoptimering såväl som sökmotoroptimering. Dessutom blir det svårare att beräkna statistik för olika versioner av sajten. Det adaptiva tillvägagångssättet har inte dessa nackdelar.
Responsivitet för olika enheter uppnås genom en layout med en procentandel av bredden specificerad eller genom att överföra block till det tillgängliga utrymmet (i det vertikala planet på en smartphone istället förhorisontellt på skrivbordet), eller skapa individuella layouter för olika skärmar.
Läs mer om responsiv design och utveckling i våra handledningar.
