[html of js?] Hoe krijg ik de juiste resolutie voor de site?

[Anoniem: 51239]

Mijn opdrachtgever wil een site met een grote foto als achtergrond. Deze moet schermvullend zijn, dus geen venster met daaromheen wit bijvoorbeeld. Op de foto ligt een transparante layer waarin de tekst staat. Ik heb dit in html gemaakt met daarop een flash-menunavigatie (van 55 bij 310 groot) en . Mijn vraag is: hoe krijg is de site nu zo, dat voor elke gebruiker die een andere schermgrootte heeft, de foto toch beeldvullend is?

Ik heb de background nu in een table staan, maar had hem eerst in de css waarin ik uiteraard gedefinieerd had die er no repeat van toepassing was etc. Hieronder een link naar een voorbeeld. Ik heb nu de resolutie 800 keer 600, maar wil het uiteraard groter. Alleen: hoe groter, hoe meer mensen horizontaal moeten scrollen, en dat mag natuurlijk niet. Maar 800 x 600 is te klein, zoals je kunt zien.

Ik ben nog aan het klooien geweest met een js-je dat checkte welke resolutie de gebruiker had en afhankelijk daarvan een andere backimagegrootte laadt, maar dat is een rotwerk. Je moet dan straks voor elke pagina al die verschillende achtergronden maken, incl. de transparante layer die dan steeds weer andere verhoudingen krijgt met de background. Brr. Dat schiet ook zijn doel voorbij, het moet toch simpeler kunnen? Wat zie ik nou niet? Wat kan ik doen om iedereen een beeldvullende foto te geven?

^{Ik heb er even een testnavigatie ingezet om de id van mijn klant even te beschermen uiteraard, maar het gaat om het idee.}

Voorbeeld

[Rowanov]

Als je de hele site in flash maakt zou je je flash een hoogte en breedte van 100% kunnen geven. Een tweede maar zeer ranzige oplossing zonder js, is om een plaatje neer te zetten met 100% hoogte en breedte en de rest van je site er absoluut gepositioneerd overheen leggen.

[Anoniem: 51239]

Dank. Helaas ben ik niet zo handig in Flash dat ik met Macromedia Flash (wat ik wel bezit) een hele site kan maken. Althans, ik heb het nog nooit gedaan. Je tweede oplossing begrijp ik niet helemaal. Dat plaatje gaat dan toch bij grotere beeldschermresoluties niet passen? Of bedoel je dat het dan uit elkaar getrokken gaat worden, of korrelig wordt?

[André]

Ik zou aan je opdrachtgever vertellen dat dit nooit mooi op te lossen is aangezien je een plaatje gaat uitrekken. Verder lijkt het er op dat dit een soort splash page wordt voor de site, en dat is sterk af te raden ivm zoekmachines. De navigatie in deze vorm zou ik gewoon met plaatjes en wat html doen aangezien Flash hier totaal niet nodig is.

[OkkE]

Wat jij (je opdrachtgever) wil, is niet mogelijk zonder dat het plaatje 'korrelig' wordt. In zulke gevallen probeer ik de opdrachtgever altijd duidelijk te maken dat wat hij wil gewoon nooit mooi wordt.

Of je moet het formaat van het browserscherm gaan afvangen met javascript en (realtime) de source van de afbeelding aanpassen (waarbij je voor elke resolutie een andere file maakt). Dit is echter - imho - een zeer smerige oplossing die je niet wilt.

Mijn advies (op volgorde van meest wenselijk);
1. Afbeelding zo aanpassen dat deze horizontaal ge-repeat kan worden
2. Opdrachtgever proberen te overtuigen dat het anders moet/kan
3. Afbeelding zo groot maken (1600x1200) dat deze altijd groot genoeg is (je ziet dan vrij weinig op 800x600)
4. Gehele website in Flash bouwen (op hoge resolutie wordt de afbeelding dus korrelig)
5. "Klooien" met javascript om de afbeelding altijd 100% te maken

