Pamiętacie Internet w 1997 roku? Strony zostały zaprojektowane z myślą o monitorach o niskiej rozdzielczości i wolnych modemach. W Internecie dominował tekst, a sporadyczne obrazy w formatach JPEG i GIF służyły jedynie do dekoracji stron. Najczęściej nawet ich nie widzieliśmy, ponieważ wyłączenie ładowania obrazów było jednym z pewnych sposobów na przyspieszenie modemu telefonicznego. Ponad dekadę później zmienił się cały krajobraz Internetu. Dostęp szerokopasmowy za pośrednictwem połączeń kablowych i DSL stał się standardem w krajach rozwiniętych, a strony internetowe mogą wykorzystywać bardziej złożone elementy — wiele obrazów, efekty przezroczystości, a nawet wideo — do dostarczania treści. Możemy nawet przesyłać strumieniowo całe filmy z Internetu na nasze komputery, nie czekając na pobranie plików!
Pomimo masowego przejścia na monitory o wysokiej rozdzielczości, dużej przepustowości i wyrafinowanych możliwościach graficznych, drugi trend wywarł ogromny wpływ na istniejącą dzisiaj sieć WWW. W miarę jak technologia telefoniczna stała się bardziej zaawansowana i dostępna, smartfony stały się integralną częścią korzystania z Internetu. Urządzenia mobilne stanowią kluczową bramę do Internetu dla milionów użytkowników, którzy nie mają komputerów osobistych. Na przykład w Indiach użycie popularnej przeglądarki internetowej Opera Mini wzrosło o 300 procent między marcem 2010 a marcem 2011. W wielu częściach świata oknem do Internetu nie jest 23-calowy monitor, ale 3-calowy ekran telefonu. Nawet tanie, głupie telefony bez ekranów dotykowych i wydajnego sprzętu mogą przeglądać Internet.
Pojawiają się strony mobilne. Ponieważ popularność mobilnego Internetu zbiega się z pojawieniem się szybkiego dostępu do Internetu i potężniejszego sprzętu komputerowego, twórcy treści online stają przed wyjątkowym wyzwaniem. Witryny internetowe stworzone z myślą o dużych monitorach, szybkich komputerach i szybkim Internecie w dużym stopniu opierają się na grafice i zaawansowanych rozwiązaniach programowych, które nie zawsze działają na małych ekranach i wolnych sieciach urządzeń mobilnych. Rozwiązaniem są witryny mobilne — strony specjalnie dostosowane do pracy na małych urządzeniach i dostarczające ważne treści, a jednocześnie ograniczające grafikę spowalniającą ładowanie strony. Chociaż witryny mobilne są celowo prostsze niż pełne wersje, nie oznacza to, że można je łatwo utworzyć. Strony internetowe na urządzenia mobilne w dalszym ciągu wymagają dbałości o projekt i technologię, a rygorystyczne ograniczenia sprzętu mobilnego nie ułatwiają tego zadania.
Dlaczego witryny mobilne potrzebują specjalnych rozwiązań projektowych
Przejście z przeglądarki komputerowej na mobilną nie polega tylko na zmniejszeniu ekranu. To pozbycie się nadmiaru hałasu. Projektując stronę mobilną, nie tylko zmniejszasz elementy. Przemyślisz na nowo, co jest naprawdę ważne.
Użytkownicy komputerów stacjonarnych oczekują atrakcyjności wizualnej. Mają przepustowość i liczbę pikseli, aby sobie z tym poradzić. Użytkownicy mobilni? Nie tak dużo. Użytkownik posiadający połączenie 3G na obszarach wiejskich nie będzie musiał czekać na załadowanie głównego banera. Potrzebuje tekstu. Potrzebuje danych. Jeśli narzucisz korzystanie z komputera stacjonarnego na urządzeniu mobilnym, nie będziesz innowacyjny. Stajesz się przeszkodą.
Stwarza to specyficzny problem dla programistów. Jak pogodzić potrzebę bogatych treści z rzeczywistością ograniczonych zasobów?
Główne ograniczenia projektowania stron mobilnych:
- Przestrzeń na ekranie jest ograniczona. Na ekranie 3-calowym nie można wyświetlać tego samego układu, co na monitorze 23-calowym. Nawigacja powinna być intuicyjna, a nie rozległa.
- Moc sprzętu jest bardzo zróżnicowana. Chociaż smartfony stały się potężne, nadal istnieją podstawowe telefony. Kod, który działa płynnie na iPhonie, może zadławić podstawowe urządzenie z Androidem lub telefon z internetem.
- Niestabilność sieci jest normą, a nie wyjątkiem. W przeciwieństwie do stabilnego połączenia szerokopasmowego w domu, sieci komórkowe podlegają wahaniom. Ciężkie zasoby skracają czas ładowania.
To chodzenie po linie. Jeśli usuniesz zbyt wiele, witryna będzie wyglądać na uszkodzoną. Jeśli zostawisz za dużo, będzie się ładować tak samo wolno, jak w 1998 roku.
„Witryny mobilne są celowo prostsze niż pełne wersje, ale to nie znaczy, że można je łatwo zbudować.”
Nie o to chodzi
Projekt określa dostępną powierzchnię ekranu
Wszystko sprowadza się do cali kwadratowych. A dokładniej na ich niedobór.
Nawet największe ekrany smartfonów — te o przekątnej większej niż cztery cale (10,2 cm) — wyglądają jak znaczki pocztowe obok monitora komputera stacjonarnego. Rozdzielczość może wzrosnąć, ale praw fizyki nie da się oszukać. Duża liczba pikseli na małym wyświetlaczu nadal utrudnia czytelne wyświetlenie całej strony internetowej. Kończy się to ściskaniem ekranu, aby powiększyć, i zmaganiem się z układami wielokolumnowymi, które zmieniają nawigację w grę typu hit-the-fly.
Dobry projekt witryny mobilnej nie polega na zmniejszeniu witryny na komputery stacjonarne. Chodzi o to, aby zacząć od czystej karty i używać układów jednokolumnowych.
Oznacza to skondensowanie wszystkiego w jeden pionowy przepływ. Zmieniasz układ łączy nawigacyjnych. Usuwasz pozostałości dekoracyjne. Zawężasz główną kolumnę, aby dopasować ją do rzeczywistej szerokości telefonu. Większość monitorów to szerokie prostokąty. A co z telefonami? To są wysokie paski. Tak, możesz obrócić urządzenie do orientacji poziomej, ale domyślnym trybem jest orientacja pionowa. Najpierw zaprojektuj wąski pasek.
Pozostaje jeszcze kwestia metody wprowadzania.
Przeglądarki komputerowe korzystają z myszy. Najedź kursorem na menu, a pojawi się lista rozwijana. Spróbuj to zrobić kciukiem. Nie działa. Projektowanie stron mobilnych wymaga ponownego przemyślenia tych „stanów najechania”. Menu należy kliknąć, a nie najechać na nie kursorem. Przyciski powinny być wystarczająco duże, aby zmieściły się w palcu, a nie precyzyjnym kursorze. Jeśli Twoja witryna opiera się na efektach najechania kursorem, oznacza to, że nie działa już na urządzeniach mobilnych.
Koszmar fragmentacji urządzenia
Tworzenie komputerów stacjonarnych jest już trudne. Internet Explorer wpada w złość, Firefox robi swoje, a Chrome pochłania całą Twoją pamięć RAM. Ale rozwój mobilny? To zupełnie inna bestia.
Różnorodność sprzętu jest niesamowita. Na jednym końcu spektrum znajdują się głupie telefony z małymi ekranami o niskiej rozdzielczości i podstawowymi przeglądarkami. Po drugiej stronie znajdują się smartfony z wyraźnymi ekranami dotykowymi o wysokiej rozdzielczości i wydajnymi procesorami.
Jeden rozmiar nie pasuje do wszystkich. Czasami potrzebne są oddzielne interfejsy.
Spójrz na Facebooka. Nie tylko udostępnia każdemu ten sam kod HTML. Określa, jakiego urządzenia używasz. Niezależnie od tego, czy masz iPhone’a, czy Androida, otrzymasz dostosowane do potrzeb doświadczenie zoptymalizowane pod kątem konkretnego ekranu i możliwości przeglądarki. Jeśli masz telefon z funkcjami, otrzymasz wersję Lite.
Jedna witryna mobilna to za mało. Należy projektować z myślą o urządzeniu, a nie tylko o przeglądarce.
Ta logika definicji jest pomostem pomiędzy użytkownikiem a właściwym interfejsem. To technologia, która umożliwia projektowanie.
Inteligentniej, a nie prościej
Uproszczenie interfejsu nie oznacza uproszczenia doświadczenia. W rzeczywistości urządzenia mobilne mogą mieć większą moc niż urządzenia stacjonarne w przypadku niektórych zadań.
Smartfony mają komponenty sprzętowe, których nie mają komputery PC. Kamery. GPS. Akcelerometry.
Kody QR są doskonałym przykładem. Skieruj aparat na kod, a natychmiast otworzy stronę internetową lub pobierze aplikację. Nie ma potrzeby wprowadzania adresu URL. Nie ma potrzeby szukać. Po prostu zeskanuj i gotowe.
Mapy korzystają z danych GPS, aby wyświetlać wskazówki dojazdu w czasie rzeczywistym lub rekomendacje restauracji na podstawie Twojej dokładnej lokalizacji. To nie tylko „mniejsza witryna”. To jest inne narzędzie.
Stworzenie skutecznej witryny mobilnej wymaga inteligentnego wykorzystania technologii po stronie serwera. Nie chodzi tylko o CSS i HTML. Chodzi o samo użytkowanie urządzenia. Design i technologia to dwie strony tego samego medalu. Nie można mieć jednego bez drugiego.
Przyjrzyjmy się bliżej, jak następuje ta determinacja. Skąd Facebook wie, że używasz iPhone’a, a nie starej Nokii?
Umożliwianie korzystania z urządzeń mobilnych: wykrywanie, subdomeny i wybór użytkownika
Widzisz czyste linie i czytelny tekst. Wygląda prosto. Pod maską kryje się chaos sprytnej inżynierii. Nowoczesne projektowanie stron internetowych opiera się na Kaskadowych arkuszach stylów lub CSS. Kod ten określa czcionki, kolory, dopełnienie i szerokość strony. Treść jest przechowywana w bazie danych lub plikach HTML. CSS decyduje o tym, jak będzie wyglądać ta treść.
Każda wspomniana wcześniej zmiana projektu ma miejsce tutaj. Aby przyspieszyć działanie witryny mobilnej, zastąp ciężki obraz tła jednolitym kolorem. Oszczędza to przepustowość. Dzięki temu strona ładuje się szybciej.
Stworzenie strony internetowej to pierwszy krok. Drugim krokiem jest zachęcenie ludzi do korzystania z niego. Nie ma jednego właściwego sposobu na udostępnienie witryny mobilnej. Istnieje kilka opcji.
Najprostszą metodą jest link. Publikujesz to na pełnej stronie. Brzmi ono: „Wyświetl witrynę mobilną”. Często programiści używają subdomeny, takiej jak m.website.com. Łatwo to rozpoznać. Website.com prowadzi do wersji na komputery stacjonarne. m.website.com prowadzi do wersji mobilnej. Niektóre witryny używają i.website.com ze względu na iPhone’a. Kod działa tak samo.
Niektórzy użytkownicy muszą ręcznie wpisać m.website.com. Większość witryn automatyzuje ten proces.
Jak witryny mobilne identyfikują Twoje urządzenie
Inne techniki są bardziej złożone. Wiele witryn automatycznie wykrywa typ Twojego urządzenia. Decydują, który plik CSS udostępnić, w zależności od sprzętu.
Dzieje się to poprzez wysłanie żądania do urządzenia. Serwer sprawdza czynniki identyfikujące, takie jak szerokość ekranu w pikselach. Odczytuje ciąg agenta użytkownika. Ta linia deklaruje, która przeglądarka ładuje stronę.
Zapytania o media to linie kodu CSS. Odnoszą się one do ciągu agenta użytkownika. Podkreślają konkretne czynniki identyfikujące. Jeśli klient użytkownika identyfikuje się jako przeglądarka mobilna z wąskim ekranem, serwer ładuje stronę mobilną.
Ta metoda ma wady. Niektóre przeglądarki umożliwiają sfałszowanie ciągu agenta użytkownika. Nowe przeglądarki cały czas udostępniają nowe ciągi znaków. Serwery mają tendencję do wysyłania właściwej witryny na właściwe urządzenie. Ale to nie jest idealne.
Ten system identyfikacji jest powiązany z inną opcją. Daj użytkownikowi wybór. Przejdź do witryny IMDB.com ze swojego telefonu. Automatycznie ładuje witrynę mobilną. Zachęca także do pobrania aplikacji mobilnej. Aplikacja oferuje więcej funkcji.
Zalety i wady przeglądarek mobilnych
Strony mobilne zazwyczaj działają lepiej niż pełne witryny na smartfonach. Są specjalnie zaprojektowane do małych ekranów. „Jeden rozmiar pasuje do wszystkich” rzadko się sprawdza.
Ale „lepiej” to pojęcie względne. Witryny mobilne oferują ograniczone możliwości. Uwzględniają ograniczenia urządzenia. Nawigacja często znika. Na ekranie nie ma wystarczającej ilości miejsca, aby menu było cały czas widoczne.
Interakcja z witryną to najtrudniejsza część przeglądania na urządzeniach mobilnych. Przewijanie formularza wejściowego wymaga czasu. Wybieranie pól jest żmudne. Pisanie na telefonie jest wolniejsze niż na komputerze. Ekrany dotykowe i klawiatury programowe pogarszają sytuację.
Przeglądarki telefoniczne mogą przechowywać pliki cookies. Zapamiętują hasła, podobnie jak przeglądarki na komputerach stacjonarnych. To pomaga. Przeglądarki komputerowe, takie jak Firefox dla Androida i Opera Mobile, mogą synchronizować dane. Przenosisz zapisane dane ze swojego komputera. Ułatwia to przeglądanie na obu platformach.
Telefony też mają swoje sztuczki. Ściśnij, aby powiększyć i powiększyć tekst. Kliknij, aby skalować — dostosowuje akapit do szerokości ekranu.
Dlaczego wideo Flash nie działa na urządzeniach mobilnych
Wideo Flash jest uwzględniane w każdej dyskusji na temat oglądania na urządzeniach mobilnych. Wymaga dużej ilości zasobów procesora. To wyczerpuje baterię. Poprawiło się to na przestrzeni lat. Działa na wielu urządzeniach.
Nie działa na żadnym urządzeniu Apple.
Apple blokuje filmy Flash na iOS. Zamiast tego obsługują wideo HTML5. YouTube korzysta z wideo HTML5. Wiele innych witryn też.
Możesz osadzać filmy Flash na mobilnych stronach internetowych. Jest to sprzeczne z zasadami projektowania mobilnego. Prostota jest największą siłą stron mobilnych. Ładują się szybko, ponieważ używają tekstu i małych obrazów. Flash to przełamuje.
Umieszczenie Flasha w Twojej witrynie ogranicza użytkowników iPhone’a. Nie mogą wchodzić w interakcję ze stroną. Tracisz ogromną część swojej publiczności.
Zakupy mobilne: czy naprawdę są bezpieczniejsze niż zakupy na komputerze?
Oto nieoczekiwany zwrot akcji. Twój telefon może być bezpieczniejszym miejscem do wprowadzania danych karty kredytowej.
Większość wirusów internetowych atakuje system Windows. Nie działają na iOS i Androidzie. Jesteś w zasadzie niewidoczny dla ogromnej ilości złośliwego oprogramowania po prostu dlatego, że nie używasz komputera. Nowoczesne telefony obsługują szyfrowanie HTTPS i SSL, podobnie jak Twój laptop.
Ale nie relaksuj się.
Nadal musisz zwracać uwagę na pasek adresu. Poszukaj ikony kłódki. Korzystaj tylko z zaufanych witryn. Jeśli witryna wygląda podejrzanie na komputerze, będzie też wyglądać podejrzanie na telefonie. Tyle, że na mniejszą skalę. Krajobraz zagrożeń się zmienia, ale zasada pozostaje ta sama. Ostrożność jest lepsza niż żal.
Funkcje projektowania stron mobilnych
Czym w ogóle jest projektowanie stron mobilnych?
To nie jest tylko mniejsza kopia serwisu. Jest to specyficzna optymalizacja dla ekranów dotykowych i wąskich obszarów widzenia. Myśl mniej. Bardziej proste. Bez niepotrzebnego hałasu.
Witryny na komputery stacjonarne opierają się na najechaniu myszką i precyzyjnych kliknięciach. Urządzenia mobilne opierają się na kciukach. To zmienia wszystko. Przyciski stają się coraz większe. Menu są ukryte. Treść ma priorytet. Jeśli próbujesz przeczytać gęsty akapit na 6-calowym ekranie, masz problem z urządzeniem. Dobry projekt mobilny zapobiega tej walce, zanim w ogóle się zacznie.
Witryny mobilne a witryny tradycyjne
Ludzie cały czas mylą te pojęcia. Rozróżnijmy je.
Standardowa strona internetowa przeznaczona jest dla komputerów stacjonarnych. Klawiatury. Myszy. Duże monitory. Zakłada się, że masz przepustowość i cierpliwość.
Strona mobilna stworzona z myślą o smartfonach i tabletach. Pozbywa się niepotrzebnych rzeczy. Funkcje, które nie działają na ekranach dotykowych, zostały usunięte. Obrazy są skompresowane. Skrypty stały się łatwiejsze.
Różnica ma znaczenie.
Dlaczego? Ponieważ witryny mobilne ładują się szybciej. Zużywają mniej danych. To nie tylko udogodnienie dla użytkowników Apple na Manhattanie. Jest to konieczność dla mieszkańców krajów rozwijających się, gdzie szybki internet jest raczej luksusem niż podstawową usługą. Jeśli Twoja witryna jest ciężka, nie będą mogli jej załadować. Kropka.
Dlaczego projektowanie mobilne jest ważne
Wszystko sprowadza się do tarcia.
Przeglądanie na komputerze stacjonarnym jest wydajne. Oglądanie na urządzeniach mobilnych jest wygodne. Masz Internet w kieszeni. Ale pisanie na szklanym ekranie jest nudne.
Dobry projekt mobilny sprawia, że ta nuda znika. Szanuje Twój czas. Szanuje Twój plan transmisji danych. Uwzględnia fakt, że podczas korzystania z urządzenia prawdopodobnie będziesz chodzić.
Reklama również tutaj działa. Ale gigantyczne wyskakujące okienka? Nie. Większość przeglądarek mobilnych i tak je blokuje. Google AdSense jest doskonały. Mały. Nie nachalne. Odpowiedni.
Internet mobilny nie jest okrojoną wersją witryny komputerowej. To inna bestia. Traktuj to odpowiednio.
