Layout vraag; volledige fluid design?

Status
Niet open voor verdere reacties.

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Tegenwoordig hebben veel website header/footer volledige breedte hebben maar content niet. Die staat dan op bijv. 1100 (of minder) pixels.
Ook content volledig breed kan maar dan is beter om met kolommen te werken vanwege leesbaarheid.
Zijn er andere overwegingen om niet een volledig fluid design te doen dus content een max-width te geven?
 
Het design voornamelijk.
Ook is het echt vreselijk irritant als een gehele website op 1 lijn staat (4k bijv.)

Het heeft technisch geen extra nut o.i.d
 
Ha Rick, dank je voor reageren. :thumb:
Ik ben geen vormgever maar meer een bouwer. Bedoel je dat een fluid design vaak niet mooi is?
En wat bedoel je met 1 lijn (4k)? Heb je anders voorbeeld. Thanks!
 
Hoi

Als je praat over achtergrondkleur dan vind ik het nuttig omdat het rust geeft op de pagina.
Ik geef de content een percentage van de browserbreedte met een max-width (responsive).

Google geeft in sites die om te lezen zijn eigenlijk het voorbeeld. ** edit: ze gebruiken hier breakpoints 720, 1000 en 1200 pixels.
 
Laatst bewerkt:
Ha bron, nuttige site die je geeft. Ik sprak niet over achtergrondkleur hoor.
Ik zal voorbeeld site geven. Bijvoorbeeld http://www.vpro.nl/ heeft content breedte 1072px, terwijl header/footer volledige breedte zijn.
Een site als URL="http://jovaconstruction.com/contact-us"]http://jovaconstruction.com/contact-us[/URL] is fluid of liquid design.
Bij die laatste vraag ik me af waarom nu nog steeds meeste sites voor layout als vpro wordt gekozen. Ik vind het duidelijker leesbaar maar zijn er nog andere overwegingen?

Thanks!
 
In het algemeen is content met tekst smal en content met afbeeldingen of video's breed. Simpel vanwege leesbaarheid.
Omdat de header (met name de topbalk) belangrijk is geworden vanwege smartphones is deze vaak volledige breedte zodat je daar meer mee kunt doen.
De footer is uit design oogpunt daarom ook meestal volledige breedte.

Vroeger dacht men dat internetpagina's eruit moesten zien als een krant of tijdschrift. Dat is niet meer van deze tijd. Logisch worden advertenties, menu en teasers vaak in een aparte kolom gezet voor een betere leesbaarheid van de content zelf. Kolommen worden eigenlijk alleen nog gebruikt voor vergelijkende content (voorbeeld: pakketten bij provider) of data (voetbal uitslagen).
 
@damnsharp

Ik bedoel met design dat het vaak een keuze is gebasseerd op hoe ze de website eruit willen laten zien.
Technisch gezien heeft het geen enkel voordeel (sneller / werkt beter bijv.)
Het is puur voorkeur.


Met 1 lijn op 4k bedoel ik dat 100% width websites ontzettend idioot zijn op een hoge resolutie zonder scaling.
Omdat ik nu zit te gamen (en dus op de windows pc met 1080p schermen zit) kan ik je nu geen 4k screenshot sturen.
Wat ik wel kan doen is hem even over 2 schermen heentrekken om mijn punt duidelijk te maken:
[smallimg]http://i.imgur.com/0cI7PPu.png[/smallimg]

De site voor op de pc wordt meestal rond de 1000 pixels afgevangen in breedte, dit omdat het daarna idioot groot wordt (zie voorbeeld hierboven).
Echter wordt op de meeste sites de header doorgetrokken (en soms ook de footer) dit omdat het "mooi" is.
Neem bijv. mijn eigen website: http://mi-soft.nl , je ziet daar dat het witte vlak een bepaalde breedte heeft (iets van 900 pixels iirc).
[smallimg]http://i.imgur.com/rA8ICH8.png[/smallimg]
De header gaat echter over de gehele breedte. Het enige nuttige deel van de header bevindt zich echter net boven de witte pagina (gecentreerd als het ware).
Als ik dus de header passend had gemaakt zou dit overblijven:
[smallimg]http://i.imgur.com/cLQ6Doj.png[/smallimg]

De site werkt dan nog steeds prima (dus technisch geen voordeel) hij ziet er alleen een stuk minder aantrekkelijk uit.



De opmerking van Bron:
Omdat de header (met name de topbalk) belangrijk is geworden vanwege smartphones is deze vaak volledige breedte zodat je daar meer mee kunt doen.

Is lastig te beoordelen. Ik snap zijn punt maar denk niet dat het hiermee goed overkomt.
De header van een website op een smartphone is nagenoeg altijd 100%.
Dit komt niet door de beperkte ruimte die beschikbaar is maar juist maar voor de "look & feel".
Het menu voelt dan meer "deel" van android (of ios).

