Mi várható webdizájn / sitebuild fronton 2010-ben (Sci-Fi)
Loading ...Dizajnerek! Szajtbilderek!
Úgy tűnik végre elérkezett az idő, hogy olyan layoutokat készítsünk, amik bátran kihasználják a CSS3-ban rejlő lehetőségeket, border-radiusokat, text- és box-shadow-k használatát, mindezt úgy, hogy ha egy-egy tulajdonság valamelyik böngésző által nem támogatott, akkor az eredmény attól még elfogadható maradjon.
Gyakorlati példa:
Egy oldal tartalmi dobozainak / képeinek sarkai Chrome és Firefox alatt le vannak kerekítve, Opera vagy Internet Explorer alatt nincsenek.
Nagy eltérés?
Egymás mellé rakva a két böngésző eredményét -kerekítéssel és anélkül-, a különbség -ha jól terveztünk- nem lesz zavaró. Ha a dizájn struktúrálisan és tipo-wise rendben van az esztétikai effektek meg, ill. nem léte nem szabad, hogy befolyásolja az összhatást. Értsd: Kicsit kockásabb, de a tartalom továbbra is fogyasztható.
A cél az lenne, hogy a lehető legtöbb mindent pusztán css-ből, lehetőleg a kevesebbnél is kevesebb background-image felhasználásával állítsunk elő dizájnokat, mert a jövő efelé mutat.
Kevesebb file, kisebb load time, rgba massif, 2010.
Nyilván nem lehet ezt a módszert mindenhol és mindenhogy megjátszani és az ügyfelek szerintem még egy jópár évig fázni fognak a gondolattól, hogy a dizájn nem mindenhol ugyanolyan, de nekünk már most el kell kezdenünk törni az utat, hogy ez megváltozzon. Kezeljük képességeiknek megfelelően a böngészőket! Ne szennyezzük a HTML kódot felelsleges elemekkel, ne legyen többé kezdő elemkor az első gondolatunk a class=”first”, ne szoroljunk szánibáni header/footer divekre, csak mert olyan dolgot akarunk csinálni, ami nem minden böngészőben elérhető. Use defaults.
Az eredmény pedig tisztább, átláthatóbb HTML kód, ami gyorsabban töltődik, hamarabb megjelenik és talán még jobban is indexelődik a Google által (nem értek a SEO-hoz (coz I think SEO is bullshit), de a kurtább valószínűleg kódot jobban szereti).
Tisztuljon a kód!
2010!
Popularity: 58% [?]
2009. December 28., Monday 10:19
nekem a főnököm verte ki a balhét mindig, ha nem volt egyforma valami két böngészőben… mondjuk ő nem értett hozzá semmit.
2009. December 28., Monday 10:47
A fonokok mindig balheznak, that’s life :)
2009. December 28., Monday 11:34
szép dolgok ezek, de amíg az ie6 használók száma 10% felett van, addig a gyakorlatban nem lehet kizárólag ezekre a megoldásokra támaszkodni és ugyanúgy bekúszik a szar a kódba, mert muszáj. de ha 2010-ről van szó, akkor várjuk meg mennyit csökken az ie6, aztán nézzük meg újra :) valószínűleg sokat fog.
2009. December 28., Monday 12:18
A plusz css property-k csak többletet adnak a munkához, mégha nem is minden böngésző értelmezi őket, akkor is kell. A background-image / border-radius még nem lefutott kérdés, az aktuális projekt határozza meg, de e felé tartunk, igen!
2009. December 28., Monday 12:28
opera 10 sem tudja megjeleniteni? fura.
2009. December 28., Monday 12:44
hmm pusztán csak css? hát ez fincsi
2009. December 28., Monday 12:56
Opera 10.5 pre-alpha már támogat border-radius-t és box-shadow-t.
2009. December 28., Monday 15:43
a szerencsés site-oknál az ie6 már 10% alatt van! :)
igaz hogy az 5% a lélektani határ. az ms jól keresztbetett nekünk amikor az ie7-et nem csak nem csinálta meg jól hanem még jogtiszta winre is korlátozta.
sebaj, egy év múlva vidáman koccintunk már az ie6 halotti torán.
a lekerekítés témához még (2009 elejéről…) http://code.flickr.com/blog/2009/01/07/front-end-performance-doing-more-with-less/
2009. December 28., Monday 16:27
szajmon, amit irok az meg utopia, de ahogy telik az ido, a chrome uralomra fog torni, a Firefox is mostanaban valt dominator bongeszove, nem adok sok idot, hogy a bongeszogyartok (including IE) szanaszet fogjak torni magukat a CSS3 kompatibilitasert (hiaba nincs meg final CSS3).
Egy-masfel ev mire ennek az ujiskolas szemlelet elterjed, a szosul, nagy terhelesu dolgoknal akar meg korabban is – gondolom a load es a sebesseg mindenhol fontos tenyezo.
2009. December 28., Monday 17:35
Amugy az a terv, hogy a cica v11 ebben a szellemisegben fog keszulni, csak hogy legyen mukodo gyakorlati pelda es hogy lassatok, nem a levegobe beszelek :)
2009. December 28., Monday 19:06
Jah, egyetértek, ez a helyes irány, more CSS less image.
Aki meg IE6-ot használnak 2010-ben fail emberek, nem célcsoport.
2009. December 29., Tuesday 10:38
“Aki meg IE6-ot használnak 2010-ben fail emberek, nem célcsoport.”
A kijelentés második felével vitatkoznék. Gondolj csak pl a iwiw-es, munkahelyükről netező userekre, akik a céges xp-s pc-ről, ie6-tal lépkednek be jelölgetni, körlevelet olvasgatni, stb.Ez napi tízezres, vagy százezres nagyságot jelent? Ez nem célcsoport? Az hogy, fail, lehet, de célcsoport is egyben
2009. December 29., Tuesday 14:16
trn: igen vissza fog esni az ie használók száma, főleg mire valamikor 1-2 év múlva kijön a 9es, ami már most nevetséges. legalábbis az alapján amit tudni lehet róla, bénább lesz mint a mostani firefox vagy chrome, amikből addig azért bizonyára szintén kijön 1-1 újabb verzió. a 8as ie egyébként viszonylag problémamentes, csak hát még mindig nyomába sem ér a chromenak vagy a firefoxnak.
de az hogy mennyire szar, nem nagyon befolyásolja azt hogy mennyien használják és csinálhatnak bármit, teljesen kihalni nem fog, legfeljebb az ie6, a többi meg azért egyre jobban kezelhető, bármennyire is szar.
2010. January 2., Saturday 14:52
nem értem, hogy a first class meg a header/footer div hogy jön ide. nem érzem nagyobb bénaságnak html-ben first classolni egy első elemet, mint css-ben psuedo-classolni. a css3-as psuedókat még a ff is csak 3.5-től támogatja. mire ezek normális támogatást kapnak, nem idén lesz. így viszont cleanebb megoldás htmlben classolni.
abban viszont egyetértek, h a jövő nem a mindenhol-nézzen-ki-ugyanúgy, hanem a mindenhol-működjön-jól. ezt meg fogják szokni az ügyfelek itthon is 1-2 éven belül, ha rendesen terjed az ux téma.
2010. January 2., Saturday 17:35
A “rounded borders” már most égő, és mire rendesen elterjed a CSS 3, addigra kb. olyan szinten elcsépelt lesz, mint annak idején az animgifek. De azért hajrá!
2010. January 2., Saturday 19:58
oizys: sarkitottam a peldaban, de azert szerintem abban egyeterthetunk, hogy bloatositani a kodot 2-4 plusz divvel (+kepek, +css) csak azert, hogy a sarkokat lekerekitsuk az oldschool bongeszok szamara is, nem a legbolcsebb ut. A :first talan meg tul future, de a sarkok, a box shadow es a font-face mar nem annyira.
2010. January 2., Saturday 22:14
true, hogy optimalizálás lesz az egyik hip téma 2010-ben, meg hogy használjuk, amit végre lehet. de szerintem lesz annyi új majomkodás, amire rávetik majd magukat a “webdesign királyok”, hogy nem néhány plusz div lesz a legnagyobb gond. én pl a font-face félrehasználás miatt jobban fázok előre is, mint a bling smileyktól anno. emiatt is kéne alanyi jogon osztogatni santa maria list apartos aktuális cikkét (http://www.alistapart.com/articles/on-web-typography/).
szerintem fontosabb abban egyetérteni, amiben a második bekezdésemben egyetértettem fentebb. ezt kellene jó erősen kanonizálni ügyfél irányba.
2010. January 3., Sunday 2:38
oizys: true, true :)
(amugy amig a font-face mukodes olyan, hogy meg kell varni a font betoltodeset es addig:
- nem rajzol ki semmit a brauzer (ie safari)
- elkezdi renderelni az oldalt, es amikor betolti, akkor lecsereli a szovegeket (ffx)
az meg messze van a hasznalhatotol)
2010. January 3., Sunday 12:57
(élesben nem használtam még a font-face-t (webfont párti vagyok, mer az a usability-barát, imo), de elvileg a font source-ot a css tölti be, és a css-t még a headben loadolod. szóval akkor hogy lehet, h már rendereli az oldalt, de még nem töltődött be a font? ez nekem inkább sifr-esen hangzik.)
2010. January 4., Monday 13:08
Leszarom az IE6-ot! Főnöknek beszólünk, hogy NEM! Felejtős!
“coz I think SEO is bullshit” – és ez itt a lényeg…
Tisztességesen elkészített oldal, oszt jó napot! Nem csalunk, nem hazudunk, nem trükközünk és akkor a nagy Google szeretni fog minket…
BÚÉK!!!
2010. January 5., Tuesday 16:25
/me hangosan felkacag
2010. January 5., Tuesday 20:54
http://informationarchitects.jp/whats-next-in-web-design/
2010. January 18., Monday 4:21
mobilon lenne látni ugyanezt az utat, ott még kritikusabb a sok bg image használata… iphone-on a legtöbb fenti okosság már működik, gondolom android telefonokon is. elméletileg a nokia is webkit böngészőt kezdett használni egy ideje, de szerintem vmi tök más kódbázist, mert köszönő viszonyban nincs a mobil safari-val, annak ellenére, hogy pl. user agent-ként akként mutatják a böngészőjüket… csak az opera mini-t kellene elfelejteni, de nagyon gyorsan, mert az a jól kitalált, összereszelt layout-odat átkergeti egy transzformáción, hogy szerintük, algoritmikusan, hogyan kellett volna megcsinálni az oldalad mobilra… na persze.