Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

CSS3, web fonty i ikony

by
Length:LongLanguages:
This post is part of a series called Design School for Developers.
All About Trends in Web Design
Video in Web Design

Polish (Polski) translation by Katarzyna Kapusta (you can also view the original English article)

Pracując w branży internetowej, doprawdy jesteśmy szczęściarzami.  Nowe wskazówki, techniki i sposoby pracy pojawiają się dziś na okrągło. Mamy też szczęście żyć w czasach, w których gdy tylko nowa technologia wkroczy na rynek, przeglądarki (a przynajmniej większość z nich) szybko nadążają za zmianami, możemy więc wprowadzać nowości do naszych projektów (również tych dla naszych klientów!) łatwiej niż kiedykolwiek wcześniej.

CSS3 jest właśnie jedną z tych (wciąż jeszcze) nowych, fantastycznych technologii. Razem z nią pojawiło się całe mnóstwo nowości, które ułatwiają życie zarówno designerom, jak i programistom. W miarę jak przeglądarki stają się coraz lepsze, możemy coraz bardziej zaszaleć w naszych pomysłach i projektach.

Z drugiej strony żyjemy też w czasach, gdy nasze projekty odpowiadać mają potrzebom większej liczby użytkowników, urządzeń, przeglądarek i technologii niż dawniej. Przed epoką smartfonów, tabletów czy lodówek z dostępem do internetu, z siecią łączyliśmy się tylko w jeden sposób: przez zwykły komputer. A rozdzielczość ekranu wynosiła wówczas zwykle nie więcej niż 640px x 480px lub 800px x 600px!

Dziś mamy tysiące różnych urządzeń, rozmiarów ekranu i kontekstów, a każde z nich trzeba obsłużyć. Samych tylko typów i rozmiarów ekranów urządzeń mobilnych mamy tysiące (telefony komórkowe, smartfonów, tabletów, Netbooki itp.), ekrany Retina, standardowe ekrany, ekrany wysokiej rozdzielczości, małe i duże, i wiele, wiele innych.

Czy nam się to podoba, czy nie, ilość spraw, które musimy brać pod uwagę, będzie rosła, musimy więc dostosować się do sytuacji i stale się uczyć.


Musimy dostosować nasz sposób pracy

Ale co to znaczy dla naszego sposobu pracy? Nie ma szans, by przetestować naszą stronę pod kątem każdego urządzenia, na którym mogłaby być przeglądana. Zamiast tego trzeba zmienić sposób, w jaki pracujemy nad projektem. Jeśli jesteś programistą, zapewne masz już tę zmianę  za sobą - to samo czeka i projektantów.

Być może zmiana procesu projektowego będzie od nas wymagać podjęcia kilku kroków. Może na przykład powinniśmy nauczyć się, jak szybciej wprowadzać różne pomysły na typografię strony w przeglądarce. Cokolwiek by to nie było, możesz być niemal pewien, że proces projektowy będzie się nieco zmieniał.


CSS3

Choć może się wydawać, że CSS3 to sprawa dość nowa, bo wiele spośród popularnych technik związanych z CSS3 upowszechniło się na dobre dopiero w ostatnich latach, pierwsze szkice standardu CSS3 napisano już w 1999 r. - czyli czternaście lat temu!

W odróżnieniu od dawniejszych specyfikacji CSS (np. tych związanych z CSS2), CSS3 została podzielona na moduły; do połowy 2012 opublikowano ich już przeszło pięćdziesiąt. Cztery z nich zostały opublikowane jako zalecenia - każdy taki moduł musiał przebrnąć przez rozbudowany proces recenzowania i testów zanim doczekał się rekomendacji do powszechnego użycia. Owe cztery moduły CSS3 opatrzone rekomendacją W3C to:

  • Media Queries (zapytania o media)
  • Namespaces (przestrzenie nazw)
  • Selektory (poziom 3)
  • Kolor

Inne moduły, takie jak "Tło i obramowanie", "Układ wielokolumnowy", "Elastyczny układ ramek" są obecnie na etapie "Kandydata na zalecenie" (Candidate Recommendation) - oznacza to, że W3C jest już zadowolone z najważniejszych funkcji danego modułu.

