Hönnun og forritun á snjöllu vefviðmóti

Ég bý til snjalla vefi

Einn vefur - margbrotið CSS
sem aðlagar sig að aðstæðum.

Smátækjanotendur eru
fyrsta flokks kúnnar.

Snjallvefir - dæmi:

Kreditkort.is

Virðing.is

RSK.is

Lykill.is

Dohop.com

Microsoft.com
(bara forsíðan)

. . .

Vandinn í efnismagninu

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.

Slípun ekki strípun

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)

Hættur!

...fyrir gýg?

Mobile er alvöru.

Ný viðmót fæðast

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.

Nýjung:

("Skip to navigation" linkurinn
núna sýnilegur!)

Nýjung:

Myndir í frekar hárri upplausn skalaðar niður

(háupplausnarskjáir)

(pinch to zoom)

Möguleg framtíð:

Ritstýrðar auto-complete
valmyndir/leitir.

(Súper skilvirkar flýtileiðir
fyrir efnismikil gagnasöfn.)

Aukið flækjustig í framkvæmd

Ú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

• Efni bara "ajaxað" inn þegar pláss leyfir
• "Collapsing" á efni á síðunni
• Umröðun efnis (skítamix)
• o.fl...

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ó.

Prófanir:

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.

Gagnleg tól

LESS / Stylus / SASS

PageKite

Script loader

formatchange event

LESS / Stylus / SASS

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

PageKite

Gefur localhost vefþjónum DNS nafn.

Prófanir á mismunandi tækjum skyndilega einfaldar.
(Jafnvel utan úr bæ.)

Nánar hér: PageKite.net

Script loaders

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 :-)

formatchange event

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í...

formatchange notkun 1/3

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"; }
}

formatchange notkun 2/3

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') )  ...
  });

formatchange notkun 3/3

Ræsa scriptið:

var media = $.formatChange();

// Access `media` outside event handlers.