Uw eerste website voor meerdere apparaten

Het bouwen van websites voor meerdere apparaten is niet zo moeilijk als het lijkt. Met behulp van deze gids bouwen we een voorbeeld van een landingspagina voor een product voor onze cursus CS256 Mobile Web Development die goed werkt op alle verschillende apparaten.

verschillende apparaten die het eindproduct weergeven

Het bouwen voor meerdere apparaten met uiteenlopende mogelijkheden, erg verschillende schermformaten en interactiemethodes lijkt een lastige taak, zo niet onmogelijk.

Het is niet zo moeilijk om volledig responsieve websites te maken als u misschien denkt. Om dit te bewijzen biedt deze gids uw stappen die u kunt volgen om aan de slag te gaan. We hebben alles in twee eenvoudige stappen verdeeld:

  1. De informatiearchitectuur (ook IA genoemd) en structuur van de pagina bepalen, 2. ontwerpelementen toevoegen zodat de pagina responsief is en er op alle apparaten goed uitziet.

Uw eigen inhoud en structuur maken

Inhoud is het belangrijkste aspect van een website. We moeten dus het design afstemmen op de inhoud en niet andersom. In deze gids bepalen we eerst de inhoud die we nodig hebben, maken we een paginastructuur op basis van deze inhoud en geven we de pagina weer in een eenvoudige lineaire lay-out die ideaal is voor smalle en brede viewports.

De paginastructuur maken

We hebben bepaald dat we het volgende nodig hebben:

  1. Een gedeelte waarin ons product CS256: Mobile web development-cursus uitvoerig wordt beschreven
  2. Een formulier om informatie te verzamelen van gebruikers die interesse hebben voor ons product
  3. Een uitgebreide beschrijving en video
  4. Afbeeldingen van het product in actie
  5. Een gegevenstabel met informatie als back-up van de claims

TL;DR

  • Bepaal eerst de inhoud die u nodig heeft.
  • Stel Information Architecture (IA) op voor smalle en brede viewports.
  • Maak een geraamte van de pagina met inhoud maar zonder styling.

We hebben ook een architectuur van onbewerkte informatie en lay-out verkregen voor zowel de smalle als brede viewports.

Smalle viewport IA Brede viewport IA

U kunt dit gemakkelijk converteren naar de onbewerkte gedeelten van een geraamtepagina die we voor de rest van het project zullen gebruiken.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Inhoud aan de pagina toevoegen

De basisstructuur van de website is klaar. We weten welke gedeelten we nodig hebben, de inhoud die we in deze gedeelten willen weergeven en waar we deze in de algemene informatie-architectuur willen plaatsen. We kunnen nu beginnen aan het bouwen van de website.

De kop en het formulier maken

De kop en het aanmeldingsformulier vormen de essentiële onderdelen van onze pagina. Deze moeten onmiddellijk aan de gebruiker worden weergegeven.

Voeg aan de kop eenvoudige tekst toe om de cursus te beschrijven:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

We moeten ook het formulier invullen. Het formulier is eenvoudig en verzamelt de namen en telefoonnummers van de gebruikers en een goed moment om hen terug te bellen.

Alle formulieren moeten labels en placeholders bevatten zodat gebruikers zich gemakkelijk op elementen kunnen richten en kunnen begrijpen wat zo is bedoeld, en zodat toegankelijkheidstools de structuur van het formulier kunnen begrijpen. Het naamkenmerk stuurt niet alleen de formulierwaarde naar de server, het wordt ook gebruikt om de browser belangrijke hints te geven over het automatisch invullen van het formulier voor de gebruiker.

We voegen semantische typen toe zodat gebruikers snel en eenvoudig inhoud kunnen invoeren op een mobiel apparaat. Wanneer de gebruiker bijvoorbeeld een telefoonnummer invoert, wordt alleen een toetsenblok weergegeven.

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Het gedeelte Video en informatie

