Technologia tworzenia witryn internetowych to bardzo złożony proces. Mimo to wszystkie jego etapy można podzielić na dwa główne elementy - powłokę funkcjonalną i zewnętrzną. Lub, jak to jest w zwyczaju wśród webmasterów, odpowiednio back-end i front-end. Osoby zamawiające swoje strony internetowe w studiach web developerskich często naiwnie wierzą, że warto postawić tylko na funkcjonalność i będzie to słuszna decyzja. Ale dzieje się tak w bardzo, bardzo rzadkich przypadkach, zwykle w przypadku projektów startowych na etapie beta testów. W przeciwnym razie projekt graficzny i interfejs użytkownika są po prostu wymagane, aby były zgodne ze standardami tworzenia stron internetowych i były wygodne.
Pierwszym kamieniem węgielnym, przed którym stoi projektant interfejsu lub projektant, jest szerokość układu witryny. W końcu do tego konieczne jest narysowanie interfejsów. Czysto intuicyjnie powstają dwa podejścia – albo stworzyć osobne układy dla każdej popularnej rozdzielczości ekranu, albo stworzyć jedną wersję strony dla wszystkich wyświetlaczy. I obie opcje będą błędne, ale najpierw najważniejsze.
Standardowa szerokość witryny w pikselachdla Runeta
Przed opracowaniem adaptacyjnego layoutu, stworzenie strony o szerokości tysiąca pikseli było zjawiskiem masowym. Ta figura została wybrana z jednego prostego powodu - aby strona pasowała do każdego ekranu. I to ma swoją logikę, ale załóżmy, że dana osoba nadal ma co najmniej monitor HD na pulpicie. W tym przypadku Twój układ będzie wyglądał jak maleńki pasek na środku ekranu, na którym wszystko jest sklejone w jedną kupkę, a po bokach jest ogromna niewykorzystana przestrzeń. Załóżmy teraz, że osoba wchodzi na Twoją stronę na tablecie z ekranem panoramicznym 800px i w ustawieniach jest zaznaczona opcja „Pokaż całą stronę”. W takim przypadku Twoja witryna będzie również wyświetlana nieprawidłowo, ponieważ po prostu nie zmieści się na ekranie.
Z tych rozważań możemy wywnioskować, że ustalona szerokość układu zdecydowanie nie jest dla nas odpowiednia i musimy poszukać innej drogi. Przeanalizujmy pomysł osobnego układu dla każdej szerokości ekranu.
Układy na każdą okazję
Jeśli wybrałeś strategię tworzenia układów dla wszystkich rozmiarów ekranu na rynku, Twoja witryna będzie najbardziej unikalna w całym Internecie. W końcu po prostu niemożliwe jest dziś objęcie całej gamy urządzeń, próbując dostroić każdą opcję. Ale jeśli skupisz się na najpopularniejszych rozdzielczościach monitorów i ekranów urządzeń, to pomysł nie jest zły. Jego jedyną wadą są koszty finansowe. W końcu, gdy projektant interfejsów, projektant i programista zmuszeni są do wykonania tej samej pracy 5 lub 6 razy, projekt będzie kosztowałnieproporcjonalnie wyższa niż pierwotnie planowana cena.
Dlatego tylko strony jednostronicowe mogą pochwalić się dużą ilością wersji na różne ekrany, których celem jest sprzedaż jednego produktu i upewnij się, że zrobisz to dobrze. Cóż, jeśli nie masz jednego z tych lądowań, ale witrynę wielostronicową, powinieneś pomyśleć dalej.
Najpopularniejsze rozmiary witryn
Kompromisem między dwoma skrajnościami jest renderowanie układu dla trzech lub czterech rozmiarów ekranu. Wśród nich nie może zabraknąć layoutu na urządzenia mobilne. Reszta powinna być dostosowana do małych, średnich i dużych ekranów stacjonarnych. Jak wybrać szerokość strony? Poniżej przedstawiamy statystyki usługi HotLog za maj 2017, które pokazują nam rozkład popularności poszczególnych rozdzielczości ekranu urządzeń, a także dynamikę tego wskaźnika.
Z tabeli możesz dowiedzieć się, jak określić rozmiar witryny, której chcesz użyć. Ponadto możemy stwierdzić, że najpopularniejszym obecnie formatem jest ekran o wymiarach 1366 na 768 pikseli. Takie ekrany są instalowane w tanich laptopach, więc ich popularność jest naturalna. Kolejny najpopularniejszy to monitor Full HD, który jest złotym standardem dla filmów, gier, a tym samym do tworzenia layoutów stron internetowych. W dalszej części tabeli widzimy rozdzielczość urządzeń mobilnych 360 na 640 pikseli, a także różne opcje dla ekranów stacjonarnych i mobilnych.
Projektowanie układu
TakPo przeanalizowaniu statystyk możemy stwierdzić, że optymalna szerokość witryny ma 4 odmiany:
- Wersja na laptopa o szerokości 1366 pikseli.
- Wersja Full HD.
- Szeroki układ 800 pikseli do wyświetlania na małych monitorach biurkowych.
- Mobilna wersja witryny - szerokość 360 pikseli.
Powiedzmy, że zdecydowaliśmy, jakiego rozmiaru użyć dla wygenerowanego źródła dla witryny. Ale taki projekt i tak byłby kosztowny. Spójrzmy więc na więcej opcji, tym razem bez użycia stałej szerokości.
Uelastycznienie układu
Istnieje alternatywne podejście, kiedy warto dostosować się tylko do minimalnego rozmiaru ekranu, a same rozmiary witryn będą ustalane procentowo. Jednocześnie takie elementy interfejsu jak menu, przyciski i logo można ustawić w wartościach bezwzględnych, skupiając się na minimalnej szerokości ekranu w pikselach. Przeciwnie, bloki z treścią zostaną rozciągnięte zgodnie z określonym procentem szerokości obszaru ekranu. Takie podejście pozwala przestać postrzegać rozmiar witryn jako ograniczenie dla projektanta i umiejętnie pokonać ten niuans.
Co to jest złoty podział i jak można go zastosować do układu strony internetowej?
Nawet w okresie renesansu wielu architektów i artystów próbowało nadać swoim dziełom idealny kształt i proporcje. Po odpowiedzi na pytania dotyczące wartości takiej proporcji zwrócili się do królowej wszystkich nauk - matematyki.
Od starożytności wynaleziono proporcję, którą nasze oko postrzega jako najbardziej naturalną i elegancką,ponieważ ma wszechobecny charakter. Odkrywcą formuły takiej proporcji był utalentowany starożytny grecki architekt Fidiasz. Obliczył, że jeśli większa część proporcji ma się do mniejszej, a całość do większej, to taka proporcja będzie wyglądać najlepiej. Ale tak jest w przypadku, gdy chcesz podzielić obiekt asymetrycznie. Proporcję tę nazwano później złotym działem, co nadal nie przecenia jej znaczenia dla światowej historii kultury.
Powrót do projektowania stron internetowych
To bardzo proste - używając złotego podziału możesz zaprojektować strony, które będą jak najbardziej przyjemne dla ludzkiego oka. Obliczając zgodnie z definicją formuły złotego podziału, otrzymujemy liczbę niewymierną 1, 6180339887 …, ale dla wygody możemy użyć zaokrąglonej wartości 1, 62. Będzie to oznaczać, że bloki naszej strony powinny wynosić 62 % i 38% całości, bez względu na wielkość wygenerowanego źródła dla witryny, z której korzystasz. Możesz zobaczyć przykład na tym schemacie:
Korzystaj z nowych technologii
Nowoczesne technologie layoutu stron internetowych pozwalają dokładnie przekazać ideę planisty i projektanta, więc teraz możesz pozwolić sobie na realizację bardziej śmiałych pomysłów niż u zarania technologii internetowych. Nie musisz już zastanawiać się, jaki powinien być rozmiar witryny. Wraz z pojawieniem się takich rzeczy, jak adaptacyjny układ bloków, dynamiczne ładowanie treści i czcionek, tworzenie stron internetowych stało się znacznie przyjemniejsze. W końcu te technologie sąmniej ograniczeń, chociaż nadal istnieją. Ale jak wiadomo, bez ograniczeń nie byłoby sztuki. Sugerujemy użycie jednego naprawdę kreatywnego podejścia do projektowania - złotego podziału. Dzięki niemu możesz skutecznie i pięknie wypełnić obszar roboczy, bez względu na to, jakie rozmiary witryn ustawisz w szablonach.
Jak zwiększyć przestrzeń roboczą strony
Istnieje duża szansa, że nie będziesz mieć wystarczająco dużo miejsca, aby zmieścić wszystkie elementy interfejsu użytkownika w małym układzie. W takim przypadku będziesz musiał zacząć myśleć kreatywnie lub nawet bardziej kreatywnie niż wcześniej.
Maksymalnie zwolnij miejsce w witrynie, ukrywając nawigację w wyskakującym menu. Logiczne jest stosowanie tego podejścia nie tylko na urządzeniach mobilnych, ale także na komputerach stacjonarnych. W końcu użytkownik nie musi cały czas patrzeć na to, jakie nagłówki znajdują się na Twojej stronie - przyszedł po treść. A życzenia użytkownika muszą być przestrzegane.
Przykładem dobrego sposobu na ukrycie menu jest następujący układ (zdjęcie poniżej).
W górnym rogu czerwonego obszaru widać krzyżyk, którego kliknięcie spowoduje ukrycie menu w małą ikonę, pozostawiając użytkownika samego z treścią strony.
Jednak jest to opcjonalne, możesz opuścić nawigację, która zawsze będzie widoczna. Ale możesz sprawić, że będzie to piękny element projektu, a nie tylko lista popularnych linków w witrynie. Używaj intuicyjnych ikon oprócz lub nawet zamiast linków tekstowych. to jest to samoumożliwi Twojej witrynie bardziej efektywne wykorzystanie miejsca na ekranie urządzenia użytkownika.
Najlepsza witryna jest responsywna
Jeśli nie wiesz, jaki układ wybrać dla witryny, wszystko jest dla Ciebie proste. Aby zaoszczędzić na kosztach rozwoju i jednocześnie nie stracić odbiorców z powodu złego układu na niektórych urządzeniach, użyj responsywnego projektowania.
Responsywny projekt to projekt, który wygląda równie dobrze na różnych urządzeniach. Takie podejście sprawi, że Twoja strona będzie zrozumiała i wygodna nawet na laptopie, nawet na tablecie, nawet na smartfonie. Efekt ten uzyskuje się poprzez automatyczną zmianę szerokości obszaru roboczego ekranu. Korzystając z responsywnych arkuszy stylów w swojej witrynie, podejmujesz najlepszą możliwą decyzję.
Jaka jest różnica między projektowaniem responsywnym a wersjami stron internetowych
Konstrukcja responsywna różni się od mobilnej wersji strony tym, że w tym ostatnim przypadku użytkownik otrzymuje inny kod html niż komputerowy. Jest to wada pod względem optymalizacji wydajności serwera, a także optymalizacji pod kątem wyszukiwarek. Ponadto trudniej jest obliczyć statystyki dla różnych wersji witryny. Podejście adaptacyjne nie ma tych wad.
Reakcja na różne urządzenia jest osiągana poprzez układ z określonym procentem szerokości lub poprzez przeniesienie bloków do dostępnej przestrzeni (w płaszczyźnie pionowej na smartfonie zamiastpoziomo na pulpicie) lub tworzenie indywidualnych układów dla różnych ekranów.
Dowiedz się więcej o responsywnym projektowaniu i rozwoju z naszych samouczków.
