Pierwsza witryna na różne urządzenia

Tworzenie interfejsów działających na różnych urządzeniach nie jest tak trudne, jak się wydaje. W tym przewodniku stworzymy przykładową stronę docelową o usłudze (kursie CS256 Tworzenie witryn mobilnych) działającą bez problemów na wszystkich rodzajach urządzeń.

różne urządzenia z ostateczną wersją projektu

Budowanie stron z myślą o wielu urządzeniach z różnymi możliwościami, rozmiarami ekranów i metodami interakcji może sprawiać wrażenie zadania wymagającego, a nawet niemożliwego.

Tworzenie w pełni elastycznych witryn nie jest jednak tak trudne, jak sądzisz – przekonasz się o tym, wykonując pierwsze kroki z tego przewodnika. Podzieliliśmy go na dwa proste etapy:

  1. Definiowanie architektury informacji (zwykle określanej jako AI) oraz struktury strony. 2. Dodawanie elementów wizualnych, by strona była elastyczna i dobrze wyglądała na wszystkich urządzeniach.

Tworzenie treści i struktury

Treści to najważniejszy element każdej witryny. Nasz projekt przygotujemy pod ich kątem oraz zadbamy, by układ witryny nie wpływał na jej zawartość. W tym przewodniku najpierw określimy potrzebne treści, na ich podstawie opracujemy strukturę stron, a potem zaprezentujemy stronę w prostym układzie liniowym, która dobrze wygląda zarówno w wąskim, jak i w szerokim widocznym obszarze.

Tworzenie struktury strony

Ustaliliśmy, że potrzebujemy tych elementów:

  1. Obszar z ogólnym opisem oferowanego przez nas kursu CS256 Tworzenie witryn mobilnych
  2. Formularz do zbierania informacji od użytkowników zainteresowanych kursem
  3. Dokładny opis i film
  4. Obrazy przedstawiające kurs w praktyce
  5. Tabelę danych, które potwierdzają, że warto odbyć kurs

TL;DR

  • Najpierw ustal, jakich treści potrzebujesz.
  • Naszkicuj architekturę informacji (AI) w obszarze wąskim i szerokim.
  • Utwórz schematyczny widok strony z zawartością, ale bez stylów.

Opracowaliśmy też wstępną architekturę informacji oraz układy w wąskim i szerokim widocznym obszarze.

AI w obszarze wąskim AI w obszarze szerokim

To wszystko można łatwo przekształcić w główne sekcje schematycznej strony, której będziemy używać w tym projekcie.

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

Dodawanie treści do strony

Podstawowa struktura witryny jest gotowa. Wiemy już, jakie sekcje są potrzebne, co się w nich znajdzie i gdzie umieścimy je w ogólnej architekturze informacji. Możemy zacząć tworzenie witryny.

Tworzenie nagłówka i formularza

Nagłówek i formularz kontaktowy to kluczowe komponenty strony. Użytkownik musi od razu je widzieć.

W nagłówku umieść prosty tekst z opisem kursu:

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

Musimy też utworzyć formularz. Będzie on prosty – pozwoli użytkownikowi podać imię i nazwisko, numer telefonu oraz dogodny termin, w którym możemy zadzwonić.

Wszystkie formularze powinny mieć etykiety i elementy zastępcze, które pomagają użytkownikom ustawić fokus i zorientować się, jakie dane należy podać, a narzędziom ułatwiającym dostęp – poznać strukturę formularza. Atrybut name nie tylko przesyła wartość z formularza na serwer, ale też daje ważne wskazówki przeglądarce, jak automatycznie wypełnić formularz za użytkownika.

Dodamy typy semantyczne, by przyspieszyć i uprościć wpisywanie wartości przez użytkowników urządzeń mobilnych. Na przykład podczas podawania numeru telefonu użytkownikowi powinna wyświetlić się klawiatura numeryczna.

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

Tworzenie sekcji z filmem i informacjami

Sekcja z filmem i informacjami będzie zawierać nieco bardziej szczegółowe treści. Znajdą się tam lista punktowana z zaletami naszej usługi oraz element zastępczy filmu pokazującego korzyści, jakie odniesie użytkownik.

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

Filmy często wykorzystuje się do przedstawienia treści w bardziej interaktywny sposób oraz zaprezentowania produktu lub pomysłu.

Aby bez problemów umieścić film na stronie, postępuj zgodnie ze sprawdzonymi metodami:

  • Dodaj atrybut controls, by ułatwić użytkownikom odtwarzanie filmu.
  • Dodaj obraz poster, na którym widzowie zobaczą podgląd treści.
  • Dodaj wiele elementów <source> w zależności od obsługiwanych formatów wideo.
  • Dodaj tekst zastępczy, który pozwoli użytkownikom pobrać film, jeśli nie będą mogli odtworzyć go w oknie.
