Pierwszą rzeczą, którą większość projektantów bierze pod uwagę podczas budowania swojej strony internetowej, jest rozdzielczość, na którą należy zaprojektować. To, co tak naprawdę oznacza, to decydowanie, jak szeroki powinien być twój projekt. Nie ma już czegoś takiego jak standardowa szerokość strony.
Dlaczego warto rozważyć rozwiązanie
W 1995 r. Standardowe monitory o rozdzielczości 640x480 były największymi i najlepszymi monitorami dostępnymi. Oznaczało to, że projektanci stron internetowych skupili się na maksymalizacji rozdzielczości stron, które wyglądały dobrze w przeglądarkach internetowych na 12-calowym i 14-calowym monitorze w tej rozdzielczości.
Obecnie rozdzielczość 640x480 stanowi mniej niż 1 procent większości ruchu na stronie. Ludzie używają komputerów o znacznie wyższych rozdzielczościach, w tym 1366 x 768, 1600 x 900 i 5120 x 2880. W wielu przypadkach działa ekranowanie o rozdzielczości 1366 x 768 pikseli.
Jesteśmy w punkcie projektowania stron internetowych, w którym nie musimy się martwić o rozdzielczość. Większość ludzi ma duże monitory z panoramicznym ekranem i nie zmaksymalizują okna przeglądarki. Jeśli więc zdecydujesz się zaprojektować stronę, która ma nie więcej niż 1366 pikseli szerokości, twoja strona prawdopodobnie będzie dobrze wyglądać w większości okien przeglądarki, nawet na dużych monitorach o wyższej rozdzielczości.
Szerokość przeglądarki
Zanim odejdziesz, myśląc: "okay, sprawię, że moje strony będą miały szerokość 1366 pikseli", w tej historii jest coś więcej. Jednym z często pomijanych problemów przy podejmowaniu decyzji o szerokości strony jest to, jak duże są Twoje przeglądarki. W szczególności, czy maksymalizują one przeglądarki pod kątem pełnoekranowym, czy też utrzymują je mniej niż na pełnym ekranie?
W jednym nieformalnym przeglądzie współpracowników, którzy wszyscy używali standardowego laptopa o rozdzielczości 1024x768, dwa zmaksymalizowały wszystkie swoje aplikacje. Reszta miała różne wielkości okien otwarte z różnych powodów. To pokazuje, że jeśli projektujesz intranet tej firmy o szerokości 1024 pikseli, to 85 procent użytkowników będzie musiało przewijać w poziomie, aby zobaczyć całą stronę.
Po uwzględnieniu klientów, którzy maksymalizują lub nie, pomyśl o granicach przeglądarki. Każda przeglądarka ma pasek przewijania i granice po bokach, które zmniejszają dostępną przestrzeń od 800 do około 740 pikseli lub mniej w rozdzielczościach 800x600 i około 980 pikseli w zmaksymalizowanych oknach w rozdzielczości 1024x768. Jest to nazywane "chrome" przeglądarki i może zabrać przestrzeń użyteczną do projektowania strony.
Stałe lub płynne strony
Faktyczna szerokość liczbowa nie jest jedyną rzeczą, o której trzeba pamiętać przy projektowaniu szerokości witryny. Musisz także zdecydować, czy będziesz mieć stałą szerokość lub szerokość cieczy. Innymi słowy, czy ustawisz szerokość na określoną liczbę (stała) lub na procent (ciecz)?
Naprawiono szerokość
Naprawione strony o szerokości są dokładnie takie, jak brzmią. Szerokość jest ustalona na określoną liczbę i nie zmienia się bez względu na to, jak duża lub mała jest przeglądarka. Może to być dobre, jeśli chcesz, aby twój wygląd wyglądał dokładnie tak samo, bez względu na to, jak szerokie i wąskie są przeglądarki czytelników, ale ta metoda nie uwzględnia twoich czytelników. Osoby z przeglądarkami węższymi niż Twój projekt będą musiały przewijać w poziomie, a osoby z szerokimi przeglądarkami będą miały duże ilości pustego miejsca na ekranie.
Aby utworzyć strony o stałej szerokości, po prostu użyj konkretnych liczb pikseli dla szerokości działów strony.
Szerokość cieczy
Strony o płynnej szerokości (czasami nazywane stronami o elastycznej szerokości) różnią się szerokością w zależności od szerokości okna przeglądarki. Umożliwia to projektowanie stron, które koncentrują się bardziej na klientach. Problem ze stronami o szerokości cieczy jest taki, że mogą być trudne do odczytania. Jeśli długość skanu linii tekstu jest większa niż 10 do 12 słów lub mniej niż 4 do 5 słów, odczytanie jej może być trudne. Oznacza to, że czytelnicy z dużymi lub małymi oknami przeglądarki mają problemy.
Aby utworzyć elastyczne strony o szerokości, po prostu użyj wartości procentowych lub ems dla szerokości podziałów strony. Powinieneś także zapoznać się z właściwością maksymalnej szerokości CSS. Ta właściwość pozwala ustawić szerokość w procentach, ale następnie ograniczyć ją tak, aby nie stała się tak duża, że ludzie nie mogą jej odczytać.
A zwycięzcą jest: CSS Media Queries
Najlepszym rozwiązaniem w dzisiejszych czasach jest użycie zapytań o media CSS i responsywnego projektu, aby stworzyć stronę dostosowującą się do szerokości przeglądanej przeglądarki. Responsywny projekt stron internetowych wykorzystuje tę samą treść do stworzenia strony internetowej, która działa niezależnie od tego, czy oglądasz ją na poziomie 5120 pikseli, czy 320 pikseli. Strony o różnych rozmiarach wyglądają inaczej, ale zawierają tę samą treść. W zapytaniu o media w CSS3 każde urządzenie odbierające odpowiada na zapytanie swoim rozmiarem, a arkusz stylów dostosowuje się do tego konkretnego rozmiaru.
