Modern CSS Szerkezet: Fontos a Karakterisztika

Írta Zoe Mickley Gillenwater, October 26th, 2009 fordította MPA a smashingmagazine engedélyével

Mostanában izgalmas CSS szerkezeteket készíteni. A régi idők technikái után hasonlóan a régi böngészőkhöz, manapság az új böngészők implementálják a CSS3, HTML5 és a hasonlóan új technológiákat, melyek érdekes és új eszközöket és trükköket biztosítanak nekünk a legújabb terveinkhez.

Azért ezek a változások stresszesek is lehetnek. Hogyan oldjuk meg azt a problémát, hogy használjuk az új technikákat és a weboldalunk, amit készítünk jól is nézzen, ki nem utolsó sorban pedig a sok új böngészővel is helyesen kell, hogy működjön? A cikk első részében megtanulhatunk pár a modern CSS weboldalakra fontos jellemzőt. A második részben pedig azokat a technikákat, amelyek szükségesek ahhoz, hogy elő is tudjuk állítani ezen, jellemzőket.

Nem fogunk beszélni azokról a terv trendekről, melyek még karakteresebbé teszik a CSS alapú szerkezetet. Általában a tartalom befolyásolja a designt és ehhez kell hozzáigazítani a különböző stílusokat és a CSS legújabb technikáit. Alkalmanként külön kell választanunk a tartalmat és a tartalom bemutatását az oldalakon. Bár vannak olyan jellemzők is a CSS weboldalakban, amik sokkal fontosabbak, mint eddig bármikor. A mai modern CSS oldalak: Fokozatosan javítottak, Alkalmazkodnak a változatos felhasználókhoz, modulárisak, hatékonyak és nyomdailag gazdagok.

Fokozatosan javítottak,
Alkalmazkodnak a változatos felhasználókhoz,
modulárisak,
hatékonyak
Tipográfiailag gazdagok

Fokozatos fejlesztések

Fokozatosan javítottak azt jelenti, hogy szolid oldal megfelelő jelölésekkel a tartalomhoz hozzáadott fejlett stílussal (ami lehet script) és széles böngésző kapacitással. A végeredmény egy olyan weboldal, ami minden böngészőben jól működik, de nem feltétlenül ugyanúgy néz ki. Azon felhasználók, akik fejlettebb, újabb böngészőkkel nézik a weboldalt sokkal, több látványelemmel és még inkább felhasználóbarát lehetőségekkel nézhetik meg az oldalt.

Nem új keletű az az ötlet, hogy a látvány, különböző böngészőkben más és más legyen. A CSS Guruk évek óta próbálják hirdetni mert a Font lehetőségek, Renderelés, Szin tónusok, Pixel számítások, és más technikai tényezők a különböző böngészőkben használhatók, de nem egyformán néztek ki. A fokozatos javítások népszerűsége fokozatosan növekedett az elmúlt években ezért mára egy lépéssel előrébb járnak. Mára a Design a javítások miatt nem kicsit különböző, hanem nagyon különböző végeredményeket hozhat más és más böngészőkben.

Például: a tweetCC weboldal számos CSS3 tulajdonságot használ, ezekkel az érdekes vizuális simításokkal (pl. Drop Shadow, „Árnyék”) a szöveg mögött, több hasábos szöveg, különböző színekkel és háttér képek (anélkül, hogy többféle képet alkalmaznának). Ezek az effektek eltérően mutatnak a különböző böngészőkben. Mint például az idősnek mondható IE6 mutatja a „legsivárabb” külsőt. Habár az IE6-ban a szöveg tökéletesen olvasható és a Design is tökéletesen használható.

tweetCC Safari böngészőben

tweetCC IE6 böngészőben

A CSS3-ra alkalmas böngészők, mint például a Safari (felső), számos olyan vizuális hatást mutat be, amit az IE6 (alsó) nem tud.

