Layout och design

SVT, ett mer komplext exempel

I avsnittet kring struktur undersöktes svt.se som exempel för en sidstruktur. I det hÀr avsnittet kommer du att arbeta med en html struktur baserad pÄ SVT Nyheter. Strukturen ser ut som följer.

svt.html
<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVT Nyheter</title>
</head>
<body>
  <nav>
    <a href="#">SVT Nyheter</a>
    <ul>
      <li><a href="#">Nyheter</a></li>
      <li><a href="#">Lokalt</a></li>
      <li><a href="#">Sport</a></li>
    </ul>
  </nav>
  <header>
    <h1><span>Just nu</span> Senaste nytt om coronaviruset
      <a href="#">LĂ€s mer</a>
    </h1>
  </header>
  <main>
      <aside>
      <h3>Snabbkollen</h3>
      <ul>
        <li><a href="#">Lukasjenko svÀrs in som president</a></li>
        <li><a href="#">Sjukhuset: Navalnyj utskriven</a></li>
      </ul>
    </aside>
    <article>
      <img src="https://picsum.photos/600/300">
      <h2>Ryskt militĂ€rfartyg i krock i Öresund</h2>
      <p>Dimma i omrÄdet. Danmark begÀr svensk hjÀlp</p>
    </article>
    <article>
      <img src="https://picsum.photos/600/300">
      <h2>Emma Frans om stigande smittkurvan: "Ganska vÀntat"</h2>
      <p>Forskare: Stora frÄgan Àr om uppgÄngen fortsÀtter</p>
    </article>
  </main>
  <footer>
    <h4>SVT Nyheter</h4>
    <ul>
      <li>TjÀnstgörande webbredaktör: <a href="#">Person Personsson</a></li>
      <li><a href="mailto:svt">Kontakta SVT Nyheter</a></li>
      <li>&copy; Sveriges Television AB</li>
    </ul>
  </footer>
</body>
</html>

Att förvandla text till grafik Àr svÄrt och CSS kan vara vÀldigt besvÀrligt att arbeta med. Det finns mÄnga faktorer att kÀnna till och förstÄ sig pÄ. NÀr du ska Äterskapa en sida sÄ börja alltid med att försöka strukturera dess innehÄll, för att sedan arbeta med stilarna.

NÀr en struktur baserad pÄ sidans komponenter Àr skapad, sÄ Àr nÀsta steg stilarna. Men var medveten att det kan komma att pÄverka placering och nÀstling av element.

Design

För att Äterskapa sidan sÄ kan vi ta en genvÀg och det Àr att studera framtrÀdande element som ska Äterskapas. Studera skÀrmdumpen frÄn SVT Nyheter, vilka element noterar du, gör en lista.

Designelement och layout att ta fasta pÄ:

  • Den röda fĂ€rgen, med hjĂ€lp av utvecklarverktygen kan vi hitta att fĂ€rgkoden Ă€r #e02e3d.

  • Den grĂ„ fĂ€rgen, det finns en varmare och kallare.

    • Senaste nytt grĂ„ Ă€r #333333

  • Typsnittet, SVT Nyheter anvĂ€nder ett typsnitt som heter Publik, det Ă€r inte fritt. Sök efter ett liknande alternativ.

    • AnvĂ€ndningen av CAPS, bĂ„de som stil men ocksĂ„ för att vĂ€cka uppmĂ€rksamhet.

  • Layouten

    • En screamer, JUST NU, tar vĂ„r uppmĂ€rksamhet först.

    • Sidan har en tydlig navbar.

    • Dessa tvĂ„ delar följs av ett huvudinnehĂ„ll uppdelat pĂ„ tvĂ„ spalter.

      • Sidans huvudinnehĂ„ll, nyheterna.

      • Snabbkollen, en sidebar med lĂ€nkar och senaste.

      • Spalterna försvinner vid lĂ€gre upplösning.

    • En sidfot lĂ€ngst ned pĂ„ sidan.

NÀr dessa element Àr identifierade sÄ finns det en startpunkt för kodandet av sidan.

Skapa layouten

Rubriker

Den röda linjen

Navigation

2 spalter

LĂ€nkar

Screamer

Slutgiltig version

Den fÀrdiga koden för SVT-exemplet finns att hÀmta hÀr(svt-css.html, svt.css, img/). Det Àr en mer fÀrdig design och hoppet mellan versionerna Àr markant.

  • Strukturen har Ă€ndrats.

    • Navbaren har fĂ„tt en content div för att centrera innehĂ„llet.

    • Header-elementet Ă€r flyttat utanför main, sĂ„ att main kan delas i tvĂ„ kolumner.

    • Aside-elementet har flyttats före nyhets-artiklarna, för att möjliggöra en float layout pĂ„ tvĂ„ kolumner.

  • Fler helper klasser har skapats.

  • NĂ„gra element har mer komplexa selektorer för att vĂ€lja först eller sista elementet.

  • Det finns en media regel med brytpunkt pĂ„ max-width. Detta för att Ă€ndra float layouten och ta bort de tvĂ„ spalterna ur main.

  • Det finns en media regel pĂ„ min-width 1280px för att göra sidan mer lĂ€sbar pĂ„ stora skĂ€rmar.

  • Ett par ikoner anvĂ€nds frĂ„n Google material icons. De har sparats som SVG och fĂ€rgen har Ă€ndrats.

LĂ€nkar

PreviousFlexNextSprÄket

Last updated