<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>

Tworzenie sekcji z obrazami

Witryny pozbawione grafiki mogą trochę nudzić. Na stronach występują dwa typy obrazów:

  • Obrazy treści – są częścią dokumentu i zawierają dodatkowe informacje związane z jego treścią.
  • Obrazy stylistyczne – poprawiają wygląd strony. Należą do nich obrazy tła, wzory i gradienty. Omówimy je w następnym artykule.

Sekcja z obrazami na naszej stronie to kolekcja obrazów treści.

Obrazy treści odgrywają kluczową rolę w przekazywaniu sensu strony. Potraktuj je jak zdjęcia umieszczane w artykułach w gazecie. Grafiki, których użyjemy, to zdjęcia osób prowadzących kurs – Chrisa Wilsona, Petera Lubbersa i Seana Benneta.

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

Ustawiliśmy skalowanie obrazów do 100% szerokości ekranu. Takie rozwiązanie działa dobrze na urządzeniach z wąskim widocznym obszarem, ale gorzej na tych z obszarem szerokim (np. na komputerach). Zajmiemy się tym w artykule o projektowaniu elastycznym.

Wiele osób nie może oglądać obrazów i często korzysta z takich technologii wspomagających jak czytnik ekranu, który analizuje dane na stronie i przekazuje je użytkownikowi głosowo. Musisz upewnić się, że wszystkie obrazy treści mają opisowy tag alt, którego zawartość czytnik ekranu będzie mógł na głos odczytać użytkownikowi.

Przy dodawaniu tagów alt postaraj się, by tekst tagu był jak najbardziej zwięzły i w pełni opisywał obraz. W naszym przykładzie atrybut ma format Imię i nazwisko: rola. To dość informacji, by użytkownik zrozumiał, że sekcja jest poświęcona autorom i ich pracy.

Dodawanie sekcji z tabelą danych

Ostatnia sekcja to prosta tabela z konkretnymi statystykami związanymi z naszą usługą.

W tabelach umieszczaj tylko dane tabelaryczne, tzn. zestawy informacji w wierszach i kolumnach.

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

Dodawanie stopki

Stopka na większości stron zawiera takie informacje jak warunki korzystania z usługi, wyłączenia odpowiedzialności i inne, które nie należą do głównych elementów nawigacyjnych ani podstawowego obszaru treści strony.

Na naszej stronie podamy tylko linki do warunków korzystania z usługi, strony kontaktowej oraz profilów w mediach społecznościowych.

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

Podsumowanie

Utworzyliśmy szkic strony i określiliśmy poszczególne główne elementy struktury. Przygotowaliśmy i rozmieściliśmy wszystkie odpowiednie treści zgodnie z naszymi celami biznesowymi.

zawartość

Na razie strona wygląda fatalnie, ale to celowe. Treści to najważniejszy element każdej witryny. Po nich należy opracować właściwą architekturę informacji i układ elementów. Ten przewodnik pozwolił nam stworzyć solidną podstawę do dalszej rozbudowy witryny. W następnym dodamy style do treści.

Nadawanie stronie elastyczności

Internet jest dostępny na szerokiej gamie urządzeń – od telefonów z małymi ekranami aż po ogromne telewizory. Każde urządzenie ma własne, unikalne zalety i ograniczenia. Jako programista witryn internetowych musisz postarać się, by działały one na wszystkich rodzajach urządzeń.

Tworzymy witrynę, która działa na ekranach o różnym rozmiarze i wielu rodzajach urządzeń. W poprzednim artykule opracowaliśmy architekturę informacji na stronie i przygotowaliśmy podstawową strukturę. W tym przewodniku przekształcimy naszą podstawową strukturę i treść w atrakcyjną stronę, która działa elastycznie na ekranach rozmaitej wielkości.

Treść
Treść i struktura
Designed site
Gotowa strona

Zgodnie z zasadą najpierw mobilne zaczynamy od wąskiego widocznego obszaru (takiego jak na telefonach komórkowych) i budujemy dostosowany do niego interfejs. Następnie skalujemy stronę na potrzeby większych urządzeń. Stopniowo poszerzamy widoczny obszar, jednocześnie oceniając, czy projekt i układ wyglądają poprawnie.

Wcześniej zaprojektowaliśmy dwa ogólne sposoby prezentacji naszych treści. Teraz tak dopracujemy stronę, by odpowiednio wyświetlała się w obu tych różnych układach. Sprawdzimy, jak treści pasują do rozmiaru ekranu, i we właściwy sposób rozmieścimy punkty graniczne – czyli takie, w których układ i style się zmieniają.

