Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Nyt puhumme sivun layoutista, siten että yksi ja sama sivu toimisi sekä pöytäkoneella että mobiililaitteilla. (Eli tämäkin tuttua meille, mutta hyvin ajankohtaista.) Kannattaa myös käyttää CSS :hover -määrettä jolloin tabulaattorilla navigoivat saavat saman mouseover -tekstin kuin hiirtä käyttävät.

Mobiililaitedesignissa tulisi ottaa sormen koko huomioon. Pienin sallittu koko on sormenpään koko.

JavaScriptin tulisi vain olla avustava lisä. Ottakaa huomioon että perustoiminnot toimivat myös ilman JS:ää.

Kuvien kokosuositus: max 120pix mobiililaitteelle. Jos kuvat siirtää HTML:stä CSS:ään, niin voi tarjota eri kuvan käyttäjälle alustan mukaan. Tässä tulee taas semanttisia ongelmia. Myöhemmin tänään käsitellään myös miten html:ssä olevan kuvan voi vaihtaa.

Hyvä keskustelu siitä että nämä ovat vain hänen suosituksia, mutta jokainen valitsee itse mitä näistä ohjeista käyttää.

Mobile layout: aloita leiskan suunnittelu mobiiliversiosta. Aloita minimi ja lineaarisesta sivusta, kaikki elementit allekkain, ei floatteja tai muita sijoituksia, koko sivu on vain yksi sarake, ei horisontaalia skrollausta. Tämän perusdesignin jälkeen voi lisätä muuta, siten että ne jotka osaavat ne näyttää, ne käyttävät niitä (muut ei).