Frameworki CSS i Material Design Lite

Od jakiegoś czasu dostaję pytania w sprawie „frejmłorków”. W sieci można znaleźć mnóstwo blogów na ten temat. Pisanie własnego eseju, albo porównanie funkcji wydaje mi się bezcelowe. W tej chwili pewno straciłem połowę publiczności, więc nie chcąc stracić reszty zacznę od podsumowania współczesnych (jak na początek 2016) rozwiązań:

  • Dla początkujących polecam Bootstrap 3. Jest łatwy do opanowania, między innymi dzięki ogromnej popularności i wynikającemu z niej wsparciu społeczności.
  • Aktualnie najnowocześniejszym rozwiązaniem jest Foundation 6, którego zaletami jest świetne działanie na urządzeniach mobilnych i poręczny kod SCSS.
  • W wielu przypadkach okaże się, że nie potrzebujesz bardzo zaawansowanych narzędzi. Istnieje mnóstwo małych i praktycznych frameworków, wśród których popularnością wyróżnia się Skeleton.

Co to jest „framework”?

Z angielskiego chodzi tu o strukturę, „ramę”, od której zaczyna się pracę. Framework CSS powinien zawierać:

  • Reset (normalizację) stylów przeglądarki
  • Układ (layout) ułatwiający pozycjonowanie treści (grid system)
  • Ujednolicenie podstawowych elementów (typografii, formularzy itp.)

W poprzedniej sekcji specjalnie nie nazwałem Bootstrapa ani Foundation frameworkami CSS. Dlaczego? Bo nimi nie są! Można to porównać do nazywania Drupala albo WordPressa frameworkiem PHP. Bardziej adekwatną nazwą jest front-end framework, jako że front-end (fasada – wszystko co serwis wyświetla użytkownikowi) dotyczy także skryptów i struktury strony. Słyszałem też bardzo adekwatną nazwę „UI Toolkit” (zestaw narzędzi dla interfejsu użytkownika).

Google Material Design

Ciągnąc wyjaśnienia dalej, Material Design nie jest ani frameworkiem CSS, ani frameworkiem front-endowym. Czym w takim razie jest? To ciekawy zestaw zasad projektowania, dostępny pod adresem www.google.com/design/spec/material-design/. Cała specyfikacja jest zaskakująco uniwersalna i intuicyjna.

Material Design Lite

Material Design Lite – wybór kolorkówOficjalna implementacja Material Design dostępna jest na getmdl.io. Najbardziej precyzyjny opis z jakim się spotkałem, to „a library of components & templates” – biblioteka komponentów i szablonów. Terminologia bywa myląca, ale nie przejmuj się – Antyweb nazwał MDL uniwersalnym frameworkiem dla webmasterów xD.

W przypadku Bootstrapa i Foundation największą zaletą jest modułowość. Znając podstawy preprocesora SASS można łatwo wybrać potrzebne elementy (na przykład framework CSS) i dostosować wygląd. Material Design Lite nie jest pod tym względem zbyt praktyczny. Nie polecam tworzenia i ręcznego kompilowania własnej wersji. Próbowałem. Realistycznie mamy jedynie możliwość dobrania dwóch głównych kolorów. Większa ingerencja wiąże się raczej z nadpisywaniem kodu CSS, czego nie polecam. Zastanawiałem się nad użyciem MDL do mojego kolejnego projektu, ale się rozmyśliłem. Może innym razem.

Alternatywy

Na szczęście istnieje wiele innych wersji, poza tą oficjalną. Wszystkim, którzy czekali na „Bootstrapa od Google” pewno spodoba się Materialize. Poza tym znalazłem motywy/nakładki na wcześniej wspominane popularne frameworki front-endowe, jednak przed ich użyciem stanowczo polecam przeglądnięcie oryginalnych wytycznych.

Podsumowanie

wybór narzędzia


Intencjonalne projektowanie

Wiele osób formując założenia projektu dodaje „innowacyjność”. Niestety kiedy przychodzi do projektowania strony internetowej, często są to równie piękne, co puste słowa. Stan faktyczny to neutralność i naśladowanie. U góry belka z logotypem po lewej i nawigacją po prawej. Poniżej wklej slider zawierający przypadkowe zdjęcia. Później dodaj blok tekstu, ewentualnie tryptyk z kolumn. Stopka, copyright, autor. O nas, galeria, kontakt z formularzem. Wszystko jak wyplute z automatycznego generatora. Bezmyślne kopiowanie zasłania prawdziwy potencjał.

