[CSS] Tabellen wegdoen bespaart slechts 62% en 924GB per dag

[Verwijderd]

Lees: Throwing Tables Out the Window.

Uiteraard de "leercurve" is stijl, maar als je het kent bespaard het wat en zul je uiteindelijk ook efficienter en sneller websites opbouwen. (Behalve dan misschien de backend en dergelijke, maar we zitten hier bij Webdesign & Graphics, nietwaar?)

Het doel van dit topic is hierover een beetje discussieren, mocht dat nodig zijn en anders is het alleen maar even een kleine verwijzing voor de mensen die nog steeds tabellen gebruiken.

[MADG0BLIN]

Heel interessant artikel.
Gebruik zelf om eerlijk te zijn nog altijd tabellen en dergelijke, maar begin wat meer over te stappen naar css. Als ik dit zo lees heb ik weer een extra reden.

[Roland]

ff lezen, ben benieuwd...

[P_de_B]

hier staat een andere redesign van de ms frontpage.

[ Voor 8% gewijzigd door P_de_B op 29-07-2004 09:53 ]

[Bosmonster]

Hoezo andere? Ik zie van die van Anne geen voorbeeld hoor.. alleen een hoop theorie.

[Verwijderd]

Het voorbeeld is niet gepubliceerd. Hij is wel gemaakt uiteraard.

[Bosmonster]

Verwijderd schreef op 29 juli 2004 @ 09:48:
Het voorbeeld is niet gepubliceerd. Hij is wel gemaakt uiteraard.

Uiteraard

[Beekforel]

Ik vind http://www.csszengarden.com/ altijd weer een mooi voorbeeld van CSS. De onbeperkte mogelijkheden van CSS komen daar behoorlijk naar voren.
Het artikel heb ik net even vlug doorgelezen, ziet er interessant uit. Zal het vanmiddag nog even beter lezen.

[marko77]

Dat is wel een leuk verhaal, maar om voor elke website nu maar alleen css te gaan gebruiken voor de layout en navigatie vind ik toch iets te ver gaan.

Het is imo alleen interessant als je een grote site hebt die veel bezoekers en dus veel dataverkeer gaat genereren.

Wat ook nog wel een drempel is voor mij iig is dat verschillende browsers de css code anderes naar voren toveren, dat wil je toch niet hebben als designer. Tabellen geven wat dat betreft minder problemen.

[Johnny]

marko77 schreef op 29 juli 2004 @ 10:24:
Dat is wel een leuk verhaal, maar om voor elke website nu maar alleen css te gaan gebruiken voor de layout en navigatie vind ik toch iets te ver gaan.

Het is imo alleen interessant als je een grote site hebt die veel bezoekers en dus veel dataverkeer gaat genereren.

Waarom? Op mijn eigen website heb ik een datalimiet van 1 GB per maand, echter omdat alle opmaak gecached wordt in een CSS bestand en de pagina's gebruik maken van compressie bespaard dat me per bezoek enkele tientallen kilobytes, en hoe meer pagina's er worden bezocht hoe meer er bespaard wordt.

Wat ook nog wel een drempel is voor mij iig is dat verschillende browsers de css code anderes naar voren toveren, dat wil je toch niet hebben als designer. Tabellen geven wat dat betreft minder problemen.

Dat valt wel mee, als je na een tijdje de mogelijkheden van de verschillende browsers kent, net als met tabellen. Het enige verschil is dat je tabellen al kent, en CSS nog vrij onbekend is.

[Verwijderd]

CSS is schitterend, maar enorm onpraktisch.
Mochten browsers allemaal standaard zijn, dan is het DE oplossing.
Nu bevat mijn CSS enorm veel hacks om bijv. op een MAC te werken, om geod uit te lijnen in Opera enz.

Uiteindelijk zit ik bijna aan net zoveel code als de 'ouderwetse' manier met tabellen.

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 10:46:
CSS is schitterend, maar enorm onpraktisch.

Browsers zijn onpraktisch, CSS is zeer praktisch je redeneert de verkeerde kant op.

[marko77]

Johnny schreef op 29 juli 2004 @ 10:32:
[...]
Waarom? Op mijn eigen website heb ik een datalimiet van 1 GB per maand, echter
[...]

Ok, dat snap ik, maar ik design voor mijn werkgever, en daar zit geen limiet

Dat valt wel mee, als je na een tijdje de mogelijkheden van de verschillende browsers kent, net als met tabellen. Het enige verschil is dat je tabellen al kent, en CSS nog vrij onbekend is.

Dat klopt ook wel, maar in mijn situatie is het zo dat ik daar dan toch enige tijd aan zal moeten besteden, tijd is geld (helaas) en de klanten weten vaak niet beter dan dat ze een mooi site willen. Of daar nu puur en alleen css wordt gebruikt voor opmaak of met tabellen wordt gewerkt zal ze worst zijn.

Dat klinkt heel stom natuurlijk, ikzelf zou ook eerder voor een compleet CSS (of iig zoveel mogelijk) based site gaan, maar op dit moment heb ik geen tijd om me daar prive in te verdiepen (herinneringen van vroeger toen ik nog veeeeel tijd had dringen zich op )

[Verwijderd]

Uiteindelijk zit ik bijna aan net zoveel code als de 'ouderwetse' manier met tabellen.

En lees nu dat artikel nog is door. Dit gaat echter nergens over.

[Verwijderd]

Dat klopt ook wel, maar in mijn situatie is het zo dat ik daar dan toch enige tijd aan zal moeten besteden, tijd is geld (helaas) en de klanten weten vaak niet beter dan dat ze een mooi site willen. Of daar nu puur en alleen css wordt gebruikt voor opmaak of met tabellen wordt gewerkt zal ze worst zijn.

Iedereen die ermee werkt zegt dat het op den duur (na een maand ofzo) tijd bespaard, misschien tijd om met je werkgever te parten?

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 10:51:
[...]
En lees nu dat artikel nog is door. Dit gaat echter nergens over.

Because of the inefficient use of an abundance of tables and spacer gifs used to layout the page