Het gedeelte Video en informatie van inhoud is meer uitgebreid. Het bevat een lijst met opsommingstekens van kenmerken van onze producten en ook een placeholder voor video die weergeeft hoe ons product voor de gebruiker werkt.

<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
    <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
    <p>You'll understand what it takes to:</p>
    <ul>
      <li>build great web experiences on mobile devices</li>
      <li>use the tools you need to test performance</li>
      <li>apply your knowledge to your own projects in the future</li>
    </ul>
    <video controls poster="udacity.png">
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
      <p>Sorry your browser doesn't support video. 
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
    <br>
  </div>
</div>

Video`s worden vaak gebruikt om inhoud op een interactievere manier te beschrijven en om een product of een concept te demonstreren.

Door de best practices te volgen kunt u video gemakkelijk in uw website integreren:

  • Voeg een kenmerk controls toe zodat gebruikers de video gemakkelijk kunnen afspelen.
  • Voeg een poster-afbeelding toe zodat gebruikers een voorbeeld van de inhoud kunnen weergeven.
  • Voeg meerdere <source>-elementen toe op basis van ondersteunde videoindelingen.
  • Voeg fall-back-tekst toe zodat gebruikers de video kunnen downloaden als ze deze niet in het venster kunnen afspelen.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

Het gedeelte Afbeeldingen maken

Websites zonder afbeeldingen kunnen saai zijn. Er zijn twee soorten afbeeldingen:

  • Inhoudsafbeeldingen — afbeeldingen die in het document staan en worden gebruikt om extra informatie over de inhoud weer te geven.
  • Stilistische afbeeldingen — afbeeldingen die worden gebruikt om de website mooier te maken. Dit zijn vaak achtergrondafbeeldingen, patronen en kleurovergangen. We bespreken dit in het volgende artikel.

Het gedeelte Afbeeldingen in onze pagina is een verzameling van inhoudsafbeeldingen.

Inhoudsafbeeldingen zijn heel belangrijk om de betekenis van de pagina weer te geven. Vergelijk ze met de afbeeldingen die in krantenartikelen worden gebruikt. De afbeeldingen die we gebruiken zijn foto`s van de lesgevers van het project: Chris Wilson, Peter Lubbers en Sean Bennet.

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

De afbeeldingen zijn ingesteld om aan te passen naar 100% van de breedte van het scherm. Dit werkt goed op apparaten met een smalle viewport, maar minder goed op apparaten met een brede viewport (bijvoorbeeld een desktop). We bespreken dit in het gedeelte over responsive design.

Vaak kunnen mensen geen afbeeldingen weergeven en gebruiken ze een ondersteunende technologie zoals een schermlezer die de gegevens op de pagina parseert en verbaal aan de gebruiker doorgeeft. U moet ervoor zorgen dat al uw inhoudsafbeeldingen een beschrijvende alt-tag hebben die de schermlezer aan de gebruiker kan doorgeven.

Wanneer u alt-tags toevoegt, moet u erop letten dat de alt-tekst de afbeelding zo beknopt mogelijk volledig beschrijft. In onze demo gebruiken we bijvoorbeeld het kenmerk Name: Role, dat genoeg informatie bevat zodat de gebruiker begrijpt dat in dit gedeelte de auteurs en hun functie worden besproken.

Het gedeelte Tabelgegevens toevoegen

Het laatste gedeelte is een eenvoudige tabel die wordt gebruikt om specifieke statistieken over het product weer te geven.

Tabellen mogen alleen worden gebruikt voor tabelgegevens, bijvoorbeeld matrices van informatie.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

Een voettekst toevoegen

De meeste websites hebben een voettekst nodig voor inhoud zoals Algemene voorwaarden, Vrijwaringen, en andere inhoud die niet past in de hoofdnavigatie of in het hoofdinhoud-gebied van de pagina.

Op onze website maken we gewoon een koppeling naar Algemene voorwaarden, een pagina Contact en onze sociale mediaprofielen.

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

Samenvatting

