Pierwszą rzeczą, którą większość projektantów bierze pod uwagę podczas tworzenia swojej strony internetowej, jest to, co rozkład zaprojektować dla. To, co tak naprawdę sprowadza się do decyzji, jak szeroki powinien być twój projekt. Nie ma już czegoś takiego jak standardowa szerokość strony.
Dlaczego warto rozważyć rozdzielczość
W 1995 roku standardowe monitory o rozdzielczości 640 na 480 pikseli były największymi i najlepszymi dostępnymi monitorami. Oznaczało to, że projektanci stron internetowych skupili się na tworzeniu stron, które dobrze wyglądały w przeglądarkach internetowych zmaksymalizowanych na monitorze o przekątnej od 12 do 14 cali w tej rozdzielczości.
Obecnie rozdzielczość 640 na 480 stanowi mniej niż 1 procent większości ruchu w witrynie. Ludzie używają komputerów o znacznie wyższych rozdzielczościach, w tym 1366 na 768, 1600 na 900 i 5120 na 2880. W wielu przypadkach działa projektowanie dla ekranu o rozdzielczości 1366 na 768.
Todya, większość ludzi ma duże, szerokoekranowe monitory i nie maksymalizują okna przeglądarki. Jeśli więc zdecydujesz się zaprojektować stronę o szerokości nie większej niż 1366 pikseli, prawdopodobnie będzie ona dobrze wyglądać w większości okien przeglądarki, nawet na dużych monitorach o wyższej rozdzielczości.
Szerokość przeglądarki
Często pomijanym problemem przy podejmowaniu decyzji o szerokości strony internetowej jest to, jak duże są Twoi klienci w swoich przeglądarkach. W szczególności, czy maksymalizują swoje przeglądarki na pełnym ekranie, czy też utrzymują je mniejsze niż pełny ekran?
Po uwzględnieniu klientów, którzy maksymalizują lub nie, zastanów się nad granicami przeglądarki. Każda przeglądarka internetowa wykorzystuje pasek przewijania i obramowania po bokach, które zmniejszają dostępną przestrzeń z 800 do około 740 pikseli lub mniej w rozdzielczości 800 na 600 i około 980 pikseli w zmaksymalizowanych oknach w rozdzielczości 1024 na 768 uchwały. Nazywa się to przeglądarką chrom i może zabrać z powierzchni użytkowej projekt strony.
Strony o stałej lub płynnej szerokości
Rzeczywista szerokość liczbowa nie jest jedyną rzeczą, o której musisz pamiętać przy projektowaniu szerokości swojej witryny. Musisz także zdecydować, czy będziesz mieć stała szerokość lub szerokość cieczy. Innymi słowy, czy zamierzasz ustawić szerokość na określoną liczbę (stała) czy na wartość procentową (ciecz)?
Stała szerokość
Strony o stałej 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. Takie podejście może być dobre, jeśli chcesz, aby Twój projekt wyglądał dokładnie tak samo, bez względu na to, jak szerokie lub wąskie są przeglądarki Twoich czytelników, ale ta metoda nie bierze pod uwagę 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żą ilość pustego miejsca na ekranie.
Aby utworzyć strony o stałej szerokości, użyj określonych liczb pikseli dla szerokości podziałów strony.
Szerokość cieczy
Strony o płynnej szerokości (czasami nazywane strony o elastycznej szerokości) różnią się szerokością w zależności od szerokości okna przeglądarki. Ta strategia przynosi projekty, które są bardziej ukierunkowane na klientów. Problem ze stronami o szerokości płynnej polega na tym, że mogą być trudne do odczytania. Jeśli długość skanowania linii tekstu jest dłuższe niż 10 do 12 słów lub krótsze niż 4 do 5 słów, może być trudne do odczytania. Oznacza to, że czytelnicy z dużymi lub małymi oknami przeglądarki mają problemy.
Aby utworzyć strony o elastycznej szerokości, użyj wartości procentowych lub ems dla szerokości podziałów stron. Zapoznaj się z CSS maksymalna szerokość własność. Ta właściwość pozwala ustawić szerokość w procentach, ale następnie ograniczyć ją, aby nie była tak duża, że ludzie nie mogą jej odczytać.
Zapytania o media CSS
Najlepszym rozwiązaniem w dzisiejszych czasach jest wykorzystanie zapytań o media CSS i responsywnego projektowania do stworzenia strony, która dostosowuje się do szerokości przeglądarki, która ją przegląda. Projekt responsywny wykorzystuje tę samą treść do stworzenia strony internetowej, która działa niezależnie od tego, czy wyświetlasz ją w szerokości 5120 pikseli, czy 320 pikseli. Strony o różnych rozmiarach wyglądają inaczej, ale zawierają tę samą treść. W przypadku zapytania 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.