Najlepsze praktyki przy projektowaniu stron na tablety

26 sierpnia 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Poniższy artykuł napisał Ben Terrill. Terrill jest współautorem e-booka „Tablet Web Design Best Practices”(Najlepsze praktyki przy projektowaniu stron na tablety), a także VP of Customer Success w Mobify. Pracuje również nad stronami takich korporacji jak British Telecom, Starbucks i Expedia.

Tabletowa rewolucja puka do naszych drzwi. Najnowsze badania przeprowadzone przez firmę Adobe pokazują, że największe strony internetowe są częściej odwiedzane z tabletów niż smartfonów. A mimo to tradycyjna strona internetowa nie działa zbyt dobrze na tablecie. Typowy rozmiar pisma wynoszący 12 pikseli jest zbyt mały, tak samo jak przyciski. Obrazki nie są ostre, a co najgorsze niektóre funkcje po prostu nie działają.

Dobra wiadomość jest taka, że nie musisz zmieniać swojej strony całkowicie. Działająca desktopowa strona jest świetną bazą do utworzenia wersji tabletowej. W tym artykule pokażę wam sześć technik z najnowszej książki Mobify „Tablet Web Design Best Practices” (Najlepsze praktyki przy projektowaniu stron na tablety), które znacząco usprawnią działanie waszej strony na tabletach.

Daj się dotknąć

Jedną z najlepszych metod poprawiających działanie standardowej strony na tablecie jest przystosowanie jej do interfejsu dotykowego. Jeśli elementy strony wyglądają jakby dało się je przesuwać, naciskać lub zmieniać ich wielkość, musisz dodać obsługę tych funkcji, aby można było z nich korzystać na tabletach.

Zastanów się nad dodaniem takich elementów jak karuzele, harmonijki, szufladki i panele. Mobify ma w swojej ofercie wiele otwartych modułów JavaScript, które możesz wykorzystać w tym celu.

Uwaga od redaktora: „Ostatnio napisaliśmy slider dostosowany do ekranów dotykowych. Osobiście uważam Royal Slider za przyjazny dotykowo, a do tego responsywny.”

Zwiększ czcionkę i wysokość linii

Nie zmuszaj użytkowników do podwójnego stukania lub powiększania treści. Zwiększ wielkość czcionki do przynajmniej 16px. Ustawienie wysokości linii na 1.5 wniesie trochę świeżego powietrza do tekstu, tak jak w przykładzie poniżej. Nie ważne jak użytkownik trzyma tablet, tekst musi być zawsze czytelny.

Projektowania CSS na tablety - zrzut ekranu

Szanuj palce użytkownika

Nasze palce są bardziej niezdarne niż kursor, dlatego aby ułatwić trafianie w elementy interfejsu użytkownika powinno się zwiększyć odstępy między nimi. Nasze palce wymagają co najmniej 44px, aby komfortowo korzystać z przycisków. Nie zapomnij zaprojektować ich w ten sposób.

Projektowania CSS na tablety - rysunek przycisku

Stwórz cel o wielkości przynajmniej 44px na 44px wykorzystując dopełnienie, a nie marginesy. Dopełnienie zwiększa rzeczywisty obszar dotyku, gdzie margines zwyczajnie zwiększa ilość pustego miejsca wokół elementu.

Udostępnij klawiaturę kontekstową

Jedną z największych zalet klawiatur programowych jest ich dynamiczna natura. Możesz zmienić ich układ w zależności od kontekstu. Na przykład, jeżeli chcesz wpisać adres e-mail, klawiatura powinna zawierać znak „@”, znak podkreślenia oraz łącznik. Jeżeli użytkownik proszony jest o podanie numeru telefonu, udostępnij mu klawiaturę numeryczną. Staraj się korzystać z poniższych typów pól w formularzach:

  • Standardowa klawiatura: <input type=”text” />
  • Adresy URL: <input type=”url” />
  • E-mail: <input type=”email” />
  • Klawiatura numeryczna: <input type=”text” pattern=”[0-9]*” />
Klawiatury ekranowe - rysunek

Uwaga od redaktora: „Napisałem o tym szerzej w artykule „HTML5 input attributes/types/elements”. Jest już trochę stary, ale nadal użyteczny”.

Ikonki czcionkowe górą

Rozdzielczość i zagęszczenie pikseli na ekranie tabletu są o wiele większe niż na ekranie komputera i laptopa. Dlatego jeśli grafiki nie zostaną przystosowane do wyświetlania na ekranach o wysokiej rozdzielczości, mogą źle wyglądać. Dobrym rozwiązaniem tego problemu jest używanie ikonek czcionkowych, ponieważ skalują się one poprawnie na ekranach o dużej rozdzielczości. Można je łatwo kolorować i cieniować przy użyciu CSS. Do ich pobrania potrzebne jest tylko jedno zapytanie HTTP i nie trzeba się bawić w sprite’y.

Stwórz swój własny zestaw ikon, lub użyj gotowych zestawów, np. Font Awesome, glyphish, iconsweets, symbolset lub icnfnt.

Ikony czcionkowe - rysunek

Uwaga od redaktora: kiedyś zrobiłem wielki zbiór ikon czcionkowych. Jestem zwolennikiem stosowania tych technik HTML przy dodawaniu ich na stronę, ponieważ w ten sposób zachowuje się dostępność. Polecam narzędzie IcoMoon do tworzenia i dopasowywania zestawów ikon czcionkowych.

Wydajność i projektowanie

Nowoczesne techniki projektowania, takie jak projektowanie responsywne, mogą obniżyć wydajność strony. Ponieważ 57% użytkowników opuści twoją stronę jeśli wczytywanie trwa dłużej niż 3 sekundy, wydajność jest najważniejsza. Wiele porad dotyczących usprawniania wydajności stron zaleca kompresję obrazów i łączenie kodu CSS oraz JavaScript, aby zredukować liczbę zapytań HTTP i ogólną wielkość strony. Dzięki tym poprawkom strona będzie wczytywała się szybciej, a użytkownicy będą zadowoleni. Narzędzia takie jak Uglify, Saas, Compass i Mobify.js automatycznie poprawiają wydajność kodu.

Uwaga od redaktora: korzystałem z kilku technik optymalizacyjnych opisanych w artykule Let’s Do Simple Stuff to Make Our Websites Faster (Proste triki poprawiające szybkość stron WWW).

Naprzód!

Dzięki powyższym technikom optymalizacji w swoim przyborniku nie musisz martwić się o poprawne działanie swojej strony na tabletach. Więcej sposobów na poprawienie działania Twojej strony na tabletach opisuje ten darmowy e-book Mobify.

Autor: Ben Terrill

Źródło: http://css-tricks.com/a-couple-of-best-practices-for-tablet-friendly-design/

Tłumaczenie: Piotr Janczukowicz

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *