Web dizaino kūrimas programuotojams (prezentacija)

Labai įdomi prezentacija! Kaip programuotojas sužinojau daug naujų dalykų :) eisiu dabar pažaisti su dizainu...

Patarimai tikrai daug kam bus naudingi. Nemažai pasakytų teiginių aš taip pat esu išvardinęs savo straipsnyje :)

Anglu kalbos zinios ne tokios geros. Bet taip idomu pasidare kad sedejau ir verciau. Aisku visus psl. neisverciau. :)

Bet kas domino ta perskaiciau.

Dekui...

Labai viskas gerai, patiko. Bet ką daryti su senosiomis naršyklėmis? Arba IE? Jau nekažkas gaunas :(

Labai viskas gerai, patiko. Bet ką daryti su senosiomis naršyklėmis? Arba IE? Jau nekažkas gaunas :(

Žiūrint į ateitį optimistiškai, toks dalykas kaip sena naršyklės versija turėtu išnykti. Chrome jau gan senai pati atsinaujina į naujausią versiją:

http://i.imgur.com/ORqQS.png

Firefox taip pat nuo šių metų vasaros (berods) naudoja automatinį atsinaujinimą:

http://i.imgur.com/fbPkO.png

Microsoft irgi nesenai pareiškė, kad pradės testuot Explorerio automatinį atsinaujinimą, o kol kas versijų progresija atrod taip:

http://i.imgur.com/I8T5B.png

Peržiūrėjau neskubėdamas visas skaidres ir sudomino mane šitas: http://twitter.github.com/bootstrap/ čia naudojamas dažnai sutinkamas 940px plotis, bet ar nėra geriau vietoj tokio fiksuoto dydžio naudoti 100%? Nes turiu netbuką, jo mažas ekranas, ir pasitaiko tinklapių, kuriuos reikia skrolint į šoną kad pamatyt visą straipsnį, kas išties nėra patogu. Ir didesniuose monitoriuose tie 940px gali palikti nemažai tuščios vietos, tai tie patys procentai ją užpildytų.

Vienžo: 940px vs 100%, ką šiandien geriau naudoti?

Peržiūrėjau neskubėdamas visas skaidres ir sudomino mane šitas: http://twitter.github.com/bootstrap/ čia naudojamas dažnai sutinkamas 940px plotis, bet ar nėra geriau vietoj tokio fiksuoto dydžio naudoti 100%? Nes turiu netbuką, jo mažas ekranas, ir pasitaiko tinklapių, kuriuos reikia skrolint į šoną kad pamatyt visą straipsnį, kas išties nėra patogu. Ir didesniuose monitoriuose tie 940px gali palikti nemažai tuščios vietos, tai tie patys procentai ją užpildytų.

 

Vienžo: 940px vs 100%, ką šiandien geriau naudoti?

Ne visi dizainai ir puslapiai gražiai atrodytų su 100% pločiu. O dar jeigu pastebėjai ir skaidrėse buvo užsiminta, kad yra blogai ir nepatogu skaityt ilgas teksto eilutes. O su 100% pločiu paprastai būna daug sunkiau išspręsti teksto vaizdavimą stulpeliais, ypač, kai yra skirtumai tarp HD rezoliucijos ir kokios 1024x768 :)

Tad iš esmė priklauso nuo poreikių ir tinklalapio struktūros ir dizaino. Manau negalima sakyt, kad blogai naudot tą ar tą. Abu naudot yra gerai. Gerai ir tarpinius variantus naudot :)

Ne visi dizainai ir puslapiai gražiai atrodytų su 100% pločiu. O dar jeigu pastebėjai ir skaidrėse buvo užsiminta, kad yra blogai ir nepatogu skaityt ilgas teksto eilutes. O su 100% pločiu paprastai būna daug sunkiau išspręsti teksto vaizdavimą stulpeliais, ypač, kai yra skirtumai tarp HD rezoliucijos ir kokios 1024x768 :)

 

Tad iš esmė priklauso nuo poreikių ir tinklalapio struktūros ir dizaino. Manau negalima sakyt, kad blogai naudot tą ar tą. Abu naudot yra gerai. Gerai ir tarpinius variantus naudot :)

Dabar įvairiuose CSS frameworkuose (ir ne tik juose) labai populiaru tiesiog CSS'e nurodyt kelis variantus - tarkime, ekranams, tarkime, iki 400px (tai būtų telefonai), iki 800px (~tabletai), ir tada jau didesniems ekranams. Žodžiu, tiesiog tą patį CSS pritaikyti kelioms rezoliucijoms (pagal CSS media queries)

Dabar įvairiuose CSS frameworkuose (ir ne tik juose) labai populiaru tiesiog CSS'e nurodyt kelis variantus - tarkime, ekranams, tarkime, iki 400px (tai būtų telefonai), iki 800px (~tabletai), ir tada jau didesniems ekranams. Žodžiu, tiesiog tą patį CSS pritaikyti kelioms rezoliucijoms (pagal CSS media queries)