[RM-rf]

Anoniem: 51239 schreef op woensdag 13 september 2006 @ 09:15:
Dank. Helaas ben ik niet zo handig in Flash dat ik met Macromedia Flash (wat ik wel bezit) een hele site kan maken. Althans, ik heb het nog nooit gedaan. Je tweede oplossing begrijp ik niet helemaal. Dat plaatje gaat dan toch bij grotere beeldschermresoluties niet passen? Of bedoel je dat het dan uit elkaar getrokken gaat worden, of korrelig wordt?

precies.... het 'upscalen', maar sowieso het hele schalen vaneen plaatje naar venstergrootte wordt onherroepelijk lelijk, overigens, evenzeer als je dat in Flash doet.

bij standaard <img src="blah.jpg" style="width:100%;height:100%;"> kloppen sowieso de verhoudingen niet meer, dat kan je deels oplossen door mbhv javascript de grootste hoogte danwel breede af te vangen en het plaatje hiernaar aan te passen, zodat eventuele overloop wegvalt, dan krijg je iig niet een 'uitgerekt' lelijk plaatje...

maar het blijft zo dat er lelijke effecten gaan optreden bij het schalen van een bitmap-plaatje, die dus eigenlijk gewoon vaste pixelafmetingen heeft...

Hooguit blijft over de mogelijkheid van een popup met vaste afmetingen, maar dan heb je het probleem dat veel mensen dat helemaal niet prettig vinden, direkt de site verlaten of zelfs een popupblocker hebben ingesteld.

zorg er gewoon domweg voor dat je je opdrachtgever uitlegt dat dit gebruik op Internet _nooit_ wordt toegepast omdat het niet de geeigende methode is afbeeldingen in een browser te presenteren, bij het WWW hoort nu eenmaal het feit dat je vooraf de venstergrootte van je bezoekers net kunt vastleggen, en kun je dus geen grote fullscreen afbeeldingen presenteren..

Wat bv wel mogelijk is, en misschien een goede tussenoplossing is om wel de venstergrootte op te vrgane bij het bezoek van een bezoeker en deze mensen afhankelijk van hun venstergrootte een van meerdere afbeeldingen te presenteren:
bv eentje van 550px breed (die mensen krijgen als hun vensterbreedte kleiner dan 800px is), een afbeeldinge van 780 (tot 800 px breed venster), een afbeeldingen van 1000 pixels breed en eentje van 1200px...
Daarbij dan wel uitgaand dat er dus altijd ook ruimte om de afbeelding heen blijft, een marge...
de bezoekerkrijgt dan wel een redelijk 'groot', iig zijn scherm enigszins vullende afbeelding, die er ook iig 'net' blijft uitzien.

[BikkelZ]

Je kunt door middel van innerWidth en innerHeight van de body (zo uit mijn blote hoofd) achterhalen wat de grootte is van de viewport. Je kunt dan voor verschillende resoluties plaatjes maken (800x600 voor 800x600, etc), en die dynamisch toekennen aan de background property door middel van een script wat je onload() triggert. Je laat het script dan bepalen welk plaatje net groot genoeg is voor die resolutie. Bovendien moet je dan onresize() gebruiken om dit te herinitialiseren, zodat mensen die maximaliseren ook nog een behoorlijk plaatje krijgen te zien.

[BikkelZ]

JavaScript:

// zet deze op volgorde van grootte! breedte eerst, dan hoogte!
var bgImages = Array(Array('800', '600', '800x600.gif'), Array('1024', '768', '1024x768.gif'), (etc....));

function setBgImage()
{
w = document.body.innerWidth;
h = document.body.innerHeight;
arLength = bgImages.length;
for (var i = 0; i < arLength; i++)
{
if (bgImages[i][0] >= w && bgImages[i][1] >= h)
{
document.body.background = bgImages[i][2];
}
}
}

Sorry voor de tabs, ik krijg die niet voor elkaar hier in dit editscherm.

