29
06
16

Najpierw myśl o komórkach, czyli Mobile First!

Ludzie coraz chętniej korzystają z internetu na urządzeniach przenośnych — głównie telefonach komórkowych i tabletach. Dostęp do sieci coraz bardziej tanieje, komórki robią się coraz wydajniejsze, mają coraz większe ekrany o coraz wyższej rozdzielczości.

Kiedyś strony internetowe projektowano tylko pod kątem dużych komputerów (stacjonarnych i laptopów). Później w dobrym tonie zaczęło być posiadanie wersji mobilnej lub RWD (responsywnej).

A dziś trzeba już projektować witryny, także blogi, GŁÓWNIE pod kątem komórek.

Ludzie już w tej chwili więcej czasu spędzają w internecie na urządzeniach mobilnych, niż na dużych komputerach. W końcu mają je przy sobie non-stop, także w autobusie, przy jedzeniu obiadu i w toalecie. Statystyka ta uwzględnia nie tylko przeglądanie stron internetowych, lecz także korzystanie z aplikacji takich, jak choćby Facebook czy YouTube.

Na moich największych blogach w tej chwili od 20 do 35% ruchu jest właśnie przez urządzenia mobilne. Na moich kanałach na YT — komórki i tablety mają łącznie 30-32% wyświetleń filmów. I ten udział cały czas rośnie.

I może się okazać, że już niedługo także ruch na naszych blogach będzie w większości pochodzić z urządzeń mobilnych. No chyba, że bardzo będziemy w tym użytkownikom przeszkadzać.

Dlatego uważam, że już dziś należy tak swoje działania na blogach prowadzić tak, by uwzględniać potrzeby użytkowników korzystających z urządzeń mobilnych. Dotyczy to między innymi projektowania szablonów dla bloga, które dobrze wyglądają i działają na małych ekranach — ale nie tylko.

Mobile first — jak?

Wspomniałem już o pierwszej kwestii, która jest istotna — zaprojektowaniu szablonu bloga odpowiedniego dla urządzeń mobilnych.

Odpowiedni szablon to taki, na którym:

  • treść będzie odpowiedniej szerokości, mieszcząc się na ekranie bez konieczności jego powiększania i przesuwania po nim w poziomie (bo wiadomo, scrollowanie w pionie jest OK),
  • czcionka nie będzie za mała, nieczytelna,
  • nie będzie linków umieszczonych na tyle blisko siebie, że trudno jest na komórce kliknąć właściwy.

W tej chwili najlepszym rozwiązaniem wydaje się po prostu zaprojektowanie szablonu wedle zasad responsive web design (RWD), czyli automatycznie dostosowującego się do szerokości ekranu. Na mniejszych szerokościach pewne elementy (np. boczny pasek nawigacyjny) mogą być ukrywane, albo przesuwane na koniec treści, by nie utrudniały czytania.

Szablonów responsywnych jest w internecie do pobrania za darmo cała masa. Gorzej jest, gdy szablon istniejący chcemy do zasad RWD dostosować.

Zrób sobie minutową przerwę w czytaniu tego artykułu i wykonaj test zgodności Twojego bloga z urządzeniami mobilnymi. 🙂

Druga rzecz, o której warto pamiętać, to publikowanie treści, którą będzie się łatwo dało konsumować na urządzeniach mobilnych.

Chodzi między innymi o to, by przy pisaniu artykułu zwracać uwagę na to, że będzie on czytany na komórce. Można to uwzględnić na przykład przy wstawianiu fotografii. Zamiast wstawiać całe zdjęcie pomniejszone (z możliwością otworzenia zdjęcia w pełnym rozmiarze po kliknięciu) — wstawić do tekstu wykadrowaną część zdjęcia, na której od razu widoczny będzie interesujący szczegół.

Jeszcze większe znaczenie ma to przy tworzeniu materiałów wideo na YouTube. Ja często korzystam z klikalnych adnotacji, przenoszących na przykład do innych powiązanych tematycznie filmów albo do artykułów na blogu. Problem polega na tym, że adnotacje nie działają w aplikacji YouTube na komórkach, więc widz kliknąć nie będzie mógł.

Mając to na uwadze trzeba na przykład wspomnieć na filmie, że odnośniki do tych materiałów umieszczone są także w opisie pod filmem (tu już je kliknąć można), albo zastosować funkcjonalność kart zamiast adnotacji.

No i ostatni aspekt, na który chciałem zwrócić uwagę — uwzględnienie aspektu mobilnego przy sprzedaży reklam na blogu. A także przy ich rozplanowaniu.

Mam tu na myśli między innymi ustawianie reklam w szablonie w taki sposób, by nie przeszkadzały w odbiorze treści na komórkach. Ale też żeby nie znajdowały się na przykład poza ekranem, albo na samym końcu treści — bo wtedy nie będzie z nich żadnego pożytku.