Taip, tokiu atveju, skaidant dalimis, galima ir visai patogu naudot 100% width. Kitokiu atveju - tai lengvas galvos skausmas, kuris gali tapti rimta migrena :D

Taip, tokiu atveju, skaidant dalimis, galima ir visai patogu naudot 100% width. Kitokiu atveju - tai lengvas galvos skausmas, kuris gali tapti rimta migrena :D

Tačiau su mano minėta strategija patogiau padaryti ne tiesiog plotį, o kitus patobulinimus skirtingiems pločiams. Pvz. jei ekranas siauras, tada meniu yra viršuje, jei platus - šone ir pan. :)

Žiūrint į ateitį optimistiškai, toks dalykas kaip sena naršyklės versija turėtu išnykti. Chrome jau gan senai pati atsinaujina į naujausią versiją:

Kažkada skaičiau interviu su žmogumi iš Google Chrome komandos. Jis sakė, jog automatiškas atsinaujinimas buvo viena kertinių idėjų nuo pat pirmos Chrome versijos: t.y., jei būtum įdiegęs pirmąją Chrome versiją 2008 metais ir dabar ją įsijungtum, ji automatiškai atsinaujintų į naujausią versiją – taip senų Chrome versijų beveik neegzistuoja, kaip puikiai parodo tavo grafikas (ačiū už jį).

Peržiūrėjau neskubėdamas visas skaidres ir sudomino mane šitas: http://twitter.github.com/bootstrap/ čia naudojamas dažnai sutinkamas 940px plotis, bet ar nėra geriau vietoj tokio fiksuoto dydžio naudoti 100%? Nes turiu netbuką, jo mažas ekranas, ir pasitaiko tinklapių, kuriuos reikia skrolint į šoną kad pamatyt visą straipsnį, kas išties nėra patogu. Ir didesniuose monitoriuose tie 940px gali palikti nemažai tuščios vietos, tai tie patys procentai ją užpildytų.

 

Vienžo: 940px vs 100%, ką šiandien geriau naudoti?

Aš visada už pikselius. 960px yra saugus plotis net ir netbookams (1024px pločio rezoliucija), o labai reikiant papildomo ploto galima naudoti ir 980px.

Jei tu naudosi 100% plotį, viskas atrodys gražiai ant netbook (panašiai, kaip maždaug 1000px pločio layout), bet jei žmogus atsidarys tavo puslapį per savo plačiaekranį 22" monitorių, kurio full HD rezoliucija – 1920x1080, tai įsivaizduok, kaip tavo puslapis atrodys ištemptas du kartus į plotį. Jei plotį nurodai pikseliais, gali būti tikras, kad per visus ekranus svetainė atrodys taip pat.

Aš visada galvoju apie ateitį: ekranai didėja, naršyklės tobulėja. Juk kuriu dizainą, kuris bus naudojamas ne vienus metus į priekį, – tai kodėl turiu taikytis prie žmonių, kurie vis dar naudoja Internet Explorer 7 ar tos mažos kruopelytės su 1024px rezoliucija ir atsisakyti daugybės nuostabių dalykų, kuriuos jau dabar palaiko visos modernios naršyklės ir populiariausios ekrano rezoliucijos?

Uždarbis.lt lankytojų naršyklės šiuo metu:

1. Firefox 42.36%

2. Chrome 29.75%

3. Opera 11.68%

4. Internet Explorer 11.36%

5. Safari 2.19%

6. Opera Mini 1.71%

Uždarbis.lt lankytojų rezoliucijos:

1. 1366x768 21.72%

2. 1280x1024 16.06%

3. 1280x800 13.27%

4. 1024x768 11.01%

5. 1440x900 7.37%

6. 1680x1050 6.88%

7. 1920x1080 6.11%

8. 1600x900 2.19%

9. 1152x864 1.95%

10. 1360x768 1.27%

Reziumuojant: 85% naršo su Firefox, Chrome arba Opera ir turi nemažesnę nei 1152x864 px ekrano rezoliuciją.

Tai sukelia kitą problemą: jei nustatai visiems saugų 960px plotį, žmogaus su didesne rezoliucija pusė ekrano lieka visiškai neišnaudota. Dėl šios priežasties Uždarbis.lt layout yra elastinis:

min-width: 960px;

width: 67%;

Tai leidžia žmonėms su dideliais ekranais mėgautis savo ekranų teikiamais privalumais, nesukeliant jokių nepatogumų tiems, kurie naudoja netbook'us su 1024x768 rezoliucija.

Dėkui už paprotinimą, naudosiu pikselius :)

Puiki nuoroda labai patiko pasiskaityt, daugiau tokių! :)

geros skaidrės :)

Ačiū už patarimus.