Teljesen elfogadhatók ezek a jelentős különbségek, amik a böngészők megjelenítésében találhatók, nem csak azért mert ezek a web természetes fejlődése miatt vannak, hanem azért mert a fejlesztés sok érdekes lehetőséget biztosít számunkra.

Erőteljes weboldalak Inkább könnyed és minden funkciót használó oldalakat készítünk és utána a kevesebb funkciót használó böngészőket vesszük figyelembe. Először is a cél a „szolid” alap, ami mindenhol működik.
Boldogabb felhasználók Úgy kezdjük felépíteni az oldalt, hogy az alap funkciók és a stílus mindenkinek egyforma legyen. Azok a felhasználók, akik régebbi böngészőkkel vagy telefonnal nézik az oldalunkat, boldogok lesznek, mert az oldalak tiszták, megbízhatók és jól működnek. Akik pedig a legújabb böngészőkkel nézik, azért lesznek boldogok, hogy gazdagabb élményt kapnak.
Csökkentett fejlesztési idő Nem kell sok időt tölteni azzal, hogy különböző böngészőkben, hogyan fest az oldal. Sem azzal, hogy régebbi böngészőkben is működjön minden funkció és design elem, amit kitaláltunk.
Csökkentett karbantartási idő Amint kijön egy új böngésző funkció, azonnal hozzáadhatjuk a weboldalunkhoz anélkül, hogy az eddig használt funkciókat veszélyeztetnénk. Kell, hogy legyen egy alap verzió a kódból, amit frissíthetünk többféle verzióra. (ami a könnyed módosítás folyamata)
Több móka Az egy jó móka, amikor új lehetőségeket próbálunk ki a weboldalunkon, nem kell megvárni, amíg minden böngészőben megjelenik az új funkció.

További intfo-k a Fokozatos fejlesztésekről:

Alkalmazkodás a különböző Felhasználókhoz

Modern CSS alapú weboldalak alkalmazkodnak a különböző böngészőkhöz és a különböző felbontásokhoz, font méretekhez és egyéb más technológiákhoz, amit a felhasználók az asztalukon használnak. Ez a koncepció sem új, de folyamatosan növekszik a felhasználók körében. Pár évvel ezelőtt ki lehetett számolni, hogy a felhasználók leginkább milyen felbontást használnak a számítógépükön. Mostanában a felhasználók 10 coll-os notebookon is nézhetik a tartalmakat ugyanúgy, mint a 30 coll-os szélesvásznú monitorokon és természetesen a kisméretű telefon kijelzőkön is.

Ebben a cikkben az „élesen elkülönülő hasábok CSS-el és Jqueryvel” Soh Tanaka megmutatja a technikát, ahogy a különböző ablakméretek megjelenítik.

Olyan weboldalakat tervezni, amelyek minden felhasználónak minden feladatához tökéletesen megfelelnek, nem lehet tervezni. De minél több felhasználónk elégedett lesz az általunk tervezett oldallal, annál több ügyfelet szerzünk magunknak. A sikeres CSS tervek mostanában sokkal rugalmasabbak és alkalmazkodóbbak, mint eddig bármikor. A variációk folyamatos növelésével egyes felhasználói szokások jobban elérhetők.

Érdemes elgondolkodni ezeken a dolgokon, miközben kialakítjuk a CSS szerkezetet:

