ugrás a tartalomhoz

Oldal review, böngészőoptimalizálás, kódolási konvenciók

fledgling42 · 2010. Szep. 23. (Cs), 19.42
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:
 
1

Megjegyzések

janoszen · 2010. Szep. 23. (Cs), 20.41
Megjegyzéseim, minden különös sorrend nélkül:

  • Linuxon / Firefox alatt az első box után széthullik minden atomjaira. (Ezt Te is írtad.) Nem kizárt, hogy ez a különböző fontok / méretek miatt van. Debuggolni kéne, de arra most nincs kapacitásom.
  • A fejléc az - már bocsánat - odabasz. A netbookomon lazán egy képernyő scroll. Mobilon még királyabb.
  • A nyitólap letöltése 4 MBites ADSL-en 4.22 másodperc és 1.4 MB. Ez borzasztóan sok! Képzeld, mi lehet egy mobilneten? További infók itt: http://developer.yahoo.com/performance/
  • Az inline CSS nem túl elegáns megoldás, mivel minden oldal letöltésre le kell jönnie az adatnak. Helyette inkább szervezd ki külső fájlba.


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.
2

Köszönöm szépen a választ! A

fledgling42 · 2010. Szep. 23. (Cs), 22.24
Köszönöm szépen a választ! A Linuxos debuggolással kapcsolatban van valami cikk, tanács, vagy egyszerűen essek neki Firebuggal és próbálkozzak, meg nézzem meg a microsoft-fonttokkal telepítve és anélkül?

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?
3

Linux

janoszen · 2010. Szep. 24. (P), 06.03
Nincs semmi, Firebug a barátod. Azt szoktam javasolni a designer ismerőseimnek, hogy hagyjanak egy 10% helyet pluszba, hogy ne csússzanak szét a dolgok.
4

Linux+Firefox

tiku I tikaszvince · 2010. Szep. 24. (P), 07.33
Megnéztem ubuntun Firefoxban (2, 3.0.19, 3.5.11, 3.6.8 és 3.6.10 verzióban is) egyedül a 2-esben látok szétesést, de az is a második "Üdvözöljük" blokknál kezdődik. Erre (már hogy momentán firefoxban nálam nem esik szét) lehet az a magyarázat, hogy már módosítottál az oldalon. Másik magyarázat lehet, hogy azon a ubuntus gépen, ahol nézted, hiányoznak azok a betűcsaládok, amik nálad win-en vagy az én gépemen megtalálhatók. Ilyenkor az általad megadottat próbálja valami meglevőre cserélni. Amit talál az pedig nem mindig stimmel méretben.

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
* {zoom:1;}
szabállyal kell nyitni.

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
5

A hozzászólásod írásakor még

fledgling42 · 2010. Szep. 25. (Szo), 09.55
A hozzászólásod írásakor még nem módosítottam az oldalon, a betűtípus lehet, mert tényleg nem installáltam a Win-fontokat, de hogy csupán fontok ilyen méretű szétesést okozzanak... Na majd nekiesek.

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.