Már Örlygsson @ Hugsmiðjan ehf.
Ský ráðstefna - nóvember 2012
Einn vefur - margbrotið CSS
sem aðlagar sig að aðstæðum.
Smátækjanotendur eru
fyrsta flokks kúnnar.
Microsoft.com
(bara forsíðan)
. . .
"Snjallvefir sem aðgengismál og mótvægi gegn App-tískunni."
Allir vefir snjallir!
Vandinn í efnismagninu
Slípun ekki strípun
Ný viðmót fæðast
Aukið flækjustig í framkvæmd
Gagnleg tól
Snjallt að byrja að hugsa,
hanna
og skrifa
fyrir lítinn skjá
...og takmarkaðan fókus
/
skilning
/ tíma
/ áhuga.
Ágæt byrjun að snjallvæða núverandi vef.
(Dregur fram gallana.)
...og þörfina fyrir forgangsröðun
"Design constraints"
(íslenskun?)
Do not speak unless you can
improve the silence.
Gamla "mobile" hugarfarið:
fjarlægja, sleppa, fela.
Röng nálgun!
Smátækjanotendur fyrsta flokks.
Mýturnar eru að hverfa.
Lítill skjár er bara tegund af fötlun.
(Fatlaðir hafna alltaf sérstökum fatlaðravefum)
Notendur hafni "mobile"
Heimti link yfir á "alvöru" vefinn
...fyrir gýg?
Mobile er alvöru.
Tilhneiging til einsleitni í mobile hönnun
Hermt eftir "native Apps"
(Mismunandi eftir stýrikerfum)
Samfella í útliti er mikilvæg.
Frá 27" niður í 3.5".
Viðheldur kunnugleika og "brand".
Hefðir vefsins vs. hefðir stýrikerfisins?
Vefurinn sigrar alltaf á endanum.
("Skip to navigation" linkurinn
núna sýnilegur!)
Myndir í frekar hárri upplausn skalaðar niður
(háupplausnarskjáir)
(pinch to zoom)
Ritstýrðar auto-complete
valmyndir/leitir.
(Súper skilvirkar flýtileiðir
fyrir efnismikil gagnasöfn.)
Útlitshönnun og CSS forritun
Javascript virkni
Myndefni
Prófanir
CSS í mörgum víddum, kallar á...
...mikla yfirsýn og skipulögð vinnubrögð.
...strúktúraða hugsun útlitshönnuða.
Ólík form þurfa ólík JavaScript
Formbreytingar eiga sér stað í miðjum klíðum
...og script þurfa að bregðast við því.
Óvissa um móttökuhraða,
-kostnað og -getu
kallar á aukna tillitsemi.
t.d. varðandi stórar myndir
og sjálfspilandi vídeó.
2002 - handfylli af vöfrum og 2-3 skjástærðir.
2012 - súpa af vöfrum, stýrikerfum og skjástærðum.
Hugsa allt á almennum nótum...
Ekki fókusa á ákveðin tæki eða vafra
Vefstaðlar, stöðluð vinnubrögð og æðruleysi!
LESS / Stylus / SASS
PageKite
Script loader
formatchange
event
CSS forritun með breytum, útreikningum, föllum, og þáttun.
Gerir CSS vinnuna margfalt viðráðanlegri.
Sjá nánar:
LESS - bögg vs. brill og snjöll vefun
Gefur localhost vefþjónum DNS nafn.
Prófanir á mismunandi tækjum skyndilega einfaldar.
(Jafnvel utan úr bæ.)
Nánar hér: PageKite.net
Sækja javascript eftir pöntun
Geta tekið mið af skjástærð, hegðun notanda, etc.
Dæmi: HeadJS, yepnope.js, LABjs, Req.js :-)
Síður skipta stundum um "format"
(Tækjum er velt, vafragluggar teygðir, page-zooming)
jQuery.formatChange()
auðveldar
að láta scriptin á síðunni bregðast við því...
Gefa hverju formati nafn í CSS-inu:
@media screen and (min-width: 0) {
#mediaformat { font-family: "mobile"; }
#mediaformat:after { content: "mobile"; }
}
@media screen and (min-width: 700px) {
#mediaformat { font-family: "tablet"; }
#mediaformat:after { content: "tablet"; }
}
@media screen and (min-width: 950px) {
#mediaformat { font-family: "desktop"; }
#mediaformat:after { content: "desktop"; }
}
Skilgreina event meðhöndlun:
$(window).on('formatchange', function (e, media) {
if ( media.format === 'mobile' ) ...
if ( media.lastFormat === 'tablet' ) ...
// Named format groups:
if ( media.is('Small') ) ...
if ( media.became('Small') ) ...
if ( media.was('Small') ) ...
if ( media.Left('Small') ) ...
});
Ræsa scriptið:
var media = $.formatChange();
// Access `media` outside event handlers.
Takk
Már Örlygsson - mar@hugsmidjan.is
mar.nospam@anomy.net
http://mar.anomy.net -- @maranomynet á Twitter