Lizard Media Blog

Kompleksowe rozwiązania dla Grupy Scarlett

2012-01-18T13:18:00.000+01:00

Wczoraj miała miejsce premiera nowego serwisu internetowego Grupy Scarlett.

W ramach wszystkich działań wykonaliśmy:

analizę ruchu i analizę ekspercką poprzedniego serwisu internetowego wraz z raportem,
komplet makiet nowego serwisu wraz ze zdalnymi testami użyteczności (remote usability testing),
projekt graficzny,
oprogramowanie i wdrożenie systemu LizardCMS Light,
optymalizacja wielkości strony oraz SEO,
wdrożenie serwisu internetowego,
projekt i wdrożenie landing pages pod kątem działań SEM.

Całość ma na celu wprowadzenie spółki w nowoczesne rozwiązania internetowe, jako skuteczne narzędzie promocji i komunikacji z klientami.

Obecnie przygotowujemy kompleksowe działania marketingu w wyszukiwarkach (SEM).

Lizard Media dla Grupy Kęty

2012-01-18T13:12:00.000+01:00

Zakończyliśmy prace nad wersją mobilną serwisu internetowego Grupy Kęty.

Projekt był jednym z elementów kompleksowego wprowadzenia Spółki w nowoczesne rozwiązania webowe. Wkrótce zostanie wdrożony system e-mail marketingowy, blog oraz Intranet.

"Naszym celem jest wdrożenie profesjonalnych narzędzi do komunikacji spółki z inwestorami, które będą ułatwiały pozyskiwanie informacji o sprawach Grupy. Wersja mobilna to szybki dostęp do informacji, blog to miejsce bardziej bezpośredniego kontaktu z inwestorami. Zaproponowaliśmy rozwiązania, które nie są jeszcze standardem w rozwiązaniach internetowych polskich spółek akcyjnych. " – mówi Paweł Biliński, UX designer w Lizard Media.

O usability tu i ówdzie

2011-10-31T14:47:00.000+01:00

W ostatnim czasie zdecydowanie mniej wpisów niż zwykle, bo i pracy bardzo sporo. Nie odciągnie nas to jednak od udziału, jak co roku, w listopadowych imprezach związanych z usability. Pojawimy się na WUD Silesia, a także na World Usability Day we Wrocławiu. Pokusimy się zapewne o relacje z tych imprez.

Czym się obecnie zajmujemy?

wdrożeniem bloga, wersji mobilnej oraz systemu do e-mail marketingu dla Grupy Kęty
projektem i wdrożeniem Intranetu dla Grupy Kęty
wdrożeniem nowego serwisu a także kampanii AdWords dla Grupy Scarlett
testami nowej Strefy Autoryzowanej dla Aluprof S.A.
redesignem naszego CMS-a

Infografika: do czego dążymy?

2011-09-08T16:57:00.001+02:00

Justyna stworzyła nową, piękną infografikę. Tym razem zależało nam na przedstawieniu tego, co składa się na realizację celów biznesowych klienta.

Nowy serwis BKS.bielsko.pl

2011-09-06T15:27:00.000+02:00

Zakończyliśmy prace nad nowym serwisem internetowym Bialskiego Klubu Sportowego. Naszym zadaniem było przeanalizowanie konkurencji, stworzenie prototypu serwisu w postaci kompletu makiet, stworzenie projektu graficznego, oprogramowanie, wdrożenie systemu LizardCMS, testy.

Na Flickr.com umieściliśmy galerię z procesu projektowego, który wykorzystaliśmy podczas realizacji nowego serwisu: od papierowych makiet, przez prototyp elektroniczny, skończywszy na grafice, programowaniu i testach.

Redesign dla Hewalex

2011-08-24T14:41:00.002+02:00

Zakończyliśmy prace nad kompleksowym redesignem strony internetowej dla producenta kolektorów słonecznych – Hewalex. Celem naszych działań było zaprojektowanie nowej architektury informacji oraz layoutu, który ma przynieść wzrost efektywności strony internetowej, a co za tym idzie, wzrost wskaźnika ROI z działań SEM.

W ramach działań stworzyliśmy również szablon landing page oraz mailingu.

"Firma Lizard Media spełniła nasze oczekiwania w 100%. Firma godna polecenia przede wszystkim za profesjonalne podejście do zleconego projektu, kreatywność, terminowość oraz bardzo dobry kontakt z klientem." – Aleksandra Luty, dział marketingu Hewalex.

