11 Slices
Medium 9788328300385

9. Typografia

Peterson, Clarissa Helion ePub

Istotą stron WWW jest komunikacja i przekazywanie użytkownikom informacji. Wprawdzie jej część jest przekazywana za pośrednictwem obrazów, jednak większość za pomocą tekstu.

Słowa znajdujące się na stronie są bardzo ważne, ponieważ są po to, aby można było skutecznie przekazać treść. Dlatego tworząc stronę, musisz być pewien, że tekst będzie czytelny i będzie dobrze się prezentował.

Twoim celem jest nie tylko przygotowanie dobrze wyglądającego tekstu i umieszczenie go w układzie strony, ale wywarcie jak najlepszego wrażenia na użytkowniku, który ten tekst przeczyta.

Tworząc stronę, mamy skłonność do przykładania nadmiernej wagi do wyglądu tekstu. Traktujemy go jak statyczny element, jak na stronie gazety. Staramy się dokładnie dopasować do innych elementów na stronie ułożenie tekstu i wygląd sąsiadujących ze sobą słów.

Do pewnego stopnia możemy tak robić, jednak tworząc stronę responsywną, tracimy kontrolę nad tekstem. Zamiast tego musimy nadać mu taki styl, aby dobrze się prezentował niezależnie od zmian układu strony, nawet jeżeli treść nie będzie wyświetlana na tworzonej stronie, tylko gdzie indziej.

See All Chapters
Medium 9788328300385

5. Zapytania o media

Peterson, Clarissa Helion ePub

Zapytania o media są tym, co sprawia, że strony WWW skalują się stosownie do urządzeń, na których są otwierane. Jak dotąd żadne deklaracje stylów CSS stosowane na stronie nie uwzględniały wielkości ekranu.

Zapytania o media umożliwiają stosowanie różnych deklaracji stylów w zależności od możliwości urządzenia, na którym otwierana jest strona, najczęściej od szerokości obszaru widoku. Zapytanie może np. brzmieć: zastosuj układ dwukolumnowy, ale jeżeli ekran ma szerokość większą niż 40 emów, zastosuj układ trójkolumnowy.

Zapytania to jedna z technik tworzenia responsywnych stron, dzięki której strona może mieć inny układ na ekranie telefonu komórkowego, inny na tablecie, a jeszcze inny na monitorze stacjonarnym. Zapytanie o medium jest często traktowane jako swego rodzaju magiczna różdżka dla responsywnej strony, ponieważ podporządkowane są mu wszystkie pozostałe elementy strony i dzięki niemu dzieją się rzeczy magiczne.

W tym rozdziale poznasz strukturę zapytań o media i style, w których są stosowane. Dowiesz się, do czego można ich użyć — oczywiście, nie tylko do sprawdzenia szerokości ekranu — i w jaki sposób są one obsługiwane przez przeglądarki.

See All Chapters
Medium 9788328300385

11. Wydajność stron WWW

Peterson, Clarissa Helion ePub

Często słyszy się słowa krytyki pod adresem stron responsywnych, że ich wydajność jest raczej niska, to ich znaczy załadowanie i wyświetlenie trwa dłużej niż zwykłych stron.

W przypadku wielu stron responsywnych faktycznie tak jest, jednak nie dlatego, że strony te z definicji działają wolno, ale ponieważ nie zostały utworzone z myślą o wydajności. Istnieje wiele technik, dzięki którym strony mogą być mniejsze i szybsze.

Ten rozdział opisuje, dlaczego wydajność ma znaczenie i dlaczego należy ją brać pod uwagę podczas tworzenia strony.

W dalszej części zawarty jest opis krok po kroku wszystkich operacji wykonywanych przez przeglądarkę podczas ładowania i wyświetlania strony. Będziesz mógł lepiej zrozumieć wszystkie zdarzenia, jakie mają miejsce, i pojąć, co w całym procesie może pójść źle.

Później dowiesz się, jak przetestować wydajność strony i jakie czynniki mają na nią wpływ.

Na końcu rozdziału znajdziesz szczegółowy opis, co możesz zrobić, aby zwiększyć wydajność swojej strony. Niektóre operacje, którym się przyjrzymy, obejmują oczyszczenie kodu, minimalizację liczby żądań HTTP, kompresję plików, wykorzystanie pamięci podręcznej przeglądarki i usunięcie skryptów JavaScript blokujących ładowanie strony.

See All Chapters
Medium 9788328300385

2. Responsywna treść

Peterson, Clarissa Helion ePub

Jeżeli uważasz, że kody HTML i CSS stanowią najważniejsze części strony WWW, warto, abyś spojrzał na nie z innej perspektywy. Użytkownicy odwiedzają Twoją stronę ze względu na jej treść (i funkcjonalność) i nie potrafią doceniać talentu projektanta ani umiejętności programisty.

Dla użytkowników odwiedzających Twoją stronę nie ma znaczenia, czy jest ona responsywna czy nie, a większość z nich prawdopodobnie nawet nie wie, co ten termin oznacza. Nie zastanawiają się, czy korzystają z urządzenia odpowiedniego dla Twojej strony i czy ekran ma właściwą wielkość. Często nawet nie zwracają uwagi, jak strona wygląda. Chcą po prostu szybko uzyskać potrzebną informację lub funkcjonalność, niezależnie od urządzenia, którym się akurat posługują.

Dlatego tworząc responsywną stronę, musisz przede wszystkim mieć na uwadze jej treść.

Jeżeli do sprawy podejdziesz inaczej, tj. najpierw utworzysz projekt strony, a potem umieścisz w nim treść, wtedy informacja zawsze będzie mieć znaczenie drugorzędne, a użytkownicy raczej nie dostaną tego, czego chcą.

See All Chapters
Medium 9788328300385

4. Style CSS w responsywnych stronach

Peterson, Clarissa Helion ePub

Kod HTML nadaje strukturę całej treści Twojej strony WWW, natomiast kod CSS instruuje przeglądarkę, jak treść ma być przedstawiona.

Ten rozdział, podobnie jak poprzedni, będzie dla doświadczonych programistów stanowił przypomnienie wiadomości. Opisuje on jednak bardziej szczegółowo, w porównaniu z HTML, podstawową koncepcję języka CSS, z tego prostego powodu, że CSS jest kodem decydującym o responsywności strony. Dogłębne zrozumienie budowy responsywnej strony jest niemożliwe bez poznania takich pojęć jak „kaskada stylów” i „model pudełkowy”.

Najpierw dowiesz się, na czym polega wersjonowanie języka CSS i w jaki sposób stosować prefiksy w celu prawidłowego zinterpretowania nowych właściwości stylów przez różne przeglądarki, nawet gdy właściwości te są jeszcze na etapie testów.

Następnie poznasz różne sposoby umieszczania stylów w swojej stronie WWW, czy to przez osadzanie ich za pomocą arkusza stylów obejmującego wiele stron lub całą witrynę, czy za pomocą wstawiania, obejmującego tylko poszczególne elementy strony.

See All Chapters

See All Slices