Archive for Sierpień, 2013

Layout szyty na miarę

Zauważam ostatnio znaczny spadek ilości sporów i bezsensownych dyskusji podczas spotkań towarzyskich. Jeszcze nie tak dawno temu wystarczył drobny impuls w stylu przekręcenia dokładnej daty Bitwy pod Grunwaldem i już byliśmy świadkami niekończącej się kłótni o to, kto ma rację, gdy jeden osobnik mówił o 15 lipca, a drugi upierał się przy 14. Teraz któryś z nich wyciągnie swojego smartfona, wstuka kilka literek w ekranową klawiaturę i już może się cieszyć lub smucić widząc prawidłową odpowiedź. Nazywam się Dawid, jestem Webdesignerem, lubię dygresje i długie wstępy, a to mój pierwszy wpis na firmowym blogu.

Pisząc powyższy akapit zmierzałem do uświadomienia, jak popularne aktualnie są urządzenia mobilne. Sam również wpadłem w tę pułapkę, o czym może świadczyć opinia na studiach, że bez tabletu czuję się jak bez ręki. Dodatkowo korzystne oferty mobilnego internetu u operatorów pozwalają nam być praktycznie bez przerwy online. Druga strona medalu jest taka, że urządzenia te mają jednak zupełnie inne rozdzielczości niż zwykłe monitory używane podczas pracy z komputerem, a strony internetowe często są tworzone w sposób uniemożliwiający ich wygodne przeglądanie.

Z odsieczą przychodzi nowy trend w projektowaniu, czyli responsive web design, co najprościej można wytłumaczyć jako elastyczny układ stron, który potrafi się sprytnie dostosować do żądanej rozdzielczości. Ekspertem w temacie nie jestem (jeszcze ;) ), ale postaram się w prosty sposób przybliżyć całą filozofię.

W projektowaniu takich layoutów są, jak to zwykle bywa, dwie szkoły. Jedna mówi o opieraniu rozmiarów elementów na procentach, druga korzysta z tzw. media queries, czyli przedziałów najpopularniejszych rozdzielczości i dostosowywaniu do nich gabarytów. Osobiście jestem zwolennikiem tej drugiej metody, ze względu na większe podobieństwo do standardowego projektowania, z tym że musimy zaplanować ok. trzech wersji strony zamiast jednej.

Jest to korzystne nie tylko ze względu na wyświetlanie strony, ale też pomaga przy pozycjonowaniu. Do tej pory chcąc mieć mobilną wersję strony musieliśmy używać osobnej domeny, pod którą była osobna witryna, przez co trzeba było pozycjonować tak naprawdę dwa razy. Teraz wszystko zawiera się w obrębie jednego adresu.

Mobilne przeglądarki domyślnie skalują stronę, bez względu na jej rozdzielczość, aby pokazać całą główną treść. Uniknąć takiego zachowania możemy umieszczając w headzie strony tzw. viewport, czyli najprościej mówiąc meta-tag, który określa sposób skalowania.

Ustalając przedziały rozdzielczości nie wystarczy jedynie zmniejszyć szerokość głównego kontenera z treścią. Dochodzi tu kwestia użyteczności. Warto przypomnieć sobie sytuację, gdy zimą zmarzniętymi palcami chcieliśmy trafić w jakiś mały guzik na ekranie telefonu. Nie jest to zbyt komfortowe. Dlatego też przy projektowaniu strony dla przedziału na ekrany telefonów warto stosować duże i wygodne do użycia ikony oraz przyciski. Podobnie jest z polami formularza. Dodatkowo warto taki formularz odchudzić. Korzystanie z internetu w telefonie zwykle odbywa się w sytuacjach, gdy chcemy zrobić coś na szybko. Nie po drodze nam wtedy walka z wieloma polami do wypełnienia. Także nie potrzebujemy wtedy prawdopodobnie wielu zaawansowanych funkcji. Często ma to zastosowanie w wyszukiwarkach.

Warto też zrezygnować z wszelkich bocznych kolumn, które tylko sztucznie zabierają nam przestrzeń na treść, a ich funkcjonalność umieścić w jakimś innym intuicyjnym miejscu, bądź też zupełnie ją odpuścić. Podobnie jest z dużymi obrazkami. Tu można się wspomóc określeniem procentowych rozmiarów, jednak nie można zapomnieć o tym, że jeśli użyjemy takich wartości dla jednego elementu, to wszystkim innym także powinniśmy je ustawić – nie może być tak, że obrazek będzie szerokości 50%, a jego marginesy zostawimy na 20px. W pewnym momencie dojdzie do konfliktu i wszystko się nam posypie jak piasek z worka Grzesiowi w popularnym wierszyku.

To samo tyczy się menu, które zwykle jest dosyć sztywno ułożone w poziomie, a zwężanie szerokości strony sprawia, że przeskakuje ono niżej lub zasłania logo, bo siłą rzeczy nie ma gdzie się zmieścić. Popularnym zabiegiem jest zwiniecie go do listy, pojawiającej się po kliknięciu w odpowiednia ikonkę (przykład poniżej).

menu1

Standardowe menu

menu2

Menu mobilne

To tylko kilka przykładów, jakie zmiany i możliwości niesie ze sobą responsive web design, mam nadzieję, że jeszcze będę miał okazję do tematu powrócić i opisać poszczególne elementy bardziej szczegółowo. Tymczasem wracam do zabawy z łapaniem krawędzi okna przeglądarki, machaniem myszą raz w lewo, raz w prawo i obserwowaniem zachodzących zmian w projekcie, którym się aktualnie zajmuję.

Facebook Case Study