Proces redesignu dla tego case'u przebiegał następująco:

badania clicktrackingowe, analiza wyników wraz z raportem końcowym,
analiza ekspercka, prezentacja całościowa wyników analizy,
stworzenie kompletu makiet low-fidelity nowego serwisu internetowego,
zaprojektowanie nowego designu strony internetowej, który został stworzony jako nowa linia graficzna firmy w dziedzinie Internetu,
przygotowanie dokumentacji dla programistów.

Efekty naszych prac:

Kompleksowa obsługa Grupy Scarlett

2011-08-23T13:53:00.002+02:00

Podpisaliśmy umowę na kompleksową obsługę Grupy Scarlett w kontekście rozwiązań internetowych. Naszym zadaniem będzie stworzenie spójnej strategii spółki dla Internetu, wdrożenie zaplanowanych rozwiązań, analiza obecnej sytuacji grupy w Internecie, nowa strona internetowa, działania SEM i obsługa graficzna.

Zakończenie pierwszego etapu działań planowane jest na koniec tego roku.

Jak realizujemy projekty?

2011-08-20T13:49:00.004+02:00

Stworzyliśmy nową infografikę prezentującą proces realizacji typowego projektu internetowego w Lizard Media.

Typowy proces realizacji projektu internetowego
w Lizard Media

Autorem infografiki jest Justyna Owczarz-Bilińska.

Konkurs na nową etykietę polskiego wina Herbowego

2011-08-17T13:42:00.001+02:00

Oficjalnie wspieramy Winnicę Zbrodzice Nobile Verbum w kontekście rozwiązań internetowych i graficznych. W ramach stałej współpracy, jako kolejny element po nowej stronie internetowej Winnicy oraz stronie produktowej Wina Herbowe, przygotowaliśmy projekt nowych etykiet na kolejne roczniki wina. Jednak to Internauci ostatecznie zadecydują o tym, która etykieta znajdzie się na butelkach. Stworzyliśmy prostą aplikację do głosowania pod adresem http://etykieta.herbowe.pl/.

Nasze propozycje etykiet:

Propozycja nr 1

Propozycja nr 2

Zagłosuj na ulubioną etykietę, aby już w kolejnym roku zobaczyć na półce sklepowej wybrany wygląd nowej butelki.

Zobacz także: strona Winnicy na FaceBooku.

CSR dla Grupy Kęty

2011-08-14T15:50:00.001+02:00

Zaprojektowaliśmy, wdrożyliśmy. Nowy dział CSR na stronie internetowej Grupy Kęty. Naszym zadaniem było stworzenie layoutu spójnego z całością serwisu internetowego, testy oraz wdrożenie.

Nowa strefa autoryzowana dla Aluprof

2011-08-10T15:41:00.000+02:00

Podpisaliśmy umowę na wykonanie nowej strefy autoryzowanej dla Aluprof S.A. To aplikacja dedykowana B2B, która ułatwia udostępnianie wiedzy i zasobów pomiędzy spółką a jej kontrahentami. Naszym zadaniem jest analiza wymagań, zaprojektowanie, oprogramowanie i testowanie aplikacji oraz wdrożenie na serwer produkcyjny.

Całość zostanie uruchomiona na nowej platformie o nazwie roboczej "Reptile", która w przyszłości posłuży jako baza do nowych wdrożeń aplikacji dedykowanych, CRM, ERP. Reptile to nie tylko optymalny kod, ale przede wszystkim skalowalność i modularność.

Wdrożenie planowo powinno zakończyć się w ciągu kilku miesięcy.

taskTracker - nowy produkt

2011-08-05T15:08:00.002+02:00

Rozpoczęliśmy prace nad wersją beta nowego produktu o nazwie taskTracker. Jest to nowy pomysł na szybki i wygodny system do bugtrackingu i zarządzania projektami. Oprogramowanie bazuje na silniku Mantis BT. W środku: rozszerzone funkcjonalności, poprawiony interfejs, lepsza użyteczność i wiele więcej.

Co charakteryzuje taskTrackera?

szybkość i wygodna obsługa
zaawansowany bugtracking
zarządzanie projektami
wielojęzyczność
interfejs dla klientów
integracja z Google Calendar
integracja z Wiki i Twitterem
wsparcie dla RSS