Ik had het over een normale site die tabellen gebruikt. Microsoft.com gebruikt zaken die niet relevant zijn voor een normale site en waar je niet een domme browsercheck doet en dan andere versies gaat tonen (dat deden we 6 jaar geleden). Als ik een normale site (relatief begrip, ik weet het) omzet naar CSS, dan blijkt dat ik nog een overdaad aan regels kwijt ben om het te laten werken in alle browsers terwijl tabellen (mits goed gebruikt) gewoon in alle browsers werken, dan ga je kijken naar de zaken zoals tijd -> geld -> voordelen -> nadelen.
Helaas blijkt dan vaak dat de ouderwetse manier sneller is. Zeker als het gaat om het verbeteren van een bestaande site.

De besparing voor MS is uiteraard aanzienlijk, maar ik betwijfel of dit komt door het geweldige CSS of door MS zelf die gewoon niet netjes haar pagina opbouwt.
Ik denk dat MS daarnaast liever haar medewerkers gebruikt voor andere zaken, dan voor zaken die momenteel werken en waarvoor toch al servers zijn geresereerd. Voorlopig voldoet de site (lijkt me).

Even verder over CSS:
Ik kan binnen 3 minuten een schitterende pagina opzetten in tabellen. Werkt direct in alle browsers en heeft geen domme hacks nodig. CSS is blijkbaar nog te jong of te eigenwijs. De browsers zijn er, dus daar moet CSS op inspelen. De hacks zijn leuk bedacht, maar niet echt 100% werkend en te omslachtig. Ik heb nog steeds geen goede hack gezien voor een footer in een pagina waar alle elementen absolute zijn.

Het zou verder leuk zijn als je wat aardiger deed en niet zo uit de hoogte. Ik kom hier om te discusseren en niet om afgesnauwd te worden. Doe ik ook niet naar anderen...

ps: zelf ben ik nu al enige tijd bezig met CSS, maar ik ben nog steeds niet overtuigd. Tuurlijk de onderhoudbaarheid van het design wordt beter, maar voordat er een geod design staat, waarmee de klant tevreden is, had ik al 10 designs kunnen maken op de 'ouderwetse' manier. Tijd is geld en helaas kost een CSS design mij teveel tijd. Daarnaast vind ik XHTMl/CSS sites echt veel op elkaar lijken. Zaken die vroeger konden, mogen nu niet meer.

[André]

Verwijderd schreef op 29 juli 2004 @ 11:22:

[...]

Dit hele verhaal is gebasseerd op jouw kennis van CSS, dat jij veel 'hacks' nodig hebt om een table layout na te maken en daarbij ook nog veel tijd kwijt bent ligt aan jou. Als je goed thuis bent in de materie is CSS vele malen efficienter en sneller.

En CSS sites lijken op elkaar? Net zo veel als op andere sites, want je kunt net zoveel als op andere manieren. En welke zaken die vroeger konden mogen nu niet meer?

PS. Ik snauw je nu niet af, dit noem je discussieren

[ Voor 30% gewijzigd door André op 29-07-2004 11:28 ]

[mouse256]

Hmm, ik ga het artikel zeker een keer lezen...
Ik heb me een tijd geleden bezig gehouden met de layout van men site aan te passen. Vroeger was het volledig tabellen, ik wou het volledig css doen... Nu moet ik zeggen dat ik er maar half in gelukt ben. De grote indelingen zijn na veel geknoei gelukt met css, maar er staat nog een (te) groot deel in tabellen, omdat ik de positioneringen niet voor elkaar kreeg
Ik ben wel overtuigd dat je met css meer kan (zo kan je het menu "locked" maken (werkt wel niet in IE, die kent die css niet)), en kan je bvb ook een volledig andere layout definieren voor je pagina af te drukken, zodat het navigatiemenu enzo er niet bij staat, best handig.
Het nadeel er aan is wel dat het imho een stuk moeilijker is (het zou natuurlijk wel gewoonte kunnen zijn, tables gebruik ik al veel langer) en je moet verdorie goed zien dat het in alle browsers goed wordt weer gegeven. Dat het valid css en valid xhtml is en het er in mozilla goed uit ziet is nog lang geen referentie dat het in opera of IE er wel goed uit ziet (en dit is geen flame richting opera en IE, ik heb het vaak genoeg ook andersom geweten)

[Verwijderd]

http://devedge.netscape.c...e/2003/espn-interview/01/

sluit hier ook leuk bij aan, kon al in 2002!!

[Verwijderd]

@gamemag_nl: (verdorie, loopt snel vol hier )

Zonder je ook te willen afsnauwen lijkt dat me toch een gebrek aan kennis van CSS / boxmodellen en visual formatting modellen. Als je weet hoe en waarom alles werkt en waar de problemen kunnen ontstaan (en dat valt allemaal best wel mee), kan je best een nette css site bouwen.

Voor boxmodelverschillen is het enige waar je op moet letten dat je geen width samen met een border / padding definieert als je pixelprecies wilt werken. Vaak is pixelprecisie niet eens nodig, en anders is het vaak wel op te lossen met een extra containertje hier en daar

[ Voor 5% gewijzigd door Verwijderd op 29-07-2004 11:36 ]

[Johnny]

Verwijderd schreef op 29 juli 2004 @ 11:34:
http://devedge.netscape.c...e/2003/espn-interview/01/

sluit hier ook leuk bij aan, kon al in 2002!!

Ik vind het eigenlijk een slecht voorbeeld, ESPN.com heeft helemaal niets begrepen van het woord "sematiek". De broncode ziet er ongeveer zo volgt uit: <div><div><div><div><div><div><div>

Daarnaast bevat de broncode allerlei javascript browser checks en andere ongein dat niet gecached wordt en een boel andere onregelmatigheden.

Het is echt zo'n leuk-geprobeerd-maar-toch-fout-website.

[ Voor 9% gewijzigd door Johnny op 29-07-2004 11:52 ]

[TeeDee]

Leuk en interessant artikel.
Wat ik eigenlijk wel zou willen zien is de bijbehorende code.
Ik loop zelf namelijk ongelooflijk te kutten met:
<header>
<left><content><right>
<footer>
En dan voornamelijk het christelijk uitlijnen van de footer aan de onderkant.
Daar zou ik dus het voorbeeld van willen zien.