We hebben overzicht van de website gemaakt en we hebben alle belangrijke structurele elementen bepaald. We hebben er ook voor gezorgd dat alle relevante inhoud klaar is en op de juiste plaats staat om aan onze zakelijke behoeften te voldoen.

inhoud

Het is u misschien opgevallen dat de pagina helemaal niet mooi is. Dat is de bedoeling. Inhoud is het belangrijkste aspect van een website en we moesten ervoor zorgen dat we een goede solide informatiearchitectuur en -dichtheid hebben. Dankzij deze gids hebben we een uitstekende basis waarop we kunnen bouwen. In de volgende gids zullen we onze inhoud vormgeven.

De pagina responsief maken

Internet is toegankelijk op tal van apparaten, van telefoons met kleine schermen tot televisies met grote schermen. Elk apparaat biedt eigen unieke voordelen en beperkingen. Als webontwikkelaar wordt van u verwacht dat u voor alle soorten apparaten ondersteuning kunt bieden.

We bouwen een website die werkt op verschillende schermformaten en uiteenlopende apparaten. In het vorige artikel vormden we de informatiearchitectuur van de pagina en maakten we een basisstructuur. In deze gids toveren we onze basisstructuur met inhoud om tot een mooie pagina die responsief is op een groot aantal schermformaten.

Inhoud
Inhoud en structuur
Designed site
Uiteindelijke website

Volgens de principes van Mobile First-webontwikkeling beginnen we met een smalle viewport (vergelijkbaar met een mobiele telefoon) en bouwen we eerst voor die ervaring. Daarna passen we de schaal aan grotere apparaten aan. Dit kan door onze viewport breder te maken en te bepalen of het design en de lay-out er goed uitzien.

We hebben eerder enkele verschillende hoogwaardige ontwerpen gemaakt voor de manier waarop onze inhoud moet worden weergegeven. Nu moeten we ervoor zorgen dat onze pagina zich aanpast aan deze verschillende lay-outs. We doen dit door te bepalen waar we onze breekpunten (een punt waar de lay-out en stijlen veranderen) plaatsen op basis van de manier waarop de inhoud in het schermformaat past.

TL;DR

  • Gebruik altijd een viewport.
  • Begin altijd met een smalle viewport en pas daarna de schaal aan.
  • Plaats uw breekpunten daar waar u de inhoud moet aanpassen.
  • Stel een gedegen visie op van uw lay-out in grote breekpunten.

Voeg een viewport in

Zelfs voor een basispagina moet u altijd een viewport-metatag invoegen. De viewport is het belangrijkste onderdeel dat u nodig heeft om ervaringen op meerdere apparaten te bouwen. Zonder viewport werkt uw website niet goed op een mobiel apparaat.

De viewport vertelt de browser dat de pagina moet worden aangepast om in het scherm te passen. Er zijn veel verschillende configuraties voor uw viewport die u kunt gebruiken zodat u de weergave van de pagina kunt beheren. Standaard raden we het volgende aan:

<meta name="viewport" content="width=device-width, initial-scale=1">

De viewport bevindt zich in de kop van het document en moet slechts eenmaal worden gedeclareerd.

Pas eenvoudige stijl toe

Ons product en bedrijf heeft al erg specifieke richtlijnen voor merk en lettertype die in een stijlgids zijn opgenomen.

Stijlgids

Een stijlgids is een erg handige manier om een goed inzicht te krijgen in de visuele weergave van de pagina en helpt u ervoor te zorgen dat u consistent blijft in het hele design.

Kleuren
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Voeg stilistische afbeeldingen

In de vorige gids voegden we inhoudsafbeeldingen toe. Deze afbeeldingen waren belangrijk voor het verhaal van ons product. Stilistische afbeeldingen zijn afbeeldingen die niet noodzakelijk zijn als onderdeel van de kerninhoud maar die visuele flare toevoegen of de aandacht van de gebruiker op een specifiek gedeelte van de inhoud helpen vestigen.

Een goed voorbeeld hiervan is een kopafbeelding voor de above the fold-inhoud. Deze wordt vaak gebruikt om de gebruiker te overhalen om meer over het product te lezen.

