Bakgrundsbilder som täcker webbläsarfönstret
De flesta webbplatser har en enfärgad bakgrund. En del har en upprepningsbar bakgrundsbild (textur), som t ex kan föreställa en trästruktur eller en tapet. Sådana bilder kan man skapa i t ex Adobe Photoshop med en kreativ kombination av filtret ”Förflyttning”, klonpensel och lagerhantering. Eftersom behovet av upprepningsbara bilder inom t ex spelutveckling och 3d-modellering har funnits sen tidernas gryning är det naturligt att även äldre versioner av Photoshop klarar det med bravur.
Men ibland vill man ha en bild som verkligen täcker hela fönstret, utan upprepning. T ex en stämningsfull höstbild. Då behöver man tänka på att folk har olika skärmupplösning, och en bild i full HD (1920*1080) som ser jättebra ut på en bra skärm kommer att bli extremt beskuren på en lågupplöst netbook. Dessutom är det slöseri med bandbredd. Därför behöver man använda JavaScript för att se vilken upplösning besökaren har. JavaScriptet skickar sedan en förfrågan till en php-fil som körs i en dold iframe. Php-filen skalar då om bilden med hjälp av gdlib så att den blir rätt upplösning, och sätter den som bakgrund på sidan med ett JavaScript.
Att skala om bilder för varje besökare kostar dock en hel del processorkraft för vilken server som helst, och ger en oacceptabel fördröjning för besökaren. Därför sparas alla omskalade bilder, och php-filen kollar först om det inte redan finns en bild med rätt upplösning.
Men varför skärmupplösning? Blir inte bilderna mindre om man går på fönsterstorlek i stället?
Jo, de blir mindre. Och om det handlade om bildspel är det bättre med fönsterstorlek. Men användartester visar att många besökare gärna förstorar webbläsarfönstret om bakgrundsbilden är riktigt snygg. Och det ser inte så bra ut om bilden bryts mot en enfärgad bakgrund. Dessutom blir det färre omskalade kopior av bilden som behöver sparas på servern.
Uppdatering 2010-09-17
Vi använder ovanstående lösning för vår egen webbplats www.jarnakommunikation.se. Det är viktigt att omskalning och beskärning sker med avseende på både höjd och bredd, för att undvika att bilden förvrängs. Då ser det ut ungefär som när ett tv-program för 4:3-format sträcks ut i widescreen-format.
Relaterade inlägg:
Överjärva Gård – En lantlig oas mitt i stan
När Överjärva Gård ville förnya sin hemsida fanns det två tydliga önskemål, att det skulle bli enklare för personalen att uppdatera hemsidan och att hemsidan skulle stämma överens med den grafiska profilen och det övriga befintliga tryckta materialet. Vi fick uppdraget och har tillsammans med Gunilla Stålfelt på Överjärva Gård jobbat fram den nya webbplatsen.
Vi jobbade initialt fram en ny form och när sedan den nya hemsidan var klar rent tekniskt så besökte jag Överjärva Gård och höll en kort utbildning i hur man skapar nya sidor, ändrar texter och laddar upp bilder. Den nya webbplatsen kan medarbetarna på ett enkelt sätt uppdatera och vidareutveckla rent innehållsmässigt efter kommande behov. Vi har skapat en flexibel designlösning som gör att dom även har stora möjligheter att laborera med innehållet rent layoutmässigt.
Därefter kunde dom själva börja arbeta med hemsidans innehåll och det är precis det som är vår nya strategi, att så tidigt som möjligt engagera kunden i själva arbetet med innehållet i webbpubliceringssystemet. På så sätt kommer dom att vara varma i kläderna och känna sig hemmastadda och trygga med att göra alla typer av ändringar rent innehållsmässigt när sidan är klar att publicera.
Det är härligt att se att dom nu vårdar hemsidan och håller den aktuell och intressant!
Överjärva gård ligger som en lantlig liten oas i Solna (vid Ulriksdalsfältet strax norr om Järva krog) och är ett perfekt utflyktsmål för den ekonyfikna. Där kan du besöka djuren, ekofika, titta i gårdsbutikerna eller statarmuseet, hålla din fest eller konferens och mkt mer. För barn och ungdomar finns Solna naturskola som erbjuder naturskoledagar och kursdagar i hållbar livsstil för förskolan, grundskolan och gymnasiet samt folkhögskolor. Gården ligger som en lantlig liten oas i Solna (vid Ulriksdalsfältet strax norr om Järva krog).
Vårt uppdrag: Design, utveckling, utbildning.
Webbpubliceringssystem: Typo3