@Anne: thanks. Wat ik zelf eigenlijk niet voor elkaar krijg is (of het netjes is is een ander verhaal) maar dat als de "<left><content><right>" niet helemaal vol is, dat de footer altijd helemaal onderaan is. Maar dan zit je geloof ik met height:100%, negatieve margins e.d. Maar die links komen inderdaad van pas. Kon even niet op de juiste zoekwoorden komen

[ Voor 42% gewijzigd door TeeDee op 29-07-2004 12:42 ]

[Verwijderd]

3-col layout via CSS, Three Column Layouts, Nog een en Google.

Johnny, ook al hebben ze van semantiek nog niet heel veel begrepen, het is wel een enorme verbetering ten opzichte van het voorgaande.

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 11:36:
Zonder je ook te willen afsnauwen lijkt dat me toch een gebrek aan kennis van CSS / boxmodellen en visual formatting modellen. Als je weet hoe en waarom alles werkt en waar de problemen kunnen ontstaan (en dat valt allemaal best wel mee), kan je best een nette css site bouwen.

Het probleem is dat de gemiddelde webdeveloper qua nivo meer in de buurt van gamemag_nl zit dan van Douglas Bowman (nofi). CSS is een waanzinnige tool en zeker niet onpraktisch als je weet wat je doet. CSS heeft helaas een stijle learning curve die de groei van CSS-gebaseerde sites vertraagt. Ik kan het gamemag_nl i.i.g. niet kwalijk nemen dat hij er niet direct head-first in wil duiken.

Het is trouwens zeker wel waar dat CSS-gebaseerde sites nu op elkaar lijken. Iedereen kopieert namelijk dezelfde trucs van iedereen. CSS maakt bepaalde dingen erg makkelijk die vroeger erg moeilijk maken en iedereen stort zich op die dingen. Ik heb er wel vertrouwen in dat dit langzaam zal veranderen, zodra er meer designers (i.p.v. CSS-geeks die kunnen designen, again: nofi) sites met CSS gaan maken. Zeker met CSS 3-browsers (we praten nu wel over lange termijn ) zal dat een stuk beter worden. (border-image en multi-column stuff zijn heel leuk, bijvoorbeeld)

[mouse256]

hmm, je moet de titel van het artikel wel met een grove korrel zout nemen...
Ze zeggen dat je zoveel bespaard met de tabellen weg te doen, maar dit klopt imho niet echt. De site wordt wel 62% kleiner, maar dit is door heel de site te hercoderen naar css (en dan nog een hoop javascript buiten te kieperen waarvoor geen alternatief is) In het artikel wordt vermeld dat in de originele site de opsommingstekens images zijn. Dit is natuurlijk geen propere manier van werken en kan veel efficienter met css, daar ben ik volledig me te vinden. Maar dan hieruit concluderen dat tabellen omgooien naar css 60% besparing geeft vind ik nogal sterk...

[Verwijderd]

Het is meerdere malen aangetoond dat je toch zeker 50% kunt besparen. Daarnaast heeft Douglas het nog niet eens gehad over het beperken van hits op de server door het beperken van het aantal IMG elementen en meer met 'background-image' te regelen.

[Bosmonster]

mouse256 schreef op 29 juli 2004 @ 12:42:
hmm, je moet de titel van het artikel wel met een grove korrel zout nemen...
Ze zeggen dat je zoveel bespaard met de tabellen weg te doen, maar dit klopt imho niet echt. De site wordt wel 62% kleiner, maar dit is door heel de site te hercoderen naar css (en dan nog een hoop javascript buiten te kieperen waarvoor geen alternatief is) In het artikel wordt vermeld dat in de originele site de opsommingstekens images zijn. Dit is natuurlijk geen propere manier van werken en kan veel efficienter met css, daar ben ik volledig me te vinden. Maar dan hieruit concluderen dat tabellen omgooien naar css 60% besparing geeft vind ik nogal sterk...

Hoe noem jij het terugbrengen van een pagina van 40K naar 15K dan?

Het is meerdere malen aangetoond dat je toch zeker 50% kunt besparen. Daarnaast heeft Douglas het nog niet eens gehad over het beperken van hits op de server door het beperken van het aantal IMG elementen en meer met 'background-image' te regelen.

Jammer dat die background-images zo lastig printen...

[ Voor 17% gewijzigd door Bosmonster op 29-07-2004 12:47 ]

[Verwijderd]

BenicetoOpera hacks en andere boxmodelhacks maken het er niet fijner op.
ik snap absoluut de voordelen van CSS icm Divjes, maar ik begrijp ook dat vrij weinig bedrijven de overstap maken.

Ik ben de (mede)ontwikkelaar van inggroup.com, maar ik zie niet hoe ik deze site nu erg makkelijk en werkbaar omzet naar CSS. De site is na jaren rework hetgeen wat je nu ziet. Qua functionaliteit is het door diverse instanties geprezen, maar qua code is het door de jaren heen er niet beter op geworden.
Mijn opdrachtgever (ING) gaat nu dus echt niet de code omgooien om zo wat minder dataverkeer te krijgen. Een dergelijke site omgooien kost gewoon enorm veel tijd. ING is tevreden met hetgeen wat ze hebben.

Tijd = geld. Omgooien voor minder dataverkeer doet bijna niemand.

[André]

Verwijderd schreef op 29 juli 2004 @ 12:48:
Tijd = geld. Omgooien voor minder dataverkeer doet bijna niemand.

En dat is best raar want op een druk bezochte site kan je dat veel resources schelen. Je kunt het met lichtere servers doen, of met dezelfde servers waardoor de lichte pagina's sneller geserveerd worden.

[cavey]

Hmm, weet niet of het al langs is geweest, maar wat een hoop mensen schijnen te vergeten:

Opmaak via CSS/HTML -> 1 relatief grote CSS, en meerdere kleine html files (re-use van je CSS!! Cached en wel!!!)

vs opmaak via CSS (FAC)/TAbellen -> 1 relatief kleine CSS, en meerdere relatief grote htmls... omdat AL DIE TABEL opmaak zut er ook bij moet ... en dat tikt toch flink aan lijkt mij...