Obecnie prowadzimy prace nad uruchomieniem demo pierwszej bety produktu. Naszą ambicją jest udostępnienie produktu w postaci usługi online, odpłatnej w modelu miesięcznego abonamentu. Wkrótce więcej informacji na ten temat.

Prezentujemy kilka zrzutów ekranu taskTrackera:

Widok tablicy

Mapa drogowa projektu

Widok zadań dla użytkownika

Podoba się? Polub projekt na FaceBooku!

Oferta pracy: przedstawiciel handlowy

2011-08-03T13:15:00.000+02:00

Opis stanowiska: przedstawiciel handlowy zajmujący się aktywnym pozyskiwaniem nowych klientów.

Zakres obowiązków:

Aktywne pozyskiwanie nowych klientów
Profesjonalna sprzedaż rozwiązań i usług na terenie całego kraju,
Prowadzenie negocjacji handlowych
Przygotowywanie ofert handlowych
Realizacja założonego planu sprzedaży
Prowadzenie dokumentacji handlowej
Praca w biurze i w terenie

Wymagania:

Umiejętność profesjonalnej prezentacji produktów i rozwiązań firmy
Minimum 2-letnie doświadczenie w pracy na stanowisku handlowca
Wiek minimum 25 lat
Silna motywacja w realizacji wytyczonych celów
Znajomość branży IT
Umiejętność kreatywnego rozwiązywania problemów
Umiejętność profesjonalnego kontaktu z klientami firmy
Wysoka kultura osobista
Znajomość języka angielskiego na poziomie umożliwiającym komunikację w mowie i piśmie
Prawo jazdy kat. B, własny samochód
Gotowość do samodzielnej pracy w terenie i częstych podróży służbowych

Mile widziane atuty:

Znajomość zagadnień z zakresu rozwiązań internetowych, grafiki oraz fotografii

Oferujemy:

Pracę w rozwijającej się dynamicznie firmie nastawionej na wysoką jakość oferowanych produktów
Wynagrodzenie uzależnione od osiągniętych wyników
Forma współpracy: umowa zlecenie/podział zysków
Kontakt z najnowszymi technologiami

Osoby zainteresowane prosimy o wysyłanie CV oraz listu motywacyjnego na adres praca@lizardmedia.pl.

Nowe rozwiązania dla ioGreen software house

2011-04-19T10:51:00.000+02:00

ioGreen software house to firma programistyczna o zasięgu europejskim specjalizująca się w rozwiązaniach opartych na platformach Java EE oraz Android. Dla ioGreen wykonaliśmy kompleksowo uproszczoną identyfikację wizualną marki, design nowego serwisu internetowego oraz wdrożenie strony WWW zgodnie z panującymi standardami sieciowymi (HTML, WCAG, CSS 2.1 z elementami CSS3).

Nowe logo ioGreen

"Wybraliśmy Lizard Media jako wykonawcę naszej identyfikacji wizualnej oraz strony WWW, ponieważ cenimy jakość dostarczanych przez nich rozwiązań, doskonały i szybki kontakt oraz zaangażowanie w każdy realizowany projekt. Lizard Media z entuzjazmem podejmuje nowe wyzwania i realizuje nasze koncepty. Ich wiedza poparta doświadczeniem jest wyjątkowo przydatna w ramach consultingu dla naszej firmy."

— Henryk Konsek, właściciel ioGreen software house

W ramach projektu skorzystaliśmy z dobrodziejstw MockFlow oraz UXPin.

Beskidzkie Centrum Medyczne na nowo

2011-04-18T14:02:00.001+02:00

Nasza agencja zakończyła kompleksowe prace dla Beskidzkiego Centrum Medycznego. W ramach stałej obsługi wykonaliśmy:

zupełnie nową identyfikację wizualną marki oraz projekty materiałów marketingowych
część analityczną (analiza konkurencji, SWOT)
komplet makiet serwisu internetowego
projekt graficzny strony WWW
badania usability na makietach oraz projekcie graficznym
oprogramowanie, optymalizację i wdrożenie strony WWW na platformie LizardCMS