Warto na przykład rozważyć zmianę rozmiaru jednostek reklamowych przy wyświetlaniu bloga na komórce (300×250 zamiast 300×600, który w odniesieniu do rozmiaru okienka będzie potwornie duży i zajmie większość ekranu komórki). Albo zastosowanie innych reklam, na przykład reklamy natywnej (w AdSense dostępna jest jako beta dla części wydawców). Korzystając z DFP możesz zlecać niektóre kampanie tylko na komputery, aby nie marnować odsłon na urządzeniach mobilnych do promocji tych programów partnerskich, które na komórkach będą kiepsko konwertować (np. reklam sklepów internetowych, w których zakupy robią ludzie głównie z komputerów).

 

Patrząc w statystyki ruchu na moich blogach zastanawiam się nad dwiema rzeczami:

  • kiedy ruch z urządzeń mobilnych przekroczy u mnie 50% całości,
  • czy może fakt, że mam go tak mało, nie wynika z tego, że moje blogi mogą kiepsko działać na urządzeniach mobilnych?
Autor:Krzysztof Lis | Tagi: , ,
Wpisy powiązane tematycznie:

12 komentarzy do artykułu “Najpierw myśl o komórkach, czyli Mobile First!”

  1. Świetnie, że podajesz procenty z jakich urządzeń wchodzą do Ciebie ludzie. Sama jestem głównie mobilnym użytkownikiem sieci i wszystko co czytam, czytam na telefonie. I o ile jestem w stanie zaakceptować, że małe blogi, czy serwisy nie mają stron mobilnych, tak ogromne serwisy, które mają setki tysięcy wyświetleń co miesiąc? Tego nie rozumiem, a naprawdę o dziwo jest ich sporo.

  2. Nie przeczytałem jeszcze treści wpisu ale od razu rzuca mi sie jedno. Dlaczego nie masz wersji mobilnej. Od zawsze jak tu wchodzę z telefonu strasznie sie irytuje.

  3. @Paweł: bo, zgodnie z polskim przysłowiem, szewc bez butów chodzi. 🙂

    Kiedyś próbowałem przerobić szablon bloga na wersję responsywną, ale nie do końca mi się to udało, jak na pewno widzisz.

  4. Interesujący wpis!:)
    Trend mobile jest obecnie bardzo widoczny, ciągle się umacnia i jeżeli ufać prognozom to w dalszym ciągu będzie znacząco się umacniał. Właśnie dlatego prowadząc jakiekolwiek działania w Internecie nie należy zapominać o uwzględnieniu w nich urządzeń mobilnych.

  5. Wcześniej się w ogóle nie zastanawiałam, ale to faktycznie prawda. Nie pamiętam, kiedy ostatnio (oprócz dzisiejszego dnia) korzystałam z laptopa czy stacjonarnego komputera. Wiedziałam, że są różne wersje stron internetowych, ale nie że teraz głównie robią je pod telefony 😀

  6. To prawda że na smartfonach i tabletach korzystamy z internetu coraz częściej i warto pod tym kątem dostosować swoje strony.
    Jednak mniejsze ekrany mają jeszcze dużo wad, które trzeba będzie wyeliminować w przyszłości:
    – Ucinanie paska bocznego, zdjęć i innych elementów.
    – Częste nie wyświetlanie dostępnej ilości towaru na ekranach telefonów i tabletów.
    – Ciężko jest pracować na małym ekranie w porównaniu z monitorem pc albo ekranem laptopa.

  7. Swoje strony zacząłem przystosowywać już od pierwszej chwili gdy Google zaczął trąbić o mobile friendly, ale przyznam że nie wszystkie z tych zmian wyszły mi na dobre. Głównie mam tu na myśli strony które z czystego htmla przerobiłem na wordpressa, które spadły w wynikach wyszukiwania pomimo wykonania odpowiednich przekierowań.

  8. Prawda, prawda. W tej chwili około 50% wejść jest z urządzeń mobilnych. Ostatnio furorę robi właśnie RWD. Wykonujemy coraz więcej zleceń wprowadzania responsywności dla stron klientów. Wszyscy nagle się obudzili jak bardzo jest to istotne i trzeba powiedzieć, że mają racje.

  9. Zdecydowanie wejście z mobile stanowią teraz nawet połowę wszystkich wejść. Tendencja jest zauważalna i z miesiąca na miesiąc jest to coraz bardziej widoczne

  10. Mobilni czytelnicy wkrótce zaczną dominować w strukturze ruchu na stronach internetowych. Jednak moim zdaniem ekran telefonu ma jeszcze bardzo dużo ograniczeń, jeżeli chodzi o ilość i jakość prezentowanych treści w stosunku do wyświetlaczy np. większych tabletów.

  11. Nie udało Ci się zrobić strony responsywnej to może spróbuj adaptacyjną.

  12. … adaptywną, enyłej.

Pozostaw komentarz

Pamiętaj tylko proszę o polityce komentarzy! Komentarze służą do wyrażania opinii na temat opublikowanego tekstu, albo zadawania pytań jego dotyczących. Nie służą do reklamowania własnych stron ani zadawania pytań nie związanych z tematem wpisu. Jeśli masz pytanie, zadaj je na forum o zarabianiu na blogach albo napisz do mnie e-maila.

XHTML - możesz użyć tagów:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Jak zarabiam?

Na moich blogach i witrynach zarabiam między innymi sposobami podanymi poniżej.