Dlaczego musisz zacząć ćwiczyć programowanie z myślą o urządzeniach mobilnych

Jeśli próbowałeś swoich sił w kodowaniu responsywnej strony internetowej, napotkałeś następujący problem: zmieniasz jedną małą, prostą właściwość CSS, która zmienia układ na różnych rozmiarach ekranu.

Zmusza to do sprawdzenia i ponownego sprawdzenia, czy najnowsza wartość depozytu zabezpieczającego nie zniszczyła witryny na tablety lub telefony. Oczywiście możesz łatwo naprawić ten problem, stosując określone nadpisania dla różnych rozmiarów ekranu. Ale w trakcie projektu pliki CSS są wypełnione wyjątkami od problemów. Następnie istnieją wyjątki dla wyjątków, które później mają wyjątek dla wyjątku wyjątku.

Szybko się komplikuje, a Ty walczysz z własnym kodem, pochłaniając wiele godzin projektu i powoli tracąc zdrowie psychiczne.

Ale nie bój się! Mobile First Development jest tutaj, aby uchronić Cię przed problemami, wyjątkami i powolnym ładowaniem stron.

Co dzieje się z programowaniem na komputer stacjonarny?

Początkowo programowana na komputerową wersję responsywnej strony internetowej jest sprzeczna z naturalnym przepływem dokumentu CSS. Pliki CSS są odczytywane liniowo od góry do dołu, więc każda właściwość CSS zostaje nadpisana przez nowe style zastosowane w dalszej części dokumentu.

Programując na duże ekrany, a następnie dodając style mobilne w dalszej części dokumentu CSS, pojawiają się dwa problemy:

1. Wszelkie zmiany wprowadzone w stylizacji na komputery stacjonarne (wyższe w dokumencie) zmienią sposób wyświetlania witryny mobilnej, jeśli nowy styl nie zostanie wyraźnie nadpisany dla witryny mobilnej. Tworzenie dodatkowych linijek frywolnego CSS pochłania wiele godzin projektowych i jest sprzeczne z zasadą kodu DRY.
2. Urządzenia mobilne zaczynają wczytywać stronę od renderowania wszystkich stylów pulpitu. Po zakończeniu renderowania rozbudowanej wersji na komputery stosowana jest stylizacja mobilna. To ładuje dodatkowe zasoby, co oznacza, że ​​urządzenia mobilne potrzebują więcej czasu na dostarczenie w pełni załadowanej strony.

W tym miejscu pojawia się rozwój technologii mobilnych, aby uratować sytuację. Ta metoda zachęca do poprawnej kolejności CSS (od komórki do komputera od góry do dołu), zapewniając, że urządzenie stosuje potrzebne informacje tylko wtedy, gdy ich potrzebuje.

Przyjrzyjmy się niektórym rozwiązaniom tych problemów.

Jak wygląda renderowanie na urządzeniach mobilnych

Obrazy są z pewnością największymi wkładami w rozmiar witryny, a ich pobranie trwa wiecznie, jeśli urządzenie nie jest podłączone do Wi-Fi. Usunięcie dodatkowych obrazów ze stylizacji na telefony komórkowe to najlepsza rzecz, jaką możesz zrobić, aby poprawić szybkość witryny.

Przejście na telefon komórkowy oznacza wyświetlanie tylko kilku małych obrazów na urządzeniach mobilnych. W poniższym przykładzie stworzyłem ten sam dokument CSS zaimplementowany zarówno metodami desktopowymi, jak i mobile-first.

Jeśli używasz metody desktop-first, urządzenia mobilne będą renderować się w następującej kolejności:

1. Przeczytaj pierwszy styl.
2. Pobierz duży (wkrótce zastąpiony) obraz.
3. Renderuj element.
4. Przeczytaj styl mobilny.
5. Pobierz mały obraz (zastępując duży).
6. Ponownie wyrenderuj element.

Jeśli jednak używana jest metoda mobile-first, urządzenie renderuje w następującej kolejności:

1. Przeczytaj pierwszy styl.
2. Pobierz mały obraz.
3. Pomiń stylizację tylko na komputer (ponieważ nie ma zastosowania).
4. Renderuj element raz.

Witryna nie tylko ma mniej kroków do wykonania przed wyświetleniem gotowej strony w przeglądarce, ale także usuwa dodatkowe wywołania niepoważnych obrazów, które nie są używane!