Celem projektu, który rozpoczęliśmy początkiem tego roku, było odświeżenie wizerunku marki nie tylko w Internecie, ale również poza nim (nowe logo). Dzięki nowemu serwisowi WWW pacjenci mogą w łatwy sposób znaleźć przydatne dla nich informacje: cennik, listę lekarzy pracujących w Centrum, poznać historię BCM, zarejestrować się online do lekarza i wiele więcej.

Nowe logo BCM

Beskidzkie Centrum Medyczne jest Niepublicznym Zakładem Opieki Zdrowotnej działającym w Bielsku-Białej od 1997 roku. Początkowo były to jedne z pierwszych w Bielsku-Białej prywatne poradnie specjalistyczne, które szybko zaczęły zyskiwać uznanie pacjentów, oczekujących poprawy jakości i dostępności usług medycznych.

Źródło: http://bcm.bielsko.pl

Nowe rozwiązania webowe dla BKS STAL

2011-03-31T14:23:00.000+02:00

Z dumą informujemy, że podpisaliśmy umowę na wykonanie nowego serwisu internetowego BKS STAL Bielsko-Biała. W ramach całości projektu, którego zakończenie szacujemy na czerwiec tego roku, wykonamy:

część analityczną: analizę konkurencji, analizę celów biznesowych, analizę odwiedzin i efektywności obecnej witryny,
specyfikację funkcjonalną serwisu oraz dodatkowych dedykowanych modułów dla platformy LizardCMS,
komplet makiet low-fidelity oraz badania usability na makietach,
projekt graficzny,
optymalizację SEO,
wdrożenie na serwer produkcyjny.

Celem wszystkich działań Lizard Media jest stworzenie nowoczesnego, łatwego w obsłudze centrum internetowego dla kibiców, fanów i sympatyków drużyn siatkówki (BKS Aluprof) oraz piłki nożnej BKS.

Audyt usability dla portalu Spryciarze.pl

2011-03-22T10:54:00.000+01:00

Podpisaliśmy umowę na wykonanie audytu użyteczności (ang. usability) dla portalu Spryciarze.pl. Celem audytu jest rozpoznanie, poprzez badania z użytkownikami oraz dogłębną analizę ekspercką, tych elementów serwisu, które negatywnie wpływają na satysfakcję użytkowników i sprawiają im problemy.

Badania, które wykona nasza agencja, zakończą się pełnowymiarowym raportem użyteczności portalu Spryciarze.pl oraz zależnych serwisów tematycznych Spryciarzy. W ramach badań wykonamy nie tylko analizę statystyk, analizę ekspercką, ale także analizę badań clicktrackingowych, testy 5-sekundowe oraz badania bezpośrednie z użytkownikami.

"Chcemy pomóc zespołowi Spryciarze.pl w odnalezieniu, rozpoznaniu i wyeliminowaniu problemów, które napotykają użytkownicy korzystający z portalu. Jesteśmy przekonani, że wykonany przez nas audyt usability przyczyni się do wzrostu satysfakcji użytkowników oraz wzrostu efektywności działania mechanizmów, które działają w portalu." — Paweł Biliński, frontend designer Lizard Media

Czym są Spryciarze.pl?

"Spryciarze.pl to pierwszy w polskim internecie wielotematyczny poradnik wideo, pokazujący jak poradzić sobie z codziennymi problemami. Kluczową dewizą portalu jest hasło „Pokaż, co potrafisz!”. W serwisie wśród kilku tysięcy filmów znaleźć można odpowiedzi na pytania: Jak zabezpieczyć gniazdko elektryczne?, Jak zrobić maszynkę do robienia waty cukrowej?, Jak obronić się przed napastnikiem?, Jak zamontować okap kuchenny? Jak się malować? i wiele, wiele innych. Spryciarze.pl kontynuują myśl kultowego programu Adama Słodowego: Zrób to sam, emitowanego w TVP. Spryciarze.pl to również miejsce, gdzie spotykają się ludzie o oryginalnych pomysłach, chcący dzielić się nimi z innymi internautami."

Źródło: spryciarze.pl

Nowy serwis internetowy Grupy Kęty

2011-02-03T11:32:00.001+01:00

Po kilku miesiącach intensywnych prac, zakończyliśmy wdrożenie nowego serwisu internetowego Grupy Kęty.

