Otwórz Zamknij Wyszukaj
naglowek_nowe-jestemobi

Nowe jestem.mobi

0

22 lipca 2013

Kategorie: HTML5, Mobile web, RWD, UI/UX
Autor: Monika

Konieczność zmiany layoutu zasygnalizowałam już we wrześniu zeszłego roku, planowałam go wdrożyć z początkiem tego roku, potem na wiosnę, potem z końcem maja i tak przesuwany w nieskończoność deadline ostatecznie zatrzymał się w zeszły piątek, 19. lipca, kiedy to dopełniłam obietnicy. Warto było tyle się pieścić, bo wypracowane UX jest pyszne!

Nad serwisem pracowały 4 osoby (w tym ja). Bartek, Mariusz, Miro – dziękuję. Kawał dobrego sajtu! Publicznie powtórzę: Have I told you that I love U all?! :*

Niepowtarzalne RWD

W przypadku redesignu jestem.mobi nie mieliśmy wątpliwości, aby podążyć Responsive Web Design.
Wykorzystaliśmy więc: HTML5, jQuery, CSS3 oraz Ajax – bez nich nie osiągnęlibyśmy tak dopieszczonego UX. Odpowiadają one za następujące elementy:

  • Ajax – filtrowanie wpisów, wyszukiwarka
  • jQuery/ CSS3/ Media Queries – animowanie kafelków z wpisami na stronie głównej
  • CSS3 – hovery na buttonach, płynne przejścia między animacjami
  • HTML5 – lepsza semantyka kodu.

Głównym problemem, jaki napotkaliśmy to równe ustawienie wszystkich kafelków ze wpisami pod różnymi rozdzielczościami. Różne przeglądarki, różne ich wersje i wreszcie różne rozdzielczości – fragmentacja pełną gębą i szczerze mówiąc, nie dało się tego zrobić idealnie – poradziliśmy sobie z tym w 90 proc. Jeśli więc zauważysz gdzieś ich karygodny wygląd, daj proszę znać.

Animowane kafelki niestety wydłużają czas ładowania się strony. Z drugiej strony, w połączeniu z RWD dają niepowtarzalny efekt. Pobaw się rozmiarem okna przeglądarki (złap kursorem jeden z jej boków i w ten sposób zwiększaj i zmniejszaj jej rozmiar) i sprawdź, jak płynnie zmieniają swoje położenie.

Nowe sekcje

Na stronie głównej pojawił się kafelek „Koniecznie zainstaluj”, gdzie znajduje się miejsce dla aplikacji, które chcą się reklamować z pomocą i zasięgiem jestem.mobi.

Jest też kafelek „Musisz to przeczytać”, w którym będę przypominać najciekawsze wpisy z przeszłości.

Dużą część strony głównej zajmuje slider z raportami – nota bene moje publikacje są największą wartością jestem.mobi. Od teraz wszystkie widoczne na dzień dobry.

Na stronie głównej pojawią się też wpisy „na dwa kafelki”. W ten sposób będą oznaczane dłuższe teksty, które mają charakter publicystyczny lub edukacyjny. Jutro dla przykładu opublikuję pierwszy wpis z nowej serii „Pojedynek dwóch aplikacji – która bardziej user-friendly?”.

Nad wpisami jest też banner reklamowy. Obecnie widzisz w nim reklamę jednego z partnerów jestem.mobi, firmy Redlink, docelowo może prezentować więcej kreacji, np. zapowiedź zbliżającej się konferencji. Oczywiście banner, zgodnie z ideą responsive ads, również dostosowuje się do wielkości ekranu przeglądarki.

Na podstronie pojedynczego wpisu zamieszkało „Click to tweet”, tj. okienko z najciekawszym zdaniem z danego wpisu. Po kliknięciu w nie można je od razu zatweetować. Najefektywnie i najefektowaniej to wygląda we wpisie „Wyniki badania Co gryzie polskiego marketera”. W tak prosty sposób możesz popularyzować mądrości jestem.mobi ;) Mam przeczucie, graniczące z pewnością, że funkcją „Click to tweet” zarażą się szybko inne polskie serwisy i blogi.

Nowe UI

Mocne kolory, płaskie formy, duże zdjęcia na podstronach, dwa poziomy nawigacji, responsive. Nowe jestem.mobi czerpie z najnowszych trendów zachowując swój styl, ładną, dużą typografię, sidebar z filtrami, komentarzami, tagami.

Choć pierwsze wrażenie możesz mieć takie, że interfejs nowego jestem.mobi wprowadza chaos. To najprawdopodobniej zasługa miniaturek wpisów na kafelkach strony głównej, które mogą wywoływać takie odczucie. Na razie zostały tylko przystosowane do nowej wielkości (350×350), a w większości potrzebują przeprojektowania. Stopniowo będziemy każdą z nich odchudzać, odsączać z tekstu, spłaszczać, by pasowały do nadrzędnej koncepcji „płaskiego” layoutu.

Poza powyższym, kafelki mają same zalety ;) Sam pomysł na nie na stronie głównej nie jest oczywiście nowy – my jedynie zanimowaliśmy je w oryginalny sposób. Od dawna ubolewałam, że mocne wpisy z upływem czasu przykrywane są przez nowe wpisy i giną na kolejnych podstronach blogach. Start layout nie wspierał promocji treści. Teraz przy odrobinie cierpliwości i kilku scroll’ach w dół dotrzesz do pierwszego wpisu, „Manifest jestem.mobi”. Do tej chwili wpisów na blogu uzbierało się 120. Teraz kafelki na głównej stronie pozwalają łatwo i szybko nawigować po zawartości bloga, świetnie wyglądają na smartphonie i tablecie a kolorystyczne rozróżnienie pomaga w odnajdywaniu konkretnych wpisów. 

 

P.S. ku pamięci

Dla przypomnienia pierwszy layout jestem.mobi wyglądał tak:

Na szczęście straszył tylko kilka dni ;) Potem był już stary dobry ten:

I wreszcie cieszę się nowym. A Tobie jak się podoba?

Źródło zdjęcia z miniaturki wpisu.
Zdjęcie z nagłówka wpisu zawiera przypadkowe lokowanie produktu ;) W takich okolicznościach przyrody startował serwis :)

Masz chwilę? Przeczytaj jeszcze:

jestem.mobi

Zamknij

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close