om het maar niet te hebben over even makkelijk een design omgooien: als je je CSS beetje netjes hebt ontworpen hoef je daar alleen maar wat aanpassingen te doen en je hebt een compleet andere layout ... met tabellen moet je alles rebuilden........... (en elke erop volgende pagina).

Kwa opzetten is een tabel-based-layout misschien snell,r maar in onderhoud en site-redesign is het een crime...

maar dat is mijn bescheiden mening.

En zoals het artikel al zegt: Ontwikkel voor een STRICTE browser als eerste, en pas dan de IE hacks toe........ ipv voor IE te ontwikkelen en er dan achter komen dat het in andere browsers ruk eruitziet.

ander punt om van IE af te stappen (zoals artikel ook al zegt: Loos argument dat overgroot deel van de wereld IE gebruikt), security? AL die activex shit........ non-compliant/compatible javascript gedoe (ik ben al zo vaak sites tegen gekomen met sloppy javascript-code die niet goed werken in Firefox omdat er gewoon object-declaraties missen... waar IE netjes overheen walst.......)

ahem... CSS is goed Maar idd, steep leer-curve ^_^

[cavey]

Bosmonster schreef op 29 juli 2004 @ 12:46:

Jammer dat die background-images zo lastig printen...

Wil je dat uberhaupt printen? (ok, offtopic misschien... maar toch)

Je hebt toch een aparte printable versie liggen? (in css) waardoor je de kern
van je pagina wel hebt, maar alle frutsels en onzin er niet bij hebt? ^_^

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 12:48:
Ik ben de (mede)ontwikkelaar van inggroup.com, maar ik zie niet hoe ik deze site nu erg makkelijk en werkbaar omzet naar CSS.

Ik weet zeker dat ieder van de CSS-goeroes op dit forum nog geen 40 uur nodig zouden hebben om alle templates van die site om te zetten naar CSS-gebaseerde HTML. Browser-compatible, semantisch correct en (bij gratie van het CMS) valide ook.


[offtopic:]

Verwijderd schreef op 29 juli 2004 @ 11:22:
[...] maar voordat er een geod design staat, waarmee de klant tevreden is, had ik al 10 designs kunnen maken op de 'ouderwetse' manier.

Wil je zeggen dat jij je designs in HTML maakt? Normaal gesproken keurt een klant een mockup (Photoshop, Fireworks, Illustrator, etc.) goed voordat er uberhaupt gecode gaat worden.

[Janoz]

Verwijderd schreef op 29 juli 2004 @ 09:20:
Behalve dan misschien de backend en dergelijke, maar we zitten hier bij Webdesign & Graphics, nietwaar?

Ff een bericht van over de schutting . Persoonlijk ben ik het hier heel erg hardgrondig mee oneens. Afgelopen tijd ben ik al met meerdere producten bezig geweest samen met een designer die wel het css-licht heeft gezien. De werkwijze is eigenlijk dat ik kale xhtml oplever waaraan ik op zijn aanwijzingen wat classes en eventueel id's toevoeg. Heerlijk vind ik het om naast de backend programmatuur gestructureerd in elkaar te zetten dat ook met de output te doen. Vervolgens maakt hij er een (of meerdere) leuke stylesheets bij en het is klaar.

Erg simpel te restylen, voldoet aan drempels weg, etc etc..

Wat ik eigenlijk wil zeggen is dat het gestructureerd opleveren van de content ook de backend een stuk duidelijker en overzichtelijker maakt. Laat dat je dus iig ook niet tegenhouden ..

[AkaXakA]

Inggroup.com (frontpage dan) lijkt mij juist best makkelijk om te zetten, maar om de cms die er achter zit om te gooien naar divs+css zal best een flinke klus worden die waarschijnlijk meer geld zal kosten dan dat die bespaard.*

Wat mij wel verbaast is dat iedereen maar blijft doorgaan over tables tegenover css. Alsof ze elkaar uitsluiten! Terwijl het juist handig is om ze door elkaar te gebruiken om de overstap makkelijker te maken.
Waar het in mijn ogen eigenlijk om gaat is inline styling vs. (externe) css. Dat is ook waar het meeste te besparen valt.

wat veel mensen doen (en wat ik hier ook zie) is dat mensen dat verwarren met divs vs tables (vs lijsten). Het heersende idee op dit moment is dat div's semantisch correcter zijn dan tabbellen om je pagina in te delen. Dit zou dan komen omdat in een tabel 'tabular data' verwacht wordt en div's (divisions) hebben juist een neutrale betekenis. Door het gebruik van divs wordt je gedwongen de compositie van de pagina in css te doen (waar die hoort, aangezien css voor presentatie is), het jammerlijke is dat juist dit onderdeel van css moeizaam ondersteund wordt in de meest gebruikte browser (IE).

Om terug te komen op de vraag of INGGroup.com makkelijk door meer css gebruik kleiner is te maken: JA. Niet door de tabellen er overal uit te slopen, maar gewoon door bv. al die spacer elementen:

code:

<td width="1">[img]"/shim.gif"[/img]</td>

te vervangen door:

code:

<td class="spacer1">&nbsp;</td>
met in de css:
.spacer1 {
  height:13px;
  width:1px; /* of wil je nou 2px? */
  /* met misschien nog een 'display: block;' */
}

Meer zal absoluut mogelijk zijn, maar door die spacer td overal dezelfde (of een net afwijkende class mee te geven) moet toch een flink stuk te besparen zijn.

*Dit weet ik uit ervaring...de cms'en die op dit moment netjes div's en menu's met li opbouwen zijn op een hand te tellen (Ez Publish, hoewel Mambo ook in de de goeie richting gaat) Blogs hebben over het algemeen wat minder html buiten de template, dus zijn ze makkelijker semantisch te maken.

[Verwijderd]

Het is gemaakt in IBM Lotus Notes 5.11 een tool welke nogal wat kennis vereist wil men er goed mee omgaan (het is dus niet alleen design waar men mee te maken heeft, maar dat is logisch ).

Daarnaast vind ik de allereerste stelling nog steeds krom. Iemand heeft ongetoond microsoft.com nagebouwd (ik wil eerst iets zien). Dit heeft die persoon waarschijnlijk voor 1 pagina gedaan (joy! en dan ook nog static).

