Zaczynamy od zabawy z naszym modułem postów na blogu, bawiąc się spacjami. Dodajemy również mały kolorowy kwadrat w lewym górnym rogu modułu, wizualne oznaczenie rodzaju treści.
Następną zmianą, którą wprowadzamy, jest zmniejszenie niektórych zewnętrznych luk przy węższych rozmiarach ekranu. Na szerokich ekranach zawartość ma 80% szerokości (10% szerokości krawędzi), ale na mniejszych ekranach (krawędzie o szerokości 5%) wydaje się lepsze wrażenie.
Dodajemy małe przejście, gdy trafi się zapytanie o media, co może być naprawdę zabawną sztuczką projektanta. Podoba mi się to w tym filmie, ale ostatecznie zostało to wyciągnięte z projektu. Może się zacinać, gdy na stronie jest dużo więcej treści i raczej rozprasza.
Zmieniamy nasz system siatki, aby mieć punkt przerwania o najmniejszym rozmiarze. To bardzo proste, po prostu przestajemy unosić kolumny i sprawiamy, że są width: 100%;Yay, bo nie zastanawiamy się zbytnio nad siatkami! Po drodze walczymy z pewnymi problemami ze specyfiką.
Otwieramy prawdziwy symulator iOS, aby sprawdzić sieć działającą na „prawdziwym” urządzeniu mobilnym. Trochę trudno nam znaleźć odpowiedni metatag, ale ostatecznie trafiamy na właściwy z CSS-Tricks.com. To działa! Ale oczywiście mamy pewne problemy z pozycjonowaniem, które musimy rozwiązać. Dla przypomnienia, ten metatag to:
Majstrujemy przy odstępach i wymiarach, aż wszystko będzie dobrze. Pod koniec wszystko wygląda całkiem nieźle!