Hoi iSylvio,
Voordat ik verder kan gaan met je vragen, heb ik eerst een Ernstige Mededeling.
Toen ik de site nog eens aandachtig ging bekijken, bestaat deze uit 3 typen pagina's, met elk een eigen soort opmaak: de homepage, de galery-pagina's en de tekstpagina's.
Nu had ik wel een aardig modelletje gemaakt voor de homepage-layout op zich, maar dat verdraagt zich niet met de andere types. Tenminste niet als je bij alle resoluties wilt omschakelen met enig behoud van de opmaak.
Toen ik de homepage fabriekte, dacht ik: "de andere pagina's zijn VLZ" (Van Later Zorg).
Dat klopt wel, maar de latere zorg was vrij ernstig!
(Intussen ben jij ook gevorderd, zie ik.)
Ik ben maar eens in de uitdaging gestapt om een schaalbare ("liquid") layout te maken die met één stylesheet alle pagina-types kan bedienen; op zo'n manier dat ze mooi op elkaar aansluiten.
De vlakverdeling van het design is heel spannend om om te zetten in verhoudingen: gedeeltelijk zijn het vaste maten, gedeeltelijk percentages, en gedeeltelijk moeten er voor lagere resoluties maatregelen getroffen worden zodat de zaak niet van het scherm af wandelt. En het oog wil ook wat!
Afijn, een behoorlijk gescharrel met margins in vaste maten, paddings in percentages (of omgekeerd), negatieve margins, absolute posities met top- en bottom waarden (al dan niet in percentages, gepaard met margins/paddings enz.) ... enz. Met als sport: in principe puur css zonder javascript.
Demo-projectje
Al doende (van het een komt het ander) kreeg ik het idee om van de site een "demo-project" te maken, dat (a) op zich draait, en (b) waarin verschillende webdesign-technieken worden geïllustreerd.
Om je niet langer in spanning te houden:
Wat hierin verwerkt zit:
- Schaalbare layout
Als boven al aangegeven, is de liquid design techniek toegepast. Met puur css (all-styles.css) is de site te bezichtigen vanaf een resolutie van 800*600px (!) en hoger, zonder dat iets buiten beeld valt.
Dit kan je zien als je javascript in je browser uitschakelt. In elk geval vanaf 1024*768px zijn het cleane pagina's zonder scrollbars (met uitzondering van de exhibitions-pagina).
NB: het reset.css stylesheet heb ik helemaal niet meer gebruikt. Ik heb er altijd meer last dan gemak van. De uitvinder, Eric Meyer, bedoelde het niet als standaard-oplossing maar als uitgangspunt voor een custom reset-stylesheet, aangepast op de noden van een specifieke site (en hij gebruikt de reset.css zelf ook niet op zijn site!).
- Javascript assistentie
Met javascript (css-helper.js) is verfijning aangebracht voor lagere resoluties (in breedte en/of hoogte). Techniek: DOM (Document Object Model) om elementen op te vragen en/of van eigenschappen te laten veranderen; plus meet- en rekenkunde.
De elementen worden beter gearrangeerd, overtollige grijsvlakken zijn verwijderd, en de horizontale scrollbalk is overbodig gemaakt. In full-screen mode van de browser (F11) past alles er zelfs precies op bij een resolutie van 800*600px, zonder enige scrollbar!
- Actuele pagina gehighlight
De css-sprite techniek was al toegepast voor de hovers over het menu. De sprite is uitgebreid met nog een kolommetje voor de weergave van de actuele pagina met de naam aan de rechterkant. Het menu op elke pagina is exact gelijkluidend gebleven, daar hoeft geen extra "actual" signalering in te komen. Door elke pagina in der <body> een eigen class te geven, gebeurt het volautomatisch met een uitbreiding van het stylesheet.
In dezelfde sprite zijn ook een gewone en hover-toestand opgenomen voor de twitter en facebook-figuurtjes op de contact-pagina, en voor de footer-toelichting op de foto-pagina's. Een css-sprite hoeft zich dus niet tot 1 pagina te beperken!
- Full-screen tip
Onderaan de foto-pagina's wordt op bescheiden manier de tip gegeven om de site fullscreen te bekijken (want dan komt ie het beste tot z'n recht).
Wie denkt dat op het "enlarge" icoontje in de tip geklikt moet worden, krijgt bij z'n hover/click-poging een uitgebreider toelichting te zien. Techniek: pure css pop-up. Met weghoveren verdwijnt de pop-up weer.
Tevens toegepast: een custom cursor style, zodat een eigen fabrikaat cursor (transparante gif met pijltje en blauw I-symbooltje) getoond kan worden i.p.v. het standaard pijltje, handje of vraagtekentje. Opera kan hier niet mee overweg, die krijgt het vraagteken-pijltje te zien.
- Image viewer aangepast (1)
Bij het opstarten van een galerie komt er linksbovenin de viewer-ruimte een m.i. detonerend zwart vierkantje met een loading-image voorbijgeflitst. Vervangen door een eigen fabrikaat progress-bar met gebruikmaking van de blokjes uit het logo. Techniek: animated gif, plaatsing midden in grijze achtergrond (css), verschijnen en verdwijnen geregeld met een javascript-functie.
- Image viewer aangepast (2)
Om een geruisloze overgang bij het inladen van de galleria te krijgen, is alvast tijdelijk een (fake) image met de viewer optie-balk geplaatst (tmp-bar.png). Deze is zichtbaar gedurende de progress-balk vertoning. Techniek: wederom css + javascript combinatie.
- Image viewer aangepast (3)
De viewer start met een zwarte achtergrond in het vierkant, waarna de fade-in van de eerste foto volgt. Dat zou mooi zijn als de pagina ook zwart is, maar die is lichtgrijs. De zwarte bg-color overruled (css) met lichtgrijs, zodat de fade-in nu "vanuit het niets" kan plaatsvinden.
- Image viewer aangepast (4)
De viewer wisselt de foto's ook over een knalzwarte achtergrond. Bij overgang van donkere naar donkere foto is dat mooi, van lichte naar lichte foto niet. Vervangen door het gemiddelde tussen wit en zwart: een medio grijze tint. Dit kan niet met overrulen van de css, want deze background wordt er via de galleria-scripts in gezet. Gerealiseerd met een javascript-functie, die pas getriggerd wordt als de eerste foto zijn fade-in vanaf lichtgrijs heeft gehad.
- Image viewer aangepast (5)
De galleria image-viewer heeft een full-screen mode die helaas nergens op lijkt. Op 1024*768px worden grote delen van de foto's afgehakt, en ook bij hogere resoluties speelt dit. Met fullscreen via F11 en de Popout button komt een veel beter beeld. *)
Rigoureuze maatregel: deze optie-button van de viewer-balk verwijderd. Techniek: aanpassing javascript (nu: galleria.twelve.adapted.js).
- Image viewer aangepast (6)
Soms kan de viewer om een of andere reden niet meteen goed inladen. Dan verschijnt een rood alarm-bericht "Fatal Error" zonder verdere uitleg. Vervangen door een gebruikersvriendelijker mededeling: "hij laadt niet, dat gebeurt soms, probeer 't svp nog eens". Realisatie: aanpassing javascript (nu: galleria.adapted.js).
- Inwendige scrollbar
Voor de exhibitions-pagina is een inwendige scrollbar voor het overzicht toegepast. Techniek: css (overflow:auto bij een vastgelegde hoogte, hier via de top/border definitie). Zo'n inwendige scrollbar zit vaak stuik tegen het te scrollen blok aan, maar om het luchtig te houden kan dit ook op enige afstand; en eveneens met wat afstand tot de rechter-schermrand.
Voor de afstand tussen scrollbar en scrollblok is een "binnen-div" gebruikt met eigen breedte. Om de scrollbar zo onopvallend mogelijk te maken, heeft het randje om het scrollblok dezelfde lichtblauwe tint als de scrollbar gekregen.
De zijranden kunnen aan de binnen-div zitten, maar de boven- en onderrand niet: die scrollen mee (= buiten beeld). Boven- en onderrand kunnen ook niet aan de omvattende scroll-container vastgemaakt worden, want dan zou het randje doorlopen in de grijze achtergrond tussen het scrollblok en de scrollbar. Opgelost door separate "border-div's" van 1px hoog, die als "border" een lichtblauwe bg-color hebben en naadloos op de bovenkant en onderlant van de scrollbox worden geplakt. Alles met css.
- Belettering met custom-font
Het gewenste "Sansation" lettertype is toegepast met de css-eigenschap @font-face. Met correcte code (zie stylesheet) doet ook Internet Explorer het, als zowel een .eot- als een .ttf-bestand op de server staan.
Bij een font-family aanroep hoort ook altijd één of meer alternatieven, mocht het onverhoopt toch niet lukken (met als uiterste redmiddel een "generiek font", hier "sans-serif"; dit is het standaard schreefloze lettertype van de computer van de bezoeker - en dat is er altijd).
Voor een aantal elementen bleek de Sansation niet mooi over te komen (erg schriel/brokkelig bij medium fontgrootte), dan is een ander lettertype gebruikt.
- Anti-flits maatregel voor IE
Internet Explorer geeft bij een pagina-wisseling een witte flits te zien (staat bekend onder de naam FOUC = Flash Of Unstyled Content). Er valt van af te komen door IE via een html <meta> opdracht (zie pagina-code) een fade-in pagina-overgang te laten maken. Dit is browserspecifieke code voor IE, maar onschadelijk voor andere browsers.
- Image preloader
Op de homepage worden alvast de "systeem-images" gedownload die later voor het bekijken van de galery-pagina's nodig zijn: een html div met via css de hidden inhoud aan images. Daarmee winnen de foto-pagina's aan snelheid.
- Inhoudelijk
Om wat tekst op de homepage te zetten die meer is dan alleen de links, dacht ik aan een soort van "statement". Dit zou moeten uitnodigen om de rest van de site te bekijken, en is tevens het bekende Welkom-bericht in wat andere gedaante. Het kan in kleine letters het inhoudblokje opgenomen worden. Daarmee wordt dit meteen iets vierkanter, en sluit dan qua vormgeving aardig aan bij de vierkante galery-pagina's.
==========
Met het stylesheetje van 10kB voor alle css-geweld, plus het css-helper javascriptje van 4.5kB en het sprite-image van een kleine 100kB (maar daar zit dan ook zo ongeveer alles in!) zijn de
html-pagina's zelf nu enorm kort en van een eenvormige structuur geworden. Bv. de inhoud van een foto-pagina is:
HTML:
<h1 id="logo"><a title="Home" href="index.html"><span>Eye M Lucien - Photography</span></a></h1>
<div id="leftcolumn">
<ul>
<li><a id="creative" href="creative.htm"></a></li>
<li><a id="portraits" href="portraits.htm"></a></li>
<li><a id="stills" href="stills.htm"></a></li>
<li><a id="about" href="about.htm"></a></li>
<li><a id="exhibitions" href="exhibitions.htm"></a></li>
<li><a id="contact" href="contact.htm"></a></li>
</ul>
</div>
<div id="maincontainer">
<div id="subcontainer">
<div id="content">
<div id="tmp-bar">
<div id="galleria"></div>
</div>
</div>
</div>
</div>
<div id="footer"><!-- filled by javascript --></div>
De rest van de foto-pagina's is alleen maar het aanroepen van de scripts met de juiste parameters.
De andere pagina's volgen dezelfde structuur: alleen wat binnen de #content staat is verschillend.
Is dat niet wonderbaar?
==========
Zelftest-pakketje
- De hele site zoals ik 'm gemaakt heb zit ingepakt in dit eye.zip bestand (incl. alle mappen, submappen en bestanden), dat je kunt downloaden als je ermee wilt testen of verder borduren.
- Ik heb dezelfde mapnamen gebruikt als bij jou op de server, dus alle relatieve verwijzingen blijven kloppen.
- De pagina's behalve de index.html heb ik de uitgang .htm gegeven (zonder de L).
- Het enige verschil tussen mijn pagina's en echte pagina's is, dat ik "noindex,nofollow" in een <meta> heb staan, zodat Google de pagina's van de schaduwsite op mijn server niet kan vinden.
- In de css en de scripts zitten een aantal explicaties over hoe vorken aan de steel zitten.
==========
Nu even kijken wat je openstaande vraag ook alweer was.
mocht ik nou een andere foto willen gebruiken voor de sprite.png of het logo willen veranderen of een link willen toevoegen, moet ik dan het gehele sprite.png veranderen?
Ja, dat klopt als een zwerende vinger. Zo heb ik ook de oude sprite bijgewerkt en rechts en onder van nieuwe plaatjes voorzien. Je kan 'm dus ook straffeloos groter maken: als je in de css maar het juiste aantal px opgeeft waarmee geschoven moet worden om het nieuwe stukje in beeld te krijgen.
Als een img moet repeaten, is het vaak even goed mikken op de sprite om dat (horizontaal of verticaal) mogelijk te maken. Soms kan het ook niet, dan maak je daarvoor een losse afbeelding of een tweede sprite.
- Alles is beter dan de 38 losse images van deze helpmij-pagina.
Zo, dat was 'm voor vandaag.
Met vriendelijke groet,
CSShunter
______________
*) Overigens hakt de viewer altijd stukken foto weg. Als je in Firefox rechtsklikt en kiest voor "Afbeelding bekijken", krijg je de werkelijke foto te zien. Dan blijkt dat sommige foto's staand zijn (bv Lenny en Classic uit de serie Creative, die gekoppensneld zijn). Ik weet niet of dit aan de instellingen van de viewer of die van de flickr-API ligt of aan de viewer of de flickr-API zelf.
Gelukkig komen ze wel compleet in beeld bij de popout van de viewer, dus het is te hopen dat de bezoekers die gaan gebruiken ipv de slideshow van de viewer (eventueel valt die > knop en de pauzeknop || ook nog weg te poetsen).
Zonder de vierkante eenheidsworst van de viewer vind ik de foto's een stuk beter!
<edit>
Bij testen met resizen van het window of bij resolutie-verandering: altijd even een refresh geven zodat het javascript de nieuwe maten kan taxeren en verwerken!
</edit>
Als dat ook een blokje van 60*60px wordt, gaat de fotostrook uit de linkerkolom hoger worden ... dan valt het hele css-model zo'n beetje in duigen.
