Mióta a a dizájnerek áttértek a CSS-sel való építkezésre, hála égnek, kicsit könnyebb lett az élet. Ennek ellenére vannak dolgok, amit figyelembe kell venni még akkor, amikor az oldalt a Photoshopban építgetjük.
Például:
Meg lehet-e csinálni?
Kiválasztottunk egy nagyon szép betűtípust, de vajon közte van-e a HTML-ben használtak közt? Mindenki látni fogja-e azt a típust? Még a leggyakoribbaknál is az alábbi módon érdemes a betűtípust megadni:
body {font-family: Verdana, Arial, Sans-Serif;}
Ha van Verdana betű a gépén, azzal fog látszani. Ha nem, akkor Arial-lal. Ha netalántán az sincsen, akkor az alapértelmezett Sans-Serif típussal fog megjelenni.
Figyelni kell arra is, hogy bár gyönyörűnek tűnhet az 1100px széles dizájn, az viszonylag sok látogatóknál kilóg a képből, és vízszintesen is görgetniük kell majd a képernyőt. Fontos tudni, mit tudunk megcsinálni és mit nem.
Mi történik, ha a böngésző ablakot átméretezik?
Ismétlődő hátterünk lesz? Hogyan fognak azok működni? Középre van igazítva vagy balra?
Vágjunk-e bele technikailag bonyolult dolgokba?
Még a CSS-ben is adódnak nehézségek, pl. a pozícionálás, ott is leginkább a függőleges igazítás. Nehézkes, bonyolult, így jobb azt kihagyni.
Az apró változtatások megkönnyíthetik az építő munkánkat?
Ha egy objektumot különböző helyekre téve próbálkozunk annak elhelyezésével, gondoljunk arra is, hogy azt később hogy kell majd lekódolnunk a CSS-ben. Pl.: Ha egyes elemek keresztezik egymást, már egy fokkal nehezebb dolgunk lesz. Meg kell találni az egyensúlyt a szép dizájn és a kódolás között. Erre is gondoljunk, amikor elhelyezzünk a Photoshopban az elemeket.
Hogyan egyszerűsítsük meg a dolgunkat, különösen a nagy oldalaknál?
Régebben az oldalaimhoz még én is csináltam kép alapú gombokat. Ha például volt egy letöltés gomb, akkor csináltam neki egy kis ikont, és azt szúrtam be a megfelelő helyekre. Mostanában, ha már ilyesmiről van szó, akkor CSS-ben elkészítem a gombot, aztán onnantól kezdve nem is foglalkozom vele. Lehet, nem olyan rugalmas így csinálni, de nem kis időt meg lehet vele spórolni.
.letoltes {
background: url(images/download.png) no-repeat left;
width:50px;
height:50px;
display:block;
}
<a class="letoltes" href="trapt.mp3"></a>
Megosztás
Itt azért nem árt a linknek szöveget adni, pl. span-ba class-szal, én a class=’blind’ paraméterezést szoktam használni, a css-ben meg screen-re display:none; míg braille, aural, speech, handheld stb. esetén meg normálisan működik.