Header zonder cookies en pijltjes

[aykevl]

Een voorstel.

Ik vind de mogelijkheid de header in en uit te klappen vanuit design perspectief geen goed idee: het geeft meer mogelijkheden terwijl je een website consistent wilt laten werken. Ik heb het nog nooit eerder gezien. Het is niet gebruikelijk, dus gaan mensen er over nadenken en dat wil je niet.

In deze branch zijn de pijltjes verwijderd en is de header net zoals voor de verandering op de homepage (de index) en altijd ingeklapt op andere pagina's.

Ik vind wel dat het logo nog verkeerd staat nu het pijltje weg is (te ver naar rechts), maar dit kan natuurlijk eenvoudig aangepast worden.

Er zijn ook wat onderliggende veranderingen. Zo worden CSS classes gebruikt om de header in en uit te klappen (tijdens het scrollen op de homepage) en nog wat andere kleine aanpassingen zodat de footer altijd onderaan zit. Dat laatste zou in IE9 en hoger moeten werken, maar dat weet ik niet zeker. In IE8 kan de footer ergens onderaan de tekst zweven, maar die browser zal lijkt mij toch al niet veel meer gebruikt worden (we zijn een studentenvereniging, geen ouderenclub) en alleen maar zakken in gebruik. Als het een probleem is, zou expression() misschien nog werken.

[aykevl]

issue #19 (link voor GitHub)

[aykevl]

Wat vinden jullie hiervan?

[dsprenkels]

Ik vind het opzich wel beter, maar nu dat pijltje er niet staat heb ik nog meer het idee dat we het logo nog wat kleiner zouden moeten maken.

[dsprenkels]

Ik vind de headerverandering wel goed, maar de footerverandering niet. 5bfe966 conflicteert met het idee wat we hadden voor #10.

[aykevl]

Doet het dat? Op zich kun je de footer ook groter maken en nog steeds zorgen dat die onder aan het scherm blijft hangen (al denk ik wel dat de CSS daarvoor wat verandert moet worden, dat is wat ingewikkelder om goed te doen). Ik vind die grote zwarte balk onderaan best lelijk met een groot scherm op korte pagina's (zoals de 'lidworden' pagina).

Wat was je idee daar eigenlijk voor? Zo'n grotere footer zoals je op wel meer webpagina's ziet? (Bijvoorbeeld Tweakers). Die Facebook etc. linkjes daar in zetten lijkt me wel een goed idee.

[dsprenkels]

Je hebt het idee goed begrepen. :wink: Je wilt eigenlijk je CSS zo instellen dat de footer altijd onder aan de pagina bungelt. Ik kan geen mechanisme verzinnen behalve dat calc-trucje (wat ik nog eigenlijk net iets te experimenteel vind).

[aykevl]

Ik zal er nog eens over nadenken en anders de aanpassingen aan de footer eruit halen.

[aykevl]

Is het een vereiste voor #10 dat de footer elke hoogte kan hebben? In alle oudere browsers moet de footer een vaste hoogte hebben als je die onder aan de pagina vast wilt zetten. Maar het kan ook met display: flex. Dat werkt alleen in de nieuwste browsers, maar oudere browsers negeren dat dus het is veilig te gebruiken.

[thundur]

Volgens mij hoeft de footer niet altijd in beeld te staan. Er staat toch geen nuttige info op. Als hij onder de content komt zoals nu lijkt het me goed genoeg toch?

[aykevl]

Dat is ook niet de bedoeling. Ik probeer de footer juist onder aan de pagina te houden als de pagina kort is, en verder te houden zoals het nu al is (buiten beeld bij een lange pagina als je bovenaan de pagina bent).

[thundur]

Ah, dat was me niet duidelijk.

[aykevl]

Hierbij een aangepaste versie. Als de browser flexbox ondersteunt (±75% op het moment), zit de footer aan de onderkant van de pagina, en bij lange pagina's gaat de footer uit beeld helemaal onderaan de pagina. Zonder flexbox ondersteuning blijft het werken zoals het nu al doet. Dus de enige verandering is bij korte pagina's en wanneer flexbox is ondersteund.

Door flexbox te gebruiken, hoeft de absolute hoogte van de footer niet gespecificeerd te worden.

Getest in IE8/9/10/11/Safari 5.0/Chrome/Firefox/Opera. Bruikbaar in IE7. Flexbox zonder vendor prefixes is ondersteund in IE11/Chrome/Firefox/Opera.

Een nadeel in IE onder Windows 8 'metro mode': de balk van IE gaat over de footer heen. Maar die verdwijnt na een tijdje (ofzo? Ik gebruik geen Windows 8, alleen een VM...).

[aykevl]

Probleem: naar een bepaald punt scrollen is niet moeilijk, behalve als de pagina kort is. Dan is de foto nog steeds volledig in beeld (of maar deels in beeld als de webpagina net niet helemaal in beeld past). Daarmee wordt de website heel inconsistent.

Ik zie twee oplossingen:

• Korte webpagina's kunstmatig groter maken dan het scherm, zodat er nog naar boven gescrolld kan worden.
• Niet naar boven kunnen scrollen op vervolgpagina's. Dit lijkt mij het meest zinnige.

@thundur @dsprenkels @bwesterb wat denken jullie? Andere ideeën?

[bwesterb]

Het is sowieso wel aardig als de website minstens anderhalve "normale" browserscherm groot is. Als de browser nog langer is, dan is het niet erg dat hij niet scrollt.

[aykevl]

Bij deze. De pagina is minimaal 1354px hoog (1024+330), of als de browser het ondersteund calc(100% + 330px). Dit geeft wat vreemde resultaten in oudere browsers. Verder heb ik sessionStorage gebruikt omdat het makkelijk werkt. Maar sessionStorage werkt per tab, dus een nieuw tabblad zal weer een grote header hebben. Ik kan ook cookies gebruiken als dat nodig is, zodat het werkelijk per sessie gaat.

[bwesterb]

Ah, hip! @thundur, zou jij deze naar kninfra kunnen porten? Dank!