Zawartość
Telefony komórkowe, tablety i monitory komputerowe mają różne zastosowania, użytkowników i wymiary, które pozostawiają pytanie, jaki najlepszy rozmiar układu witryny jest określony przez potrzeby głównych użytkowników tej witryny. Jeśli witryna ma być oglądana przez zwykłych użytkowników na ekranie panoramicznym o rozdzielczości 1680x1040 pikseli, rozmiar witryny musi być dopasowany do głównego ekranu przeglądarki. Jeśli witryna jest przeznaczona do użytku na urządzeniach mobilnych, powinna być przeznaczona na znacznie mniejszy ekran.
Treść witryny, użytkownika i typu urządzenia wykorzystywana do uzyskania dostępu do niej określa najbardziej odpowiedni wymiar (Comstock / Comstock / Getty Images)
Statyczne układy płynów VS
Pierwsza uwaga dotyczy tego, czy witryna wymaga wymiaru zdefiniowanego w pikselach. Korzystając z wartości procentowych, można utworzyć układ „płynny”, który dynamicznie zmienia rozmiary obszarów w zależności od rozmiaru okna przeglądarki. W połączeniu z tekstem, układy płynów mogą być najlepszym wyborem podczas tworzenia witryny dla standardowej rozdzielczości ekranu, a także przeglądarek mobilnych. Układy płynów są osiągane poprzez użycie „szerokości = 100%” w deklaracji treści CSS, na przykład zamiast „szerokość = 960x”.
Filtrowanie standardowych rozmiarów ekranu
Aby utworzyć „stałe” lub płynne układy, szerokość div, opakowań lub głównych tabel zawartości powinna mieścić się w oknie przeglądarki użytkownika, biorąc pod uwagę zarówno pasek przewijania, jak i pasek narzędzi. Powinieneś także rozważyć działania dla większości. Ponad 80% przeglądarek używa obecnie rozdzielczości ekranu ponad 1024 x 768 pikseli. Oznacza to, że możesz to zrobić dla 1680x1024 pikseli, ale dobrym pomysłem jest rzutowanie na środek pola. Szerokość 960 lub 980 pikseli to dwie zaufane miary używane do wygodnego wyświetlania treści w przeglądarce używanej przez każdego, kto używa rozdzielczości 1024x768 lub wyższej. System dobrze pasuje również do urządzeń mobilnych, które mogą wyświetlać całe witryny. Jeśli jest zbyt ciasny, 1080 jest następną najlepszą szerokością. Zapamiętaj wysokość standardowej przeglądarki w dowolnej rozdzielczości, aby przechowywać najważniejsze informacje powyżej „zagięcia” lub punktu, w którym przewijanie staje się konieczne.
Ekrany mobilne
Jeśli chcesz, aby Twoja witryna wyglądała dobrze na różnych urządzeniach przenośnych, musisz to zrobić specjalnie dla urządzenia lub utworzyć specjalny styl, który jest używany przez przeglądarki mobilne do wyświetlania „mobilnej” wersji witryny. Rozdzielczość 240x320 to obecnie standard dla większości smartfonów i urządzeń internetowych, takich jak iPhone. Dobrym pomysłem jest używanie „płynnych” wartości procentowych lub układów, ponieważ wiele urządzeń obsługuje zarówno tryb pionowy, jak i poziomy. jeśli utworzysz witrynę sieci Web o szerokości 320 pikseli, może ona zostać odcięta dla użytkownika, uzyskując do niej dostęp w trybie pionowym.
Złota siatka
Być może najlepszym systemem do określania wymiarów układu jest wykorzystanie systemu siatki. Siatki obliczają doskonale zrównoważone obszary w obrębie danej szerokości, aby zapewnić poczucie skalowania elementów w głównym układzie lub obszarze zawartości. Elementy te obejmują pola promocyjne, paski, przestrzeń reklamową lub akapity. Na przykład układ o całkowitej szerokości 1080 pikseli i podzielony za pomocą złotej siatki pozostawiłby obszar pozostawiony na posty bloga o szerokości 739 pikseli i prawym pasku o szerokości 780 pikseli, oba z marginesem 10 pikseli. Efektem końcowym jest idealnie wyrównany i zrównoważony układ. Możesz eksperymentować z kilkoma różnymi siatkami, odwiedzając system generatorów siatek (patrz Zasoby).