Grupa Kęty to europejski dostawca nowoczesnych rozwiązań aluminiowych oraz wysokiej klasy opakowań giętkich dla kluczowych segmentów rynku. W ramach grupy kapitałowej działają spółki: Aluprof, Metalplast Stolarka, Metalplast Karo, Alutrans System, Alupol Packaging.

Naszym zadaniem było zaprojektowanie i wdrożenie nowego serwisu na podstawie wniosków z autorskich badań. Ten kompleksowo zrealizowany projekt obejmował:

analizę SWOT, konkurencji i dotychczasowych działań marki,
przygotowanie dynamicznych makiet medium-fidelity,
opracowanie designu serwisu zgodnie z identyfikacją wizualną (CI) marki,
badania usability na makietach,
zaprojektowanie architektury informacji,
wstępną optymalizację SEO,
przygotowanie wersji mobilnej dzięki CSS3 media queries,
wdrożenie serwisu na platformie LizardCMS z 8-oma dedykowanymi modułami,
implementację innowacyjnych rozwiązań mających na celu usprawnienie działań dla inwestorów (przeglądanie plików PDF bez konieczności ich pobierania dzięki Google API),
optymalizację i kompresję całości wdrożenia.

Celem projektu, który został rozpoczęty w czerwcu 2010, było nie tylko odświeżenie wizerunki marki w Internecie, ale wprowadzenie jej w nowoczesne rozwiązania webowe, głównie z myślą o obecnych i potencjalnych inwestorach. Serwis został zaprojektowany zgodnie z metodyką user-centered design. Nowa strona korporacji jest w pełni skalowalna, tj. nowe działy dla inwestorów będą powstawały bez konieczności wprowadzania istotnych zmian w architekturze informacji. W ramach naszych działań realizujemy stały support dla Grupy Kęty. Wkrótce opublikujemy case study z tej kluczowej realizacji.

Nowy projekt dla wybierających OFE

2011-01-27T12:52:00.004+01:00

Zakończyliśmy prace nad serwisem PorownanieOFE.pl. Projekt skierowany jest do osób poszukujących informacji o OFE, chcących dokonać trafnego wyboru oraz zapisać się do wybranego funduszu.

Do naszych zadań należało:

analiza potrzeb i konkurencji,
przygotowanie statycznych makiet serwisu,
opracowanie logotypu oraz szaty graficznej,
oprogramowanie serwisu,
testy użyteczności na grupie docelowej,
optymalizacja,
wdrożenie platformy LizardCMS Light.

Serwis pracuje na platformie LizardCMS Light, umożliwiającej szybkie i sprawne zarządzanie jego zawartością. Dane osobowe z formularzy szyfrowane są przy pomocy protokołu SSL, który zapewnia ich bezpieczne przesyłanie w sieci.

Rozwiązania dla Beskidzkiego Centrum Medycznego

2011-01-14T14:55:00.011+01:00

Prace dotyczące nowego wizerunku Beskidzkiego Centrum Medycznego przyspieszają. Wkrótce udostępnimy zarówno nowy serwis internetowy centrum (na platformie LizardCMS), jak również elementy projektowanej przez naszą agencję, zupełnie nowej, identyfikacji wizualnej marki.

Priorytetem w kontekście rozwiązań internetowych jest dostępność (ang. accessibility) oraz łatwy dostęp do istotnych informacji dla potencjalnych i obecnych pacjentów kliniki. W ramach badań usability przeprowadziliśmy na grupie docelowej ok. 25 testów 5-sekundowych oraz ok. 25 clicktestów. Miały one na celu wyeliminowanie problemów z dotarciem do poszczególnych, ważnych dla pacjentów, informacji już na etapie projektowania makiet serwisu.

Nie bez znaczenia pozostaje także internetowy PR marki, który realizuje założone przez zarząd spółki cele biznesowo-marketingowe oraz komunikacyjne. Już wkrótce więcej na temat tej kompleksowej realizacji, a w niedalekiej przyszłości pełne case study.

Poniżej kilka zdjęć z prac dotyczących makiet (wersje papierowe i low-fidelity dzięki Mockingbird) i propozycji nowego logo BCM.

Wdrożenie dla kancelarii adwokackiej ADVIVA

2011-01-14T14:25:00.007+01:00

Mamy przyjemność zaprezentować światu świeże wdrożenie dla katowickiej kancelarii adwokackiej ADVIVA, specjalizującej się w dochodzeniu odszkodowań. Ta z pozoru prosta technicznie realizacja wiązała się z wieloma działaniami.

