[PSD/CSS] Tips voor eventuele verbetering

[Dannydekr]

Binnekort moet ik PSD layouts omzetten naar html/css voor een bedrijfje. Had hier tot nu toe weinig ervaring mee, dus ben bezig gegaan met een voorbeeld PSD bestand. Heb het gedaan i.c.m. imageready, maar heb alle code netjes gemaakt. Het resultaat ziet er goed uit, werkt helemaal goed in alle browsers die ik getest heb (IE7,OPERA,FIREFOX).

Maar misschien dat jullie nog tips hebben om het eventueel te verbeteren / vergemakkelijken? Persoonlijk heb ik er niets op tegen om het via imageready te doen, aangezien ik de code flink opschoon en aanpas, dit werkt goed.

Hier een werkend voorbeeld:

http://www.u-subjects.nl/psdtest/index.html

Hier de broncode met sample (png)

http://members.chello.nl/akruik/psd/source.rar

Als iemand

[BtM909]

Image ready slicen en absoluut positioneren dat werkt wel mooi (in de eerste instantie), maar een design is vaak dynamisch. Wat gebeurt er als je gaat schalen of meer of minder content gaat toevoegen. Standaard / snel overzetten naar CSS lever meer nadelen dan voordelen op.

Het is toch echt even wat werk (en je wordt er handiger in ) om het design te bekijken en het design echt op te zetten.

Meestal doe je dus eerst content en dan het design eromheen met CSS

[Dannydekr]

Ik krijg een PSD toegespeeld en moet daar zeer snel een webbased versie van maken CSS (divs) zijn een vereiste. Maar wat nu als de content langer is dan de mainpage? Hoe rek je die images uit.. Dat zijn dingen die ik gaandeweg moet leren. Een Iframe is dan natuurlijk ook mogelijk, maar ik bepaal het design niet dus er komt een keer dat ik moet leren hoe je dus de layout verticaal uit moet rekken.

[messi]

Voor zover ik kan zien heb je gewoon alle tr en td vervangen door div.
Dit is niet echt de bedoeling .

Hoewel het soms niet anders kan, kun je in dit geval het aantal divs wel terugdringen en betekenisvolle tags toekennen. (div heeft op zichzelf niet echt een betekenis, net zoals span).
het menu kun je makkelijk met ul en li doen ipv allemaal divs. Het is immers een lijst van buttons.
Zo zijn er nog wel meer divs die vervangen kunnen worden door betere varianten.

[Dannydekr]

messi schreef op woensdag 07 februari 2007 @ 14:04:
Voor zover ik kan zien heb je gewoon alle tr en td vervangen door div.
Dit is niet echt de bedoeling .

Hoewel het soms niet anders kan, kun je in dit geval het aantal divs wel terugdringen en betekenisvolle tags toekennen. (div heeft op zichzelf niet echt een betekenis, net zoals span).
het menu kun je makkelijk met ul en li doen ipv allemaal divs. Het is immers een lijst van buttons.
Zo zijn er nog wel meer divs die vervangen kunnen worden door betere varianten.

Ja, dat menu kan ik idd beter anders doen en gewoon met CSS doen bij nader inzien. Maar weet niet of dit bij alle layouts kan, misschien dat sommige buttons wel gedesigned zijn. Maar wat kan ik bijvoorbeeld nog meer vervangen?

Edit: heb trouwens geen TD's ofzo vervangen hoor Werd standaards als DIV layout opgeslagen. Was alleen erg rommelig, dus heb alles verbeteren en compatible moeten maken.

[ Voor 9% gewijzigd door Dannydekr op 07-02-2007 14:14 ]

[messi]

De hoofdtitel mag zoiezo een H1 worden (head)

Verder kun je de achtergrond in 3 divs kwijt. wrapper-top (voor bovenste ronde hoeken)
wrapper-center (herhalende achtergrond, dus schaalbaar)
wrapper-bottom (onderste ronde hoeken)

Header image mag afbeelding zijn zonder div
zelfde voor footer image
menu een ul met li's (gezien het lettertype zijn afbeeldingen daar overbodig)

content een div met daarin de afbeelding en rechts de h1 met hoofdtitel en p de paragrafen.

heb je het zelfde als je nu hebt, maar dan met ongeveer 4 divs. en screenreaders snappen een stuk beter waar je het over hebt

je zou het nog verder kunnen doortrekken door alle achtergrond afbeeldingen in de css te plaatsen, zo "vervuil" je de pagina niet als er geen css weergegeven kan worden.

Tevens alle afbeeldingen die wel in de html staan een betekenisvolle alt tag en eventueel title megeven

[ Voor 23% gewijzigd door messi op 07-02-2007 14:22 ]

[Verwijderd]

HTML:

<p class="contenttekst">

Heeft ook weinig zin, zolang je geen andere gaat gebruiken, je kan namelijk gewoon de basis p stylen. En zodra je andere P's anders wil stylen, zou je dat ook nog kunnen doen op basis van in welke div deze P's zitten genest, dmv overerving van de css kan je zo alleen de wijzigingen op de standaard p doorvoeren (indien je bijvoorbeeld de marges gelijk wil houden, hoef je zo maar op een plek (in de originele p style) de wijzigingen door te voeren)

edit: wat betreft het verticaal schalen van de pagina, dit kan vrij eenvoudig door een achtergrondafbeelding zich te laten herhalen, dat zou dan gaan om de randjes en het grijze vlak, dit zou voldoende moeten zijn om hem in de verticale richting te kunnen laten schalen.

edit 2: het is vaak ook wat "handiger" (in verband met zoekmachines) om in de menubalk gewoon teksten te gebruiken, als het echt niet anders kan gebruik dan altijd in ieder geval de alt teksten voor de knoppen, a/ omdat zoekmachines hier naar ik aanneem ook op indexeren, b/ voor gebruikers die slecht kunnen zien (en additionele hulpmiddelen hebben om het web te besurfen) c/ voor als om welke reden dan ook je plaatjes het niet doen!

[ Voor 43% gewijzigd door Verwijderd op 07-02-2007 15:29 ]

[Setragasj]

Wellicht dat dit artikel je iets meer op weg kan helpen.
Heb zelf nog niks getest na dit artikelen gelezen te hebben, maar het klinkt allemaal heel leuk.

[Dannydekr]

Bedankt voor de reacties, zal vanavond een nieuwe (verbeterde) versie proberen te maken