Böngésző: Ez a design minden kedvelt böngészőben mutatós és jól használható? Használható régebbi böngészőkben is?
Platform: Az a design működni fog Pc, Mac, és Linuxos gépeken?
Egységek: Használható lesz alacsony felbontású mobil eszközökön is? Hogy mutat majd a nagy felbontású mobil eszközökön (pl.: iPhone)?
Képernyő felbontás: A design együtt marad, ha változik a képernyő elbontása (pl.: ablak)? Mutatós és könnyű olvasni különböző szélességeken? Amennyiben a design alkalmazkodik a különböző szélességű megjelenítésekhez, érdemes akkor a túlzott oldalra scrollozás (pl.: használhatunk min-with és max-width tulajdonságokat)?
Betűméret: Használunk a designban különböző betűméreteket? Egyben marad a design amennyiben változik a betűméret? Mutatós és könnyen olvasható a különböző betűméret?
Színek: Lényeges a design, olvasható a tartalom fekete –fehérben? Működni fog színvakok vagy gyengén látó látogatók esetében vagy nem észrevehető a kontraszt?
JavaScript jelenléte: Működik az oldal JavaScript nélkül?
Fényképek:A tartalom értelmes vagy egyáltalán olvasható fényképek nélkül (a háttér és az előképen kívül)?
Kisegítő lehetőségek Az oldal jól olvasható a képernyőn? Működik egér nélkül?

Ez nem egy mindenre kiterjedő lista és természetesen a designodban rajtad kívül senki nem alkalmazhat minden lehetőséget. Bár amire törekedhetsz az a minél inkább felhasználóbarát és sikeres weboldalak tervezése.

Nézd meg ezeket a különböző felhasználói igényekre alkalmazható forrásokat.

Elemes

Manapság a modern weboldalak nem sima statikus oldalak. Számos design elemből és újrafelhasznált darabok álló Tartalom Kezelő Rendszereken (CMS) és weboldalakon belül szabályosan elosztott alkotó elemekből épülnek fel. RSS halmok és a felhasználók által készített tartalmak növelik a népszerűségüket. A modern Design elemek különböző helyeken használhatók és feltölthetők különböző mennyiségű és típusú tartalmakkal.

A Nicole Sulivan által készített Objektum Orientált CSS keretrendszer, mellyel a fejlesztők gyorsan készíthetnek karbantartható, sztenderdek szerinti elemes felhasználó oldali kódot.

Az elemes CSS értelmezése, a CSS feltördelhető kis darabokra melyek a designkészítés közben függetlenül újra felhasználhatók. Ez azt jelenti, hogy el kell különítenünk a stílus lapokat (layout.css, type.css, color.css) vagy azt is jelentheti, hogy készíthetünk univerzális CSS osztályokat különböző űrlapokhoz, melyet többször is felhasználhatunk, amikor a stílus megegyezik. A CMS keretrendszerek, a szerkezet rácsok és más eszközök abban segíthetnek, hogy még modulárisabb weboldalakat készítsünk.

Az elemes CSS ezeket a lehetőségeket kínálja (attól függ, hogy milyen technikát vagy eszközt használunk):

Kisebb file méretek: Amennyiben minden tartalom az előre megírt és jól használható CSS osztályokkal tűzdelt file-t használja kisebb és áttekinthetőbb file-t használhatunk, mint a CSS ID –ket használó sok file-okat, melyek csak az adott tartalmakat kezelik.
Csökkentett fejlesztési idő: Amennyiben egy keretrendszert használunk, mindig felhasználhatjuk az előzőleg megírt elemeket, nem kell újra és újra megírni egy új weboldalnál. Amikor előre megírt alkotóelemeket használunk, akkor kevesebb időt kell fordítanunk a tesztelésre.
Csökkentett karbantartási idő:Ha a stíluslap, amit használsz jól megtervezett és újrafelhasználható osztályokból áll az egész weboldalon, akkor nem kell új stíluslapot írni, ha egy új tartalmat szeretnénk feltölteni. Ezen kívül, ha jól rendszerezett a CSS-lap akkor könnyebb megtalálni az esetleges problémákat.
Könnyebb karbantartás másoknak: A jól rendszerezett és elnevezett stíluslap könnyebben értelmezhető és karbantartható más fejlesztők számára is, akik nem vettek részt a fejlesztésben. könnyebben megtalálják a számukra fontos és szükséges részeket. A CMS és a keretrendszerek segítenek azoknak, akik nincsenek tisztában a programozás mélységeivel, anélkül, hogy bele kellene írniuk a kódba.
Több szabadság a Designban A keretrendszerek segítenek, pl. ha szeretnénk lecserélni a betűtípust vagy a külalakot.
Több következetes Design: Amikor osztályokkal teli stíluslapot használunk fel többször különböző nyelvi területekre jellemző karakterekkel, akkor is kontrollálhatjuk a weboldalak egyforma megjelenését. CMS és a keretrendszerek biztonságot nyújtanak az ellentmondásokkal szemben.