-----

Ik heb het hier niet getest, maar het moet volgens mij zo werken.

-----

Gebruik de volgende body:

HTML:

<body onload="setBgImage()" onresize="setBgImage()">

[ Voor 15% gewijzigd door BikkelZ op 13-09-2006 10:37 ]

[Janoz]

Op mijn scherm van 1280x1024 zijn mijn browsers over het algemeen maar 800 breed, maar wel 900 hoog. Prachtige achtergrond krijg ik dan.

Het lijkt er op dat je je te weinig als consultant en te veel als leverancier op hebt gesteld.

[BCC]

Janoz schreef op woensdag 13 september 2006 @ 10:56:
Op mijn scherm van 1280x1024 zijn mijn browsers over het algemeen maar 800 breed, maar wel 900 hoog. Prachtige achtergrond krijg ik dan.
Het lijkt er op dat je je te weinig als consultant en te veel als leverancier op hebt gesteld.

En aangezien dat soort browser window sizes ook standaard zijn voor Mac gebruikers, sluit je idd weer netjes een groep uit.

[moozzuzz]

Ipv up te scalen kan je natuurlijk ook downscalen in de oplossing van 100%.

[Janoz]

ALs je dat wilt garanderen zal je plaatje altijd groter moeten zijn dan de grootste resolutie. Een jpeg van 1600x1200 lijkt me qua kilobytes een beetje aan de hoge kant.

[Anoniem: 20531]

Janoz schreef op woensdag 13 september 2006 @ 11:45:
ALs je dat wilt garanderen zal je plaatje altijd groter moeten zijn dan de grootste resolutie. Een jpeg van 1600x1200 lijkt me qua kilobytes een beetje aan de hoge kant.

Er zijn ook zat mensen met breedbeeld, mensen met 56k modems, en mensen die beperkt zijn in hun dataverkeer en snelheid.

Zoveel mogelijkheden...

[Anoniem: 51239]

Als ik het zo lees, is de hele site in Flash maken de gebruiksvriendelijkste oplossing... Of is dat weer Google-onvriendelijk?

[Rowanov]

Google kan tekst in flash wel indexeren, maar niet scheiden op relevantie (h1, p etc.) zoals dat bij html wel kan. Als je daar meer over wilt weten, raad ik je aan het volgende topic door te lezen, aangezien het daar een aantal keer aan bod is gekomen:
[SEO] Tips & Trucs

[Yoozer]

Anoniem: 51239 schreef op woensdag 13 september 2006 @ 14:45:
Als ik het zo lees, is de hele site in Flash maken de gebruiksvriendelijkste oplossing... Of is dat weer Google-onvriendelijk?

Dat niet perse, maar wat denk je van mindervaliden? Zo'n screenreader voor slechtzienden kan niks met Flash.

[Janoz]

Ook met flash zul je dezelfde problemen hebben (lelijk geschaald zijn). Daarnaast heb je bij flash weer de extra gebruikers- en searchengine-onvriendelijkheid.

[Anoniem: 51239]

Het moet een site worden die speciaal op jongeren gericht is, dus mag wel een b-tje flashy zijn.

[Anoniem: 147329]

Je kan natuurlijk ook een grote foto ergens neer zetten en dan van js de innerWidth en innerHeigt opvragen en als je php ofzo gebruikt ........ roffel roffel ........ imagemagick gebruiken om zo realtime een plaatje te resizen. (Dit gaat natuurlijk wel te kosten van je systeem, vooral als je veel bezoekers krijgt!)

Het is ook mogelijk een scriptje te bouwen dat je aanroept met background.php?widht=100&height=200
die dan een plaatje laat zien bet die size.

[Yoozer]

Anoniem: 51239 schreef op woensdag 13 september 2006 @ 14:59:
Het moet een site worden die speciaal op jongeren gericht is, dus mag wel een b-tje flashy zijn.

Dan leer van dit: http://www.mtv.nl/homepage/

