Home > kruimelpad

vorige 62 volgende

inhoud

Test verkleinde versie (reset)

Images gepimpt

Gerealiseerd in deze stap:

  • Staande Marjanne:
    Teveel aan schaduw in het gezicht opgehelderd, rode streepje op de neus (veroorzaakt door verkleinen en verscherpen) verwijderd. Frutseltje van de sluiting bij de kraag ingekort (kwam soms storend vlak onder de bluebar). Blitse bril minder blikkerig gemaakt. IJzers van de schaatsen opgepoetst.
  • Rijdende Marjanne:
    De ruw uitgeknipte transparante gif met de benen en schaatsen gestroomlijnd, de kritieke grenzen bij de bluebar en de rode kolom bijgewerkt. Kreukels uit pak gestreken, gezicht iets sprekender gemaakt, bril op tint gebracht.
  • Portret Marjanne:
    Verplaatst naar midden boven de linkerkolom, waardoor de rode kolom meer een voetstuk wordt (het erepodium!).
  • Belettering header:
    Het letter-blokje stond meetkundig wel precies in het midden, maar optisch niet (vanweg de lege ruimte onder de M en voor de T). Daardoor lijkt de tekst teveel naar rechts te staan. Iets naar links opgeschoven. Tesamen met het opgeschoven portret onstaat er meer evenwicht in de links-rechts zwaarte. Tevens de zwarte schaduw bij de letters veranderd in minder sombere "witte schaduwen", die de tekst op het blauw beter doen uitkomen.
  • Voor de twee images van de verkleinde header dezelfde bewerkingen uitgevoerd.
  • Zijkolommen: het rood knalde er wel heel erg uit. Een paar tinten donkerder gemaakt, zodat ook de letters beter leesbaar zijn.

Nog een punt van het ToDo-lijstje: een favicon.

  • De rijdende Marjanne leent zich uitstekend voor een drastische verkleining tot favicon. Met de de leesrichting meegaan geeft meer snelheid: in spiegelbeeld gezet. Het favicon komt via een <meta> opdracht in de <head> tevoorschijn in de adresbalk en het tabblad van de browser.

Nu het tekenprogramma toch openstond: het image van De Rozenborg was 200px breed, maar moet via de browser verkleind worden tot 190px breed om in de kolom te passen. In het origineel, met smallere rechterkolom, zelfs verkleind tot 168px. Browsers kunnen echter lang zo goed niet verkleinen als tekenprogramma's. Het beste is om images precies op ware grootte te maken.

  • Het uithangbordje van De Rozenborg op 190px breed gebracht, letters vergroot zodat met name de plaatsnaam goed leesbaar is, de rozen ook vergroot (1 geplukt om ruimte te winnen), en kadertje er omheen gezet om minder plat te maken. Meteen een hover-variant erbij.

Eenmaal hier aangekomen, begon het opeens op te vallen dat de Twitter-kop en staart wel erg donker is, en het evenwicht tussen de linker- en rechterkolom tamelijk verstoort.

  • Voor de Twitter-kleuren aansluiting gezocht bij het Rozenborg-rood, en ook hetzelfde randje gebruikt: een nieuw hoekjesimage voor Twitter.

Images nu bijna klaar!

ToDo lijstje

Kleine header voor lage resoluties, plus bijbehorend javascriptje.
Real life testen in IE8 en IE9.
Flits bij pagina-wissel in IE wegwerken.
Images zo nodig bijwerken.
Images optimaliseren.
Toegankelijkheid en hidden navigatie verbeteren.
HTML-code opschonen.
CSS-code en javascript in apart stylesheet/js-bestand.
PHP-header met charset aanmaken.
Favicon maken en in de html zetten.
Spelling en tikfouten nalopen.
Google-optimalisatie.
Test-inhoud uitproberen.
PHP-includes voor menu en zijkolommen.
Na elke wijziging testen op css, html, WCAG en Webrichtlijnen.

vorige 62 volgende

Twitter

[vultekst]
[vultekst]
[vultekst]
[vultekst]
[rechterkolom]

14kB png, 200*84px
via browser verkleind
10kB gif, 190*87px
op maat gemaakt,
inclusief hover-variant