Designa bakgrunder för webbplatser

När den en gång är den viktigaste delen av webbdesign kan en webbplats användas på många sätt för att skapa en bättre användarupplevelse.

Idag är det svårare att skapa bakgrunder än det en gång var och det presenterar några nya utmaningar, samtidigt som man begränsar en del av den potential som bakgrunder annars skulle ha.

Till exempel kan bakgrunden från tidigare tider faktiskt användas som en praktisk del av designen. Du kan till exempel sätta pilar på den för att rikta tittarens uppmärksamhet mot något viktigt.

Varför saker har förändrats beror på behovet av responsiv design och mångfalden av olika skärmstorlekar och skärmtyper som människor kanske använder.

Som ett resultat har bakgrunden blivit ett mindre viktigt element i webbplatsdesign idag, och en hel del webbplatser har ingen officiell bakgrund alls.

Är bakgrunder verkligen viktiga? För att ta reda på det, inspekterade vi de 30 bästa rankade webbplatserna (inte inklusive upprepningar) och resultaten är mycket intressanta.

Som ni ser på bilden ovan bryr de topprankade webbplatserna inte alls med bakgrunder, och det verkar inte ha gjort dem den minsta biten av skada när det gäller användarens acceptans.

Detta flyger inför konventionella tankar kring webbdesign, men det är svårt att argumentera med kalla hårda fakta. Otroligt nog sparkar den första webbplatsen på listan med bakgrund inte förrän du når nummer 10, vilket är Twitter, och den bakgrunden är bara synlig om du inte är inloggad.

På de 30 bästa webbplatserna för 2017 var de enda webbplatserna med korrekt bakgrund:

  • Twitter, med fotografisk bakgrund (rankad som 10: e)
  • Live (Outlook), med en färg i bakgrunden (rankad som 12: e)
  • NetFlix, med en collagebakgrund (rankad 21)
  • WordPress, med solid färgbakgrund (rankad 26)th)
  • Bing, med fotografisk bakgrund (rankad 29)th)
  • Tumblr, med fotografisk bakgrund (rankad 30)th)

Så bara 20 procent av de 30 bästa webbplatserna hade bakgrunder, och de som gjorde det låg nere på listan.

Den enda fördelen med en webbplatsbakgrund är att den hjälper till att bibehålla en känsla av webbplatsidentitet på flera sidor, men eftersom det finns andra element som kan uppnå detta mål lika bra och kanske bättre, är det egentligen inte en stor fördel.

Nackdelarna är många. Bakgrunder innebär extra utmaningar när det gäller webbplatsens lyhördhet och kan kräva ofta uppdatering för att undvika att bli gammal.

En annan utmaning för den moderna designern är att det förutom statiska bakgrunder nu också är möjligt att skapa videobakgrunder. Om du väljer det senare är det viktigt att veta vad du gör, eftersom många användare kommer att hitta en dålig upptäckt videobakgrund som är irriterande.

Med så många anledningar till att inte använda bakgrunder kan du kanske välja att gå i fotspåren på de högst rankade webbplatserna och dike hela bakgrundsidén en gång för alla. Men om den korta insisterar på att webbplatsen måste ha bakgrund, vad kan du göra? Det är vad vi försöker lösa i resten av den här artikeln.

Bakgrunder bör finnas

Innehållet måste alltid ligga på ett lager ovanför sidobakgrunden. Om du inte delar upp dina sidelement i olika lager kan det skapa problem för dig när något måste ändras.

Det är bäst att använda denna lagerseparation så mycket som möjligt. Behöver till exempel webbplatsens logotyp integreras direkt i bakgrunden? Oftast skulle det vara mer förnuftigt att ha logotypen i ett separat lager. På så sätt om logotypen måste uppdateras, kan den uppdateras oberoende av hela bakgrunden.

Att använda lager på detta sätt innebär mer arbete för dig på skapelsidan av saker, men mindre arbete på underhållssidan. Det ger dig också maximal kontroll, eftersom du kan dölja saker, flytta dem eller få dem att bete sig annorlunda beroende på dina behov när som helst.

Den här bilden visar den perfekta strukturen för en mall för bakgrundsdesign:

Inom varje lager (utom basskiktet) finns det utrymme att skapa ytterligare lager för ännu större grad av separering om du skulle behöva dem.

Ju fler grader av separering du skapar, desto mer kontroll kan du få. Du kanske känner att det inte är viktigt för dig just nu, men det händer ofta att det blir en faktor senare.

Det enskilt viktigaste att förstå är att "bakgrunden" är allt som inte är innehåll. Så text eller bilder som är tänkta att finnas på sidan men inte som innehåll räknas som en del av bakgrunden, men inte alla klassificerar dem på det sättet.

Inramning

