Archief - Layout verandert op andere resolutie

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

Stancke

Legacy Member
Beste,

Ben hier een hele winkel aan't opbouwen met Virtuemart op Joomla. Ik heb bv. een rij van 4 producten die naast staan gerangschikt. Op mijn scherm (1920x1080) is alles perfect, op m'n ander scherm (1440x900) is ook alles perfect.

Wanneer ik kijk op het scherm van m'n werk (15"), dan is alles terug fucked up van layout. Rijen die niet meer naast elkaar staan, zinnen die halverwege worden afgebroken etc.

Ook verschilt het van browser, in IE heb ik opeens nog maar 3 rijen naast elkaar idpv 4:p

Ik denk wel dat het een vaak voorkomend probleem is, iemand die weet hoe je zoiets moet oplossen?

Thx!
G

GregoryCo

Legacy Member
Op hoeveel staat uw width van container? Dit mag max 950 - 960px zijn (voor een resolutie van 1024x768)
S

Stancke

Legacy Member
Hmmm, heb het aangepast naar 950 en nu is't in orde.

Mja, dat gaat pas mooi zijn op een 1024x768 scherm. Welke afmeting moet ik dan nemen voor de gulden middenweg? Gewoon kijken wat de meeste gebruikte reso is op internet of hoe moet ik dat "berekenen"?
a

adrianhates

Legacy Member
1024 is de minimum breedte waar ge rekening mee moet houden. Uw site moet dus gewoon passen op een scherm met resolutie van 1024. That's it :)

Er is geen gulden middenweg, al kies je het wel zelf hoe je uw bezoekers behandelt die een groter scherm hebben dan 1024.
S

Stancke

Legacy Member
adrianhates zei:
1024 is de minimum breedte waar ge rekening mee moet houden. Uw site moet dus gewoon passen op een scherm met resolutie van 1024. That's it :)
Klik om te vergroten...

Maar dat ziet er toch maar belachelijk uit dan op een groot scherm?:$ Da's toch allemaal dan veel te klein voor iemand die op een hogere resolutie werkt?

Allez, voor mij moet dat niet per sé op 1024 staan hé. Dat was nu gewoon een voorbeeld omdat ik op't werk met 15" zit.

EDIT: Maar je hebt wel gelijk, zal dan paar dingen moeten aanpassen op de site!
Z

Zero Grav

Legacy Member
Stancke zei:
Maar dat ziet er toch maar belachelijk uit dan op een groot scherm?:$ Da's toch allemaal dan veel te klein voor iemand die op een hogere resolutie werkt?
Klik om te vergroten...

Het probleem is gewoon dat er geen one size fits all is. Ge kunt dat altijd proberen te forceren met procentuele breedtes/hoogtes, maar uiteindelijk gaat ge toch aan usability gaan inboeten door een te brede site te hebben, en te lang doorlopende zinnen op één lijn.

Als ge echt wilt dat mensen met verschillende resoluties een site krijgen die het beste past kunt ge met CSS3 Media Queries gaan werken. Maar dat is natuurlijk ook weer een pak meer werk.
a

adrianhates

Legacy Member
die media Queries zijn niet crossbrowser zeker? Ik zou da precies alleen maar gaan gebruiken voor toe te passen op het verschil in media overbrengers.

bvb
Smartphone vs PC browser

Anderzijds kunt ge het oplossen met javascript.. De breedte berekenen en dan de nodige css bewerkingen doen.. Ma da is ook al omslachtig.
-

-BVR-

Legacy Member
Ik doe het met javascript :)