Na tym poziomie implementacje (dla przeglądarek, na przykład) nie powinny już być opatrywane przeglądarkowymi prefiksami. Następne w kolejce są między innymi "Animacje CSS", "Transformacje CSS" czy "Filtry efektów CSS", wszystkie one jednak wciąż mają status "Wersji roboczej" (a wraz z nimi wiele, wiele innych modułów!), więc nie są jeszcze gotowe w takim stopniu jak te ze statusem Candidate Recommendation.

Obok czterech głównych modułów zalecanych przez W3C, instnieje jednak również wiele popularnych technik CSS3, które często trafiają już na strony internetowe. Należą do nich:

  • Gradienty CSS
  • Border-radius (ramki z zaokrąglonymi rogami)
  • Box-shadow (cienie od ramek)
  • Zwielokrotnione tło
  • Krycie (rgba)
  • Animacje & przekształcenia

Przyjrzyjmy się każdej z nich nieco bliżej.

Gradienty CSS

Po wprowadzeniu Gradientów CSS nie musisz już używać obrazka jako tła, aby uzyskać efekt przenikania się kolorów na stronie internetowej - w nowych przeglądarkach wystarczy posłużyć się CSS3.

css3-gradients

To wspaniała wiadomość - odchudzamy w ten sposób stronę i poprawiamy jej wydajność, bo nie trzeba już ładować tylu obrazków.

Zaokrąglone ramki

Border radius pozwala zaokrąglić narożniki ramek w projektach dla nowych przeglądarek - nie musimy już dla każdej ładować nowego obrazka. Wyobraź sobie stronę z obrazkiem w tle, który ma ramkę, zaokrąglone narożniki, gradient i cień - tego typu efekty niegdyś spędzały sen z powiek, dziś znacznie łatwiej je wprowadzić, o ile tylko wspierają je przeglądarki.

css3-border-radius

Jeśli masz nieco szczęścia, trafisz na klienta, który sam rozumie ideę stopniowego dostosowywania (progressive enhancement), jeśli nieco mniej - możesz mu je objaśnić i doedukować go. W dzisiejszej sytuacji, gdy niemal każdy posiada smartfona, tablet czy komputer (lub kilka z nich równocześnie), można się spodziewać, i wypada zrozumieć, że strona internetowa na każdym z nich będzie wyglądała nieco inaczej. Do pewnego stopnia można przymknąć oko na to, że niektóre typy efektów wizualnych będą w pewnych przeglądarkach w zgrabny sposób osłabione. Tak może stać się między innymi z zaokrąglonymi narożnikami!

Cień od ramki (Box-shadow)

Wraz z wprowadzeniem CSS3 box shadow, możemy rzucać cienie od elementów box. Istnieje również wersja dla tekstu, której możemy użyć (text-shadow, jak pewnie odgadłeś) dla naszych treści.

css3-box-shadow

Możesz również wybierać między cieniem skierowanym do wewnątrz i tym standardowym - na zewnątrz, co oznacza - tak, bingo! - że nie musisz już korzystać z zewnętrznych obrazków, by uzyskać taki efekt.

Kilka różnych rodzajów tła

CSS3 wprowadził też możliwość umieszczenia kilku różnych obrazków w tle w obrębie kodu. To wspaniała wiadomość - dzięki temu możemy do woli nakładać jeden na drugi kolejne elementy tła i tworzyć w ten sposób ciekawe efekty, które bardzo trudno byłoby uzyskać jedynie za pomocą CSS lub zwykłego obrazka.

Krycie (rgba)

I nareszcie - od IE9 wzwyż i we wszystkich innych nowoczesnych przeglądarkach - nie musimy już więcej ograniczać się do niewielkiego, powtarzalnego, przezroczystego obrazka na tło!

css3-opacity

Już samo to wystarczyło, bym pokochała CSS3 - możemy najzwyczajniej w świecie używać przezroczystości w naszych projektach, gdzie tylko uznamy to za stosowne.

Animacje i przekształcenia

Animacje (animations) i przekształcenia (transforms) są cudowne; wraz z przeobrażeniami (transitions) pomagają nam one dodać stronie interaktywności. Choć czasem mogą sprawiać trudności przy wyświetlaniu, zdecydowanie pomogą nam one ożywić stronę i wykorzystać CSS3 jako nasz ważny atut.