Ontworpen website

Het kan erg eenvoudig zijn om ze in te voegen. In ons voorbeeld wordt deze afbeelding de achtergrond van de kop en passen we deze toe via eenvoudige CSS.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

We hebben een eenvoudige achtergrondafbeelding gekozen die wazig is zodat de aandacht op de inhoud blijft gevestigd en we hebben ingesteld dat deze het hele element bedekt, zodat de hoogte-breedteverhouding ook tijdens het uitrekken blijft behouden.


Stel uw eerste breekpunt in

Het ontwerp ziet er pas slecht uit vanaf een breedte van 600 pixels. In ons voorbeeld is de regel langer dan 10 woorden (de optimale leeslengte) en dat willen we aanpassen.

600 pixels blijkt een goede plaats voor ons eerste breekpunt, want het biedt ons het bereik om elementen te verplaatsen zodat ze beter op het scherm passen. We kunnen dit met behulp van de technologie Mediaquery`s.

@media (min-width: 600px) {

}

Er is meer ruimte op een groter scherm, waardoor u flexibeler kunt zijn in de manier waarop inhoud wordt weergegeven.

In de context van onze productpagina moeten we:

  • De maximale breedte van het ontwerp beperken.
  • De opvulling van elementen aanpassen en de tekstgrootte verkleinen.
  • Het formulier verplaatsen zodat het op een lijn met de kop zweeft.
  • De video rond de inhoud laten zweven.
  • Het formaat van de afbeeldingen verkleinen en ze in een mooier rooster weergeven.

De maximale breedte van het ontwerp beperken

We hebben gekozen voor slechts twee hoofdlay-outs: een smalle viewport en een brede viewport, waardoor ons bouwproces aanzienlijk eenvoudiger is.

We hebben ook beslist om aflopende gedeelten te maken in de smalle viewport die ook aflopend blijven in het brede viewport. Dit betekent dat we de maximale breedte van het scherm moeten beperken zodat de tekst en alinea`s op heel brede schermen niet één lange regel worden. We hebben ervoor gekozen dat dit punt op ongeveer 800 pixels ligt.

Om dit te bereiken moeten we de breedte beperken en de elementen centreren. We moeten rond elk groot gedeelte een container maken en een marge: auto toepassen. Hierdoor kan het scherm groter worden maar blijft de inhoud gecentreerd en op een maximumgrootte van 800 pixels.

De container is een eenvoudige div in het volgende formulier:

<div class="container">
...
</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

De vulling aanpassen en de tekstgrootte verkleinen

In de smalle viewport hebben we niet veel ruimte om inhoud weer te geven, waardoor de grootte en het gewicht van de typografie vaak aanzienlijk worden verkleind om op het scherm te passen.

Bij een bredere viewport moeten we er rekening mee houden dat de gebruiker waarschijnlijk een groter scherm gebruikt, maar er verder van verwijderd is. Om de leesbaarheid van de inhoud te vergroten kunnen we de grootte en het gewicht van de typografie vergroten en bovendien de vulling aanpassen zodat afzonderlijke gebieden duidelijker opvallen.

Op onze productpagina verhogen we de vulling van de elementen in het gebied door in te stellen dat deze altijd 5% van de breedte behoudt. Bovendien vergroten we de grootte van de koppen voor elk gedeelte.

#headline {
  padding: 20px 5%;
}

Elementen aan een brede viewport aanpassen

Onze smalle viewport was een gestapelde lineaire weergave. Elk groot gedeelte en de inhoud ervan werd weergegeven in volgorde van boven naar beneden.

Een brede viewport biedt ons extra ruimte zodat we de inhoud op een optimale manier voor dat scherm kunnen weergeven. Voor onze productpagina betekent dit dat we volgens onze IA:

  • Het formulier naar de kopinformatie kunnen verplaatsen.
  • De video naar de rechterkant van de belangrijke punten kunnen verplaatsen.
  • De afbeeldingen naast elkaar kunnen plaatsen.
  • De tabel kunnen uitbreiden.

Het Formulierelement laten zweven

De smalle viewport biedt ons veel minder horizontale ruimte om elementen op het scherm te plaatsen.

Om op een efficiëntere manier gebruik te maken van de horizontale ruimte van het scherm moeten we de lineaire flow van de kop doorbreken en het formulier en de lijst naast elkaar plaatsen.

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}
#headline {
  padding: 20px 5%;
}

Het Video-element laten zweven

De video in de interface met smalle viewport is ontworpen zodat deze de volledige breedte van het scherm inneemt en zich achter de lijst van belangrijke functies bevindt. In een brede viewport wordt de video te groot en ziet deze er niet goed uit wanneer we deze naast onze lijst van functies plaatsen.

Het video-element moet in een brede viewport uit de verticale flow van de smalle viewport worden gehaald en naast de lijst met opsommingstekens van inhoud worden weergegeven.

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

De afbeeldingen naast elkaar plaatsen

De afbeeldingen in de interface met de smalle viewport (vooral mobiele apparaten) zijn ingesteld zodat ze de volledige breedte van het scherm innemen en verticaal worden gestapeld. Dit wordt niet goed aangepast in een brede viewport.

Opdat de afbeeldingen er goed uitzien in een brede viewport, worden ze aangepast tot 30% van de breedte van de container en horizontaal weergegeven (in plaats van verticaal in de smalle viewport). We voegen ook randradius en schaduw voor vak toe zodat de afbeeldingen er aantrekkelijker uitzien.

#section2 div img {
   width: 30%;
   margin: 1%;
   box-sizing: border-box;
   border-radius: 50% 50%;
   box-shadow: black 0px 0px 5px;
 }

Afbeeldingen responsief voor dpi maken

Wanneer u afbeeldingen gebruikt, moet u rekening houden met de grootte van de viewport en de dichtheid van de weergave.

Het internet werd gebouwd voor schermen met 96 dpi. Toen de mobiele apparaten werden geïntroduceerd, zagen we een aanzienlijke verhoging van de pixeldichtheid van schermen, waarbij we geen rekening houden met Retina-schermen op laptops. Afbeeldingen die zijn gecodeerd voor 96 dpi zien er vaak niet uit op een apparaat met veel dpi.

We hebben een oplossing die nog niet op grote schaal wordt gevolgd. Voor browsers die het ondersteunen, kunt u een afbeelding met hoge dichtheid weergeven op een scherm met hoge dichtheid.

<img src="photo.png" srcset="photo@2x.png 2x">

Tabellen

Het is heel moeilijk om tabellen juist weer te geven op apparaten met een smalle viewport en u moet er bijzondere aandacht aan besteden.

In een smalle viewport raden we u aan om uw tabel in twee rijen te maken, waarbij de kop en cellen in een rij worden omgezet om de kolomvorm te vormen.

Op onze website moesten we een extra breekpunt maken voor de tabelinhoud alleen. Wanneer u eerst voor een mobiel apparaat bouwt, is het moeilijker om toegepaste stijlen ongedaan te maken. We moeten dus de tabel-CSS van de smalle viewport uit de CSS van de brede viewport halen. We verkrijgen dan een duidelijke en consistente onderbreking.

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

Afronden

GEFELICITEERD. Wanneer u dit leest, heeft u uw eerste eenvoudige landingspagina voor een product gemaakt die op veel verschillende apparaten, modellen en schermformaten werkt.

Als u deze richtlijnen volgt, maakt u een goed begin:

  1. Maak een basis-IA en zorg dat u eerst de inhoud en dan uw code begrijpt.
  2. Stel altijd een viewport in.
  3. Maak uw basiservaring volgens een aanpak voor mobiele apparaten eerst.
  4. Als u uw mobiele ervaring heeft, maakt u de weergave breder tot deze niet meer juist is en stelt u uw breekpunt daar in.
  5. Blijf herhalen.