Code: 
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 801) {
        $("#size-stylesheet").attr("href", "css/-801.css");
    } else if ((width >= 801) && (width < 1280)) {
        $("#size-stylesheet").attr("href", "css/801-1279.css");
    } else {
       $("#size-stylesheet").attr("href", "css/1280+.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

En dan die css'en maken he :)
D

Drone

Legacy Member
Zoals adrianhate zegt zie gewoon dat het binnen 1024 past en laat al die andere hacks achterwegen. Zolang ze niet vertikaal moeten scrollen is er geen probleem.

Een kleine site op een groot scherm is zeker geen probleem. Ik denk dat ik nog nooit een site heb gesloten omdat hij te klein was op mijn scherm. Mensen met grote schermen hebben meestal ook meerdere vensters naast elkaar staan.

Zo een script als BromVroy vind ik persoonlijk nogal onzinnig. Je kan beter je tijd steken in het optimaliseren van andere delen van je website.
-

-BVR-

Legacy Member
Om toch nog er verder op in te gaan:
Kijk toch eens naar welke resoluties je bezoekers gebruiken. In mijn geval gebruikten wat vaste bezoekers 800x600 en als het daar niet goed voor loopt ben je al wat bezoekers kwijt.

Ik zie net dat er in dreamweaver cs5 de mogelijkheid om de mediaqueries die zerogravity meldde te 'importeren' via een gui. (bovenaan je work space 'multiscreen' en dan rechtsboven media queries)
D

Drone

Legacy Member
BramVroy zei:
Om toch nog er verder op in te gaan:
Kijk toch eens naar welke resoluties je bezoekers gebruiken. In mijn geval gebruikten wat vaste bezoekers 800x600 en als het daar niet goed voor loopt ben je al wat bezoekers kwijt.

Ik zie net dat er in dreamweaver cs5 de mogelijkheid om de mediaqueries die zerogravity meldde te 'importeren' via een gui. (bovenaan je work space 'multiscreen' en dan rechtsboven media queries)
Klik om te vergroten...

Maak dan een website op 800 als je veel gebruikers hebt die 800x600 gebruiken.
-

-BVR-

Legacy Member
[drone]-[1.05];13933954 zei:
Maak dan een website op 800 als je veel gebruikers hebt die 800x600 gebruiken.
Klik om te vergroten...

Nogal immens lelijk op bv een 1920x1080 scherm hé..

Start - De Notenbalkers ziet ge hoe het gedaan is, venster verkleinen om te zien hoe het dan is op een kleinere resolutie.
Z

Zero Grav

Legacy Member
Ach, dat is gewoon de Windowsziekte. Zo van die gasten die een scherm hebben met een resolutie waar elke site 1000 keer in past, maar dan wel nog steeds hun browser fullscreen zetten.

Als ge een site wilt ontwerpen voor 1920*1080 met de content van die van de Notenbalkers, be my guest. Ge zult uiteindelijk toch wel merken dat het gewoon niet mogelijk is om dat op een gebruiksvriendelijke manier te doen. Op een bepaald moment is het gewoon niet meer nuttig om groter te willen gaan met één venster.

Allé, ik geef die Media Queries hier wel omdat het relevant is voor de vraag. Maar uiteindelijk vind ik ook dat dat meer bedoeld is voor bepaalde apparaten te ondersteunen (zoals adrianhates zei) en hoogstens om enkele kleine wijzigingen aan te brengen bij hogere resoluties. Meer is gewoon tijdsverspilling.
D

Drone

Legacy Member
BramVroy zei:
Nogal immens lelijk op bv een 1920x1080 scherm hé..

Start - De Notenbalkers ziet ge hoe het gedaan is, venster verkleinen om te zien hoe het dan is op een kleinere resolutie.
Klik om te vergroten...

De implementatie is niet echt geweldig te noemen. Heeft ook niet zoveel te maken met resoluties maar meer met de grote van het venster. Doet mij allemaal een beetje denken aan van die full-screen scriptjes een paar jaar terug. Allemaal heel mooi en tof maar echt nuttig is het niet. In tegendeel meestal werkt het de gebruiker op de zenuwen.

Ik denk ook niet dat je zoveel bezoekers hebt die voor de look en feel van de website komen. Ik neem aan dat ze opzoek zijn naar info en liefst daarbij zo weinig mogelijk worden gestoord door een layout die veranderd naar gelang de grote van het venster.
S

SDEC

Legacy Member
Stancke zei:
Beste,
Ook verschilt het van browser, in IE heb ik opeens nog maar 3 rijen naast elkaar idpv 4:p
Klik om te vergroten...

Wat had je verwacht, het is IE, de browser die zijn uiterste best doet om zoveel mogelijk van de standaard af te wijken (als ik mijn Web Engineering leerkracht moet geloven).
Z

Zero Grav

Legacy Member
Een kleine les, als ge een probleem hebt met een website (al dan niet in Internet Explorer) probeer het dan niet direct op de browser af te stoten. Vooral in de leerfase is het veel vaker de fout van de scripter dan van de renderengine als er iets fout gaat.

Die vooroordelen tegenover Internet Explorer beginnen trouwens zelf net zo verouderd te worden als IE6. Waarmee ik niet wil zeggen dat IE7 en 8 perfecte browsers zijn, 't is nog steeds kut om ervoor te developen zonder extra stylesheets. Maar 't is ook niet meer de ramp de 6 was. En binnenkort komt de 9 weer uit, die echt enorm veelbelovend is en zelfs weer één van de betere browsers gaat worden qua hardware versnelling.

Dat probleem hierboven lijkt wel op zo'n '3px extra margin' bug of een box model probleem though.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan