vef1-2025

Vefforritun 1 kennd haustið 2025

View the Project on GitHub vefforritun/vef1-2025

Fyrirlestur — Skalanleg vefhönnun

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

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…

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.

— Resilient Web Design, chapter 3: Visions

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.

—Resilient Web Design, chapter 3: Visions

Forsíða RWD bókarinnar

Byggir á, í mikilvægis röð:

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

“Responsive Web Design: Serves the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can render the display differently based on the screen size. Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.”

—Google – Mobile SEO Overview

Mobile First

Mobile first

“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.”

—John Allsopp – A Dao of Web Design

“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.”

—Tim Berners-Lee — Long Live the Web

Tæknilegt

Byggir á:

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

Sveigjanleg grind

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

Grind

Getum skilgreint með flexbox og margin æfingum:

Eða notað CSS grid! Skoðum nánar í næsta fyrirlestri.

Dæmi um flexbox grind með margins

Sveigjanlegar myndir og miðlar

Stærðarhlutföll

Dæmi

Media queries

Media queries & progressive enhancement

/* almennt er section 100% breitt */
section {
  width: 100%;
}

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

Container queries

Clamp

font-size: clamp(1rem, 16px + 1vw, 4rem);

Getum líka gert með aðeins flóknari aðferð sem kölluð er fluid typography.

html { font-size: 16px }
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

Picture

<picture>
  <source
    srcset="/stor.jpg"
    media="(min-width: 800px)"
  >
  <img src="/litil.jpg" alt="">
</picture>

<picture>
  <!-- ef vafri styður webp, nota  -->
  <source
    type="image/webp"
    srcset="img.webp, img-2x.webp 2x, img-3x.webp 3x">
  <!--
  fyrir skjái með 2x eða 3x device pixel
  ratio birtum við stærri myndir sem þá
  birtast „greinilegri“
  -->
  <img
    srcset="img-2x.jpg 2x, img-3x.jpg 3x"
    alt="" width="600" height="600" src="img.jpg">
</picture>

Dæmi

Pixel ratio

<meta name="viewport">

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

<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ú!

Dæmi

Flexbox dæmi, nú með grind!