Különböző CSS technikák:

Hatékony

A modern CSS alapú weboldalak két irányba is hatékonyak:

Hatékony a fejlesztés irányába
Hatékony a szerver és böngészők bemutatásával a felhasználóknak

Mint web fejlesztők egyetértünk abban, hogy a fejlesztési oldalon megjelenő termelékenység egy jó dolog. Amennyiben időt tudunk megspórolni miközben minőségi munkát, végzünk, akkor miért ne termeljen nekünk a CSS tudásunk? Bár az olyan oldalak gyártása, amelyik a felhasználó számára termelékeny lesz, sajnos néha nem kap megfelelő figyelmet. A webes kapcsolatok sebességének növekedésével, nem szabad szem elől veszítenünk azt a tényt, fejlesztés közben, hogy a felhasználók elvárják az oldalak gyors betöltődését. Pár másodperc megspórolása a betöltődésnél, óriási változásokat hozhat.

Eddig arról beszéltünk, hogyan tud az elemekből álló CSS fejlesztési és karbantartási időt csökkenteni ezen kívül pedig a termelékenyebbé és gyorsabbá teszi a munkafolyamatokat. A fejlesztőket számtalan eszköz segíti ahhoz, hogy gyorsan tudjanak CSS-t írni, amiről a cikk második felben lesz szó. Könnyíthetünk a CSS fejlesztésen amennyiben felhasználjuk a CSS3 adta új lehetőségeket, kevesebb időt fordítva a grafika és a kódolás fokozására.

Néhány CSS3 technika fokozza a sebességet és a külalakot. Például a tradicionális lekerekített sarkok, melyek ezelőtt több képből és DIV-ből álltak. A CSS3 használatával nem igényelnek, semmilyen képet ezzel csökkentik a http-s hívásokat a szerver felé, amely gyorsabb betöltődést eredményez. Ha nincs kép az a felhasználói oldalon is gyorsítja az oldal betöltődését. Nem szükségesek az eddig használt DIV-ek a CSS3 –ban a kerekített sarkoknál, mely kisebb file méretet jelent, ami szintén a gyorsabb betöltődést segíti. Egy szimpla csere CSS3-ra és óriási teljesítménynövekedést érhetünk el, főleg ha sok kerekített sarkú dobozt használunk az oldalakon.

CSS írás közben előnyt jelentnek számunkra a gyorsírást segítő beállítások a csoportosított kijelölések, a termelékeny szintaktika melyek olyan fontosak, mint a tökéletes megjelenés. Sok a CSS alapú weboldalak írásánál használt eszköz és trükk segíti a gyors betöltődést melyek nem új keletűek, de növelik a használhatóságot is. Például a CSS Sprites technika, amiben a file-ok sok apró képet tartalmaznak mindegyik a CSS background-position tulajdonságot használja. Ezt a technikát először 2004-ben Dave Shea írta le. Rengeteg nagyvállalati weboldal, amelyek mára igazán nagy terjedelemmel büszkélkedhetnek, használja ezt a technikát a http-s hívások csökkentésére. Ezen kívül arra sarkallnak minket, akik weboldalakat készítenek, hogy csökkentsük a file méreteket. A CSS tömörítés egy hasonlóan jól használható technika bár ezen kívül is sok tömörítésre használható technika létezik.

Tanuljunk többet a CSS hatékonyságáról:

Gazdag Tipográfia

