O tworzeniu mobilnych stron

2

Telefony, palmtopy czy nawet netbooki. Te czasem wymagają jakiegoś szybkiego, prostego, a najważniejsze: taniego dostępu do internetu. Niestety, nie wszędzie jeszcze można bez ograniczeń ściągać setki kilobajtów na wygenerowanie strony. Strona mobilna, czyli taka, która spokojnie zadowoli nasz mały ekran. To taka, która nie zje nam całej przepustowości i to taka, która nie zje całej pamięci urządzenia.

Trzeba trzymać się jednak kilku podstawowych zasad przy tworzeniu takich stron. Aby żyło się lepiej.

Minimalizm i przejrzystość kodu

Może już nie tyle jest to must-have co kiedyś w przypadku stron tworzonych na WAP, ale jednak zgodność i przejrzystość trzeba zachować. Co to daje?

  • Strona jest prosta, łatwa w obsłudze i przejrzysta
  • Szybkość w dostępie do strony i niskie koszty
  • Mniejsze prawdopodobieństwo błędnego renderingu i innych wszelkich błędów

A jak to osiągnąć? Nie zalewaj znaczników stylami, klasami. Jeden format stylu dla każdego znaczniku w CSS zupełnie wystarczy. Chyba lepiej wygląda kod:

<div>
<form action="s.php" method="GET">
<p>Wpisz frazę:</p>
<input type="text" />
<input type="submit" value="OK!" />
</form>
</div>

i CSS dla niego na podobieństwo:

.sB{
background-color:#FFF;
}
.sB input{
background-color:#EEE;
border:1px solid #DDD;
color:#111;
}
.sB p{
color:#000;
}

od czegoś takiego:

<div class="SeachDiv">
<form style="background-color: #fff" action="wyszukiwarka.php" method="GET">
<p style="color:#000">Wpisz frazę:</p>
<input id="PoleFrazy" style="background-color: #eee; border: 1px solid #DDD; color: #111" type="text" />
<input id="Guzik" style="background-color: #eee; border: 1px solid #DDD; color: #111" type="submit" value="OK!" />
</form>
</div>

Czyż nie? Pomyśl. Poziom znaków między 230 a 350. Jest różnica? Co jeśli musiałbyś powstawiać kilka takich bloków? A to jeszcze sporo by urosło. To wszystko póki co jeszcze wynika z podstaw HTML i CSS. Chociaż ten div zupełnie wydaje się nie potrzebny… ale co tam.

Jak można jeszcze zauważyć: polecam stosowanie prostych, ale intuicyjnych nazw dla klas czy identyfikatorów. Oczywiście również można ograniczyć się do zakodowania prostego stylu dla wszystkich podstawowych znaczników w HTML, nieco wyżej pokazałem i tak must-have sposób pisania dla już bardziej sprecyzowanych części kodu. Swoją drogą. Same znaczniki na poziomie HTML4 wystarczą do zbudowania funkcjonalnej strony dla naszego mobilnego urządzenia. Pamiętaj że na drugi plan odchodzi wszelka grafika. W większości przypadków budowanie strony internetowej również opiera się na obrazkach. Kurczę. Co jeśli mam 150KB obrazków do pobrania, a mój operator komórkowy zjada 25gr od każdych 50kB?

Kompresuj swoje obrazki ile się da (no, ale na poziomie czytelności)

Po co mi grafika o rozmiarach 1024x* skoro ekran w moim telefonie ma szerokość 400px? No dobra. Sporo palmtopów już króluje z rozdzielczością 800x*… mimo wszystko one mają WiFi, więc w wielu przypadkach mogą sobie pozwolić na ekstrawagancję. Tak więc chyba lepiej posadzić mniejszą grafikę na naszej stronie, niż martwić się o dobry wygląd w tamtych urządzeniach? W końcu one też czasem wykorzystują możliwość transferu u operatora komórkowego. Zważ też, że nie wszystkie urządzenia potrafią korzystać z cache. Twoja grafika może być za każdym razem ponownie pobierana, a pieniążki lecą. Nie tłumacz się, że grafikę może dla Ciebie zmniejszyć Google czy Opera. Powinieneś to robić Ty!

A nie mówiłem?

Dobra. Musisz wprowadzić u siebie pewne nawyki. Aplikacje takie jak Photoshop mają w swoim arsenale możliwość zapisu grafiki zoptymalizowanej. Muszę wyjaśniać, że powinno się z tego korzystać w tym przypadku (i wielu innych)? Grafika taka pozbawiana jest metadanych zupełnie nieprzydatnych dla naszej strony i paru innych… Weźmy sobie o taki przykład:

PNG, 182x38, 2 770 bajtów.