Zakres prac nad projektem obejmował:

analizę konkurencji,
analizę SWOT pod kątem Internetu,
przygotowanie statycznych makiet,
opracowanie designu strony na podstawie Coporate Identity marki,
testy usability,
przygotowanie tekstu do nagrania video na stronę główną,
organizację nagrania video w siedzibie kancelarii,
optymalizację,
przygotowanie wersji mobilnej,
wdrożenie platformy LizardCMS.

Celem projektu było oddanie do użytku serwisu internetowego charakteryzującego się jasnym przekazem, szybkim dostępem do istotnych informacji i możliwością zgłaszania szkód online.

Całość prac została wykonana zgodnie z metodyką user-centered design, co zaowocowało kilkoma pomysłami wypływającymi z wywiadów focusowych przeprowadzonych na grupie docelowej:

nagranie video z właścicielem kancelarii do umieszczenia na stronie głównej,
stworzenie slidera na stronę główną z kluczowymi przekazami oraz cytatem właściciela kancelarii,
formularz zgłoszenia szkody.

Wkrótce pełne case study z tej realizacji.

Podsumowanie roku

2010-12-29T12:17:00.011+01:00

Koniec roku to czas wszelkich podsumowań. My także pokusiliśmy się o skromne podsumowanie tego, co w minionym roku działo się w naszej firmie — zarówno w kontekście realizowanych projektów jak i zadowolenia klientów z naszych prac.

Kilka ważnych liczb:

ilość zrealizowanych i zakończonych projektów: 63,
ilość wdrożonych serwisów WWW, aplikacji dedykowanych: 26,
ilość zgłoszeń w systemie ticketowania: 1038 (z czego 99% rozwiązanych),
ilość wykonanych makiet (ekranów) na potrzeby projektów webowych: ok. 270,
ilość napisanych linii kodu (LOC) w autorskich wdrożeniach: ok. 42 000 linii,
ilość wykonanych analiz celów biznesowych, konkurencji: ok. 45,
ilość wpisów na FaceBooku: 49.

Ankieta wizerunkowa, czyli jak postrzegają nas kluczowi klienci

W listopadzie 2010 roku poprosiliśmy naszych kluczowych Klientów o wypełnienie ankiety dotyczącej wizerunku naszej agencji i zadowolenia ze współpracy. Dzięki otrzymanym odpowiedziom będziemy w stanie podwyższyć poziom realizowanych usług i ustalić kierunek rozwoju firmy. Oto kilka z ważniejszych wyników:

Źródło wyników: Google Documents.

Naszym celem jest oczywiście poprawienie tych wyników, a za pozytywne oceny serdecznie dziękujemy!

Kot w Subaru, czyli skojarzenia Klientów z Lizard Media

Co ciekawe, na postawione pytanie "Jeśli miałaby Pani/Pan porównać markę Lizard Media z marką auta, jaka byłaby to marka?" otrzymaliśmy odpowiedzi: Audi, Subaru, Opel, Citroen, Kia. Ponadto, Klienci jednogłośnie uznali, że nasza marka kojarzy im się z...kotem, choć do wyboru było wiele innych ciekawych gatunków zwierząt.

Co dalej?

W kolejnym roku mamy nadzieję skupić nasze działania nie tylko na realizacji jeszcze większej liczby projektów, poprawieniu wyników audytu wizerunkowego, ale przede wszystkim nieustannej pracy nad stosowanymi przez nas metodykami — rozwojem badań usability (nie tylko w kontekście projektów webowych, ale także graficznych, outdoorowych), kontrolą jakości z naciskiem na accessibility (WCAG, mobile) naszych rozwiązań oraz optymalizację. A w najbliższym czasie: nowa strona internetowa agencji, nowa strona internetowa marki DeaFoto wraz z odświeżonym portfolio, całkowicie nowy projekt Lizard Labs...i wiele więcej.

Wszystkim Klientom, Sympatykom i Partnerom naszej agencji dziękujemy za ostatnie 12 miesięcy owocnej współpracy jednocześnie składając życzenia sukcesów, realizacji zamierzonych planów, ogromu satysfakcji w nadchodzącym, Nowym Roku.

Zapraszamy do regularnego obserwowania (i dodania do Ulubionych):