Fonty sieciowe (@font-face)

Włączenie reguły @font-face do CSS3 bardzo przydało się projektantom - mogą dzięki niej pozwolić sobie na znacznie więcej typograficznych eksperymentów. Najkrócej mówiąc, fonty sieciowe dały projektantom znacznie więcej wolności i pozwoliły na twórcze podejście.

Za co kocham fonty sieciowe

Fonty sieciowe są fantastyczne, bo pozwalają nam tworzyć naprawdę kapitalne projekty. Mamy ogromny wybór fontów, których możemy używać na stronach - są ich setki, a może i tysiące.

Nie wszystkie są równie udane i z pewnością kilka z nich przewija się w wielu projektach, znajdziemy jednak również i perełki, które znacznie odróżniają się na plus od dawniejszych, "bezpiecznych" (web safe) opcji.

webfonts-coastalconservationleague

Fonty sieciowe ułatwiają nam też pracę przy projektach responsywnych. Przypominasz sobie, jak niegdyś "ekstra" nagłówki, w których wykorzystywano fonty alternatywne (nie uważane za bezpieczne do wykorzystania w sieci), trzeba było zamieszczać jako obrazki lub tła? Przy fontach sieciowych możemy spokojnie porzucić tę praktykę i odesłać ją do lamusa - czas tworzyć piękne strony, na których wszystkie fonty będą w pełni dostępne i skalowalne.

Jak korzystać z czcionek fontów sieciowych?

Gdy tylko fonty sieciowe i @font-face weszły do użycia, pojawiło się kilka serwisów, które pomagają korzystać z takich fontów na naszych stronach. Należą do nich:

  • Typekit
  • H&FJ cloud.typography
  • Fontdeck
  • Fontdeck
  • Google Fonts

I nawet przy tak niewielkiej liczbie serwisów, sposobów na wprowadzenie fontów sieciowych do procesu projektowego jest mnóstwo. Niektórzy używają JavaScript, niektórzy czystego CSS do załadowania fontów. Jak jednak wygląda wtedy praca designera? Jak pracować z fintami sieciowymi na statycznej makiecie?

Jest z tym pewien problem - nie jest łatwo wprowadzić czcionki sieciowe do programu graficznego. Typekit ogłosił niedawno, że planuje wprowadzić możliwość synchronizacji z Adobe Creative Cloud i nawet wypuścił wersję próbną dla wybranych użytkowników.

Jako że Typekit został niedawno wykupiony przez Adobe, jest szansa na idealną synchronizację z Photoshopem, Illustratorem i innymi programami Adobe - to wspaniałe wieści dla projektantów.

webfonts-edenspiekermann

To póki co jedyny sposób na umieszczenie fontów sieciowych w makiecie, o ile nie planujemy odrębnego zakupu standardowej, desktopowej wersji fontu. O ile nie szukasz akurat pełnej identyfikacji dla strony, takie rozwiązanie może się okazać dość drogie i uciążliwe.

Alternatywnym rozwiązaniem będzie praca w przeglądarce już na wczesnym etapie. Możemy wówczas skorzystać np. z serwisu Typecast (omówiłam ten sposób w poprzednich częściach tej serii, poświęconych typografii) albo kupić font sieciowy w ulubionym serwisie i sprawdzić, jak poradzi on sobie z treścią prototypowej wersji projektu.

Którąkolwiek metodę wybierzesz, na pewno uda Ci się osiągnąć ciekawy i twórczy rezultat, który spodoba się odbiorcom strony i z którego będziesz potem dumny.


Ikony

Ikony są zdecydowanie na fali wznoszącej - to jeden z trendów, któremu na pewno można przyklasnąć. Moim zdaniem ikony i inne elementy wizualne, które da się podpiąć pod tę kategorię, jak choćby logo, to świetne narzędzie, które pomoże użytkownikowi szybko zorientować się na stronie. Stosowane obok tekstu, stanowią doskonałą wizualną podpórkę.

Jednak w sytuacji, gdy musimy stale myśleć o tym, jak obrazki i layouty zachowują się na różnych urządzeniach i przy różnych rozmiarach ekranu, trzeba zawsze upewnić się, że ikony i ilustracje sprawdzą się w każdej sytuacji i nie będą sprawiać kłopotów na przyszłość. Na szczęście jest na to kilka sposobów.