Weryfikacja nawyków

Wiele błędów bierze się z przyzwyczajeń, które choć kiedyś miały swoje miejsce, z czasem przestają być użyteczne. Ciągle pojawiają się nowe możliwości, które zmuszają nas do zastanowienia nad utrwalonymi schematami.

Grafika na skróty

Jednym z najpoważniejszych błędów jest użycie „stockowych” fotografii. Nie mam nic przeciwko kupowaniu gotowych zdjęć celem uatrakcyjnienia strony, ale mało jest rzeczy które tak skutecznie rujnują wiarygodność marki jak obrazki, które już gdzieś się widziało.

Płaskie myślenie

Strona internetowa, to nie obrazek. Składa się na nią nie tylko tekst i oprawa graficzna, ale także sposób funkcjonowania. Wszystko od struktury nawigacji, przez ruch (animacje lub ich brak), po użyty język ma znaczenie.

Autoodtwarzanie

Dźwięk jest atrakcyjnym dodatkiem i kiedy to uzasadnione, powinno się go używać częściej. Dźwięk ma też bardzo konkretny wpływ na działanie użytkownika: odtwarzany bez ostrzeżenia prawdopodobnie spowoduje, że w panice opuści on stronę. Pamiętaj, że nie masz kontroli nad poziomem głośności, a stopniowe zwiększanie poziomu dźwięku może być jeszcze bardziej frustrujące. Żeby lepiej zrozumieć jak może poczuć się gość twojego serwisu, polecam poszukać John Cena Prank.

Trwa ładowan…

Nie znam praktycznego przypadku, w którym poprzedzenie strony głównej indykatorem wczytywania byłoby uzasadnione. Nawet przy dużej ilości interaktywnej treści można wyświetlić ten element na części ekranu i pokazać inne informacje (np. przy wczytywaniu modelu 3D).  Jeśli strona używa dźwięku i trzeba przed tym ostrzec użytkownika, o wiele lepszą opcją jest krótka animacja wyświetlająca przycisk odtwarzania. Ktoś ma inne sugestie? Czekam na komentarze i polecam wcześniejszy wpis o optymalizacji wczytywania stron internetowych.

Bez przesady

Schematy nie są złe. Pomagają nam szybciej i wygodniej dotrzeć do informacji. Zasady łam świadomie, bo inaczej wszystko co nieszablonowe stanie się bezużyteczne. Zamiast eksperymentować i szukać przełomowych technologii, lepiej skupić się na zasadności użycia typowych elementów.

Celowość

Mam nadzieję, że wyczerpująco opisałem problem. To jednak nie wszystko.

„Jeśli nie jesteś częścią rozwiązania, jesteś częścią problemu.”

Co w takim razie zmienić? W jaki sposób projektować intencjonalne, czyli innymi słowy przemyślane, celowe, zasadne strony i aplikacje? Wystarczy zacząć od podpowiedzi na kilka pytań.

  • Kim jest potencjalny użytkownik? – np. Co wie (o produkcie/firmie)?
  • Jakich informacji lub wrażeń szuka? – np. Numer telefonu? Data wydarzenia? Nowa muzyka?
  • Dlaczego (w jakim celu)? – np. Porównanie z konkurencją? Umówienie spotkania?
  • Gdzie (w którym miejscu) i w jaki sposób? – np. Na jakie miejsce zwróci uwagę? Stopka? Formularz? Z jakiego urządzenia korzysta?

Gęstość informacji

Jeśli potraktujemy przeczytanie, lub poświęcenie uwagi danemu elementowi jako wybór, warto zastanowić się ile danych strona internetowa lub aplikacja przekazuje użytkownikowi w konkretnym momencie. Kluczem jest efektywne wykorzystanie przestrzeni. W przypadku wersji mobilnej najważniejsza będzie nawigacja, za to przy dużej rozdzielczości monitorach nie należy zostawiać za dużo pustej przestrzeni, ale o tym innym razem.

Obowiązkowa lektura

Opracowując dzisiejszy tekst przygotowałem listę pojęć, na których temat warto uzupełnić swoją wiedzę. Część z nich już pewno znasz. Gwarantuję, że nawet podstawowe poznanie wypisanych terminów może radykalnie zmienić podejście do pracy.

  • Projektowanie kierowane wzrostem (Growth Driven Design)
  • Metodologia S.M.A.R.T.
  • Prawo Hicka (Hick’s law)
  • Zarządzanie wymaganiami
  • Metoda MoSCoW
  • Zasada Pareta