MacOSX.nl nu volledig in CSS

31 reacties

Qua uiterlijk zul je weinig verschil merken, maar we hebben de broncode van de site aardig aangepast. Met veel dank aan onze Nederlandse CSS guru Martijn ten Napel die een beetje te vergelijken is met Jeffrey Zeldman. We hebben de site in vrijwel 100% CSS gemaakt. CSS staat voor Cascading Style Sheets. Ook de term “Style Sheets” wordt wel gebruikt. Een aantal voordelen van CSS:

  • Pagina’s zijn kleiner, dus laden sneller
  • Pagina’s renderen sneller
  • Site is makkelijker (qua layout) aan te passen
  • De site werkt nu ook in Netscape 1.0
  • De site werkt ook op Palms (en natuurlijk andere handhelds) en sommige telefoons

Omdat hier nogal wat webdesigners en webontwikkelaars rondhangen, vond ik dit wel het moeite waard om te melden. Daarnaast zijn we nog bezig met wat fine-tuning en kunnen er hier en daar op de site nog wat foutjes voor komen.

Notitie: Er was een probleem met Windows IE, deze is inmiddels opgelost.

Reacties

31 reacties
  • Profielfoto
    Syndic

    Yeah! Compleet op CSS gebaseerd nu! Helemaal goed :D

  • Profielfoto
    stanwillemse

    Goed werk mannen / vrouwen!:)

  • Profielfoto
    awesomemac

    “De site werkt nu ook onder Netscape 1.0” Hè? Versie 1 (1995??).

  • Profielfoto
    Adriaan Mol

    @awesomemac: Ja, gaaf hé?

  • Profielfoto
    Cornelis

    hier ben ik heel erg in geinteresseerd,maar snap er nog niet veel van,
    ik houd me aan bevolen voor goede tips en of advies hetzij hier of gewoon privé.

  • Profielfoto
    June

    de site rendert inderdaad iets sneller, nice!

  • Profielfoto
    iBert

    Zeer positieve evolutie! Het is eigenlijk de morele taak van grotere websites zoals MacOSX om het voortouw te nemen bij het promoten van webstandaarden. Martijn heeft me ook al verschillende keren verder geholpen, waarvoor ik hem heel dankbaar ben.

  • Profielfoto
    drscsi

    Tof, dan kan ik mosaic ook weer uit het stof halen.;)
    Fijn dat jullie zo bezig zijn met de site.:D
    10 punten.

  • Profielfoto
    Torz

    nou nog mn palm aan de praat krijgen :p

  • Profielfoto
    Amsterdam

    Wizards. ;)

  • Profielfoto
    ridesmet

    Nu nog de RSS/XML feed in orde krijgen en ik ben tevreden…

    Ringo

  • Profielfoto
    arneblk

    Als een trein:D

  • Profielfoto
    Pixelman

    Great job !!:D

    Zelf ben ik, zeg maar bezeten, van CSS design.
    Ben er zelf goe mee aan het experimenteren.
    Wel vervelend dat sommige browsers lastig doen.(bij sommige van men sites)
    Bestaat er nergens een lijst van welke browsers welke CSS parameters ondersteunen?

    Pixelman.
    Kiss your tag goodbye! Use FULL CSS.

    http://www.pixelman.be

  • Profielfoto
    Sad

    Op het windhoos bakkie hier op mijn werk staat het logo gedeelte bovenaan niet in het midden van het scherm horizontaal (maar misschien moet dat ook niet) en de datum van vandaag springt rechts buiten het venster. Tevens zit er een lege regel tussen de bovenste regel (met apple beursnotering, datum enzo) en het blauwe logovlak.

    Maar wil je wel Windhoos compliant zijn is de vraag…

  • Profielfoto
    olav

    Is het een onbescheiden vraag of je kunt uiotleggen hoe je te werk bent gegaan bij het omzetten van de site naar de css-standaard? gewoon uit interesse en nieuwsgierigheid.

  • Profielfoto
    Reinier

    Erg goed initiatief !! En nu iedereen lekker surfen met Firebird (of het iets tragere Safari):)

  • Profielfoto
    Adriaan Mol

    @colpolyp: Lees even het artikel goed door, dan had je kunnen zien dat dit al lang bekend was.;)

  • Profielfoto
    chris90

    op welke gsm’s werkt de site ?

  • Profielfoto
    Sad

    @adriaan: sorry, niet gezien!

  • Profielfoto
    Stof

    MacOSX.nl vrij van tables:) . Een heel dik compliment is hier op z’n plaats!

  • Profielfoto
    ckuijjer

    Als je naar de source kijkt zie je dat dat helaas nog niet (helemaal) het geval is. MacOSX.nl is denk ik nu meer vrij van FONT en B tags etc. Volgende stap mag van mij het omzetten naar XHTML zijn (maar dan neemt de compatibiliteit met oudere browsers helaas vast af), puik werk verder!

  • Profielfoto
    Remco

    De site ziet er, vooral grafisch, nog steeds erg mooi en overzichtelijk uit. Ben zelf ook bezig (beginstadium) met CSS en dat valt, als je tabellen gewend bent, niet mee. De grootste vraag waar ik mee zit, is hoe je een gesliced plaatje (zoals jullie logo inclusief navigatiebar) in elkaar zet zonder tabellen. Ik ga even flink studeren op jullie code. Tips zijn natuurlijk welkom!

  • Profielfoto
    tennapel

    @ckuijjer : er zijn een aantal vereisten met betrekking tot compatabiliteit van browsers, een aantal lay-out gegevens die Adriaan wilde hebben zoals ze waren en dan kom je op sommige onderdelen op een hybride oplossing uit. Vandaar dat de doctype ook HTML4/transitional is.

    @olav: de layout was bekend en vervolgens probeer je eerst de site helemaal goed te structureren met HTML zodat het prima leesbaar is zonder styling in een logische volgorde, dan kijk je welke onderdelen er zijn die ergens geplaatst moeten worden en maak je keuzes waar je de div’s zet en of je misschien daardoor in de volgorde nog moet wat doen. Tot slot ga je beginnen om de layout toe te voegen middels CSS.

    @colypolp: er is een fix voor IE6/Win. Ik neem aan dat Adriaan die implementeert wanneer hij tijd heeft.

    @remco: ik raad je aan om http://www.alistapart.com/ te lezen en dan vooral de oude artikelen over CSS vanaf editienummer 100. Zo heb ik het ook geleerd;-)

  • Profielfoto
    verbeek.h

    De meeste nieuwsflitsen geven bij mij een blanco schermpje. komt dat hierdoor of is er iets anders mis?

  • Profielfoto
    Remco

    Er staan nog wel tabellen in de code. Is het nu ook mogelijk met CSS om die tabellen ook te vervangen, of is dat niet wenselijk?
    Verder was ik benieuwd of Adriaan zelf de site grafisch heeft vormgegeven. Echt grote klasse.

  • Profielfoto
    Alpha_Mouse

    OLE!

    Lang leven mijn smartphone :D

  • Profielfoto
    tennapel

    @remco: volgens de CSS specs zou je die tabellen makkelijk kunnen vervangen, maar de realiteit is wat weerbarstiger en door verschillen in en incomplete implementatie van CSS in de diverse browsers was het niet helemaal mogelijk.

  • Profielfoto
    Marcello

    Het eerste begin ziet er prima uit. Wat wordt de volgende stap? geldige html?
    volgens http://validator.w3.org/ mag er nog wel iets aan gebeuren…..

  • Profielfoto
    tennapel

    @marcello: validatiefouten zijn met name de “&” tekentjes in URL strings. Die worden gegenereerd ergens in de php en zouden vervangen kunnen worden door “&” om de validatieproblemen op te lossen. Ik ken de codegenerator niet, dus ik heb geen idee hoe makkelijk of moeilijk dat is te realiseren.

    Er zitten geen structurele mark-up fouten in zoals je wellicht gezien hebt ;)

  • Profielfoto
    SanderQ

    Werkt inderdaad zeer snel, goed werk.:)

  • Profielfoto
    zero200

    @iedereen_die_CSS_wil_leren:)

    check http://www.w3schools.com/css (De beste makkelijkste manier om css te leren)