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

Már Örlygsson @ Hugsmiðjan ehf.
Ský ráðstefna - nóvember 2012

@maranomynet

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

. . .

Áður á dagskrá:

"Snjallvefir sem aðgengismál og mótvægi gegn App-tískunni."

  1. Vefurinn vafraður múslaust í gegn um skráargat
  2. Snjallir vefir - enn betri með dassi af app hugsun

Framundan:

Allir vefir snjallir!

Vandinn í efnismagninu

Slípun ekki strípun

Ný viðmót fæðast

Aukið flækjustig í framkvæmd

Gagnleg tól

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!

Notendur hafni "mobile"

Heimti link yfir á "alvöru" vefinn

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

Menu hnappurinn

("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.

Til að halda sönsum:

Hugsa allt á almennum nótum...

Ekki fókusa á ákveðin tæki eða vafra

Vefstaðlar, stöðluð vinnubrögð og æðruleysi!

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.

Takk

Már Örlygsson - mar@hugsmidjan.is

mar.nospam@anomy.net

http://mar.anomy.net -- @maranomynet á Twitter

hugsmidjan.is/slides/2012-snjollvefun/