Gebruik Flash voor grote aankondigingen, audioplayers, en doe de rest in HTML. Je kunt een hoop spectaculaire effecten uitvoeren die allemaal geweldig schaalbaar zijn. Zo'n (redelijk drukke) achtergrond van de bergen moet je niet gebruiken voor de rest van de tekst; je gebruikt het als achtergrond van iets waar je de focus op wil leggen.

Neem goede ideetjes over van andere en probeer de fouten niet te herhalen. Zo'n enkele afbeelding als achtergrond was iets hips op GeoCities-sites in 1997.

Jij bent de designer, jij kunt met dergelijke voorbeelden van geslaagde sites laten zien waarom dat dat een beter idee is dan wat 'ie zo in Powerpoint heeft verzonnen (want daar kan de achtergrond wel meeschalen).

[OkkE]

Toch vind ik mijn oplossing nog niet zo verkeerd;

In het voorbeeld zie ik een afbeelding van bergen, met (zo goed als) witte lucht. Je kan de afbeelding in dat geval best zo bewerken, dat het niet (veel) opvalt wanneer die horizontaal ge-repeat wordt. Vertikaal onderaan de pagina zetten, horizontaal repeaten en klaar. Imho de minst slechte oplossing.

[Anoniem: 188613]

Euh CSS?

http://www.cssplay.co.uk/layouts/background.html

[OkkE]

Anoniem: 188613 schreef op woensdag 13 september 2006 @ 15:20:
Euh CSS?

http://www.cssplay.co.uk/layouts/background.html

Is inderdaad een mooie vervanger voor javascript, eigenlijk wel beter ook. Maar;

• Verschaal je venster eens naar een andere verhouding: afbeelding vervormd.
• Of je gebruikt een grote afbeelding, en iemand met 800x600 moet alsnog een afbeelding van 200kb downloaden, of je gebruikt een kleine afbeelding en iemand met hoge resolutie krijgt een lelijke blokkerige afbeelding.

[Savantas]

Waar je ook aan kan denken is een tiled achtergrond. Als je iets als onderstaand voorbeeld (maar dan wat netter uitgevoerd...) als achtergrond gebruikt met in je css repeat-x en align bottom.

Afbeelding die je gebruikt is dan maar de helft hiervan, maar past perfect als tegel aan elkaar. Met uiteraard het tekstblok maar een keer (iets teveel werk om die even weg te poetsen), naar keuze gecentreerd of exact gepositioneerd.
Bij lage resolutie krijgt de bezoeker iets als:

Bij hoge resolutie zoiets:

[ Voor 32% gewijzigd door Savantas op 13-09-2006 16:01 ]

[Anoniem: 51239]

Ik vind MTV wel een goed voorbeeld, dus toch terug naar de top image en daaronder teksttabel...

Zo deed ik het altijd, de opdrachtgever wilde weer eens wat anders... Hard 2 change ur style.

[BikkelZ]

Wat is er mis met dat script wat ik aandroeg? Je verhoudingen blijven altijd perfect, geen lelijke resizing en je gaat alleen rechts of onder iets verliezen aan het plaatje. De minst erge variant van iets wat je eigenlijk niet wil.

Veel opdrachtgevers zijn qua design(-techniek) nog te dom om te poepen maar willen wel dat het precies zo gebeurt als zij willen. Dan moet je eerst laten zien dat het er niet uit ziet, en dan kun je als je mazzel hebt de boel helemaal om gooien, en anders heb je een site die niet in je portfolio terecht komt.

Het is niet alle dagen feest.

----------

PS:

/1000pctantikakkerlak/

[ Voor 4% gewijzigd door BikkelZ op 14-09-2006 15:03 ]

[Janoz]

@BikkelZ: Wat er met je script mis is? Naast dat je script altijd de grootste resolutie neemt, behalve wanneer je innersize groter is dan je grootste plaatje? In principe is dat in dit topic al aan bod gekomen. Je wilt iemand niet enkel voor een achtergrond vele kilobytes laten downloaden.

