4 Programowanie 5 minut czytania

Projektowanie stron na iPhone

22 sierpnia była premiera tego telefonu w Polsce. Do pierwszego września Era sprzedała 13,9 tys. telefonów iPhone 3G. Do tej pory nie udało mnie się znaleźć ile Orange sprzedał tych gadżetów, ale niech będzie, że połowę tego. W sumie to daje około 20 tysięcy nowych odbiorców dla stron WWW! Warto zająć się tymi użytkownikami, bo jak wiadomo iPhone ma WiFi i każdy kto zna mój nowy projekt stanowi niezły kąsek dla webmasterów. Poniżej przedstawię najważniejsze rzeczy na jakie należy zwrócić uwagę przy tworzeniu wersji stron na iPhone.

Think different

Zanim zaczniemy tworzyć strony pod iPhone, trzeba zmienić lekko myślenie. Otóż w tym telefonie wszystko robi się palcami (ekran dotykowy). Dlatego projektując strony trzeba wziąć to pod uwagę, bo przecież nikt nie będzie się męczyć z kliknięciem w drobny link „więcej”. Owszem, Safari ma możliwość skalowania strony (zoom in, zoom out) i przekręcania ekranu o 90 stopni, ale jest to bardzo uciążliwe. Jeszcze bardziej uciążliwe, gdy strona ma dużo fajerwerków. Niby korzystasz z normalnej przeglądarki, ale mimo wszystko jest to urządzenie mobilne.

Sekcja head

Najważniejszymi elementami przy tworzeniu wersji mobilnych stron na iPhone są meta viewport i arkusze stylów dla telefonu.
Viewpoint wygląda tak:


  • width, ustawia szerokość strony (w tym przypadku na szerokość urządzenia),
  • initial-scale, początkową skale odwiedzanej strony (1.0 normalna, 2.0 dwa razy większa itp.). Najlepiej ustawiać zawsze na 1.0,
  • maximum-scale, maksymalne powiększenie strony,
  • user-scalable, pozwalamy lub nie, skalować stronę użytkownikowi.

Najciekawszym atrybutem jest maximum-scale. Cała sztuczka polega na tym, że zaczyna on działać, gdy przeglądamy stronę poziomo (a właściwie w momencie przekręcenia widoku z pionowego). Wtedy strona w poziomie się powiększa x razy. Poniżej screeny mojego bloga z paramtrem maximum-scale=1.0 a obok 2.0


Jak widać na obrazach, jest różnica. Co do initial-scale, nie zauważyłem żadnej różnicy w działaniu strony w zależności od parametrów.

Arkusze stylów

Dla iPhone należy zaimportować oddzielny plik css z lekko zmodyfikowanymi stylami. Należy to zrobić tak:


Jednym z najważniejszych elementów na jaki należy zwrócić uwagę to nadanie linkowi (najlepiej blokowemu) koloru na tapnięcie (czyli po naszemu - kliknięcie):

a { -webkit-tap-highlight-color: #f00; }

Dzięki temu zapisowi wszystkie tapnięte linki zostaną oznaczone jasnym czerwonym (blokowym) tłem. Bardzo fajna i przydatna rzecz, bo widzi się w co klikamy naszymi wielkimi paluchami ;).

Ponadto w CSS dla iPhone, a właściwie Safari (-webkit), możemy korzystać z atrybutów jakie są (będą?) w CSS3. Na przykład zaokrąglone rogi (kołowe, eliptyczne). Gmail z tego między innymi korzysta.

Te lekko zmodyfikowane style, to głównie nadanie większości (jak nie wszystkim) elementom display: block;. Należy pamiętać, że ekran iPhona ma 320 pikseli szerokości, to jest mało, więc zabawy w opływanie nie ma sensu. Strona staje się przez to nieczytelna.

Skalowanie obrazów

W przypadku mojego bloga nie robiłem oddzielnej wersji (pod specjalnym adresem) bloga. Dołączyłem tylko dodatkowy arkusz CSS i pozamiatane. Jedyny mankament, to właśnie obrazki. Czytając wpis o serwisie znanylekarz.pl jest tam umieszczone logo tego serwisu. Nie posiada ono atrybutu scale, z którym Safari dobrze sobie radzi i automatycznie skaluje obrazek, przez co oryginalne rozmiary psują trochę kompozycję.

””

Powyższy kod skaluje obrazek dwukrotnie (zmniejsza).

Ograniczenia

Safara na iPhone nie wspiera:

  • window.showModalDialog(); window.print(),
  • zdarzenia mouse-over,
  • hovery,
  • aplety java,
  • flash,
  • SVG,
  • XSLT,
  • pluginy instalatory,
  • certyfikaty x.509,
  • WML,
  • wgrywania i ściągania plików


Raz w miesiącu e-mail z najlepszymi artykułami

Zdjęcie autora wpisu - Piotr Cichosz

Piotr Cichosz — autor wpisu

Frontend developer. Tworzę zaawansowane systemy webowe w JS. Swoją wiedzę nt. SEO wykorzystuję do rozwijania własnych projektów (z lepszym lub gorszym efektem). Dużo eksperymentuję i staram się określić jak bardzo można nagiąć cierpliwość algorytmów Google (:.

Komentarze 4

author Konrad www 12.11.2009 09:56:11

Przydatny tekst.

Może coś podobnego o tworzeniu stron dla telefonów z Windows Mobile?
To prawda, że one pozwalają oglądać normalne strony (przewijanie, skalowanie) - ale nie jest to szczególnie wygodne.

author Zniwus 20.02.2010 18:28:55

iPhone w wersji 3.1 OS przeglądarka obsługuje SVG

author Dawid Paszko www 22.01.2011 12:30:37

Interesujacy artykul.
Zamierzam wlasnie zrobic wersje mojej strony na urzadzenia przenosne (dla iPhona tez). Tylko nie moge sie zdecydowac czy zrobic subdomene czy osobny arkusz stylu...

author kamil www 03.09.2011 11:47:51

Kiedyś męczyłem się gdy projektowałem strony na smartphony, teraz jednak trafiłem na dosyć fajny extension za pomocą którego strony same się automatycznie zamienieniają w strony mobilne.
Jest to jednak tylko dla posiadaczy stron www z CMS joomla, należy zainstalować to cudeńko: http://extensions.joomla.org/extensions/mobile/mobile-display/11722
Dzięki temu komponentowi automatycznie strona zamienia się w zależności od telefonu który ja przegląda. Można ładnie stronę zmodyfikować. Polecam

Dodaj komentarz