TL;DR

  • Zawsze używaj tagu viewport.
  • Zawsze zaczynaj od wąskiego widocznego obszaru i zwiększaj skalę.
  • Gdy musisz dostosować wygląd treści, ustaw odpowiednio punkty graniczne.
  • Stwórz ogólną wizję układu strony obejmującą główne punkty graniczne.

Dodaj viewport

Nawet do prostej strony zawsze musisz dodać metatag viewport. To najważniejszy komponent przy tworzeniu interfejsów działających na różnych rodzajach urządzeń. Bez niego witryna nie będzie dobrze działać na urządzeniach mobilnych.

Tag viewport informuje przeglądarkę, że stronę trzeba przeskalować, dopasowując do rozmiarów ekranu. Jest wiele konfiguracji, które możesz określić w tym tagu, by sterować wyświetlaniem strony. Jako domyślne zalecamy to ustawienie:

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

Tag viewport należy do nagłówka dokumentu. Wystarczy zadeklarować go tylko raz.

Zastosuj prostą stylizację

W naszej firmie i usługach stosujemy konkretne cechy marki i parametry czcionek określone w przewodniku po stylach.

Przewodniku po stylach

Przewodnik po stylach pozwala ogólnie zapoznać się ze stylistyką stron i zadbać o jej spójność w całym projekcie.

Kolory
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Dodaj obrazy stylistyczne

W poprzednim przewodniku dodaliśmy obrazy treści, czyli grafiki, które zawierają ważne informacje o naszej usłudze. Obrazy stylistyczne nie są niezbędną częścią głównych treści, ale tworzą oprawę wizualną i pomagają skierować uwagę użytkownika na konkretne informacje.

Dobry przykład to grafika w nagłówku ilustrująca treści widoczne na ekranie po wejściu na stronę. Często zachęca użytkownika, by dowiedział się więcej o usłudze.

Zaprojektowana strona

Dodawanie takich obrazów jest bardzo łatwe. My na przykład umieścimy tło w nagłówku, używając do tego stylu CSS.

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

Wybraliśmy prosty obraz tła, który jest rozmazany, by nie odwracał uwagi od treści. Ustawienie rozmiaru to cover, dzięki czemu grafika zawsze rozciąga się na cały widok, zachowując prawidłowy współczynnik proporcji.


Ustaw swój pierwszy punkt graniczny

Projekt zaczyna wyglądać źle przy szerokości około 600 pikseli. W naszym przypadku długość wiersza przekracza wtedy dziesięć wyrazów (optymalna długość podczas czytania), dlatego w tym punkcie wprowadzimy zmiany.

600 pikseli to dobre miejsce na pierwszy punkt graniczny, który pozwala nam zmienić położenie elementów, by lepiej pasowały do ekranu. Możemy do tego użyć technologii nazywanej zapytaniami o media.

@media (min-width: 600px) {

}

Dzięki swoim rozmiarom większy ekran daje więcej swobody przy wyborze sposobu prezentowania treści.

W kontekście naszej strony o usłudze musimy wykonać te czynności:

  • Ograniczyć maksymalną szerokość projektu.
  • Zmienić odstępy między elementami i zmniejszyć rozmiar tekstu.
  • Przenieść formularz na ten sam poziom co treść w nagłówku.
  • Przesunąć film, tak by znalazł się obok informacji.
  • Zmniejszyć rozmiar obrazów i ładnie je ułożyć.

Ograniczyć maksymalną szerokość projektu

Zdecydowaliśmy się przygotować tylko dwa główne układy – obszar wąski i szeroki, co znacznie upraszcza proces tworzenia.

Postanowiliśmy też utworzyć sekcje sięgające samej krawędzi zarówno w wąskim, jak i w szerokim widocznym obszarze. To oznacza, że musimy ograniczyć maksymalną szerokość ekranu, by tekst i akapity nie rozciągnęły się na bardzo szerokich ekranach w pojedyncze, długie wiersze. Będzie ona wynosić około 800 pikseli.

Aby to osiągnąć, ograniczymy szerokość elementów i wyśrodkujemy je. Musimy utworzyć kontener wokół każdej głównej sekcji i zastosować parametr margin: auto. Dzięki temu nawet na większym ekranie treści pozostaną wyśrodkowane, a ich rozmiar nie przekroczy 800 pikseli.

Kontenerem będzie prosty element "div" w tej postaci:

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

Zmiana odstępów i zmniejszanie rozmiaru tekstu

Obszar wąski oferuje niewiele miejsca na wyświetlanie treści, więc czcionka często ma bardzo mały rozmiar i grubość, by pasowała do ekranu.

Przy szerszym widocznym obszarze trzeba wziąć pod uwagę to, że użytkownik jest dalej od ekranu. Aby poprawić czytelność treści, możemy zwiększyć rozmiar i grubość czcionki oraz zmienić odstępy, by poszczególne obszary bardziej się wyróżniały.