[Yoozer]

Anoniem: 51239 schreef op woensdag 13 september 2006 @ 16:05:
de opdrachtgever wilde weer eens wat anders...

Je opdrachtgever moet maar eens een paar soundbytes van Nielsen lezen over het mentale model en het verwachtingspatroon van de gebruiker; dan ziet 'ie dat "anders zijn" niet per definitie cool is

Hard 2 change ur style.

Wil je wel s.v.p. je font veranderen? Dat script-geval wat er nu staat (als het tenminste niet het logo van de site is) is heel erg 1984 .

[Savantas]

Ja maar Yooz, de 80's waren toch weer hip? Maar inderdaad, voor hippe fonts in die branche, kijk eens naar lettertypegebruik in advertenties van boards (of waren snowboards ook al weer not done?) en kledingmerken.

[Yoozer]

Offtopic: ik heb in een grijs verleden een design contest gezien van Monson (helaas niet meer online) en daar waren echt jaw-dropping ontwerpen te zien; ongelofelijk mooi bleeding-edge spul. De deelnemers waren toen (2001 of zo?) ook jonge top-ontwerpers, dus niet de zoveelste sjaak met een gewarezede Photoshop die dacht dat lensflares cool waren.

Jammer dat 't nergens meer te zien is . Archive.org heeft niks meer.

[Anoniem: 77185]

OkkE schreef op woensdag 13 september 2006 @ 09:30:
Of je moet het formaat van het browserscherm gaan afvangen met javascript en (realtime) de source van de afbeelding aanpassen (waarbij je voor elke resolutie een andere file maakt). Dit is echter - imho - een zeer smerige oplossing die je niet wilt.

Dit heb ik inderdaad wel eens geprobeerd en zorgt dat je processortijd permanent op de 100% zit.
Wat je wellicht wel kunt doen is een tussenweg die medium smerig is.

voor iedere browser die op je site komt maak je realtime een nieuwe file aan met daarachter de afmetingen bijvoorbeeld bg_801x502.jpg Als de file al bestaat hoef je hem niet te resizen.

Mijn vermoeden zegt dat als je een plaatje of 75 gegenereerd hebt, je bijna iedereen wel direct een passend achtergrondje kunt geven. Neemt alleen wel wat disk space in

[OkkE]

Anoniem: 77185 schreef op donderdag 14 september 2006 @ 18:18:
[...]


Dit heb ik inderdaad wel eens geprobeerd en zorgt dat je processortijd permanent op de 100% zit.
Wat je wellicht wel kunt doen is een tussenweg die medium smerig is.

voor iedere browser die op je site komt maak je realtime een nieuwe file aan met daarachter de afmetingen bijvoorbeeld bg_801x502.jpg Als de file al bestaat hoef je hem niet te resizen.

Mijn vermoeden zegt dat als je een plaatje of 75 gegenereerd hebt, je bijna iedereen wel direct een passend achtergrondje kunt geven. Neemt alleen wel wat disk space in

Als je dit al zou gebruiken, ik raad het niet aan, dan zou ik toch wel afronden op 10 pixels. Dus 800, 810, 820 ... of misschien nog meer. In theorie kun je anders namelijk 1600-800 = 800 mogelijkheden krijgen.

[add]En dan reken ik hier alleen nog maar de x-as, als je de y-as ook opslaat (zou ik niet doen, krijg je een afbeelding uit verhouding) dan loopt dat aantal helemaal hoog op.[/add]

En wat gebeurd er als iemand zijn browser resized? Gaat 't script dan nieuwe afbeeldingen maken, met dus de kans dat je inderdaad 30 nieuwe afbeeldingen moet genereren? Of laat je de afbeelding staan, waardoor de afbeelding na resize niet meer past..

[ Voor 7% gewijzigd door OkkE op 15-09-2006 09:21 ]