De sites waaraan ik werk hebben vaak meerdere templates, pagina opbouw en een gecompliceerd CMS die zelf de HTML opbouwt ed. De berekening over de bespaarde GB klopt daardoor al niet. Het verkooppraatje gaat daarom direct over en de klant weet dit ook.

Als een klant tevreden is, dan hoeft het van een klant niet in een nieuwe standaard die momenteel alleen gebruikt wordt door de die-hards.

Ik maak overigens designs in photoshop, maar de vervelende klantjes willen altijd zien hoe dat dan uiteindelijk werkt

@AkaXakA:
De code van INGgroup.com is een redelijke ramp. Doordat er diverse ontwikkelaars aan hebben gezeten is het inmiddels een flinke brei
Het kan inderdaad beter, maar opdrachtgevers willen dat niet inzien en willen niet investeren in een paar kb verlichting per pagina.

[AkaXakA]

Verwijderd schreef op 29 juli 2004 @ 13:46:
Ik maak overigens designs in photoshop, maar de vervelende klantjes willen altijd zien hoe dat dan uiteindelijk werkt

Dan maar je toch een layer waar ze bijv. een focus van een textarea emuleert over het unfocused element? (om maar iets te noemen)

Oh wacht, je moet het waarschijnlijk aan ze opsturen...hmm ja klote Alsnog kan je dan best de mockups in tabellen (met css) doen en de uiteindelijke pagina in divs. Het meeste van die css kan je dan toch gewoon overnemen.

@AkaXakA:
De code van INGgroup.com is een redelijke ramp. Doordat er diverse ontwikkelaars aan hebben gezeten is het inmiddels een flinke brei
Het kan inderdaad beter, maar opdrachtgevers willen dat niet inzien en willen niet investeren in een paar kb verlichting per pagina.

Ouch...er zijn wel meer dingen bij ING niet goed geregeld Meerdere frontend coders zijn idd niet wenselijk (behalve als het over scripttalen gaat - meestal)

En over een paar kb per pagina: zodra je een paar kb verschuift naar css bespaar je al die kb's per bezoeker x het aantal pagina's dat die opvraagt. Dat komt omdat css gecached wordt, en alle stijl info maar 1 keer binnen hoeft te worden gehaald. Bij in-line styling moet een bezoeker het elke keer binnenhalen als die een pagina opvraagd.

Zo bespaar je niet alleen bandbreedte, de site zelf zal ook sneller binnenkomen bij de bezoeker, je hebt dus dubbel voordeel ervan.

Het is natuurlijk de vraag of je klant dat op prijs weet te stellen.

[mouse256]

@ bosmonster:
Ik heb ook gelezen dat de site van 40k naar 15k is terug gebracht, en dat is een mooite prestatie. Maar dit is niet enkel door de tabellen om te vormen naar css zoals de titel aangeeft, maar wel door de hele pagina te hercoden naar css, dat is wat ik wou opmerken.
Voor de rest ben ik het er helemaal mee eens dat de css versie beter is dan de oude, maar dan niet enkel omwille dat de tabellen nu weg zijn ;-)

[CrashOne]

Verwijderd schreef op 29 juli 2004 @ 13:46:
[..]

Daarnaast vind ik de allereerste stelling nog steeds krom. Iemand heeft ongetoond microsoft.com nagebouwd (ik wil eerst iets zien). Dit heeft die persoon waarschijnlijk voor 1 pagina gedaan (joy! en dan ook nog static).

[..]

Hier wel een andere remake:
http://www.aspnetresources.com/microsoft/final/

En het gaat niet om die ene pagina, er is een verschil aangetoont in grootte van visueel dezelfde pagina's.

[JeromeB]

Je zult uiteindelijk toch moeten gaan investeren wil je uptodate blijven. Waarom dan niet direct. Zo heb je in het begin wel extra kosten, maar na verloop van tijd haal je die kosten er zo weer uit.

Stel je betaald 10 euro per maand om je site te laten hosten. In 1 jaar moet je dan 120 euro betalen. In 10 jaar moet je 1200 euro betalen.

Stel je laat je site ombouwen waardoor het veel efficienter is. Je moet eenmalig 100 euro betalen voor het ombouwen van de site, maar nu kun je je site wel goedkoper laten hosten. Je moet nu bijvoorbeeld 8 euro per maand betalen. In 1 jaar moet je dan 96 euro betalen. In 10 jaar moet je dan 960 euro betalen.

960 euro + 100 euro = 1060 euro.

Dat is dus een besparing van 1200 - 1060 = 140 euro.

Als we het dan over grote bedragen gaan hebben dan tikt dat behoorlijk aan. Overigens moet je wel blind zijn om dit niet te kunnen zien. Jammergenoeg hebben de meeste zakenlui hier helemaal geen verstand van en laten het liever bij wat het is.

Overigens zitten er nog veel meer voordelen aan. Als later de site moeten worden herdesignt scheelt dat weer veel werk en tijd en dus veel geld.

[Rickets]

Verwijderd schreef op 29 juli 2004 @ 13:46:
Het is gemaakt in IBM Lotus Notes 5.11 een tool welke nogal wat kennis vereist wil men er goed mee omgaan (het is dus niet alleen design waar men mee te maken heeft, maar dat is logisch ).

Kijk, dat Lotus Notes maakt het al een flink stuk lastiger in jouw situatie. Ik kan goed begrijpen dat er geen tijd/geld in gestoken wordt om nette HTML en CSS te krijgen.

[P_de_B]

JeromeB schreef op 29 juli 2004 @ 14:12:
Als we het dan over grote bedragen gaan hebben dan tikt dat behoorlijk aan. Overigens moet je wel blind zijn om dit niet te kunnen zien. Jammergenoeg hebben de meeste zakenlui hier helemaal geen verstand van en laten het liever bij wat het is.

Sorry, en zeker niet bedoeld als flame, maar zo werkt het niet altijd bij grote projecten. Ik ben het zeker met een CSS gebaseerde opmaak eens, dat is niet de discussie, maar beslissingen om zo'n site "even" om te zetten in CSS zijn wel iets moeilijker dan de rekensom die je nu laat zien. Als je een paar jaar meeloopt zul je dit vanzelf beamen.