Pamiętaj, że w przypadku programowania zoptymalizowanego pod kątem urządzeń mobilnych zapytania o media zmienią się z maksymalnej szerokości na minimalną. Zapytania o maksymalnej szerokości będą dotyczyć wszystkich urządzeń mniejszych niż 1000 pikseli, a zapytania o minimalnej szerokości będą dotyczyć urządzeń większych niż 1000 pikseli.

Zamiana na szerokość minimalną tworzy barierę, która uniemożliwia nowemu stylowi, który piszemy dla większych urządzeń, wpływ na wygląd witryny na mniejszych urządzeniach. Zwiększa to szybkość ładowania responsywnych witryn internetowych, zapewniając jednocześnie, że wszelkie zmiany w zapytaniu o media tylko na komputery nie wpłyną na układ mobilny. Jest to korzystne dla wszystkich!

Przestań walczyć ze sobą

Załóżmy, że pracujemy nad projektem, którego plik CSS jest zakomentowany w trzech głównych częściach: komputer, tablet i telefon komórkowy.

Niestety zastosowaliśmy metodę desktop-first i strona ładuje się powoli na telefonach. Próbowaliśmy zmniejszać rozmiary obrazów, dodawać pamięć podręczną przeglądarki, a nawet minimalizować kod HTML (brutto). Ale witryna nadal działa w przypadku osób, które odwiedzają ją po raz pierwszy, i wymaga naprawy.

Ponieważ zbudowaliśmy naszą witrynę metodą desktop-first, nasz CSS będzie wyglądał tak dla naszego elementu .header:

Naszym celem jest zmniejszenie ilości stylizacji wysyłanych na telefon komórkowy. Na początek musimy zrobić spis tego, co jest zastosowane do elementu, zwracając uwagę, kiedy nadpisujemy własne style.

Najpierw przejdźmy do podejścia mobile-first. Uczynimy naszą domyślną stylizację mobilną, która nie wymaga zapytania o media (uwaga: nie rób tego w środowisku produkcyjnym, spowoduje to uszkodzenie witryny i sprawi, że Twoi klienci będą zrzędliwi).

Przyjrzyjmy się ponownie naszym zdjęciom, ponieważ ma to największy wpływ na szybkość naszej witryny.

Ponieważ nie ładujemy tła na urządzeniach mobilnych, możemy usunąć tę właściwość. Obrazy dla większych urządzeń dodamy później, gdy będą rzeczywiście potrzebne. To samo dotyczy nieruchomości typu margin-bottom, pozostawiając nam tylko dwie nieruchomości, które faktycznie wymagają aplikacji mobilnej!

Przechodząc do sekcji tabletu, musimy przenieść atrybuty tła i dopełnienie ze stylizacji pulpitu do stylizacji tabletu, ponieważ tablet jest następną sekcją, która zostanie wyrenderowana.

Pamiętaj, naszym celem jest zastąpienie właściwości tylko wtedy, gdy ulegnie zmianie i dodanie nowych właściwości tylko wtedy, gdy zmiana musi nastąpić, jak pokazano na poniższym obrazku:

Dużo lepiej! Badając, w jaki sposób urządzenie mobilne renderuje nasz świeżo zoptymalizowany kod CSS, szybko staje się jasne, jak duży wpływ na rozwój zorientowany na urządzenia mobilne ma mniejsze urządzenia w porównaniu z metodą zorientowaną na komputer.

Pracuj mądrzej, nie ciężej

Tworzenie z myślą o komputerach stacjonarnych stwarza więcej problemów niż naprawia. „Zmiana na metodę programowania zoptymalizowaną pod kątem urządzeń mobilnych pozwala pracować mądrze, a nie ciężko. ”

Tworząc witryny responsywne, pamiętaj, że domyślnie wyświetli się wszystko, co nie znajduje się w zapytaniu o media. Dzięki temu, że domyślna (bez zapytania o media) stylizacja jest dostosowana do urządzeń mobilnych, umożliwiamy przesyłanie jak najmniejszej ilości informacji do urządzenia, na które najłatwiej wpływa rozmiar stron internetowych.

Komputery stacjonarne i tablety są podłączone do szybkiego połączenia internetowego przez 99,999% czasu, co pozwala na przesyłanie dużych ilości informacji z dużą prędkością. Telefony najczęściej ładują informacje przez wolne połączenia internetowe. Dostosowanie arkuszy stylów do najbardziej wrażliwych urządzeń umożliwia dostarczanie klientom najlepszej możliwej strony internetowej.