Są szanse, że widziałeś, jak iPhone może odwracać i rozszerzać strony internetowe. Może pokazać całą stronę internetową na pierwszy rzut oka lub powiększyć, aby tekst, który Cię interesuje, był czytelny. W pewnym sensie, ponieważ iPhone korzysta z Safari, projektanci stron internetowych nie powinni robić nic specjalnego, aby utworzyć stronę internetową, która będzie działać na iPhonie. Ale czy naprawdę chcesz, aby Twoja strona po prostu działała — czy wyróżniała się i błyszczała?
Kiedy ty zbudować stronę internetową, musisz zastanowić się, kto będzie go oglądać i jak będzie go oglądać. Niektóre z najlepszych witryn uwzględniają typ urządzenia, na którym jest wyświetlana strona, w tym rozdzielczość, opcje kolorów i dostępne funkcje. Nie polegają tylko na urządzeniu, aby to rozgryźć.
Ogólne wytyczne dotyczące tworzenia witryny dla urządzeń mobilnych
- Testuj na jak największej liczbie urządzeń. Pierwszą rzeczą, którą powinieneś zrobić, to wyświetlić swoją witrynę na iPhonie i wielu innych urządzenia mobilne lub emulatory, jak możesz. Chociaż możesz używać emulatorów do wszystkich testów, tak naprawdę nie dają one takiego samego wrażenia, jak poruszanie się po stronie internetowej na małym ekranie. Powinieneś jak najwięcej testować na rzeczywistych urządzeniach.
- Spraw, aby Twoje strony uległy degradacji z wdziękiem. Możesz pisać swoje strony dla Z obsługą Flash, przeglądarki szerokoekranowe, ale upewnij się, że krytyczne informacje są widoczne nawet na małym monitorze, który nie obsługuje żadnych specjalnych funkcji (takich jak pliki cookie, Ajax, Flash, JavaScript itp.). Wszystko poza XHTML Basic będzie wykraczało poza niektóre telefony komórkowe. Podczas gdy większość smartfonów radzi sobie z tymi wszystkimi rzeczami, inne urządzenia mobilne nie.
- Zbuduj stronę poświęconą łączności bezprzewodowej — i ułatw jej znalezienie. Jeśli zamierzasz zbudować konkretną stronę dla swoich klientów korzystających z telefonów komórkowych i sieci bezprzewodowych – udostępnij ją. Świetnym sposobem jest umieszczenie łącza do strony bezprzewodowej na samej górze dokumentu, a następnie ukrycie tego łącza przed urządzeniami innymi niż przenośne, korzystając z typu multimediów przenośnych. W końcu większość ludzi wchodzi na twoją stronę główną, nawet na telefonach komórkowych – a jeśli nie ma tam linku do twojej strony bezprzewodowej, odejdą, jeśli strona jest zbyt trudna w użyciu.
Układ strony internetowej dla smartfonów
Pierwszą rzeczą, o której powinieneś pamiętać pisząc strony na rynek smartfonów, jest to, że nie musisz wprowadzać żadnych zmian, jeśli nie chcesz. Wspaniałą rzeczą w większości dostępnych smartfonów jest to, że używają przeglądarek Webkit (Safari na iOS i Chrome na Androida) do wyświetlaj strony internetowe, więc jeśli Twoja strona wygląda dobrze w Safari lub Chrome, będzie dobrze wyglądać na większości smartfonów (tylko dużo mniejszy). Są jednak rzeczy, które możesz zrobić, aby przeglądanie było przyjemniejsze:
- Pamiętaj, że ekran jest mały. Smartfony skondensują wszystkie te kolumny w małym okienku, co może bardzo utrudnić ich odczytanie bez powiększania. Większość użytkowników jest przyzwyczajona do powiększania, ale może to być męczące. Jedna długa kolumna tekstu jest łatwiejsza do odczytania.
- Podziel strony na mniejsze części. Odczytywanie długich fragmentów tekstu na telefonie komórkowym może być trudne, więc umieszczenie ich na wielu stronach ułatwia ich czytanie.
Linki i nawigacja na iPhone'ach
- Im krótsze adresy URL, tym lepiej. Jeśli kiedykolwiek próbowałeś wpisać adres URL na telefonie komórkowym, wiesz, że jest to uciążliwe (może z wyjątkiem nastolatków, którzy są przyzwyczajeni do wysyłania wielu wiadomości tekstowych). Nawet na iPhonie wpisywanie długich adresów URL jest żmudne. Niech będą krótkie.
- Ale długi tekst linku jest łatwiejszy do dotknięcia. Na stronie, na której kilka oddzielnych słów jest powiązanych z różnymi artykułami, które znajdują się obok siebie, dotknięcie właściwego bez powiększania może być bardzo trudne. Wiele osób po prostu się podda i pójdzie gdzie indziej. Linki zawierające od 3 do 5 słów są łatwiejsze do kliknięcia w telefonie niż linki jednowyrazowe.
- Nie umieszczaj nawigacji na samej górze ekranu. Nie ma nic bardziej irytującego niż konieczność przeglądania ekranów i ekranów z linkami, aby znaleźć potrzebne informacje. Jeśli spojrzałeś na strony internetowe zaprojektowane dla telefonów komórkowych, zobaczysz, że pierwsze rzeczy, które się pojawiają, to treść i nagłówek. Następnie poniżej znajduje się nawigacja.
- Nie bój się ukrywać swojej nawigacji.Ukrywanie linków nawigacyjnych z CSS lub JavaScript i sprawianie, że pojawiają się tylko wtedy, gdy użytkownik o to poprosi, jest sposobem na ułatwienie strony dla użytkowników smartfonów.
Wskazówki dotyczące obrazów na smartfonach
- Obrazy muszą być małe. Tak, Android i iPhone mogą powiększać i pomniejszać obrazy, ale im są one mniejsze, zarówno pod względem wymiarów, jak i czasu pobierania, tym szczęśliwsi będą Twoi klienci korzystający z sieci bezprzewodowych. Optymalizacja obrazów to zawsze dobry pomysł, ale w przypadku stron na telefony komórkowe ma kluczowe znaczenie.
- Obrazy muszą być pobierane szybko. Obrazy zajmują dużo miejsca na stronach internetowych, gdy przeglądasz je na urządzeniu mobilnym. I choć często są one bardzo ładne i sprawiają, że strony wyglądają lepiej, gdy są przeglądane w pełnoekranowej przeglądarce internetowej, często przeszkadzają na urządzeniu mobilnym. Dodatkowo, gdy użytkownik smartfona jest w sieci komórkowej, ostatnią rzeczą, za którą chcą płacić, jest pobieranie ogromnych obrazów lub ikon nawigacji.
- Nie umieszczaj dużych obrazów u góry strony. Podobnie jak w przypadku nawigacji, czekanie na załadowanie obrazu zajmującego od 3 do 4 ekranów na samej górze strony może być bardzo nużące. A to jest niezwykle powszechne na stronach internetowych. Jedynym wyjątkiem jest sytuacja, gdy czytelnik wie, że dostanie zdjęcie po kliknięciu, powiedzmy w galerii zdjęć.
Czego należy unikać podczas projektowania urządzeń mobilnych
Tworząc stronę dostosowaną do urządzeń mobilnych, należy unikać kilku rzeczy. Jak wspomniano powyżej, jeśli naprawdę chcesz mieć je na swojej stronie, możesz, ale upewnij się, że witryna działa bez nich.
- Lampa błyskowa: Większość telefonów komórkowych nie obsługuje Flasha, więc umieszczanie go na stronach bezprzewodowych nie jest dobrym pomysłem.
- Ciasteczka: Wiele telefonów komórkowych nie obsługuje plików cookie. iPhone'y mają obsługa plików cookie.
- Ramki: Nawet jeśli przeglądarka je obsługuje, pomyśl o wymiarach ekranu. Ramki po prostu nie działają na urządzeniach mobilnych — są bardzo trudne lub niemożliwe do odczytania.
- Stoły: nie używaj tabel do układu strony mobilnej. I ogólnie staraj się unikać tabel. Nie są obsługiwane na każdym telefonie komórkowym (chociaż iPhone'y i inne smartfony je obsługują) i możesz skończyć z dziwnymi wynikami.
- Tabele zagnieżdżone: Jeśli musisz użyć tabeli, nie zagnieżdżaj jej w innej tabeli. Są one trudne do obsługi przez przeglądarki komputerowe i, co najwyżej, spowalniają ładowanie strony.
- Miary bezwzględne: Innymi słowy, nie określaj wymiarów obiektów w rozmiarach bezwzględnych (takich jak piksele, milimetry czy cale). Jeśli zdefiniujesz coś jako szerokość 100px, na jednym urządzeniu mobilnym, które może mieć połowę ekranu, a na innym może być dwa razy szersze. Najlepiej sprawdzają się rozmiary względne (takie jak ems i wartości procentowe).
- Czcionki: Nie zakładaj, że którykolwiek z czcionki do którego jesteś przyzwyczajony dostęp będzie dostępny na telefonach komórkowych.