|
Liquid or fixed web site design - screen resolution
A List Apart 4.0
Evo upravo vidim na CSSVault da je ALA redizajniran, i to po cetvrti put. www.alistapart.com P.S. Inace da stvar bude zanimljivija, radim na personalnom projektu (lansiranje kroz sedam dana) koji ima slicnu layout organizaciju ovom sajtu, biće ili da idem ispred vremena, ili smo Džefri Zeldman i ja pokupili dio inspiracije na istom mjestu :) |
Šta to znači, da 800 x 600 odlazi u penziju??? Gde su one lepe uske centrirane stranice, taman sam se počeo na to navikavati :-(
|
on je otisao vec skoro godinu dana u penziju :)
Globalno ta rezolucija je sad statisticka greska :) |
Gresis, ovaj silno gresis sinak.
http://www.w3schools.com/browsers/browsers_stats.asp 800 x 600 se kotira na dobrih 25% sto je daleeeko iznad statisticke greske koju pominjes. |
Uhm :) uskoro ce moj mob imati vecu rezoluciju nego ta :)
iskreno ja mislim da sam negde procitao da je spala na nekih 5-6 % .... :) a i ovo pogledaj ( ako je ova w3cshools stat tacna) januar : 30% jul : 25% |
1 Prilog(a)
hehehe, baš su lisci... proveravaju rezoluciju - samo ih malo buni kad imam 2 x 1280 x 1024, pa mi dadoše staru lepu usku centriranu stranicu, tako da ladno mogu staviti na jednom moniotu dve, jednu do druge :-p
ps. - ograničenja na attache su ovde brutalna... te .png ne sme da bude teži od 19.5 KB (okrugla brojka :-)), te mora da se uklopi u 620 x 280 (pa sam morao da smanjujem prikaz 2 ala browsera na jednom ekranu :-()... A i natpis na Submitu "Kopiranje na server" teško da može da se ukroji u dodeljenih mu 70px. |
Novi dizajn je odličan. Koliko mi je poznato nije ga radio Zeldman već Jason Santa Maria.
PS: Nije bitno koliki je procenat posetilaca sa 800x600 na globalnom nivou već u konkretnom slučaju. Mislim da je u slučaju ALA taj procenat mnogo manji od 25% (čak bih tipovao na manje od 10%). |
Blogovi su zeznuli 800x600 rezoluciju. Realno govoreći, danas je skoro nemoguće u toj rezoluciji odraditi neki novi interfejs koji se oslanja na blog/portal organizaciju, a da nisu negdje brojni elementi interfejsa već viđeni. Posledica toga su bile dvije krajnosti:
- CSSVault sajtovi koji su pokušali sa bojama i nešto grafike da kreiraju drugačiji specifičniji brending ugođaj; ali je došlo do kontraefekta i stotina identičnih sajtova - vraćanje Photoshopu, odnosno kombinovanje nešto teže grafike i CSS fazona, u stilu JasonSantaMaria.com koji je recimo među prvima furao taj fazon (između ostalog odgovoran za online branding priču novog ALA) Tako de se širenje rezolucije nametnulo kao jedino moguće rješenje. Tog istog je bio svjestan i Zeldman, nakon promašaja sa ALA 3.0. ++ http://www.alistapart.com/articles/ala40 Santa Maria je uradio dizajn, ali zna se ko je diktirao direction :) |
Malo kasnim na ovu žurku, no bolje ikad...
Meni je novi ALA dizajn ubedljivo najbolji od svega što je ranije bilo. Jason je sjajno uradio posao i kada sam video dizajn bio sam fasciniran. Sjajna upotreba tipografije, odličan odnos belina i teksta što sve doprinosi lakom čitanju. A za prelaz na 1000 piksela je mislim krajnje vreme. Čak u poslednjim stvarima koje sam radio o rezoluciji skoro uopšte ne razmišljam - uzmem da napravim stvar kako mi se sviđa i kako želim, a onda razmatram šta bi trebalo promeniti da se uklopi u neke norme. Ali svakako da 800 više ni ne uzimam u obzir kao default. Obzirom da sve radim CSS-based, upravo sam ove nedelje završio malu pretumbaciju za jednog od firminih betting klijenata. Dobiće dizajn koji je 770px širok i jedan od 1000px pa da biraju šta hoće. Sve mi se javlja da će biti ovaj od 1000 :) |
Prvo da ti pоželim dobrodošlicu Aleksandre , i da mi je jako drago što si nam se pridružio ...
A što se tiče 1000 px layout-a ,ja licno sam presao na nju vec nekih 6 meseci ... I tesko me naterati da se vratim :D |
Ako radite redizajn nekog postojeceg sajta, najbolje je prvo proveriti koliko njih jos koriste 800x600. Kod sajtova koje mi radimo brojka varira od 10 do 15%, sto nije zanemarivo, ali trend je svakako opadajuci. Kod vecine je 1280x1024 dosao na drugo mesto.
|
Malo statistike sa domaceg podneblja (vicevi.co.yu, oko 2500 uniques daily)
1024x768 65.06% 800x600 13.78% 1280x1024 13.36% 1152x864 4.45% Other 1.57% 1400x1050 0.55% 1600x1200 0.44% 1440x900 0.27% 640x480 0.20% 1680x1050 0.18% 1920x1200 0.12% 2048x1536 0.01% |
Svaka statistika je prica za sebe i može da se tumači kako ti odgovara... treba pogledati recimo vreme kada se kače ljudi, pa lokaciju pa onda izvući zaključke....
Kod mene postoji 2 različite statistike, jedna je dnevna a druga noćna... iz prostog razloga što se mnogo ljudi kači sa posla a tu je jedan tip konfiguracije, a sledeći peak je uveče od 10 do 01 i tada je statistika malo drugačija. Generalno, mnogo zavisi od ciljne grupe... ako će da se kače ljudi od kuće, možeš slobodno da ideš na veće rezolucije, ali ako recimo ciljaš na neke institucije ili čak ambasade i slično ... razmisli kada su zadnji put "osvežili" konfiguracije. |
Ekranska rezolucija nije pravi podatak, jer se sajt gleda u okviru prozora browsera - koji je jako retko u full-screen režimu. Takođe ne mora da bude ni maksimizovan, što dizajneri redovno zaboravljaju... Meni lično browser jeste maksimizovan, ali sam našao da je praktično da taskbar postavim bočno - pa se kod nekih "1024" sajtova pojavi horizontalni skrol ;,)
|
Ili napravite rastegljivi layout, definišete sve veličine u relativnim jedinicama i time rešite svoje probleme.
|
Citat:
|
Nikada nisam rekao da će biti lako :)
|
Za fluid ima mesta, ali to je definitivno manjina projekata. Svako ko navodi fluid kao rešenje automatski pokazuje da nije baš mnogo radio sa klijentima pošto realni projekti uglavnom podrazumevaju dizajn fiksne širine (u manjem broju slučajeva maksimalne širine). Čak ima dosta slučajeva gde je i visina fiksirana, posebno ako dizajner dolazi iz Flash sveta.
Teorija i realnost se umnogome razliku. Većina nas to već ionako zna... Znam za tri grupe: fixed, elastic i fluid. U koju grupu spadaju sajtovi koji su "svesni" rezolucije i promene iste (preko JSa)? U tu grupu se može svrstati Rammstein sajt, ali joj ne znam ima (da li ga uopšte ima?). Kombinacija malo JavaScripta i alternativnih stilova definitivno daje odlične rezultate, IMO bolje od tri navedene grupe gore. BTW, zna li se ko je ekipa koja radi Rammstein sajt? Ljudi znaju posao! PS: Ova tema je odavno zaslužila jedan split. Šta admini kažu na to? |
Ja stvarno neznam sto vi ljudi ne otvarate nove teme :)
aj splitovacemo :) |
Citat:
Citat:
U prevodu na Srpski: postoji određena verovatnoća čija vrednost pripada opsegu (0, 1) za svaku kombinaciju (širina, visina), pa mi je neprihvatljivo da se uzme za jednu dimenziju neka granična vrednost. Samim tim činom praviš veliku statističku grešku iz koje inheretno sledi (transformacijom slučajne promenljive) da znatan broj posetilaca neće biti zadovoljan onim što vidi. Disclamer: Keep in mind da su većina "web statistika" i "statistika uopšte" samo šarena laža, potrebno je nemala količina teorije (iskusio na sopstvenoj koži) da bi se na pravi način izvršila svrsishodna statistička obrada podataka. Citat:
|
Citat:
Prvo i najmanje bitno, ne kaže se "fluid" nego "liquid", čisto zbog terminologije i referenci da ne bude zabune. Drugo, ovo što si rekao za klijente i realne projekte si toliko lupio da ne mogu a da ne pomislim da nisi isprobavao u praksi ovo ili ovo. :)) Ja ne znam kakve si ti klijente imao, ali ne samo da ne mogu da se setim ni jednog koji je zahtevao fiksnu sirinu nego je čak vecina tražila da bude 100% width. Najveći je problem što je izuzetno teško napraviti liquid design koji se neće raspadati i izgledaće korektno u svim (glavnim) rezolucijama. Zato dizajneri idu linijom manjeg otpora i proglašavaju takav metod "glupim" ili slično i pribegavaju nice and easy "fixed width design". |
sta ja znam... ja sam uradio mozda 2 fixed layouta ikad. uvek idem na neku kombinovanu varijantu, npr. sidebar apsolutne sirine a ostatak liquid, ili takve kombinacije. inace najvise volim elastic, on je keva, npr. sada na dnevniku (koji je down BTW) imam elastic sa sidebarom koji je fiksne sirine.
samo da napomenem da ^ovaj layout i nije za neku preporuku :). dosta sam se namucio dok ga nisam napravio kako valja, a opet nije ispao kako sam originalno zeleo, a hteo sam da na 1024 ekran bude podeljen po savrsenoj vertikalnoj polovini--sto je za 800x600 bilo neprihvatljivo. jebiga, kompromis, najveca ***** mamu mu jebem... mrzim kompromise. |
Što se tiče liquid design, samo još da dodam da su se sve ove varijacije na tu temu pojavile baš iz tog razloga što je jako teško napraviti uspešan liquid design. Pribegava se raznim tehnikama:
- različiti CSS u zavisnosti od browsera - različiti CSS u zavisnosti od rezolucije - upotreba javascript-a za dinamičko prikazivanje/sklanjanje manje bitnih sadržaja - ne mogu sada da se setim ničega više Evo ja upravo na poslednjem projektu (privremeno je na http://muvanje.romance-cafe.net/ ) radim liquid design (ovo je samo početna faza, samo layout) i priznajem da mi se raspada u IE kada se smanji browser window, ali nije ništa što ne može da se reši, uz pomoć malo trikova i hackova. Insistiranje na fiksnoj širini je maltretiranje korisnika, naročito onih sa većim rezolucijama. Ljudi kupe bolje monitore i kartice da bi mogli da browsuju u 1600x1200 i da im sve stane na jedan screen, a onda neko dođe i napravi im fiksno 500px širinu pa se čovek zapita što je bacao pare na hardware... Što se liquid UI design tiče, to je osnova uspešnog UI, pogledajte samo svoj OS (bilo koji), 95% softwera kao i komplet OS UI je tzv. liquid. Zašto bi bilo drugačije i na web-u. Pa i sam browser je "liquid". Još jedna stvar: neko reče da statistika može da zavara jer malo ljudi stvarno iskoristi svu širinu i visinu svog ekrana. Potpuno tačno, jako pun ljudi nema maximizovane prozore, pa iako vam statistika pokaže da on gleda vaš sajt u 1024x768, on u stvari ne koristi više od 900 piksela efektivne širine. Samim tim, raditi "fiksni" dizajn ciljan za određenu rezoluciju je vrlo "tricky business", što reče neko "things are not as they seems" :) |
Fluid, liquid - omaška.
Ti radiš dizajn za sebe, meni daju da sasečem i popeglam šta naprave i uvek je fixed width. Jednostavno je tako. Koliko se sećam, bar zadnjih 5 je bilo fixed za 800x600. Pošto imaš veliki monitor verujem da ti je malo glupo da praviš 800x600 fixed pa guraš liquid varijante pošto vidiš na šta liči na većim rezolucijama. Ja opet ne volim liquid (mrzim duge linije teksta, proređenost sadržaja i sve što uz to ide). Sad opet kad pogledam (pošto preispitujem svoj stav), mislim da su prošlom godinom dominirali fixed i elastic layouti, bar u onom delu koji je mene zanimao i koji pratim. Treba pogledati arhive: * http://cssvault.com/ * http://www.cssbeauty.com/ * http://www.stylegala.com/ Ima jako malo istinskih liquid sajtova ako se ne varam (možda grešim, nisam brojao). PS: Očigledno nam se ne poklapaju klijenti (kako po tipu layouta tako i po verziji PHPa koja im odgovara) ;) |
Kad je o prilagodjavanju rezolucijama rec ja sam u poslednje vreme najblizi kompromisnom resenju (kad je moguce).
|<- za800x600px ->|<-dopuna do 1000px->| fiksna sirina Pa tako 800x600-ovci vide celinu, a oni sa 1000px sablonom imaju pun ekran! |
Citat:
Citat:
|
ja radim i za eksere, kako kad... :)
|
Evo da se i ja uključim. Default na kućnoj mašini mi je 1280x1024, lično kao korisnik ne volim liquid, jerbo mojim očima jednostavno smeta kada se tekst proširi čitavom horizontalom ekrana. Sjećam se da je Zeldman na više mjesta citirao da je optimalna veličina za korektno praćenje teksta negdje između 400px i 500px horizontale, s čim se i sam slažem.
U poslednje vrijeme se pojavilo dosta zanimljiv liquid CSS rješenja, ali ja ih i dalje najčešće gledam tako što podesim prozor brauzera onako kako meni odgovara, odnosno smanjim ga. |
Citat:
|
Citat:
Citat:
Uticaj dužine reda ekranskog teksta na "čitljivost" i rezultati samog istraživanja |
Citat:
|
I ja znam za tu preporuku od 10-12 reči. Pročitao sam to u nekom udžbeniku sa grafičkog fakulteta o prelamanju knjiga. Više od toga nije preporučljivo, jer redovi počinju da 'pucaju'; čitalac ne zna gde da se vrati na početak reda. Naravno, ovo vredi za knjige, ne za ekran, ali mislim da nema mnogo razlike. Goran je uputio na dobar tekst, da je to zapravo individualno.
Ovaj forum, npr. složi 25-30 reči po redu na 1280x1024 rezoluciji. Verujem da bi to bilo previše za neki dugi tekst, ali se zato može smanjiti prozor browsera :) U najnovijem projektu na kojem radimo koristićemo 100% širine pristup, a objekte (thumbnaili fiksne širine) ćemo ređati po redovima, pa koliko stane. Naravno, broj objekata po redu se dinamički menja ako se menja veličina browsera. Dakle, jesam za 100% širine pristup, ali da se tih 100% ima čime napuniti, ne da se par objekata širi u beskraj. |
Moram još da se nadovežem na moj prethodni post. Kod liquida se meni recimo sviđa taj strong osjećaj, pogotovo na većim rezolucijama, kad otvoriš sajt i ono sve ti je ispunjeno, a dizajnerski dobro uštimano, odnosno sve je na svom mjestu. Bluesmanovi sajtovi su školski primjeri kako raditi eksta liquid. Odnosno, taj strong osjećaj, odnosno taj tip osjećaja na prvo viđenja klasični fixed sajtovi nemaju.
E sad, recimo ja obožavam tri godine star Wired.com dizajn interfejsa, uprkos tome šta su mnogi govorili (i danas kažu) za isti da je ružan ko lopov. Pogotovo kad je dan sa dobrom kombinacijom boja (svaki dan u sedmici ima drugu šemu boja), uživao sam bukvalno jedno vrijeme da ga držim na monitoru preko čitavog ekrana, dok je mašina slobodna. E sad, jednostavno kad želim da pročitam konkretan tekst sa tog sajta, ja moram da smanjim veličinu prostora. Najčešća situacija i sa ostalim liquid sajtovima je ta, da mogu ja standardno da preletim pogledom kroz sadržaj, ali ako želim nešto konkretno da pročitam, makar bila to dva pasusa About Us sekcije i txt se ne prostirao od margine do margine, ja na mojoj rezoluciji najčešće smanjim veličinu prozora. Kao dobar primjer uporedbe fixed i liquid modela, može se pogledati www.stopdesign.com koji u preferences ima mogućnost da se onaj minimal bijeli dizajn prikaže po želji u liquid ili fixed varijanti. |
| Vreme je GMT +2. Trenutno vreme je 15:41. |
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.