Póki co na te czasy dla urządzeń mobilnych bez problemu wystarczy kompresja na poziomie JPEG’a ~30% czy GIF. PNG (Portable Network Graphic) póki co jest jeszcze zbyt masywny jak na polskie realia. Aha. Pamiętaj jeszcze o zachowaniu odpowiednich rozmiarów dla swojej grafiki. U wielu osób wciąż można jeszcze zaobserwować telefony z ekranami 128×160 czy nawet mniejszymi! Nie uzależniaj swojej strony od grafiki. Powinna ona być tak samo funkcjonalna i czytelna bez niej. Dobra. To pobawmy się w kompresję przykładu wyżej. Pamiętaj, każda setka bajtów się liczy!

Zwykły zapis JPEG w PS na Q:8, 18 533 bajtów!!

Zwykły zapis JPEG w IrfanView, Q:80, 2 272 bajtów

Widzisz teraz, ile syfu pakuje się dzięki komercyjnemu oprogramowaniu? Zobacz lepszy przykład:

Bah! Tyle śmieci w zwykłym zapisie. Na cholerę to!

Dobra. Przejdźmy do tej prawdziwej, dobrej kompresji.

Zapis zoptymalizowany PS, Q:30%, 1 814 bajty

Zapis zoptymalizowany IV, RIOT plugin, Q:30%, 1 426 bajty

Poziomy kompresji nie są sobie proporcjonalne. Drugi przykład, chociaż mniej zajmuje, to i gorzej wygląda. Powinieneś osobiście pokombinować z sposobami zapisu, tak, abyś zadowolił się również jakością. Sprawa jest dość podobna w przypadku stron, które są wyświetlane kilkaset tysięcy, czy milionów razy na miesiąc (albo i więcej! sic!). Takie kilku kilobajtowe sprawy w odniesieniu rocznym czy nawet miesięcznym to spora ilość transferu serwerowego, a to się równa koszta! Tak więc:

  • Twórz małą grafikę, ma się mieścić na wszelkich ekranach
  • Nie uzależniaj od niej strony, mogą być wodotryskiem, ale strona bez nich ma działać
  • Broń boże używanie animowanych gifów! Wiele urządzeń ich i tak nie animuje, a cały plik trzeba pobrać
  • …i wszelkie obrazy niezoptymalizowane precz!

Funkcjonalność i zwinność

  • Umieść na górze swojej strony linki i kotwice do różnych części strony, szczególnie jest to ważne jeśli strona jest długa – nie wszystkie urządzenia mają możliwość przewinięcia hop siup na sam dół. Kiedyś użerałem się przy tym z pewnym moim telefonem.
  • Rzeczy najważniejsze umieszczaj na samej górze. Jeśli masz dobrze działającą wyszukiwarkę, albo Twoja strona opiera się mocno na jej działaniu (Wikipedia może być przykładem) to umieść ją na górze.
  • Podobnie jest z menu. Nie ma sensu jechanie na sam dół, aby tylko zmienić stronę.
  • Nie buduj struktur wieloblokowych. Zostaw tabelki i tym podobne. Póki co. Bo to jest tak, jak w naszym świecie z IE: Dopóki wiele prymitywnych urządzeń wykorzystuje mobilny internet, tak długo trzeba trzymać się ‚ich standardu’.
  • Zostaw wszelki JavaScript i całą resztę. Może i Opera Mobile daje radę z jego interpretacją, jednak mimo wszystko jest to upośledzone, ubogie. Za żaden skarb nie uzależniaj strony od takich rzeczy.
  • Patrząc na kropkę wyżej… muszę wspominać że wstawienie na taką stronę elementu Flash’owego itp do totalna durnota?
  • Unikaj wszelkiego pozycjonowania elementów. Wszystko powinno być jedno za drugim (oczywiście łamane linią). To taki czysty HTML z dodatkowymi smaczkami.
  • Twórz czytelne, widoczne linki
  • No i nie biadol na stronie o 20 różnych artykułach. Już lepiej to podzielić na części niż zbędnie pobierać, jeśli nawet nie czytamy. Kilka podobnych żądań do serwera nie powinno nikomu zaszkodzić.
  • Daj możliwość wyboru strony, jeśli Twoja jest podzielona na wiele. Nie chce co chwile klikać 3, 6, 9.., aby się dostać na stronę 17. Daj mi to wpisać, wcisnąć przycisk.
  • Strona powinna dać się odczytać wyszukiwarkom. Chociaż może wydawać się prosta, to tak nie musi być.
  • I jeśli jest coś do pobierania większego… opisz tego rozmiar w nawiasie. Nie chcę pobierać jakiejś gierki Java, jeśli zje mi to 300kB z pakietu, nieświadomie!

Chyba tyle. Można jeszcze doszukać się wielu pomysłów, ale na tą chwilę już mi nic nie przychodzi do głowy, tylko śniadanie.

Tagi: , , , ,

Komentarze 2 komentarze

Rady są ok, ale chyba zapomniałeś, że przy poważnych projektach, kodu nie pisze się ręcznie. Używa się gotowych frameworków, bibliotek, API, a obrazków nie przetwarza się pojedynczo.

[…] jak i wpierdala to znacznie więcej transferu, w końcu obrazek, pisałem kiedyś o tworzeniu mobilnych stron […]

Skomentuj