Tworzenie serwisów przystosowanych do wy\u015bwietlania na urz\u0105dzeniach mobilnych to ju\u017c nie tylko ciekawostka, lecz konieczno\u015b\u0107 wobec wci\u0105\u017c rosn\u0105cej liczby u\u017cytkowników smartfonów i tabletów.<\/p>\n
U\u017cytkownicy mobilnego internetu s\u0105 szybciej rosn\u0105c\u0105 grup\u0105 w porównaniu do u\u017cytkowników klasycznego \u0142\u0105cza, a analitycy rynku us\u0142ug internetowych oceniaj\u0105, \u017ce przysz\u0142o\u015b\u0107 sieci le\u017cy w\u0142a\u015bnie w r\u0119kach aktywnych posiadaczy urz\u0105dze\u0144 mobilnych.<\/p>\n
W wi\u0119kszo\u015bci nowoczesnych telefonów mo\u017cna swobodnie przegl\u0105da\u0107 strony internetowe, co u\u0142atwiaj\u0105 wi\u0119ksze ni\u017c w telefonach poprzedniej generacji ekrany dotykowe czy wygodne klawiatury QWERTY. Mamy zatem odpowiednie zaplecze technologiczne, ale co z kontentem? Niestety, stron tworzonych pod tradycyjne komputery nie da si\u0119 w prosty sposób przegl\u0105da\u0107 na urz\u0105dzeniach mobilnych. – Puk, puk. – Kto tam? – Tu u\u017cytkownik.<\/strong><\/p>\n U\u017cytkownik czyli kto? Dopiero kiedy odpowiemy sobie na to pytanie, b\u0119dziemy mogli podj\u0105\u0107 kroki, aby stworzy\u0107 najlepsz\u0105 dla niego stron\u0119. Czy korzysta z urz\u0105dzenia mobilnego rozci\u0105gni\u0119ty na kanapie? A mo\u017ce na stojaka, kiedy mu si\u0119 \u015bpieszy? Na jakich informacjach i grafikach mu zale\u017cy, jakie sekcje najcz\u0119\u015bciej odwiedza? Jest kilka uniwersalnych zasad, które mog\u0105 si\u0119 sprawdzi\u0107 przy tworzeniu stron mobilnych przyjaznych u\u017cytkownikowi. Ka\u017cdemu. Ma\u0142o i tre\u015bciwie<\/strong><\/p>\n Tre\u015b\u0107 strony powinna zawiera\u0107 tylko te najistotniejsze, z punktu widzenia odbiorcy, informacje ze strony tradycyjnej. Strony mobilne ze wzgl\u0119du na rozmiary ekranów, na których si\u0119 wy\u015bwietlaj\u0105, maj\u0105 pewne ograniczenia. Dlatego serwowane tre\u015bci powinny by\u0107 konkretne, a samo dotarcie do nich powinno zajmowa\u0107 jak najmniej czasu. Zaleca si\u0119, aby nag\u0142ówki nie zawiera\u0142y wi\u0119cej ni\u017c trzy, cztery wyrazy. Zasada „maksimum tre\u015bci, minimum tekstu” dotyczy równie\u017c artyku\u0142ów. Im mniej powierzchni strony zostanie zaj\u0119te, tym wi\u0119cej miejsca pozostaje na inne kluczowe dla strony elementy, np. box logowania, panel z polecanymi pozycjami itd. Szybko i sprawnie<\/strong><\/p>\n W czasach, w których ludzie jedz\u0105 szybko, przemieszczaj\u0105 si\u0119 szybko oczekuj\u0105 równie\u017c szybkiej obs\u0142ugi. Nie tylko w realu, ale równie\u017c w wirtualnej rzeczywisto\u015bci. Urz\u0105dzenia mobilne s\u0105 furtk\u0105 do sta\u0142ego dost\u0119pu do zasobów sieci, takich jak skrzynka mailowa czy strony internetowe w\u0142a\u015bnie. Jak pokazuj\u0105 badania przeprowadzone przez Compuware, 60% internautów nie czeka na za\u0142adowanie strony wi\u0119cej ni\u017c 3 sekundy. W sytuacji, kiedy trwa to d\u0142u\u017cej, po prostu zamykaj\u0105 stron\u0119 szukaj\u0105c informacji gdzie indziej. Konieczne jest wi\u0119c zmniejszanie elementów graficznych tak, aby strona \u0142adowa\u0142a si\u0119 mo\u017cliwie krótko. Estetycznie i bezb\u0142\u0119dnie<\/strong><\/p>\n Zmniejszona grafika powinna zosta\u0107 dostosowana do specyfiki urz\u0105dze\u0144 mobilnych. Aby wy\u015bwietla\u0142a si\u0119 ona poprawnie na wszystkich systemach mobilnych nale\u017cy unika\u0107 formatów, których te nie obs\u0142uguj\u0105. W takiej sytuacji nale\u017cy odrzuci\u0107 kreacje flash, które mo\u017cna zast\u0105pi\u0107 animowanymi gifami. Zaleca si\u0119 równie\u017c unikanie ramek oraz JavaScript gdy\u017c mog\u0105 one powodowa\u0107 b\u0142\u0119dy w wy\u015bwietlaniu na niektórych urz\u0105dzeniach. Uk\u0142ad nawigacji strony powinien by\u0107 mo\u017cliwie jak najbardziej przejrzysty i uproszczony. Najwa\u017cniejsze tre\u015bci – zarówno dla u\u017cytkownika, jak i w\u0142a\u015bciciela – powinny znajdowa\u0107 si\u0119 w górnej cz\u0119\u015bci strony, na tzw. pierwszym ekranie. Tre\u015b\u0107 strony powinna by\u0107 dobrze widoczna bez potrzeby „zoomowania”. Wielu ekspertów radzi, aby czcionka mia\u0142a przynajmniej rozmiar 16 pikseli i by\u0142a mocno kontrastuj\u0105ca z t\u0142em. Pod w\u0142a\u015bciwym adresem<\/strong><\/p>\n Jako \u017ce strona mobilna jest stron\u0105 stawian\u0105 od nowa, trzeba zadba\u0107 o jej nowy adres. Nale\u017cy unika\u0107 tworzenia strony w podkatalogu g\u0142ównej domeny. Taka strona ma zbyt d\u0142ugi adres, przez co trudno go zapami\u0119ta\u0107 i wpisa\u0107. Najlepiej w takiej sytuacji wybra\u0107 now\u0105 domen\u0119 lub stworzy\u0107 subdomen\u0119 w obecnie u\u017cywanej. Powszechniej stosowane jest to drugie rozwi\u0105zanie. Wi\u0105\u017ce si\u0119 to z oszcz\u0119dno\u015bci\u0105 kosztów takiego procesów oraz \u0142atwo\u015bci\u0105 w przekierowaniu u\u017cytkowników mobilnych na tak\u0105 stron\u0119. Przy nazewnictwie nowej domeny najpowszechniejsze jest dodanie pojedynczej litery „m” przed w\u0142a\u015bciwym adresem strony, np. m.pracuj.pl (w wersji tradycyjnej pracuj.pl). Przyk\u0142ady<\/strong><\/p>\n Przyk\u0142adem dobrze zbudowanej strony mobilnej mo\u017ce by\u0107 m.chip.pl. Na pierwszym ekranie s\u0105 widoczne najwa\u017cniejsze elementy strony – górna belka posiada trzy g\u0142ówne odno\u015bniki (News, Artyku\u0142y, Testy), a boczna kolumna jest zaopatrzona w nag\u0142ówki najnowszych artyku\u0142ów. Od razu wida\u0107, \u017ce strona nie jest przepe\u0142niona zb\u0119dnymi tekstami. \u0141aduje si\u0119 bardzo szybko, a nawigacja jest prosta i przyjemna. Innym rozwi\u0105zaniem na prezentacj\u0119 swojej strony w internecie mobilnym jest responsive design, jednak to ju\u017c inna historia.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":"Sie\u0107 oplata nas ju\u017c nie tylko w domu i w pracy. Za spraw\u0105 urz\u0105dze\u0144 mobilnych sie\u0107 wi\u0105\u017ce nas w autobusie, sklepie, barze, kinie, a nawet w toalecie.","protected":false},"author":1,"featured_media":1773,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0,"footnotes":""},"categories":[9662],"tags":[453],"class_list":{"0":"post-1772","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-badania","8":"tag-goldbach-audience","9":"cs-entry","10":"cs-video-wrap"},"_links":{"self":[{"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/posts\/1772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/comments?post=1772"}],"version-history":[{"count":0,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/posts\/1772\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/media\/1773"}],"wp:attachment":[{"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/media?parent=1772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/categories?post=1772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mediarun.com\/pl\/wp-json\/wp\/v2\/tags?post=1772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
G\u0142ówny problem stanowi ró\u017cnica pomi\u0119dzy rozmiarem ekranu smartfona czy tabletu, a tradycyjnego monitora. Ta niezgodno\u015b\u0107 powoduje wiele komplikacji: nieprawid\u0142owe wy\u015bwietlanie strony na wy\u015bwietlaczu telefonu, utrudnion\u0105 nawigacj\u0119 po serwisie, zbyt du\u017c\u0105 liczb\u0119 informacji na stronie… W konsekwencji staje przed nami zniech\u0119cony i zirytowany u\u017cytkownik zmuszony do ci\u0105g\u0142ego powi\u0119kszania i przesuwania strony.
<\/strong><\/p>\n
<\/strong><\/p>\n
<\/strong><\/p>\n
<\/strong><\/p>\n
<\/strong><\/p>\n
<\/strong><\/p>\n
Równie\u017c mobilna wersja Pulsu Biznesu jest bardzo dobrze przygotowana. Czcionki s\u0105 dosy\u0107 ma\u0142e, jednak mocno kontrastuj\u0105 z t\u0142em, przez co s\u0105 przejrzyste i czytelne. Grafiki s\u0105 pomniejszone i wyst\u0119puj\u0105 tylko przy najwa\u017cniejszych artyku\u0142ach. Równie\u017c same teksty s\u0105 spójne i nie zawieraj\u0105 niepotrzebnych informacji.<\/p>\n