[Verwijderd]

CrashOne schreef op 29 juli 2004 @ 14:07:
[...]


Hier wel een andere remake:
http://www.aspnetresources.com/microsoft/final/

En het gaat niet om die ene pagina, er is een verschil aangetoont in grootte van visueel dezelfde pagina's.

wow!
[bookmark]

Een mooi voorbeeld, absoluut!

[bitflusher]

dat is een remake met elementen van zowel IE als non-IE, wel een aantal images van IE style maar niet de fading colors in header en footer.

gewoon een note.


hij wordt wel hetzelfe weergeven in IE(6.02) en firefox (0.9.2)

[Janoz]

JeromeB schreef op 29 juli 2004 @ 14:12:
Je zult uiteindelijk toch moeten gaan investeren wil je uptodate blijven. Waarom dan niet direct. Zo heb je in het begin wel extra kosten, maar na verloop van tijd haal je die kosten er zo weer uit.

Stel je betaald 10 euro per maand om je site te laten hosten. In 1 jaar moet je dan 120 euro betalen. In 10 jaar moet je 1200 euro betalen.

Stel je laat je site ombouwen waardoor het veel efficienter is. Je moet eenmalig 100 euro betalen voor het ombouwen van de site, maar nu kun je je site wel goedkoper laten hosten. Je moet nu bijvoorbeeld 8 euro per maand betalen. In 1 jaar moet je dan 96 euro betalen. In 10 jaar moet je dan 960 euro betalen.

960 euro + 100 euro = 1060 euro.

Dat is dus een besparing van 1200 - 1060 = 140 euro.

Als we het dan over grote bedragen gaan hebben dan tikt dat behoorlijk aan. Overigens moet je wel blind zijn om dit niet te kunnen zien. Jammergenoeg hebben de meeste zakenlui hier helemaal geen verstand van en laten het liever bij wat het is.

Overigens zitten er nog veel meer voordelen aan. Als later de site moeten worden herdesignt scheelt dat weer veel werk en tijd en dus veel geld.

Dat weet jij, dat weet ik... Echter stel je de volgende situatie voor:

Webbouwer : Als we nu je hele site onderhanden nemen gaat je dat in de toekomst bergen geld besparen.
Klant : Owh, mooi. Wat kost dat?
Webbouwer : Nou, E10.000,- en dan ziet je site er exact hetzelfde uit.
Klant : Maar dan geef ik jou geld en veranderd er geen ene drol?
Webbouwer : Owh jawel hoor, standaarden bla bla, drempels weg bla bla, onderhoud bla bla, toekomst bla bla, besparingen bla bla.
Klant : Maar de site ziet er nog hetzelfde uit?
Webbouwer : Ja, en werkt ook nog steeds hetzelfde.
Klant : nou laat dan maar...

[Verwijderd]

Hmm. Argumenten zoals: je site wordt 2 keer zo snel gedownload. Dus in plaats van een minuut hoeven ze nu maar 30 seconden te wachten op 56k. Bij vervolgbezoeken is dat minder, omdat de opmaak gecached wordt. Jullie zullen beter geindexeerd worden door Google. Jullie site zal beter bereikbaar zijn. Etc. werkt niet?

(Daarnaast kun je zo'n proces waarschijnlijk beter integreren (+ argumenten) bij een nieuw project of een restyling oid.)

[André]

Verwijderd schreef op 29 juli 2004 @ 14:59:
Hmm. Argumenten zoals: je site wordt 2 keer zo snel gedownload. Dus in plaats van een minuut hoeven ze nu maar 30 seconden te wachten op 56k. Bij vervolgbezoeken is dat minder, omdat de opmaak gecached wordt. Jullie zullen beter geindexeerd worden door Google. Jullie site zal beter bereikbaar zijn. Etc. werkt niet?

Nope, niet in de praktijk.

Alleen als je een nieuwe site opzet kun je het zo implementeren.

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 14:59:
Jullie zullen beter geindexeerd worden door Google. Jullie site zal beter bereikbaar zijn. Etc. werkt niet?

Dit absoluut wel. Google is onwijs belangrijk voor klanten, maar om bij Google hoog te eindigen is het niet alleen maar met CSS en DIV werken, maar symantiek veel belangrijker, koppen H1, tekst P, enzovoorts...

[Verwijderd]

Dit absoluut wel. Google is onwijs belangrijk voor klanten, maar om bij Google hoog te eindigen is het niet alleen maar met CSS en DIV werken, maar symantiek veel belangrijker, koppen H1, tekst P, enzovoorts...

Dat heeft dus ook alles te maken met het weghalen van "nested tables" et cetera.

[Verwijderd]

André schreef op 29 juli 2004 @ 15:01:
[...]
Nope, niet in de praktijk.

Het eerste wat ze vragen is meestal, kan je er voor zorgen dat we hoog in de zoekresultaten van google komen? eggg wel belangrijk

[André]

Verwijderd schreef op 29 juli 2004 @ 15:35:
[...]

Het eerste wat ze vragen is meestal, kan je er voor zorgen dat we hoog in de zoekresultaten van google komen? eggg wel belangrijk

Wat ik al zeg: bij een nieuwe site wel ja, bij een bestaande geld het gene wat Janoz zegt:
[rml]Janoz in "[ CSS] Tabellen wegdoen bespaard slechts ..."[/rml]

[Woudloper]

't Is een erg leuk artikel om te lezen. Doet mij een beetje denken aan: Tweakers.net remake Hierin doet creative8500 min of meer hetzelfde met Tweakers.net wat Doug gedaan heeft met Microsoft.

Wat overigens ook belangrijk is wat dus uit het artikel komt van Doug is dat je toch wel een goede 'businesscase' kan opstellen waarom je een goede sematiek van je pagina moet hebben in combinatie met gebruik van CSS. Er zit dus écht wel een goede ROI op het gebruik van CSS, echter wil nog niet iedereen dat geloven ivm de stijle learning curve.

Overigens heeft het ook nog wel te maken met de WYSIWYG editors aangezien zij geen (X)HTML, CSS opleveren, maar over het algemeen nog uitgaan van tabellen...

[JeromeB]

P_de_B schreef op 29 juli 2004 @ 14:21:
[...]

Sorry, en zeker niet bedoeld als flame, maar zo werkt het niet altijd bij grote projecten. Ik ben het zeker met een CSS gebaseerde opmaak eens, dat is niet de discussie, maar beslissingen om zo'n site "even" om te zetten in CSS zijn wel iets moeilijker dan de rekensom die je nu laat zien. Als je een paar jaar meeloopt zul je dit vanzelf beamen.

Natuurlijk spelen véél andere factoren ook een rol, maar daarom vind ik het gewoon jammer. Vooral grote bedrijven kunnen hier nog behoorlijk op besparen lijkt mij.

Janoz schreef op 29 juli 2004 @ 14:52:
[...]


Dat weet jij, dat weet ik... Echter stel je de volgende situatie voor:

Webbouwer : Als we nu je hele site onderhanden nemen gaat je dat in de toekomst bergen geld besparen.
Klant : Owh, mooi. Wat kost dat?
Webbouwer : Nou, E10.000,- en dan ziet je site er exact hetzelfde uit.
Klant : Maar dan geef ik jou geld en veranderd er geen ene drol?
Webbouwer : Owh jawel hoor, standaarden bla bla, drempels weg bla bla, onderhoud bla bla, toekomst bla bla, besparingen bla bla.
Klant : Maar de site ziet er nog hetzelfde uit?
Webbouwer : Ja, en werkt ook nog steeds hetzelfde.
Klant : nou laat dan maar...

Daar heb je toch advizeurs voor? Als goede ondernemer zul je vast wel eens raad plegen bij een advizeur of zie ik dat nu helemaal verkeerd?

[Pelle]

titelfix

[Blue-eagle]

Ach, de klant betaalt toch per gig

Anne, wat is het doel van je topic? Heel leuk allemaal dat Microsoft er gigabytes per uur mee wint als ze dit zouden doorvoeren. Maar wat is nu je discussiepunt?

Ik moet toch iets hebben om tegen te kunnen schoppen

[Verwijderd]

Anne, wat is het doel van je topic? Heel leuk allemaal dat Microsoft er gigabytes per uur mee wint als ze dit zouden doorvoeren. Maar wat is nu je discussiepunt?

Wellicht het doel wat in de start post genoemd staat? Anders zou ik het ook niet weten.

@Pelle, die spellingcheckers van tegenwoordig hebben niks meer door :-)

[AkaXakA]

Verwijderd schreef op 29 juli 2004 @ 16:26:
niks

niets

[Clay]

gamemag_nlEven verder over CSS:
Ik kan binnen 3 minuten een schitterende pagina opzetten in tabellen. Werkt direct in alle browsers en heeft geen domme hacks nodig. CSS is blijkbaar nog te jong of te eigenwijs. De browsers zijn er, dus daar moet CSS op inspelen. De hacks zijn leuk bedacht, maar niet echt 100% werkend en te omslachtig.

9 van de 10 manieren om iets in css aan te pakken die hacks worden genoemd zijn dat helemaal niet. In de reacties op fauxcolumns op ALA werdt het op een dergelijke manier toepassen van bgimages al een hack genoemd Maar gewoon het feit dat iets onbekend is maakt het nog geen hack. Voice-family misbruiken is een hack, de commented backslash voor macIE is een hack; op een ingenieuze manier css toepassen om iets voor elkaar te krijgen is geen hack.

In die zin is een pagina in tabellen opzetten niet 1 grote hack te noemen, maar misbruik is het wel degelijk. Het mag algemeen ingeburgerd gebruik zijn, het is nooit de bedoeling geweest. Het is imo overigens een nobel streven het gebruik van hacks helemaal te voorkomen. Vrijwel altijd lukt dat ook.

Ik heb nog steeds geen goede hack gezien voor een footer in een pagina waar alle elementen absolute zijn.

Met het 2e deel van de zin geef je het probleem ook al aan. Je moet helemaal niet alles absolute maken. De natuurlijke flow van block en inline (etc) elementen in combinatie met positioning (relative en absolute) en floats geven je alle vrijheid om "het footer probleem" op meerdere manieren op te lossen. Als je je vastbijt in 1 methode ontneem je jezelf andere mogelijkheden, en maak je het jezelf dus moeilijker dan nodig.

Het probleem met css is ook niet dat het foutgevoeliger is (of instabiel of wat dan ook), het probleem is wel dat het gevoeliger is voor fouten. Een tablelayout kan je maar op 1 manier maken; met tabelcellen. Een css layout kan op vele verschillende manieren, en afhankelijk van de situatie kan methode X de ene keer perfect geschikt zijn, en de volgende keer totaal onbruikbaar.

Wat hier veel gezegd wordt blijft dus helaas de waarheid; als iemand denkt dat de techniek niet volstaat is het waarschijnlijk eerder zijn of haar eigen kennisniveau. Het is jammer dat het persoonlijk falen van iemand dan aangegrepen wordt om de techniek onderuit te halen. Ik kan b.v. geen C++, dan kan ik na een tijdje poken ook niet zomaar zeggen dat het prut is, als ik om me heen mensen er de meest schitterende dingen zie maken.

Je gaat natuurlijk niet nu met terugwerkende kracht alles wat je ooit gemaakt hebt weer ombouwen naar xhtml. Maar dit soort praktijkvoorbeelden van bandbreedtebesparing (en de andere bekende eigenschappen/voordelen van xhtml) helpen natuurlijk wel heel erg in het benadrukken dat dit een veel betere methode is om te hanteren bij het beginnen aan een nieuw project. Voor grote bedrijven is het natuurlijk veel moeilijker om in 1 keer over te stappen naar een nieuwe methode dan wanneer je een eenzame hobby'ist bent, maar langzaam aan gebeurt het wel degelijk.

[Verwijderd]

Verwijderd schreef op 29 juli 2004 @ 12:48:
BenicetoOpera hacks en andere boxmodelhacks maken het er niet fijner op.
ik snap absoluut de voordelen van CSS icm Divjes, maar ik begrijp ook dat vrij weinig bedrijven de overstap maken.