A Gazdag Tipográfia úgy tűnik, hogy kívül esik az általunk használható négy féle lehetőségtől. Bár nem az egyéni Fontokról és stílusról beszélünk, ami eléggé tágítja a kreatív és olvasható, – de egyedi kinézetű – szövegeket, melyek próbálják használni az alapvető tipográfiai szempontokat és a legújabb technológiákat. A Tipográfia jelenleg az egyik leggyorsabban fejlődő része a web designnak. Haver ennek aztán fejlődnie kell! Amíg a web designban a tipográfiai határok elég szűkösek, – ami bosszantó tud lenni – a fejlesztőknek addig a grafikában sokkal nagyobb lehetőségek rejlenek.

A felhasználóik gépein található fontok miatt, a web fejlesztők szigorú határok közé voltak szorítva. A foto helyettesítési technika és más okos technológiák, mint például a sIFR új lehetőségeket nyitottak az elmúlt években, de sajnos a munka ezekkel nem egyszerű. Az elmúlt évben szerencsére sikerült egy új lehetőséget alkotni a webre, melyet a CSS3 @font face property –nek köszönhetünk. Ezzel a lehetőséggel új technológiákat használhatunk úgymint Cufón vagy a Typekit.

A @font-face szabállyal elértük, hogy a szerverünkön „webfont” néven hozzácsatoljunk egy fontot az oldalhoz, mintha egy foto lenne. Tehát ez után nem kell arra hagyatkoznunk, hogy a felhasználók gépein milyen fontokat találhatunk. Ezen túl egyedi megjelenésű fontokat is bátran használhatunk.

@font-face in action: Teehanlax.com

Craigmod

Nicewebtype

Ez a három fotó ízelítő a @font-face-el elérhető lehetőségekből.

Jelen pillanatban az alap probléma a @font-face használatával, hogy a böngésző támogatottság, még nem tökéletes. Ezen kívül a fontok licensze – kivétel az ingyenes fontok – nem teszik lehetővé a fontok webre való kihelyezését. Ezért vannak a @font-face szolgáltatások, mint a Typekit, Fontdeck és a Kernest. Ezek a cégek licensz lehetőségeket biztosítanak. Előfizetés alapú font bérlési lehetőséget kínálnak, mellyel nagyobb szabadságunk lehet.

A gyönyörű Weben használható fontok gyűjteménye, amely a Typekit fontokkal operál, Fejlécekbe.

Ruler of the Interweb a Kernst féle szervizt használja a fejlécéhez.

Még hosszú út áll előttünk, de az új lehetőségek a tipográfiában sokkal fontosabbak, mint eddig bármikor. Ha azt szeretnénk, hogy a weboldalunk haladjon a korral, akkor érdemes használni ezeket a modern technikákat, melyeket a 2. részben részletesen kitárgyalunk.

Érdemes megnézni ezeket a forrásokat:

Összegzés

Megnéztünk öt jellemzőt, ami a modern CSS weboldalak velejárója:

Fokozatosan javítottak,
Alkalmazkodnak a változatos felhasználókhoz,
modulárisak,
hatékonyak
Tipográfiailag gazdagok

A 2. részben – hamarosan elérhető – tovább haladunk a technikákon és lehetőségeken, amik segíthetik a fontos lehetőségek implementálását a saját CSS alapú weboldaladba.

A szerzőről

Zoe Mickley Gillenwater szabadúszó Web designer specialitása a CSS és a hozzáférhetőség. Ő a Flexible Web Design könyv szerzője, melyben bemutatja, hogyan készíthetünk Rugalmas szerkezetű weboldalakat CSS segítségével, ezen kívül számos cikket írt. Megtudhatunk többet róla a Bolgjából és ha követjük a Twitteren.

(al) fordította MPA

Zoe Mickley Gillenwater
http://www.smashingmagazine.com/2009/10/26/modern-css-layouts-the-essential-characteristics/