naszego profilu na FaceBooku,
naszego profilu na Flickr,
i oczywiście niniejszego bloga.

Do siego!

Wesołych Świąt!

2010-12-22T14:27:00.008+01:00

Z okazji zbliżających się Świąt Bożego Narodzenia oraz nadchodzącego Nowego Roku składamy wszystkim naszym Klientom, Partnerom i Współpracownikom serdeczne życzenia zdrowia, pogody ducha, spełnienia wszystkich marzeń, zawodowej satysfakcji i wielu sukcesów.

Zespół Lizard Media

World Usability Day 2010

2010-11-08T15:01:00.012+01:00

W ubiegły czwartek, 4 listopada, odbyło się kolejne spotkanie World Usability Day. Tematem przewodnim była komunikacja i różne jej aspekty w kontekście rozwiązań internetowych. Czteroosobowa reprezentacja Lizard Media wzięła udział w tej imprezie (niestety nie udało nam się zapisać na warsztaty). Podziękowania dla organizatorów za imprezę, dla prelegentów - za ciekawe prezentacje. Mała fotorelacja w naszym profilu na Flickr.com:

Lizard Media's WUD 2010 photoset

P.S: Skoro tematem przewodnim była komunikacja - szkoda, że łatwość dotarcia do sali z prelekcjami była wbrew zasadzie "Nie każ mi myśleć!". Może podczas organizowania kolejnej edycji warto pomyśleć o umieszczeniu choćby skromnego roll-up'u ze strzałkami bądź plakatu przy wejściu do budynku? Rzecz jasna liczy się przede wszystkim content, ale kwestie logistyczne (szczególnie dla tych spoza Wrocławia) nie powinny być przeszkodą dla uczestników. Nie mniej jednak - udana konferencja, kameralna i sympatyczna atmosfera, rzeczowy panel dyskusyjny. Oby tak dalej!

Cufon - eksperyment czy stabilne narzędzie?

2010-10-27T16:34:00.007+02:00

Obserwując w ciągu kilku ostatnich miesięcy kolejne wdrożenia polskich i zagranicznych agencji, zauważyłem, że w lawinowym tempie zaczęło przybywać tych stron WWW, na których wykorzystuje się Cufon - bibliotekę JavaScript, dzięki której stosowanie niestandardowych fontów w Sieci staje się dziecinnie proste. A do tego - szybsze, bardziej dostępne i stabilne niż sIFR, @font-face i wiele innych. Czy jednak webdeveloperzy mają pełną świadomość wszystkich wad i zalet tego rozwiązania? Jakie ograniczenia na nich czekają i czego jeszcze nie udało się zrobić twórcom?

Jak to działa?

Na wstępie, kilka słów jak w istocie działa Cufon. Użytkownik wybiera font w formacie TTF, OTF itp. Następnie, dzięki aplikacji online, font jest konwertowany najpierw do formatu SVG, następnie do VML, a docelowo do zbioru ścieżek JSON. Zbiór wektorów jest wykorzystywany do rysowania na elemencie canvas. Ot i cała tajemnica. Cały proces jest bardziej złożony, szczegóły na ten temat na stronie dokumentacji Cufon.

Podstawowe zalety

Do momentu powstania Cufon, a należy podkreślić, że jest to po prostu biblioteka wykorzystująca możliwości istniejące w przeglądarkach od kilku dobrych lat, developerzy zwykli byli używać SIFR'a bądź @font-face rodem z CSS3. Dzięki stosowaniu Cufon możliwe jest:

stosowanie dowolnego fonta przekonwertowanego do formatu kompatybilnego z Cufon we wszystkich przeglądarkach od IE6 począwszy (w identycznej formie, co w przypadku @font-face w starszych przeglądarkach graniczy z cudem),
sensowne wygładzanie fontów,
wykorzystywanie standardowych regułek CSS do formatowania tekstów z niestandardowym fontem,
stosowanie niewspieranych przez mniej nowoczesne przeglądarki atrybutów tekstu takich jak cienie(text-shadow), kolor z użyciem gradientu itd.,
częściowa dostępność (sensowne odczytywanie przez screenreadery dzięki zastosowaniu w DOM treści alternatywnych, dobre interpretowanie przez urządzenia mobilne),
wyłączenie JavaScript nie powoduje drastycznych zmian w layoucie - po prostu stosowany jest zadany w CSS font.