In de latere android updates is daar zelfs een mooie feature bijgekomen en dat is om de bovenbalk van android te kleuren met dezelfde kleur als de website!
Dat ziet er dan heel erg tof uit zoals hier te zien is:
[smallimg]http://i.imgur.com/dZSXmLh.png[/smallimg]
Conclusie
Over het algemeen wordt aangeraden voor 3 breedtes je website te optimaliseren, deze breedtes zijn:
  1. Smartphone
  2. Tablet
  3. pc

Zolang je die 3 vlakken raakt zit je goed.


[edit]Ook helpmij.nl maakt zich hier schuldig aan hoor, neem bijv. de vorige post:
[smallimg]http://i.imgur.com/uD593bu.png[/smallimg]

Je ziet daar de reactie van bron die veel te ver doorloopt naar rechts.
Met als gevolg dat bron (een gebruiker) zijn manier van schrijven aan zou moeten passen (een gebruiker dwingen iets te doen is altijd slecht!)
Als de site gelockt was op bijv. 1000px liep je veel minder tegen dit probleem aan.
[/edit]
 
Laatst bewerkt:
Met als gevolg dat bron (een gebruiker) zijn manier van schrijven aan zou moeten passen
Ha, dat gaat Bron'etje echt niet doen :d Als de zinnen worden ingekort dan ziet het er (even overdreven) zo uit:

In het algemeen is content met tekst smal
en content met afbeeldingen of video's breed.
Simpel vanwege leesbaarheid.
Omdat de header (met name de topbalk)
belangrijk is geworden vanwege smartphones
is deze vaak volledige breedte zodat je daar
meer mee kunt doen.


Dan worden de posts wel heel erg lang én het is niet zo prettig lezen. De bezoeker kan gewoon zelf zijn browser smaller maken. Voor responsive gebruik wordt aanbevolen zo weinig mogelijk breaks in paragrafen te gebruiken. Ik ben het eens met dat te brede teksten erg irritant zijn.

Zelf vind ik dat er gekeken moet worden naar het onderwerp van de website. De focus moet gericht zijn op de doelgroep zoals deze website die ik heb gebouwd http://www.gereedschap-keuring.nl. Op deze website had ik header en footer over de hele breedte kunnen doen maar dat gaf geen meerwaarde. Als voorbeeld, een website voor een dance feest is heel anders als een website met grafmonumenten.

*** edit: inderdaad had de post kolom van dit forum beperkt kunnen blijven door bij een bepaalde breedte er een feature kolom naast te zetten met bijvoorbeeld de laatste 10 posts, de meest bekeken posts, enz.
 
Laatst bewerkt:
Zelf vind ik dat er gekeken moet worden naar het onderwerp van de website. De focus moet gericht zijn op de doelgroep zoals deze website die ik heb gebouwd http://www.gereedschap-keuring.nl. Op deze website had ik header en footer over de hele breedte kunnen doen maar dat gaf geen meerwaarde. Als voorbeeld, een website voor een dance feest is heel anders als een website met grafmonumenten.

Idd, het design loont uiteindelijk. En dat staat dus ook voorop!
Zoals ook op http://thecakeartist.nl/ , daar is hetzelfde menu als op rickvanlieshout.com & mi-soft.nl gebruikt alleen hier is hij aangepast om aan een bepaalde breedte te voldoen (op wens van de klant uiteraard).

*** edit: inderdaad had de post kolom van dit forum beperkt kunnen blijven door bij een bepaalde breedte er een feature kolom naast te zetten met bijvoorbeeld de laatste 10 posts, de meest bekeken posts, enz.

Het ontwerp van dit forum is inderdaad een beetje ouderwets :p function over form zeggen we dan maar he :)

PS: een edit hoef je niet te doen met *** EDIT, er bestaat een [ edit ] tag :)


@TS

Nu moeten we u haast wel van alle info voorzien hebben haha.
 
@Bron en @Rick, top zeg jullie reacties. Ik zit nu aan een 13" laptop te werken maar ga vanmiddag diverse voorbeelden nog beter bekijken.

De stelregel die Bron bij #6 noemt is inderdaad een goed uitgangspunt.
Inderdaad Rick en Bron, design staat staat voorop.
Nou, ben een stuk wijzer weer geworden! :thumb:

Oh Rick, heb jij expres geen sticky footer gebruikt bij je site?
 
Dat is idd express gedaan.
Een footer is voor mij de "na informatie" of de "afsluiting" van een site.
Deze zal dus onder de content moeten komen naar mijn mening.
Daarbij komt dat als je een sticky footer gebruikt er nog minder ruimte is voor content. En content staat toch ook bovenaan in het lijstje.
 
RE: Daarbij komt dat als je een sticky footer gebruikt er nog minder ruimte is voor content.
Dit geldt niet voor de flex-sticky footer. Deze is bij weinig content sticky en als de content langer is dan de viewport flexible.
Net als bij http://www.google.nl
 
Klopt als een bus, mijn eerdere design gebruikte daarvoor flexbox. Maar de look daarvan vindt ik persoonlijk vreemd ;)
 
Alles van Google en Microsoft vind ik in principe "vreemd" :rolleyes: maar je kunt niet zonder ze :cool:
 
Nou collega's, ik zal de vraag op opgelost zetten. Bedankt beide voor reageren! :thumb: :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan