[CSS] Jullie gemiddelde ontwikkeltijd uitbouw grafi. ontwerp

[Verwijderd]

Mijn ervaringen tot nu toe met CSS zijn bijzonder goed, maar het valt mij op dat, ondanks de aanwezige basiskennis over de theorie en de techniek achter CSS, het keer op keer weer een relatieve 'opgave' is om vanuit het niets een nieuw design uit te bouwen naar HTML en CSS. Zo loop ik regelmatig iedere keer weer tegen zaken als footers die mee moeten bewegen naar beneden, wanneer de content langer wordt enzovoort. Met andere woorden: ook al heb je het regelmatig gedaan en heb je diverse problemen opgelost, het lijkt wel alsof ieder nieuw design ook weer met nieuwe problemen gepaard gaat. Soms wordt het dan een kwestie van trial & error, terwijl je zou verwachten en hopen dat trial & error niet meer noodzakelijk is bij meer ervaring.

Hoe ervaren ervaren CSS mensen dit? Ben ik wel benieuw naar namelijk .

[mithras]

Voor een nieuwe site, waar het ontwerp al klaar ligt, zal ik altijd eerst een grove schets op papier maken. Hierin verdeel ik de site in blokken (lees: div's, lists ed) en klad ik zaken als breedte erbij.
Soms is de positionering nog even moeilijk, maar als alles uiteindelijk op zn plekje staat gaat de rst vrij gemakkelijk af. Vooral de ervaring en de kennis om met zo weinig mogelijk css het juiste design te krijgen is de kunst eigenlijk.

Zo loop ik regelmatig iedere keer weer tegen zaken als footers die mee moeten bewegen naar beneden, wanneer de content langer wordt enzovoort.

Tja, zoals ik eerder al zei, als je van tevoren op papier de site schetst, krijg je ook snel een idee hoe je (in html) de site moet opbouwen. En ik weet wel zeker dat als je semantisch correcte html gebruikt, het stylen mbv css je ook een stuk gemakkelijker af gaat.

[Verwijderd]

Het schetsen op papier doe ik ook, net zoals jij beschrijft. Dat scheelt inderdaad een stuk en dan heb je een idee waar je naartoe moet werken. Als je zomaar begint, is de kans groter dat je vastloopt en je overnieuw moet beginnen.

Maar misschien verbeeld ik het me ook maar, vandaar de volgende vraag:
Hoe lang doe jij er in zijn totaliteit dan over gemiddeld? Dus vanaf het moment dat je begint met het op papier indelen van het design tot het moment dat de complete template (HTML + CSS) van het design is ontwikkeld?

[wackmaniac]

Ik ben zelf langer bezig met het zorgen dat het zowel in FF als IE eruit ziet zoals ik dat voor ogen had.

Een pagina zelf opbouwen is, na het maken van een tekening meestal maar een uurtje of 2 tot 3 werk, tenzij ik heel veel aan de slag ga met photoshop. Daarna ben ik nog wel een uurtje of 2 bezig met het omzetten naar nette opmaak (lees: scheiding css en html) en daarna kan het grote IE corigeren beginnen...

Naar mijn mening is het bedenken van een ontwerp het meeste werk, omdat het uiteindelijk op je scherm anders kan overkomen dan op papier en dan ga je tussentijds aanpassingen maken en dan kan het wel aardig lang gaan duren

[Verwijderd]

Bij het maken van een ontwerp in photoshop denk ik al na over de indeling en de css (dit probeer ik te doen zonder mezelf te beperken, maar soms kan je dingen toch beter vermijden). Als je tijdens het ontwerpen al over de benodigde html/css denkt, gaat die fase ook veel sneller. Maar de html/css duurt bij mij doorgaans wel langer dan het ontwerp zelf maken in photoshop Het blijft veel gekut, maar op lange termijn zal je tegen dezelfde problemen aanlopen die je eerder al hebt opgelost, ervaring is dan handig.

[mithras]

Ik een uurtje of 2/3 heb ik alles wel gemaakt (html opbouw+css). Verder werk ik onder Ubuntu, dus alleen met FF, en geen IE. Ik weet ongeveer met welke dingen IE moeilijk doet (floats, margin/padding, border), dus probeer ik deze te vermijden of zo te bouwen dat het ook in IE er (waarschijnlijk) redelijk uitziet.
Ik hou mezelf tijdens het bouwen ook altijd aan het ontwerp, tenzij je ineens iets heel anders bedenkt. Dit doe ik vooral omdat je juist alles netjes had getekend / uitgerekend. Als je dan ineens iets 10px breder wil, kan het uiteindelijk best veel invloed hebben. Dus eerst je oorspronkelijke ontwerp afbouwen, en dan kijken wat je wilde veranderen. Dit lijkt misschien wel meer werk, maar zo voorkom je constructiefouten en het bespaart je uiteindelijk heel veel tijd om de mogelijke fouten weer uit te zoeken.

[Blue-eagle]

Gemiddeld een dag tot 2 dagen om alles goed in XSL en CSS te hebben staan, gereed voor 't CMS en uitbouw tot vervolgpagina's. Mits de ontwerper rekening heeft gehouden met de beperkingen van het internet (en mijn beperkingen )

Grappig is dat, toen ik hier begon was het ook: "Mwah, uurtje of 3 moet kunnen" en dan ben je drie uur verder, heb je alleen nog maar een basaal stukje HTML en CSS wat net niet werkt in *random browser*

Urenregistratie is wel zo handig met dit soort dingen Maargoed, het ligt ook aan de template natuurlijk - ik ben klaar geweest binnen een uurtje en met een ander deed ik er drie dagen over. Een IE-only intranet is natuurlijk erg simpel

Maar gelukkig is ons CMS zo makkelijk dat we die "verloren" tijd weer goed maken bij de het beheersbaar maken

[gertvdijk]

Deze vakantie ben ik werkzaam geweest bij een bedrijf in Amsterdam dat voornamelijk usability doet met websites. Ik mocht daar ook HTML/CSS doen voor een niet nader te noemen zeer grote klant van ze. Wat ik daar heb geleerd ten aanzien van tijdsbesparing:

• Een reset.css stylesheet maken/jatten die alle standaard margins, paddings, font-sizes, etc op 0 zet, zodat je niet afhankelijk bent van je browser! Hierdoor had ik na het maken van een heel intranet maar twee (!) regels in mijn IEstyles.css documentje staan! (download reset.css)
• Double-check je geldigheid van je code. Verdiep je in de eigenschappen en behaviour van de verschillende (X)HTML elementen (block-element, float-clearing, etc) en hoe de afhankelijkheid is binnen de verschillende browsers.
• In je Photoshop file die je maakt/krijgt alles consistent maken. Niet zomaar op het oog, maar meet het aantal pixels. Leer omgaan met magnetisch plakken van objecten en het raster. (download een voorbeeld)
• Het gebruik van de fantastische relatieve eenheid em. Margins, font-sizes, paddings etc. in em's groeien mee als je de font-size vergroot in je browser! Dit geeft een beter effect wanneer slechtzienden je site bezoeken.
• display:block; is leuk, maar kijk uit met nesten van block-level elements! (Dit geeft vaak problemen in IE)
• En nog veel meer kleine dingen.

Een website die mij zeer heeft geholpen bij het coden was A List Apart.
Bovendien is de Web developer toolbar (Add-on) bijna onmisbaar geworden voor mij!

Dat PSD voorbeeld heb ik in totaal 3u aan gewerkt en daarnaast nog 2u voor het maken van de HTML/CSS. Zonder IE styles pixelgelijk in de drie browsers (IE, Opera, FF)! huubvanbussel.nl is trouwens gewoon mijn ooms bedrijfje en heeft verder niets te maken met dat vakantiebaantje.
De snelheidswinst komt voornamelijk door zeer professionele voorbeelden die ik tijdens mijn werk daar kon bekijken en ik te maken had met de eisen die van mij werden gevraagd (tijdsbestek, W3 compliant, cross-browser ok etc). Bovendien had ik een collega die mij zeer heeft geholpen.

[-SaveMe-]

gertvdijk schreef op dinsdag 22 augustus 2006 @ 17:46:
• Een reset.css stylesheet maken/jatten die alle standaard margins, paddings, font-sizes, etc op 0 zet, zodat je niet afhankelijk bent van je browser! Hierdoor had ik na het maken van een heel intranet maar twee (!) regels in mijn IEstyles.css documentje staan! (download reset.css)

Interessant stukje! Kun je onderstaande wat toelichten ?

code:

/* Clear Floats Without Structural Markup
(works in IE7) 
---------------------------------------------*/
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
    }

[gertvdijk]

Die .clearfix is een vernuftig stukje CSS dat het voordeel heeft dat je niet meer een element hoeft te hebben na twee floated elements dat het 'cleared'. Je bent dus niet meer afhankelijk van de content na die elementen. Het maakt namelijk een element (die punt). De clearfix zet je dus als class op de containing div. Voor browsers als IE die de pseude klasse :after niet begrijpen heb je nog wat aanvullende regels.
Zie ook: http://www.positioniseverything.net/easyclearing.html

[frickY]

Ik heb gemiddeld een uur of 10 tot 12 bezig met het omzetten van een grafisch ontwerp naar XHTML en CSS. In zowel IE als FF is de site dan op de pixel gelijk aan het photoshop ontwerp.
Natuurlijk verschilt de tijd erg per omgeving.

Ben onlangs bijna 3 dagen bezig geweest met ogenschijnlijk simpele vormgeving, welke eigenlijk nog steeds niet helemaal af is Ik probeer alles zonder "IE hacks" te doen, maar soms ontkom je daar gewoon niet aan.

[-SaveMe-]

gertvdijk schreef op dinsdag 22 augustus 2006 @ 21:17:
Die .clearfix is een vernuftig stukje CSS dat het voordeel heeft dat je niet meer een element hoeft te hebben na twee floated elements dat het 'cleared'. Je bent dus niet meer afhankelijk van de content na die elementen. Het maakt namelijk een element (die punt). De clearfix zet je dus als class op de containing div. Voor browsers als IE die de pseude klasse :after niet begrijpen heb je nog wat aanvullende regels.
Zie ook: http://www.positioniseverything.net/easyclearing.html

Thanks!

[Anders]

gertvdijk schreef op dinsdag 22 augustus 2006 @ 17:46:
]Het gebruik van de fantastische relatieve eenheid em. Margins, font-sizes, paddings etc. in em's groeien mee als je de font-size vergroot in je browser!

(..)

Zonder IE styles pixelgelijk in de drie browsers (IE, Opera, FF)!

In mijn herinnering is de grote pest met fonts dat ze met een "em"-aanduiding op de Mac een stuk kleiner zijn dan op Windows. Alleen met "px" weet je zeker dat de boel pixelgelijk is. Of zie ik dat verkeerd?

[crisp]

gertvdijk schreef op dinsdag 22 augustus 2006 @ 17:46:
Een reset.css stylesheet maken/jatten die alle standaard margins, paddings, font-sizes, etc op 0 zet, zodat je niet afhankelijk bent van je browser! Hierdoor had ik na het maken van een heel intranet maar twee (!) regels in mijn IEstyles.css documentje staan! (download reset.css)

imo is het op 0 zetten van alle paddings en margins op alle elementen niet echt wenselijk, default styles zijn er niet om developers te pesten. Daarbij is het in mijn beleving juist minder tijdrovend om enkel die paddings/margins aan te passen die aanpassing behoeven en de rest gewoon te laten zoals het is dan het weer voor allerlei elementen te gaan 'terugcorrigeren'.

Vwb de clearfix hack; ten eerste is het een lelijke 'hack' en ten tweede meestal ook niet noodzakelijk. Voor IE < 7 kan je het containing element 'layout' geven dmv een (minimale) hoogte en voor alle andere browsers is het voldoende om het containing element een vorm van overflow te geven anders dan 'visible'

[gertvdijk]

crisp schreef op woensdag 23 augustus 2006 @ 07:43:
imo is het op 0 zetten van alle paddings en margins op alle elementen niet echt wenselijk, default styles zijn er niet om developers te pesten. Daarbij is het in mijn beleving juist minder tijdrovend om enkel die paddings/margins aan te passen die aanpassing behoeven en de rest gewoon te laten zoals het is dan het weer voor allerlei elementen te gaan 'terugcorrigeren'.

Gedeeltelijk mee eens. Het ligt er natuurlijk sterk aan wat voor visual design je gaat uitwerken. Bovendien moet je overzien welke standaard paddings en margins elke browser geeft om tot een pixelperfect resultaat te komen.
Het verkleint imo de kansen dat het in een niet geteste browser afwijkend wordt weergegeven. En om nou voor ieder element volledige margin en padding te definieren in je CSS vind ik niet echt wenselijk.
Voorbeeld: het is overzichtelijker/leesbaarder wanneer: h3 { margin-bottom: 1.2em; } t.o.v. h3 { margin: 0 0 1.2em 0; padding: 0; }

crisp schreef op woensdag 23 augustus 2006 @ 07:43:
Vwb de clearfix hack; ten eerste is het een lelijke 'hack' en ten tweede meestal ook niet noodzakelijk. Voor IE < 7 kan je het containing element 'layout' geven dmv een (minimale) hoogte en voor alle andere browsers is het voldoende om het containing element een vorm van overflow te geven anders dan 'visible'

Tja. Tis maar net wat je prettiger vindt. Een schoonheidsprijs verdienen geen van beide manieren vind ik.

[crisp]

De 'auto-clearing' middels overflow auto/hidden is gewoon beschreven in de CSS-specificatie en is derhalve imo ook gewoon de geijkte manier.

offtopic:
overigens zie ik wel wat dingen op je site die ik zeker anders zou doen: HTML-comments in scriptcontent maken je hele script tot een comment in XHTML (met XHTML mimetype) - ik zou zelf sowieso gewoon een HTML DTD gebruiken, maar HTML comments in scriptcontent zijn anno 2006 echt niet meer nodig.
Ik zie geen H1 of H2 maar ineens wel een H3. Wel zie ik <span class="header"> - als je een dergelijke class gebruikt gaat er toch wel een lichtje branden?
En onsubmit="return checkForm(this.form);" - 'this' verwijst al naar je form.
Kijk maar wat je hiermee doet, ik bedoel het obstructief

[OkkE]

Ik pak de laatste tijd vaak een template van Layout Gala en bouw deze uit naar het gewenste ontwerp. Als alles er in Firefox goed uit ziet, hang ik er dmv. conditial statements een "ie_only.css" aan, waarin de IE "hacks" staan.

Gemiddeld ben ik 10 uur bezig met het onzetten naar HTML / CSS.

[Verwijderd]

Het is een beetje appels met peren vergelijken natuurlijk, omdat het ene grafisch ontwerp het andere niet is. Zonet nog een site gemarkupd in een uurtje, terwijl een andere site twee volle dagen kost.

Twee grafisch verschillende pagina's zijn wat anders dat vijf pagina's met de nodige javascript voor animatie. Daarnaast is het afhankelijk van het materiaal wat je aangeleverd krijgt (in mijn geval altijd van externe grafische bureau's). Bij de ene gaat het altijd goed, terwijl er bij een ander schoonheidsfoutjes in zitten die je moet corrigeren.

In tegenstelling tot de meesten (denk ik) maak ik niet eerst een schets op papier, maar doe ik dat grofweg in m'n gedachten en begin op basis daarvan te ontwikkelen. Dit heeft tot nu toe niet echt voor problemen gezorgd, maar dat kan natuurlijk ook door de routine komen die je in de loop der jaren ontwikkelt.