Na naszej stronie o usłudze powiększymy odstępy między sekcjami, ustawiając je na 5% szerokości. Zwiększymy też rozmiar nagłówka każdej sekcji.

#headline {
  padding: 20px 5%;
}

Dostosowywanie elementów do szerokiego widocznego obszaru

W wąskim widocznym obszarze elementy wyświetlają się w linii, jeden nad drugim. Każda główna sekcja i znajdujące się w niej treści są ułożone kolejno od góry do dołu.

Obszar szeroki zawiera dodatkowe miejsce, które można wykorzystać do optymalnego zaprezentowania treści na ekranie. To w przypadku naszej strony o usłudze oznacza, że zgodnie z AI możemy:

  • Przesunąć formularz, tak by znalazł się obok informacji w nagłówku.
  • Umieścić film na prawo od najważniejszych punktów.
  • Ułożyć obrazy obok siebie.
  • Poszerzyć tabelę.

Przenoszenie elementu z formularzem

Wąski widoczny obszar oznacza, że mamy znacznie mniej dostępnego miejsca w poziomie, by swobodnie ułożyć elementy na ekranie.

Aby skuteczniej wykorzystać tę przestrzeń, musimy zrezygnować z liniowego położenia nagłówka i umieścić formularz obok listy informacji.

#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%;
}

Przenoszenie elementu z filmem

Film w interfejsie z wąskim widocznym obszarem ma pełną szerokość ekranu i wyświetla się pod listą głównych zalet usługi. W obszarze szerokim przeskalowany film stanie się zbyt duży i będzie źle wyglądał poniżej listy.

Na szerszym ekranie element z filmem trzeba usunąć z pionowego układu obszaru wąskiego i umieścić obok listy punktowanej.

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

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

Układanie obrazów obok siebie

Obrazy w interfejsie z wąskim widocznym obszarem (najczęściej na urządzeniach mobilnych) mają pełną szerokość ekranu i są ułożone w pionie. Po przeskalowaniu do obszaru szerokiego nie wyglądają dobrze.

Aby poprawić ich wygląd w szerokim widocznym obszarze, przeskalujemy je do 30% szerokości kontenera i ułożymy w poziomie (zamiast w pionie jak w wąskim widocznym obszarze). Zaokrąglimy też ich obramowanie i dodamy cień, by prezentowały się ciekawiej.

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

Dopasowywanie obrazów do liczby DPI

Jeśli korzystasz z obrazów, weź pod uwagę rozmiar widocznego obszaru i gęstość wyświetlacza.

Dawniej strony internetowe były przeznaczone na ekrany o gęstości 96 dpi. Wraz z pojawieniem się urządzeń mobilnych znacznie wzrosła gęstość pikseli na ekranach (nie wspominając o wyświetlaczach klasy Retina w laptopach). W efekcie obrazy zakodowane na 96 dpi często wyglądają fatalnie na urządzeniach z większą liczbą DPI.

Mamy na to rozwiązanie, które nie jest jeszcze powszechnie stosowane. W przeglądarkach, które mają tę funkcję, na wyświetlaczu o wysokiej gęstości można pokazywać odpowiednio dostosowane obrazy.

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

Tabele

Tabele bardzo trudno przedstawić prawidłowo na urządzeniach z wąskim widocznym obszarem, dlatego trzeba dobrze je zaplanować.

W takiej sytuacji zalecamy przekształcenie tabeli w dwie kolumny oraz przeniesienie nagłówków i komórek do kolejnych wierszy, by uzyskać układ pionowy.

Na naszej stronie utworzymy dodatkowy punkt graniczny specjalnie na potrzeby tabeli. Gdy najpierw tworzysz wersję na urządzenia mobilne, trudniej jest cofnąć zastosowane style, dlatego musimy wyłączyć style CSS tabeli w obszarze wąskim ze stylów CSS w obszarze szerokim. Dzięki temu uzyskamy wyraźny i spójny punkt graniczny.

@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;
  }
}

Podsumowanie

GRATULACJE. Skoro to czytasz, Twoja pierwsza prosta strona docelowa o usłudze jest już gotowa i działa na szerokiej gamie urządzeń bez względu na rozmiary i kształt ekranu.

Na początek zawsze warto postępować zgodnie z tymi wskazówkami:

  1. Zanim zaczniesz pisać kod, stwórz prostą AI i zapoznaj się ze strukturą treści.
  2. Pamiętaj, by ustawić tag viewport.
  3. Utwórz podstawowy interfejs zgodnie z zasadą najpierw strona mobilna.
  4. Po przygotowaniu interfejsu na urządzenia mobilne zwiększaj szerokość wyświetlania, aż strona przestanie dobrze wyglądać. W tym miejscu dodaj punkt graniczny.
  5. W razie potrzeby kontynuuj te czynności.