PNG

Kochany PNG (który umożliwił nam wykorzystanie obrazków z przezroczystym tłem, i nie jest przy tym psotnym GIF-em) to niezawodny sposób na pracę z ikonami na stronach.

icons-symbolicons

Pamiętaj tylko o jednym - jeśli chcesz zaserwować piękne obrazki posiadaczom ekranów Retina, musisz zapewnić sobie jakąś wersję awaryjną opartą na CSS lub JavaScripcie.

Praca z PNG-ami nie powinna w żaden sposób skomplikować przebiegu projektu. Każdy z przygotowanych obrazków możesz zapisać wprost w Photoshopie w dowolnie wybranym rozmiarze.

PNG dobrze sprawdzają się również przy skalowaniu, o ile akurat zmniejszasz ich rozmiar. Gdy potrzebujesz obrazek powiększyć (co czasem okazuje się konieczne, gdy przechodzisz z widoku małego do większego), PNG się może niekiedy "rozpikslować" i wyjść nieostro - tego, rzecz jasna, chcemy uniknąć.

SVG

Ostatnia uwaga co do PNG przenosi nas płynnie do tematu SVG - tego formatu również możemy użyć dla naszych ikon. Póki korzystamy z obrazka w formacie wektorowym (takim, jaki powstaje np. w Adobe Illustratorze), a nie rastrowym (jak np. z Adobe Photoshopa), możemy zawsze zapisać go w formacie SVG.

icons-sachagrief

Jako projektant zapewne dobrze wiesz, na czym polega SVG i jak możesz na różne sposoby używać tego formatu na stronie. Gdybyś akurat nie wiedział - SVG pozwala wprowadzić do projektu strony skalowalne elementy graficzne. Dzięki temu nie musisz już martwić się, że grafika rozpiksluje się lub rozmaże, gdy będziemy ją przeskalowywać - zamiast tego idealnie dopasuje się do wymaganej wielkości.

To najlepszy sposób na logo, ikony i wszelkiego rodzaju elementy, które mogą wymagać przeskalowania, o ile masz je już pod ręką w formacie wektorowym lub łatwo możesz je w takiej formie odtworzyć. Przy pracy z plikami SVG najlepiej posługiwać się optymalnym rozmiarem, który będzie odpowiedni w większości przypadków. W ten sposób przeglądarka będzie przeskalowywać logo tylko w szczególnych okolicznościach, a nie stale.

Fonty sieciowe

Jak już wiemy, fonty sieciowe są nieskończenie skalowalne i zadziałają na każdej stronie i w każdej z aktualnych przeglądarek. Mądrzy ludzie połączyli zatem fonty sieciowe z ikonami - w ten sposób powstały fonty złożone z ikon lub symboli. Trochę jak w przypadku Wingdings, niosą one ze sobą na ogół nieco więcej znaczenia i kontekstu niż zwykłe ikony.

webfonts-symbolset

Istnieją argumenty za i przeciw korzystaniu z fontów sieciowych jako ikon. Według niektórych nie ma sensu ładować pełnej biblioteki fontu, by skorzystać jedynie z pojedynczego symbolu, bo wpłynie to na wydajność i ciężar strony.

Choć czasem trudno będzie uniknąć korzystania z komercyjnych fontów-symboli, istnieją narzędzia do tworzenia własnych fontów sieciowych, które pozwalają uniknąć takiej sytuacji i opracować font, w którym znajdą się jedynie takie ikony, których akurat potrzebujesz. Niektórzy uważają, że jeśli korzysta się jedynie z pojedynczej litery-ikony, traci się cały kontekst fontu sieciowego. Mądrzy goście z Symbolset znaleźli jednak na to sposób - stworzyli dla fontów słowa-klucze, które pomogą przywrócić każdej z ikon nieco kontekstu.

Mamy już zatem trzy sposoby na korzystanie z ikon - wybór należy do Ciebie! Większość metod wymagać będzie od projektanta dopasowania własnego trybu pracy, wybierz więc taką technikę, która najlepiej pasuje do Twojego warsztatu.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.