6 porad przy projektowaniu stron RWD, które zawsze Ci pomogą.

Każdy chciałby stworzyć stronę, z której byłby dumny. Stronę perfekcyjną ( o tym dlaczego tak trudno je zrobić wkrótce :) ). To nie jest prosty temat. Istnieje masa czynników, które skutecznie nam w tym przeszkadzają nawet kiedy nasz projekt wygląda całkiem fajnie od strony designu. Dziś chciałbym omówić 6 z tych czynników, które przyszły mi do głowy w temacie RWD.

Numero uno – Typografia. 

Internet stoi typografią. Też się dziwiłem, ale prawda jest taka, że w sieci jest jednak więcej tekstu niż kotów. Jakby nie patrzeć większość rzeczy, które na co dzień widzimy na ekranie to literki. Nie można o nich zapominać. Infografiki, wiadomości, posty na blogach, wszędzie mamy słowo pisane. Skoro jest jej (tej typografii w sensie) tak wiele to nie możemy o niej zapominać. Musisz testować wygląd swoich fontów na różnych urządzeniach oraz rozdzielczościach. To, że wygląda pięknie na desktopie nie oznacza, że na telefonach czy tabletach nie stanie się jakimś typograficznym mutantem ciężkim do rozczytania. Testuj fonty oraz ich rozmiary.

Poznaj podstawy typografii. Bardzo Ci to pomoże. Próbuj, sprawdzaj, testuj i poprawiaj i próbuj. Jeśli myślisz, że większy rozmiar tekstu będzie lepszy to tak zrób, podążaj za swoją intuicją. Dzięki testom dostarczysz użytkownikowi tekst, który nie będzie męczył jego oczu i nie będzie musiał scrollować strony nosem na swoim telefonie.

Due – Wyświetlacze Apple – Retina.

Nie bez Kozery Apple właśnie tak nazwał swoją technologię – siatkówka. Ale nie taka, w którą jesteśmy mistrzami tylko taka, którą ma każdy z nas w tyle swojej gałki ocznej. Ma być czytelnie i jest. Większa gęstość pixeli gwarantuje bardziej ostre obrazy czy też lepiej wyrenderowane fonty. Musisz o to zadbać, bo jak bardzo nie hejtowałbyś sprzętu Jobs’a to ma duży udział w rynku i rośnie bo społeczeństwo coraz częściej nań stać (Janusze biznesu się dorabjajo). Tak jak nie dyskryminujemy typoraficznie małych ekranów, tak samo dbamy o retiny – używamy zastępczych obrazów w wyższej rozdzielczości i serwujemy je iUrządzeniom. Różnica wbrew pozorom jest spora – tak ja DVD i Blue-ray: i to i to jest filmem, ale jednak widać różnicę.

Tres – Desktop, tablet, telefon oraz jeszcze …

Zapomnij o świecie, w którym Twoja strona będzie wyświetlana tylko na tych 3 typach urządzeń. Nie ma lekko. Responsywna = uniwersalna. Jeśli ktoś chciałby przeglądać Twojego bloga na swoim smartTV, smartWatchu, radiu samochodowym na androidzie czy swojej wypasionej lodówce lub piekarniku na andku to też powinien móc to swobodnie robić. Oczywiście wyolbrzymiam (Blog kulinarny na piekarniku? Kto wie…). Ale łapiesz sens? Istnieją tam jeszcze netbooki, ultrabooki i wiele innych. Raz zrobisz to dobrze to nie zaskoczy Twojej strony nowe urządzenie na rynku – będziesz gotowy zanim się pojawi.

Quattro – Skup się na zawartości.

Z jakiego punktu być nie startował: mobile-first czy desktop-first czy nawet piekarnik-first – pamiętaj o tym, że zawartość Twojej strony to jest to po co Twój użytkownik przyszedł. Dajesz mu na tacy informacje które go interesują. Ma być najedzony i zadowolony – poleci innym. Powinieneś się na tym skupić na samym początku. U mnie jest to na 4 miejscu ponieważ… Tak wyszło :) Tak całkiem serio, to zanim wybierzesz typografie powinieneś wiedzieć co nią będziesz chciał przekazać. Tona sprzętu, zero talentu (sprzęt – technologia i design, talent – zawartość).

Cinque – Zapomnij o rozdzielczościach.

Jeszcze przed chwilą zwracam Ci uwagę na to, by myśleć o różnych ekranach, urządzeniach a teraz mówię żebyś nie zwracał uwagi na rozdzielczości. Czy ja postradałem zmysły? Nie do końca. Tutaj chodzi mi o to, abyś zapomniał o wymiarach strony. Tworzysz ją responsywną, płynną, dopasowującą się do urządzenia, nie możesz więc opierać się na sztywnych wartościach podawanych w pixelach. Znaczy możesz, ale w pewnym momencie (tym na końcu) przysporzy Ci to więcej złego niż dobrego. Sprawdź przy jakich rozdzielczościach Twoja zawartość staje się nieczytelna i użyj ich jako punktów, w których serwować będziesz inną wersję. Czasami tych punktów będzie sporo, ale w końcu chcesz być zadowolony ze swojego arcydzieła nieprawdaż?

Sei – Pomyśl o transferze

Punkt ściśle powiązany z tym o czym pisałem wcześniej – różne urządzenia. Smartfon nie będzie miał w większości przypadków dostępnego takiego samego transferu jak desktop. Inną kwestią jest też łącze – nie zawsze będzie tak samo szybkie. Myślę że możemy przyjąć założenie – im mniejszy ekran tym mniejszy transfer oraz szybkość łącza – przynajmniej w większości przypadków. Dlaczego możemy tak założyć? Małe – mobilne – nie zawsze szerokopasmowy net. Optymalizuj. Co tylko się da: minimalizuj CSS, JS, optymalizuje grafiki – jest mnóstwo dostępnych narzędzi aby Twój png czy jpg ważył mniej.

Podsumowując.

Nie chodzi tylko o wygląd na telefonie i tablecie. Chodzi o dostarczenie narzędzia, które będzie na tyle elastyczne, aby dać użytkownikowi niezapomniane doświadczenie niezależnie od ekranu. Myślę, że powyższe rozwiązanie przybliży Cię do szczęśliwych użytkowników, którzy i tak nie zwrócą na to uwagi – dobrych rzeczy się nie dostrzega – ale zapamiętają podświadomie, że dałeś im coś wartościowego, dobrego (zawartość), podanego w przystępnej i prostej formie (optymalizacja, typografia, grafiki) i wrócą do Ciebie. Poza tym będziesz już przygotowany na rozdzielczości, które dopiero nadejdą (Phillips właśnie wypuszcza monitory o proporcji 21:9…).

PS – umiesz już liczyć do sześciu po włosku.