W ramach naszej witryny stosujemy pliki cookies. Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. Dowiedz się więcej tutaj
X

Księgarnia PWN

   

   

   

   

   

   

   

   

.

.

Bezpłatny newsletter


Makieta w „HTML i CSS3”

Makieta w „HTML i CSS3”

W książce „HTML i CSS3. Definicja nowoczesności” Dawida Mazura zostały zawarte wszystkie etapy tworzenia stron – od zaprojektowania makiet do kodowania stron na każdym urządzeniu mobilnym. Nauczysz się tworzyć strony, które będą czytelne w każdej rozdzielczości.

Makieta

Zanim przystąpimy do kodowania strony, musimy wiedzieć, jakie elementy strona ma zawierać i jak ma wyglądać. Przed erą stron responsywnych sprawa była stosunkowo prosta – należało wykonać makietę, a następnie projekt graficzny jednej wielkości. Teraz, gdy chcemy zbudować stronę, która będzie się dopasowywała do różnych urządzeń, jesteśmy zmuszeni zrobić co najmniej trzy projekty. Zgodnie z trendem mobile first (w pierwszej kolejności urządzenia mobilne) najpierw projektujemy stronę dla urządzeń o najmniejszych ekranach, czyli smartfonów, następnie dla tabletów i na końcu dla komputerów.

Pierwszym krokiem jest zebranie materiałów, określenie celu powstania strony oraz ustalenie grupy docelowej. Gdy zbierzemy te wszystkie informacje, możemy zacząć projektować stronę. Do wykonania makiet strony możemy wykorzystać dostępne oprogramowania stworzone właśnie w tym celu, jednak najprostszym i najtańszym sposobem jest narysowanie na kartce papieru schematu strony. Witryna, którą stworzymy na potrzeby tej książki, będzie stroną firmy zajmującej się projektowaniem i zakładaniem ogrodów. Jej struktura jest dość uniwersalna, można więc na jej podstawie zbudować stronę niemalże każdej firmy.

Projektując witrynę dla urządzeń mobilnych, musimy ustalić priorytety, jeśli chodzi o treści. Ze względu na mały obszar, na którym strona będzie wyświetlana, należy zastanowić się, co ma być prezentowane na ekranie smartfonu (rys.1). 

c1

Rysunek 1. Makieta witryny w wersji smartfonowej (z lewej strona główna, z prawej podstrony)

Warto pamiętać, aby projekty dla urządzeń mobilnych ograniczały się do jednej kolumny. Tylko taki układ gwarantuje właściwą responsywność witryny.

Oczywiście w pierwszej kolejności powinno pojawiać się logo, nazwisko lub nazwa wraz z przyciskiem menu. Nie możemy pozwolić, aby menu zajmowało całość ekranu. Na urządzeniach mobilnych będziemy je ukrywać i pokazywać po naciśnięciu przycisku menu. Kolejny element to slogan firmy. Można się zastanawiać, czy jest on potrzebny w przypadku strony mobilnej – my jednak zastosujemy go również w tej wersji strony.

Oferta firmy obejmuje trzy działy i zaprezentujemy je w postaci trzech boksów. Każdy boks będzie zawierał zdjęcie, pod którym umieścimy tytuł działu, krótki opis oraz dość duży przycisk umożliwiający łatwe wejście do wybranego działu.

Dalej znajdzie się krótka informacja O nas, a poniżej stopka. W wersji mobilnej przeznaczonej dla telefonów nie będziemy już dawać innych elementów. Na tak małych wyświetlaczach liczą się tylko kluczowe informacje. Pozostałe możemy ukryć. Nie zapominajmy, że istotne jest wykonanie makiety dla podstron witryny. Makieta wersji smartfonowej dla podstron zawiera identyczny nagłówek strony jak strona główna, czyli logo i przycisk menu. Następnie umieścimy belkę tytułową z nazwą danej podstrony, z której jasno będzie wynikało, w którym miejscu witryny aktualnie się znajdujemy. Poniżej zostawimy miejsce na zawartość podstrony i zakończymy makietę stopką.

W analogiczny sposób przygotujmy makietę strony na tablety (rys.2). Ta wersja będzie się również wyświetlała na smartfonach, jeśli będą one w położeniu poziomym. W wersji dla tabletów układ będzie podobny, zmienimy jednak nieco sposób wyświetlania boksów z ofertą. Zdjęcia w sekcji Oferta są teraz na tyle duże, że możemy tytuł i opis umieścić na nich, co urozmaici stronę i zmniejszy jej wysokość. Dodamy również sekcję Nasze realizacje, aby użytkownik mógł od razu się z nimi zapoznać. Podstrony w wersji tabletowej będą wyglądać identycznie jak w przypadku wersji smartfonowej.

c2

Rysunek 2. Makieta strony dla tabletów (z lewej strona główna, z prawej podstrony)

Trzecia makieta dotyczy największych ekranów i będzie wyświetlana na monitorach komputerów, a także na większych tabletach w pozycji poziomej (rys.3). Przy takich ekranach możemy zrezygnować z przycisku pokazującego menu i zastąpić go zwykłym poziomym menu.

c3

Rysunek 3. Makieta dla komputerów

Sekcja Oferta zostanie przeorganizowana i będzie wyświetlana teraz w trzech kolumnach. Następnie dział O nas przeniesiemy na lewo i obok wstawimy dwa ostatnie wpisy z bloga. Natomiast w sekcji Nasze realizacje będą prezentowane zdjęcia w jednym wierszu, a nie jak w przypadku tabletów, w dwóch.

Do podstron wyświetlanych na największych ekranach dodamy obok zawartości danej podstrony pasek boczny (sidebar), który może zawierać np. dodatkowe materiały czy linki (rys.4).

c4

Rysunek 4 Makieta podstrony w wersji desktopowej

Partnerzy