Browse By

arturmaciocha.pl i moja strona stały się responsywne.

Jakiś czas temu miałem przyjemność uczestniczyć w szkoleniu z serii DevMeetings na temat responsywności stron. Wykorzystując tam zdobytą wiedzę przebudowałem stronę Artura Maciochy w podejściu Mobile First i poprawiłem reguły CSS mojej strony, tak aby dobrze wyglądały na smartfonach i tabletach.

 

Dlaczego Mobile First?

Mobile First to podejście w którym zaczynamy budować stronę, od najmniejszych urządzeń. Najpierw starsze komórki o szerokości ekranu 320px, następnie dodajemy reguły CSS dla tabletów i na końcu desktopy. Dzięki temu strona ładuje się szybciej na urządzeniach mobilnych gdzie przypuszczalnie mamy wolniejsze łącze 3G. Domowe czy firmowe wi-fi komputerów z większymi ekranami spokojnie poradzi sobie z paroma regułami więcej do załadowania. Takie podejście pozwala również użyć mniejszych grafik dla małych ekranów, a większe grafiki przeznaczone na większe ekrany nie są ładowane przez nasze smartfony. Sumaryczna ilośc lini CSS również jest mniejsza w takim podejściu.

 

Moja strona: adrianpietrzyk.pl

Został zaktualizowany tylko plik CSS. Strona jest bardzo prosta, więc wystarczyło dodać tylko jeden breakpoint (punkt w szerokości strony dla której przeglądarka doczytuje dodatkowe reguły CSS).

adrian-rwd

 

Strona której użyłem do prezentacji responsywności na paru urządzeniach: http://ami.responsivedesign.is/