Podstawowe wady

Jak większość eksperymentalnych bibliotek, rozwiązań, które z pozoru wydają się doskonałymi świecidełkami, Cufon ma szereg wad. Niektóre z nich mogą się wydawać nieistotne, pozostałe mają duży wpływ choćby na dostępność. Wykonałem kilka prostych testów, które ukazują w jakich sytuacjach należy być ostrożnym w stosowaniu Cufon.

Oto krótki screencast nagrany z użyciem Firefoksa 3.6 oraz czytnika ekranu NVDA.

Zobacz stronę Cufon Experiment

Jak wynika z powyższego screencasta, stosowanie Cufona rodzi takie problemy jak:

niezbyt sensowne odczytywanie nagłówków (...Nagłówek 1. "Cufon" Nagłówek 1. "Experiment"...),
nieodczytywanie całych zdań po najechaniu myszą - czytanie pojedynczych wyrazów.

O ile w przypadku nagłówków złożonych z jednego-dwóch wyrazów nie ma większego problemu, to jednak oddzielnie odczytywanie wyrażenia złożonego z 3-6 słów może być na dłuższą metę męczące dla osób korzystających ze screenreadera. Co więcej, nie znając tego mechanizmu mogą odczuwać spore zagubienie.

Mimo, że Cufon nie przeszkadza screenreaderowi we w miarę poprawnym czytaniu strony, to jednak w przypadku chęci powiększenia tekstu za pomocą Ctrl++ po prostu nie reaguje (i nic dziwnego, wówczas przeglądarka musiałaby uruchomić za każdym razem Cufon.refresh(), ale o tym zaraz). Przy wyłączonym CSS również nie wygląda to najlepiej. Największą wadą jest jednak brak możliwości zaznaczenia tekstu i skopiowania go. O ile w przypadku nagłówków czy nawigacji nie ma to większego znaczenia, to w przypadku tekstów to fundamentalny błąd usability/accessibility! Stosując Cufona do renderowania dużej ilości tekstów narażamy się na powrót do wad ostro krytykowanego Flasha, który stosowany do budowania całych stron, najczęściej (a to przez błędy programistów) nie pozwalał na zaznaczanie/kopiowanie tekstów. Każdy kij ma dwa końce - to świetne narzędzie, aby zabronić użytkownikom kopiowania tekstów.

Cufon nie lubi jQuery?

Zobacz stronę Cufon Experiment

Proste zastosowania Cufona nie rodzą większych problemów. Schody zaczynają się w sytuacji, gdy na elemencie z niestandardowym fontem chcemy wykonać np. animacje jQuery lub JavaScript-ową zmianę atrybutów CSS. Napisałem kilka przykładów, które w łatwy sposób pokazują problemy w stosowaniu Cufona w relacji z JavaScript, jQuery czy jQuery UI. O ile w przypadku statycznej zmiany atrybutów (np. poprzez $.css(), $.html() itd.) powinno wystarczyć odpalenie metody Cufon.refresh(), to problemy mogą wystąpić przy próbie dynamicznej zmiany atrybutów w dziedzinie czasu (co widać przy próbie animacji za pomocą $.animate()). Dlaczego jednak nie spróbować napisać kodu, dzięki któremu animacje fontów renderowanych z użyciem Cufona będą możliwe? Za jakiś czas rezultaty badań w tym zakresie, bądźcie cierpliwi. Być może w ramach powstającego Lizard Labs powstanie odpowiedni snippet/biblioteka.

Reasumując...

Cufon to dobrze przygotowana, sprawnie działająca biblioteka, dzięki której wachlarz możliwości webdesignerów i developerów zdecydowanie poszerza się. Stosowanie obrazków, które w przypadku wielojęzycznych stron bywają kłopotliwe i czasochłonne przy próbie jakiejkolwiek zmiany, zostanie zapewne z czasem wyparte przez biblioteki typu Cufon. Za kilka lat zapewne takie eksperymentalne rozwiązania nie będą potrzebne, bo stosowanie @font-face będzie ujednolicone i dobrze interpretowane przez wszystkie przeglądarki.

Szczegóły dotyczące Cufon można znaleźć na stronie domowej projektu, a dokładniejsze opisy dla programistów - w dokumentacji.

Paweł Biliński

frontend developer