Oldal review, böngészőoptimalizálás, kódolási konvenciók
Sziasztok,
épp egy Wordpress témát készítek egy sportegyesületnek és jelenleg odáig jutottam el, hogy kész van egy valid XHTML (transitional) és CSS kód, ami a modern böngészőkön jól jelenik meg és szabványos, tehát elsőre minden jónak tűnik.
Azonban gondoltam kikérem a tapasztalt Weblaborosok véleményét, hogy min lenne érdemes változtatni, mit lehetne elegánsabban megoldani, mi nem a legcélravezetőbb megoldás. Kérem ezt azért, mert nem vagyok biztos benne, hogy a legmegfelelőbb megoldásokat választottam a layout elemek pozicionálásánál, tele van az egész float-okkal, meg position:relative-okkal, nem tudom professzionális szemszögből mit szóltok a dologhoz. Többé kevésbé egy faux columns-os megközelítést alkalmazok, csak éppen van egy háttérben lévő logó, ami megkeveri a dolgokat egy kicsit.
Ez főleg azért merült fel bennem, mert természetesen IE 6 alatt teljes mértékben össze-vissza jelenik meg az egész (és ha esetleg kicsit ésszerűbb lenne a layout, akkor esetleg kisebb <!--[if IE 6]> rész kellene). (És én azért csak szeretném többé-kevésbé támogatni az IE6-ot, nálam még 5%-környékén van a részesedése.)
Másrészt pedig azért, mert bár Windows-on az összes főbb böngésző aktuális verzióival rendesen jelenik meg, amikor átváltottam az Ubuntu 10.04-ben lévő aktuális Firefox-ra (nem tudom alapértelmezetten mi van benne, de szerintem 3.6.3-nál nem régebbi) akkor a postok befloatoltak bal oldalra a bal sidebar-ba, miután véget ért a menü rész.
Tehát összefoglalva annyit szeretnék kérni a Weblabor közösségétől, hogy:
1) Nézzetek már rá a kódra, ti hogyan csinálnátok elegánsabban, mi az, ami nem minőségi, professzionális benne, milyen konvenciókat nem követek, mi nem tetszik, stb. Legyetek kíméletlenek a kritikával nyugodtan, autodidakta módon tanultam a XHTML-t és CSS-t, szóval biztos, hogy vannak hiányosságaim. Maga a grafikai munka nem az én munkám és nem is nagyon lehet változtatni rajta, bár az ilyen sötét alapon világos szövegekért nem tudom, mennyire szokás az embereket megkövezni.
2) Milyen tippjeitek vannak a Linux-Firefox és az IE6 kompatibilitást illetően?
Minden segítséget előre is szeretnék nagyon szépen megköszönni és akkor maguk a linkek: maga az oldal itt van, és csináltam egy zip fájlt, ha esetleg valakinek az lenne a kényelmesebb:
■ épp egy Wordpress témát készítek egy sportegyesületnek és jelenleg odáig jutottam el, hogy kész van egy valid XHTML (transitional) és CSS kód, ami a modern böngészőkön jól jelenik meg és szabványos, tehát elsőre minden jónak tűnik.
Azonban gondoltam kikérem a tapasztalt Weblaborosok véleményét, hogy min lenne érdemes változtatni, mit lehetne elegánsabban megoldani, mi nem a legcélravezetőbb megoldás. Kérem ezt azért, mert nem vagyok biztos benne, hogy a legmegfelelőbb megoldásokat választottam a layout elemek pozicionálásánál, tele van az egész float-okkal, meg position:relative-okkal, nem tudom professzionális szemszögből mit szóltok a dologhoz. Többé kevésbé egy faux columns-os megközelítést alkalmazok, csak éppen van egy háttérben lévő logó, ami megkeveri a dolgokat egy kicsit.
Ez főleg azért merült fel bennem, mert természetesen IE 6 alatt teljes mértékben össze-vissza jelenik meg az egész (és ha esetleg kicsit ésszerűbb lenne a layout, akkor esetleg kisebb <!--[if IE 6]> rész kellene). (És én azért csak szeretném többé-kevésbé támogatni az IE6-ot, nálam még 5%-környékén van a részesedése.)
Másrészt pedig azért, mert bár Windows-on az összes főbb böngésző aktuális verzióival rendesen jelenik meg, amikor átváltottam az Ubuntu 10.04-ben lévő aktuális Firefox-ra (nem tudom alapértelmezetten mi van benne, de szerintem 3.6.3-nál nem régebbi) akkor a postok befloatoltak bal oldalra a bal sidebar-ba, miután véget ért a menü rész.
Tehát összefoglalva annyit szeretnék kérni a Weblabor közösségétől, hogy:
1) Nézzetek már rá a kódra, ti hogyan csinálnátok elegánsabban, mi az, ami nem minőségi, professzionális benne, milyen konvenciókat nem követek, mi nem tetszik, stb. Legyetek kíméletlenek a kritikával nyugodtan, autodidakta módon tanultam a XHTML-t és CSS-t, szóval biztos, hogy vannak hiányosságaim. Maga a grafikai munka nem az én munkám és nem is nagyon lehet változtatni rajta, bár az ilyen sötét alapon világos szövegekért nem tudom, mennyire szokás az embereket megkövezni.
2) Milyen tippjeitek vannak a Linux-Firefox és az IE6 kompatibilitást illetően?
Minden segítséget előre is szeretnék nagyon szépen megköszönni és akkor maguk a linkek: maga az oldal itt van, és csináltam egy zip fájlt, ha esetleg valakinek az lenne a kényelmesebb:
Megjegyzések
Más hirtelen nem jut eszembe. A CSS-hez nem tudok hozzászólni, a saját blogomon a columnokat sikerült annó valahogy összerakni, a forrás a layout.css-ben van. (A blogban defaultból kompresszálva van a CSS, ha kell a kompresszálatlan, használd a ?debug=1 paramétert a címsorban.) A konkrét megoldásra már nem emlékszem, de ha nagyon nem megy, előbányászom.
Köszönöm szépen a választ! A
A fejléccel kapcsolatban egyetértek, nem is az én munkám, meg ahogy írtam is, valószínűleg nem nagyon tudok belenyúlni.
A képeket természetesen majd tömörítem (de jó, hogy szóltál, mert lehet, hogy elfelejtettem volna :-]), ez most még annak tudható be, hogy ez az első fázis, most csinálom meg majd belőle a Wordpress sablont és természetesen majd a CSS-t is kiszervezem külön fájlba, ez most csak a fejlesztési szakaszban van így (szvsz nekem egyszerűbben kezelhető amikor írom az egészet Notepad++-ban).
A CSS-t nekem is sikerült összehoznom, csak éppen nem tudom, hogy ez-e a legelegánsabb megoldás. Mint mondtam, a háttérben lévő logó miatt bonyolultabb lett a CSS mint ahogy szerettem volna, nomeg nem IE6 kompatibilis. Ezzel és a Linux-Firefox-al kapcsolatban van valakinek valamilyen ötlete?
Linux
Linux+Firefox
A külső CSS állomány nem csak elegancia kérdése. Azt a böngésző tudja gyorstárazni, ezzel csökkentheted az egyes oldalletöltéskor a hálózati forgalmat, a betöltési időt, összességében gyorsíthatod az oldal megjelenését.
Exploreres szívások, és a külön böngészőfüggő kód mennyisége csökkenthető, ha a css írásakor szem előtt tartod, hogy az IE6 (bizonyos esetekben még az IE7 is) "kicsit" máshogy számolja a dobozok méretét. Ezt a legegyszerűbben úgy lehet megkerülni, hogy ugyanannak az elemnek nem adsz meg szélességet ÉS jobb/bal, vagy magasságot ÉS alsó/felső margin, padding értéket.
Ha IE6/7-ben előfordul, hogy ha egy elem float-ol, és még relatív pozicionálod is, akkor az nemes egyszerűséggel nem jelenik meg (nem jut eszembe ennek az IE bugnak a neve). Ekkor nem úszod meg a conditional comment használatával megadott stílus írását. A megoldás annyi, hogy az explorernek szánt CSS-t egy
Ahogy proclub is mondta Firebug, Firebug, Firebug!
Ha Firebugban megnézed a felső menüt akkor láthatod, hogy az <a> elem az abban elhelyezett <img/> elem és a kattintható terület nem esik egybe (HTML fülön vidd az egyes elemek felé az egered, így a lefedett területet megjelöli majd). Ez a későbbiekben okozhat majd használatban gondokat.
A fejlécben megjelenített szöveges adatokat, amik jelenleg a header.jpg-re vannak beégetve, nem szerepelnek a HTML-ben. Ez egyáltalán nem jó sem hozzáférhetőségi, sem SEO szempontokból. Az oldalsávban megjelenített doboz fejlécekre igaz ugyanez. Ezeknél a dobozoknál nem használsz különleges betűtípust, ami indokolná hogy ne szövegként jelenjen meg. Ha pedig már szöveg, akkor máris csökken a letöltendő képek száma, amit beállíthatsz mindegyik doboznak háttérnek.
A középső hasábban a logót, mint hátteret, főleg úgy hogy egy átlátszatlan doboz ki fogja takarni, nem sok értelmét látom.
Most így hirtelenjében ennyi
A hozzászólásod írásakor még
A külső CSS-t felesleges ragozni, teljesen egyértelmű, hogy külső lesz, minden eddigi oldalamon külön állomány van. Mint ahogy már leírtam, most csak azért volt így, mert fejlesztési szakaszban kényelmesebb volt nem ctrl+tab-ozni Notepad++-ban.
Az Exploreres tippeket köszönöm, meg a header-ös részt is, majdnem megfeledkeztem róla! Kiegészítettem egy kis rejtett szöveggel (ami, ha nincs CSS, akkor látszik, ha van, akkor meg a kép látszik).
A középső hasábban egy átlátszó png a háttér. Viszonylag sötét, hogy a szöveg olvasható legyen, de átlátszó, lehet, hogy a tökéletes kalibrált LCD monitorom (értsd: nem kalibrált, nem színhű) nem épp a legmegfelelőbb tesztelési alany.