Redan under de tidiga dagarna av webbdesign var inramning bara en enkel fråga om att träna ut var ditt innehåll ska vara i förhållande till bakgrunden. I denna dag med responsiv design är det emellertid vanligtvis mer komplicerat än så.

Med lyhörd design har du bara två val att hantera inramningsfrågan. Det första alternativet är att skala innehållet och bakgrundsbilden relativt den tillgängliga skärmstorleken. Detta är optimalt när designintegriteten är den viktigaste faktorn, men detta kommer att vara ganska sällsynt.

Det andra alternativet är att fasa ut delar av bakgrunden, eller till och med hela bakgrunden, i den vanligare situationen där innehållets läsbarhet är viktigare än designintegritet.

Denna fråga om "designintegritet" betyder förresten helt enkelt att designen alltid ser densamma ut, oavsett vilken typ av skärm den visas på. Det motsatta är där innehållet alltid ser ut (mer eller mindre) samma oavsett vilken typ av skärm det visas på.

Använd skalning för lyhördhet

När du använder skalning för att hålla enhetlig inramning över olika enhetstyper och orientering bibehåller den designens integritet, men resultatet kan fortfarande inte alltid vara vad du kan förvänta dig eller till och med önskar, särskilt om du använder en fotografisk bakgrund.

Låt oss kolla in ett exempel på denna teknik i aktion. Börjar med Samsung Galaxy S5 i porträttläge (Observera att dessa bilder är skalade för att passa i artikeln, så texten du kan se där är faktiskt läsbar på själva enheten).

Så här ser det ut i liggande läge (det är nästan alltid bättre att hålla en telefon i liggande orientering för allt utom att ringa telefoner, men människor insisterar fortfarande på att hålla sina telefoner i porträttorientering.

Som ni ser är layouten helt fin när den skalas, även om du bara har 640 x 360 pixlar att arbeta med. Nästa upp har vi iPad i porträttorientering.

Och landskap.

Det du kommer att märka när skalningen används är att det finns liten variation mellan olika enheter och upplösningar, förutom att det kan finnas mycket slösat vertikalt utrymme i porträttvyn.

Det skulle faktiskt vara bättre att använda olika metoder på bakgrunds- och innehållsdelarna, så att menyalternativen skulle lindras i ett 2 × 2-rutnät istället för att alltid stanna kvar i 1 × 4-layout, men skälet till att det inte görs på det sättet är för det är omöjligt att förutsäga hur mycket vertikalt utrymme som finns tillgängligt.

Fördelen med skalning är alltså när du vill se till att en del alltid finns kvar, oavsett omständigheterna kan vara.

Med hjälp av fasad hud & avslöjar lyhördhet

Ett mer praktiskt scenario, och det som de flesta designers vill använda mest av tiden, är en design där bakgrunden (eller delar av den) helt enkelt kan fasas ut om det inte finns tillräckligt med utrymme att visa det, så webbplatsens innehåll alltid får maximal uppmärksamhet.

Här är ett exempel på skillnaden när du använder den här metoden. Vi använder samma enheter och orienteringar för att illustrera. Först är Samsung Galaxy S5 porträtt.

Samsung Galaxy S5 landskap.

iPad-porträtt.

iPad-landskap.

Här kan du se en betydande skillnad mellan enheter. Den lilla skärmen på Samsung Galaxy S5 tillåter inte att bakgrunden visas, oavsett om enheten hålls i stående eller liggande orientering, och vad som visas justeras för att passa det tillgängliga utrymmet.

När samma webbplats visas på iPad visas bakgrunden alltid oberoende av orientering, men det finns en viss skillnad i vad som ses.

Bästa koncept för bakgrundsdesign (i ordning)

1. Fast färg (eller ingen färg)

2. Fotografisk (utsträckt)

3. Liten kakel (perfekt sömlös)

4. Stor kakel (perfekt sömlös)

Vad du bör undvika är att belägga med fotografiska bakgrunder såvida det inte kan göras på ett sådant sätt att det inte märks. Stretching är normalt bäst för fotografiska bakgrunder eller för att begränsa dem inom ett fördefinierat utrymme.

Tiden för den stora splashy bakgrunden är ganska mycket död utom för specialsidor som endast är avsedda för visning på ett skrivbord. De flesta bakgrunder designade för stationära datorer kommer inte att se bra ut när de visas på telefoner.

En lösning du kan göra är att ställa in ett stort antal brytpunkter i din CSS-fil och utforma enskilda bakgrunder för varje brytpunkt, men som vanligt har du utmaningen att det tillgängliga vertikala utrymmet aldrig kan beräknas, även om enhetstypen är känd .

header image med tillstånd av

Bogdan Rancea

Bogdan är en av grundarna i Inspired Mag och har samlat nästan 6 års erfarenhet under denna period. På fritiden gillar han att studera klassisk musik och utforska bildkonst. Han är ganska besatt av fixies också. Han äger redan 5.