Skip to content

Latest commit

 

History

History
358 lines (246 loc) · 9.41 KB

06.1.responsive.md

File metadata and controls

358 lines (246 loc) · 9.41 KB
title
Fyrirlestur 6.1 – Skalanleg vefhönnun

Fyrirlestur 6.1 — Skalanleg vefhönnun

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Cache í vafra

  • Vafrar eiga það til að cachea gögn
  • Við uppfærum index.html, styles.css eða álíka en sjáum ennþá eldri útgáfu
  • Getum neytt vafra til að sækja nýjustu útgáfu með DevTools í Chrome
    • Opnum DevTools og höldum inni refresh og gerum „empty cache and hard reload“

Skalanleg vefhönnun

Vefurinn er ekki ein föst skjástærð

Vefurinn er margar skjástærð á mörgum tækjum

Vefurinn mun aðeins halda áfram að verða flóknari

Einu sinni...

  • 640 x 480
  • 800 x 600
  • 1024 x 768

If you’ve ever used Photoshop then you’ll know what happens when you select “New” from the “File” menu: you will be asked to enter fixed dimensions for the canvas you are about to work within. Before adding a single pixel, a fundamental design decision has been made that reinforces the consensual hallucination of an inflexible web.

1680×945
1680×1050
1600×900
1600×768
1600×1200
1440×900
1400×1050
1366×768
1366×720
960×540
854×480
800×480
1280×854
1280×800
1280×768
1280×720
1280×1024
1200×824
1152×768
1024×768
1024×600
2048×1536
2048×1152
2048×1050
420×293
3840×2400
352×416
320x480
320×240
272×480
2560×1600
2560×1440
240×320
640×480
640×360
600×800
640x960
640x480
640×96
176×220
176×208
176×132
480×800
480×640
480×272
480×1024
720×480
720×1280

Relinquishing control does not mean relinquishing quality. Quite the opposite. In acknowledging the many unknowns involved in designing for the web, designers can craft in a resilient flexible way that is true to the medium.

Forsíða RWD bókarinnar

Byggir á, í röð:

  1. Sveigjanlegu umbroti, byggðu á grind
  2. Sveigjanlegum myndum og miðlum
  3. CSS media queries
  • Birtum...
    • sama efnið...
    • með sama HTML...
    • á sömu slóð
    • en aðlögum okkur að tæki
  • Vefurinn er notaður í allskonar tækjum, bregðumst við því!

“Responsive web design: Serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile, non-visual browser), but can render the display differently (i.e., “respond”) based on the screen size. Responsive design is Google’s recommended design pattern.”

Mobile First

Mobile first

  • Byrjum á upplifun í minni tækjum
  • Neyðir þig til að taka ákvarðanir
  • Efnið í fyrirrúmi, ekki óþarfa „skraut”
  • Progressive enhancement!

Graceful degradation

  • Hugtak tengt progressive enhancement, en á haus
  • Byggjum fyrir ákveðna upplifun sem krefst nýrrar tækni
  • Brotnum tignarlega niður og gefum síðri upplifun í eldri tækni
  • Byrjum flókið og lögum okkur niður

Graceful Degradation VS. Progressive Enhancement

“The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”

“The primary design principle underlying the Web’s usefulness and growth is universality. […] And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.”

Tæknilegt

Byggir á:

  1. Sveigjanlegu umbroti, byggðu á grind
  2. Sveigjanlegum myndum og miðlum
  3. CSS media queries

Sveigjanleg grind

  • Notum hlutfallsleg gildi, ekki nákvæm
  • Ef umgjörð minnkar, þá minnkar allt hlutfallslega innan hennar
  • Getum fest umgjörðina til að festa allt innihald
  • Notum yfirleitt max-width á umgjörð til að setja hámarksbreidd

Hreyfimynd sem sýnir mun á relative og static units

Hreyfimynd sem sýnir mun á max-width og ekki

Myndir frá 9 basic principles of responsive web design

Útreikningar

  • Með því að nota
    • target ÷ context = result
  • Getum við breytt úr nákvæmu gildi í hlutfallslegt fyrir breiddir, margin, padding og letur
  • Notum því prósentur
    • Einnig væri hægt að nota em
  • T.d. erum með 1200px umgjörð og innan hennar 900px efnissvæði
  • Í staðinn fyrir px (nákvæm stærð) notum við hlutfall í prósentum
    • 900 ÷ 1200 = 0,75 eða 75%

Grind

  • Skilgreinum yfirleitt fjölda dálka sem við vinnum með, cols
  • Fyrir hverja röð skilgreinum við foreldri sem inniheldur efnið, rows
  • Gutter er plássið á milli dálka
  • Getum notað margin-left og margin-right til að færa efni til í dálkum

Dæmi um grind

Sveigjanlegar myndir og miðlar

  • Getum fest við umgjörð þeirra og látið skalast
    • max-width: 100%; á img passar að mynd fylli alltaf út í foreldi sitt
  • Getum bæði minnkað/stækkað eða kroppað
    • object-fit hjálpar til

Dæmi

Stærðarhlutföll

  • Ef við viljum viðhalda stærðarhlutföllum (aspect ratio) á efni höfum við „trikk“
  • gervi-element, barn sem fyllir upp í foreldri sitt og padding-top

Dæmi

Media queries

  • Ákveðum „brotpunkta“ í hönnun og breytum flæði
  • Stillum media query, t.d.
    • max-width – skilgreinum reglur upp að þeirri vídd
    • min-width – skilgreinum reglur frá þeirri vídd
    • Hægt að and-a saman

Media queries & progressive enhancement

  • Að nýta sér mobile first hugsun þýðir að við skilgreinum í grunninn hvernig hlutur fyllir alveg út í pláss sitt
  • Eftir því sem meira pláss er til staðar tekur hlutur minna pláss
/* almennt er section 100% breitt */
section {
  width: 100%;
}

/* frá 800px breiðum viewport er
   section 50% breitt */
@media (min-width: 800px) {
  section {
    width: 50%;
  }
}

Dæmi – media queries

Dæmi – media queries & grind

Dæmi – media queries & grind — mobile first

Pixel ratio

  • Device pixel ratio er hlutfallið, t.d. 2x, milli
    • Physical resolution — raun upplausn skjás, t.d. 960x640
    • Logcial resolution — raun stærð skjás, t.d. 480x320
  • Pixel density segir til um fjölda pixela per inch/cm
  • Retina display er markaðshugtak frá Apple þar sem pixel density er um 300 ppi og við horfum á skjáinn í um 25 cm fjarlægð — augað greinir ekki pixela

<meta name="viewport">

Getum leiðbeint vafra hvernig síða birtist:

  • width setur breidd viewports:
    • tala – föst breidd
    • device-width — viewport er jafnt logical resolution ekki physical resolution
  • initial-scale, upphafs zoom á síðu
  • minimum-scale, hversu lítil síða má verða — hve langt má zooma út
  • maximum-scale, hversu stór síða má verða — hve langt má zooma inn
  • user-scalable, má zooma? viljum ekki banna
<meta
 name="viewport"
 content="width=device-width,initial-scale=1"
>

Ef við skilgreinum ekki width=device-width í <meta name="viewport"> og notum media queries mun vefurinn okkar ekki birtast eins og við höldum í tækjum með hærri raunupplausn.

Allir saman nú!

  • Erum með síðu sem bregst við umhverfi sínu
  • Einföld hugmynd en getur orðið mjög flókið
  • Prófanir á mörgum tækjum erfiðar

Dæmi með öllu saman