Celem, jaki postawił przed nami klient było nie tylko zbudowanie bazy fanów, ale też wymagał od nich zaangażowania. Co oznaczało nie tylko stworzenie odpowiedniej wycelowanej reklamy, ale również tworzenie odpowiedniej jakości postów, aby wszystko działało.
wzrost like

Jak widać powyżej, ilość fanów rośnie w ładny i wyjątkowo stabilny sposób. Do celu użyłem reklamy. Jednak zamiast wybrać jak najszerszą grupą odbiorców reklamy postanowiłem dokładnie dobrać odpowiednie parametry. Głównymi z nich to: wiek, płeć, zainteresowanie innymi fanpage z branży związanej z erotyką. Wszystko po to, aby pozyskani w ten sposób fani sami z siebie udostępniali treści i w ten sposób dalej, w sposób naturalny, budowali bazę fanów. Zresztą jak widać na poniższym wykresie, rozkład nowych like’ów z reklam i innych źródeł jest mniej więcej równy.

typy like
Z czego w miarę upływu czasu coraz więcej osób poleca nasz fanpage. Dzięki temu, za pomocą odpowiednio dobranych zdjęć, cały czas zyskujemy nowych fanów, przy okazji coraz bardziej zmniejszając wydatki na reklamę. Trudnością jest utrzymanie stałego przyrostu fanów bez używania wspomagania w postaci „historii sponsorowanych”, jednak jest to możliwe. Jednak nawet największa liczba fanów, którzy nic nie robią, jest tylko pustą liczbą i nie przekłada się ani na sprzedaż, ani nawet na rozpoznanie marki.

zaangażowanie
Jak widać, w większości przypadków ilość zaangażowania zależy od czasu jaki post wisi na stronie. Niemniej jednak większość postów posiada współczynnik zaangażowania pomiędzy 11 a 14%. Warto tu zaznaczyć, że zasięg, z racji korzystania z „historii sponsorowanych” jest większy, niż przy fanpage bez zakupionych reklam.

Ważne jest to, że całość tej metody pozwala obniżyć koszta uzyskania like, zarówno tych z kampanii reklamowej, jak i ogólnie.

koszt like

Jak widać, koszt like spadł, pozornie nieznacznie z 29gr do 23gr, co miało przełożenie na 191 like więcej. Kwestia budowania bazy fanów metodą combo po prostu pozwala na spokojne i stopniowe albo utrzymanie tego samego rezultatu za mniejsze pieniądze, albo też na zwiększenie przyrostu fanów.

Podsumowując, poprzez dokładne zgranie czasu publikacji postów z ich treścią, oraz wspomożenie tego dokładnie wycelowaną reklamą pozwala na dwukrotnie szybszy przyrost like’ów niż tylko w wypadku samej treści lub samej reklamy. Dodatkowo dzięki starannemu prowadzeniu fanpage i wyniku tego zaangażowaniu użytkowników w budowę bazy fanów pozwala na stopniowe zmniejszanie budżetu na reklamę.

Zmiany w kampanii AdWords – czy opłacalne?

Opiekowaliśmy się ostatnio kampanią dla klienta, który swoją działalność prowadzi na terenie całej Polski. Firma jest dość spora, dlatego zależy jej na uzyskaniu bardzo dużej ilości kliknięć, przy jednoczesnym zachowaniu rozsądnego budżetu. Funkcjonuje w branży medycznej, która jest bardzo wymagająca jeśli chodzi o promocję, ze względu na bardzo liczna konkurencję. Nie zrażając się tym, dobraliśmy odpowiednie słowa kluczowe i przystąpiliśmy do optymalizacji.

Czas Śr.CPC Kliknięcia Koszt
1 tydzień 0,67 zł 467 313 zł
2 tydzień 0,48 zł 810 387 zł
3 tydzień 0,36 zł 958 348 zł
4 tydzień 0,35 zł 816 288 zł
5 tydzień 0,25 zł 1 126 281 zł

Praca nad współczynnikiem klikalności i wynikiem jakości owocowała tym, że kampania dobrze się rozwijała. Średni koszt kliknięcia stale malał, jednak wiadome było, że taki stan rzeczy nie może utrzymywać się wiecznie i w końcu ustabilizuje się na jednym poziomie.

case przed

Tak też się stało, a my zaczęliśmy się zastanawiać co jeszcze można zrobić, by klient płacił mniej. Postanowiliśmy do nazw produktów i usług które oferował klient, dodawać konkretne nazwy miast w których ma on swoje filie. Był to proces niezwykle żmudny i pracochłonny, wymagający od nas sporych nakładów czasu, jako że przedstawicielstwa klienta w kraju są bardzo liczne.

Tym bardziej ucieszyły nas rezultaty tego zabiegu. Nie tylko udało się obniżyć koszty kliknięcia o niemal 30%, ale mimo niższych stawek, reklamy klienta wciąż wyświetlały się na wysokich pozycjach, gdyż lepiej trafiały w gust użytkowników, którzy byli bardzo precyzyjni w formułowaniu zapytań wpisywanych w wyszukiwarkę.

Takie zachowanie wysokich pozycji jest ważne dlatego, że nawet jeśli użytkownicy nie klikają naszej reklamy, zwracają na nią uwagę, często zapamiętują nazwę firmy, i gdy kolejny raz się z nią spotkają, nazwa ta nie będzie im obca, co jest ważne przy budowaniu szeroko rozpoznawanej marki.case po

Zmiany w kampanii po modyfikacjach:

Śr. CPC – ▼29 %

Kliknięcia – ▲38 %

Koszt – ▼2,5 %