Ik ben de (mede)ontwikkelaar van inggroup.com, maar ik zie niet hoe ik deze site nu erg makkelijk en werkbaar omzet naar CSS. De site is na jaren rework hetgeen wat je nu ziet. Qua functionaliteit is het door diverse instanties geprezen, maar qua code is het door de jaren heen er niet beter op geworden.
Mijn opdrachtgever (ING) gaat nu dus echt niet de code omgooien om zo wat minder dataverkeer te krijgen. Een dergelijke site omgooien kost gewoon enorm veel tijd. ING is tevreden met hetgeen wat ze hebben.

Tijd = geld. Omgooien voor minder dataverkeer doet bijna niemand.

ff offtopic:
Naam, gamemag_nl en mede-ontwikkelaar van INGGroup.com.....
Ruud?


Verder moet ik er toch echt tegenin gaan, ik snap jouw punt als je zegt dat het opnieuw ontwikkelen van een website die zo groot is als INGGroup.com te veel geld kost en zichzelf niet zal terug verdienen, maar dat is helaas wat te veel bedrijven denken. Door deze houding zal CSS altijd een ondergeschoven kindje blijven.

Management kijkt alleen naar harde cijfers, dus kocht je ze willen overtuigen van het nut van het ombouwen naar een CSS site, dan zal je met die cijfers moeten komen. Ik heb geen idee hoevaak die site van ING bezocht wordt, maar ik kan me voostellen dat er wel wat besparingen te doen zijn op servers en mankracht als de grootte verminderd wordt en de onderhoudbaarheid van een site hoger wordt.

Als je achter deze ontwikkelingen staat, kan je sowieso al beginnen door alle nieuwe onderdelen van de site wel mbv CSS te bouwen.
Ik kan me voorstellen dat het een ellendig werkje kan zijn om alles om te bouwen (ik heb het hier ook gedaan met het intranet van ons bedrijf), maar het maakt alles uiteindelijk veel makkelijker.

[Bosmonster]

komakeef schreef op 29 juli 2004 @ 13:07:
[...]


Wil je dat uberhaupt printen? (ok, offtopic misschien... maar toch)

Je hebt toch een aparte printable versie liggen? (in css) waardoor je de kern
van je pagina wel hebt, maar alle frutsels en onzin er niet bij hebt? ^_^

Bullets? Die zou ik toch graag geprint zien En daar valt met een print-css weinig meer aan te veranderen.

[ Voor 8% gewijzigd door Bosmonster op 30-07-2004 16:55 ]

[Verwijderd]

Bosmonster schreef op 30 juli 2004 @ 16:54:
Bullets? Die zou ik toch graag geprint zien En daar valt met een print-css weinig meer aan te veranderen.

Cascading Stylesheet:

@media print {
    ul {
        list-style-type:square;
    }
    
}

@media screen {
    ul {
        list-style-type:none;
    }
    li {
        background-image:url(bullet.gif) no-repeat;
        padding-left:20px;
    }
    
}

Images on-screen. Standaard bullets on-paper. Of bedoel je dat niet?

[Verwijderd]

Verwijderd schreef op 30 juli 2004 @ 10:54:
[...]
ff offtopic:
Naam, gamemag_nl en mede-ontwikkelaar van INGGroup.com.....
Ruud?

Inderdaad

Het probleem is echter dat ik niet ga bouwen aan een nieuwe site zonder dat er budget is. Dan kom ik straks terug met een CSS/XHTML versie en is er geen geld om dat te betalen. Dat doe ik dus niet
Ik wil het ook niet ombouwen zonder dat ik ervoor betaald wordt. Het CSS/XHTML is leuk, maar ik ga het dus niet in mijn vrije tijd doen en dan het risico lopen dat er niets mee wordt gedaan (Je kent zelf ook de ING en je weet dat beslissingen soms apart genomen worden).

[XangadiX]

<commercieel>

ik host ook sites en mensen betalen me voor meer dataverkeer, dus ik denk dat ik NOG meer shimmetjes en, img en tables ga gebruiken

</commercieel>

ff serieus, ik denk dat dat ook de verkeerde kant opwerkt, veel hosters zien hun inkomsten op deze manier dalen, dus waarom zouden ze dit aanmoedigen? (interssant artiekel wel)

[ Voor 37% gewijzigd door XangadiX op 30-07-2004 20:39 ]

[coubertin119]

Autofabrikanten maken hun auto's ook zuiniger (zo zuinig mogelijk is volgens mij een te gewaagde uitspraak), dit is negatief voor de winst van de tankstations en de grote oliefabrikanten. Auto's zijn van 20 liter per 100 kilometer naar 7 liter (de onze toch, volgens het boekje) per kilometer gegaan. Of de prijzen hierop gereageerd hebben weet ik niet. Maar in het geval van websites is het een winsituatie voor de bezoeker, hij heeft minder trafiek te verwerken, terwijl de maker nog steeds even veel betaalt.

[Verwijderd]

ff serieus, ik denk dat dat ook de verkeerde kant opwerkt, veel hosters zien hun inkomsten op deze manier dalen, dus waarom zouden ze dit aanmoedigen? (interssant artiekel wel)

Mensen gaan meer gebruik maken van de site omdat deze sneller wordt.

(Mensen gaan denk ik ook meer rijden als ze voor dezelfde prijs meer kunnen rijden.)

Zie bijvoorbeeld: http://www.clagnut.com/blog/366/

[BalusC]

Toevallig heb ik gisteren een nieuwe versie van mijn website online gegooid. Voorheen was de layout volledig door tabellen vormgegeven. Nu heb ik slechts 3 kolommen met daarin DIV'jes en een flinke shot CSS. Tevens heb ik hier en daar een beetje semantiek toegepast. En ik moet zeggen, het scheelt behoorlijk: alle de 92 HTML pagina's wegen nu in totaal 1,6MB ipv 2,3MB. Een voordeel van dik 30%

[ Voor 3% gewijzigd door BalusC op 31-07-2004 08:14 ]

[alienfruit]

LOL Welke winst van de autofabrikanten? Denk je serieus dat een autofrabikant nog geld verdient op de verkoop van auto's? Ik dacht het niet, als ze de Financials afdeling niet hadden draaide de meeste fabrikant verlies.

[ Voor 23% gewijzigd door alienfruit op 31-07-2004 11:40 ]