Zanim poświęcisz zbyt dużo czasu na zastanawianie się nad dokładną rozdzielczością monitora w swoim projekcie, pamiętaj, że wszystkie nowoczesne projekty internetowe są responsywne, co oznacza, że są zaprojektowane tak, aby dostosowywać się do różnych rozdzielczości ekranu. Dzięki jednej konstrukcji musisz obsługiwać wszystko, od najmniejszych ekranów mobilnych po monitory stacjonarne Ultra HD.
Z responsywne projektowanie stron internetowych, tworzysz bardziej ogólne układy na urządzenia mobilne, tablety i komputery. Kiedy i jak każdy element strony przesuwa się na miejsce dla tych układów, określają specjalne punkty przerwania zapisane w twoim CSS. Te punkty przerwania są określane przez niektóre typowe rozdzielczości ekranu.
Chociaż nie będziesz kierować się konkretnymi rozdzielczościami ani ustawiać stałego rozmiaru dla swoich projektów, rozważysz ekran rozwiązania w ustalaniu punktów przerwania i tworzeniu płynnych przejść, dzięki czemu Twoja witryna wygląda dobrze na każdym urządzeniu i rozmiar ekranu.
Typowe rozdzielczości komputerów stacjonarnych
- 1280x720 Standardowy HD — Możesz znać ten lepiej jako 720p. Była to standardowa rozdzielczość HD, gdy HD po raz pierwszy stało się powszechne. Prawdopodobnie nie znajdziesz wielu nowych monitorów korzystających z tej rozdzielczości, ale wiele z nich jest wciąż na wolności z czasów, gdy były bardziej popularne.
- 1366x768 - To coś o niezwykłej rozdzielczości, ale jest bardzo popularne w mniejszych laptopach i niektórych tabletach. Jeśli masz do czynienia z niższym poziomem Chromebooki, istnieje duża szansa, że to rozdzielczość, na którą kierujesz reklamy.
- 1920x1080 Najczęstsze - Kiedy myślisz o komputerach stacjonarnych, prawdopodobnie masz do czynienia z 1920x1080, lepiej znanym jako 1080p. Ta rozdzielczość jest absolutnie wszędzie. Większość monitorów stacjonarnych nadal ma rozdzielczość 1080p, a także wiele pełnowymiarowych laptopów. W krajobrazie znajdziesz również przyzwoity udział tabletów w rozdzielczości 1080p.
- 2560x1440 - 1440p to kolejny dziwny środek w obrazie rozdzielczości monitora. Jest wyższy niż to, co można by uznać za 2k, ale to nie jest całkiem 4k. To powiedziawszy, jest to powszechna rozdzielczość na rynku monitorów do gier i jest to przystępna cenowo alternatywa dla pełnego 4K. W zależności od Twojej witryny obsługa 1440p może być lub nie być warta.
- 3840x2160 Niedaleka przyszłość - To jest pełne 4k lub Ultra HD. Chociaż obecnie 4k jest zarezerwowane dla komputerów z wyższej półki, ceny spadają, technologia graficzna się poprawia, a popyt na 4k jest napędzany przez rynek telewizyjny, gdzie jest znacznie bardziej powszechny. Można śmiało założyć, że w ciągu najbliższych kilku lat 4k z łatwością prześcignie 1080p jako de facto standard, więc na pewno warto uwzględnić teraz 4k.
Typowe rozdzielczości tabletów/poziomów
Tablety mogą nie być tak popularne jak kiedyś, a coraz większe rozmiary telefonów w połączeniu z konwertowalnymi laptopami wydają się znacznie zmniejszyć ich udział w rynku. Mimo to rozliczanie rozdzielczości tabletów znacznie pokrywa się z komputerami stacjonarnymi i laptopami. Możesz użyć punktów przerwania tabletu, aby utworzyć punkty przerwania dla niektórych kłopotliwych elementów, które nie pasują do określonych rozdzielczości.
- Należy również bezwzględnie wziąć pod uwagę rozdzielczości tabletu dla urządzeń trzymanych w trybie pionowym. Nie wszyscy będą przeglądać na swoim tablecie trzymanym w orientacji poziomej, dlatego należy dodać co najmniej jeden punkt przerwania dla zwykłego tabletu trzymanego w orientacji pionowej.
- 1280x800 Rozdzielczość, która kiedyś była powszechna - Starsze tablety, tablety z niższej półki i mniejsze tablety często mają niektóre z tabletów Amazon's Fire, które nadal używają 1280x800. To jedna z ostatnich prawdziwie mobilnych rozdzielczości na tablety.
- 1920x1200 Często na tabletach 7" i 8" - W krajobrazie przez większość czasu można polegać na tych samych punktach przerwania, co w rozdzielczości 1080p. Jednak gdy widzisz jeden z nich w krajobrazie, sytuacja jest zupełnie inna. Ta rozdzielczość jest powszechna wśród wielu 7- i 8-calowych tabletów, w tym Amazon Fire.
- 2048x1536 Tablety Apple -To najczęstsza rozdzielczość tabletów Apple. Jest na tyle podobny do 1440p, że robi niewiele różnicy, ale znowu portret jest niezwykły. W każdym razie dobrze jest przetestować witrynę w tej rozdzielczości, aby upewnić się, że na iPadach nie dzieje się nic dziwnego.
Tablety o wyższej rozdzielczości zaczynają wchodzić na terytorium komputerów stacjonarnych. W większości przypadków nawet nie musisz ich uwzględniać, ponieważ rozdzielczość mieści się w zakresie, który już uwzględniłeś. Zawsze jednak warto przetestować, aby mieć absolutną pewność.
Wspólne rozwiązania mobilne Mobile
Urządzenia mobilne są najbardziej skomplikowane w obsłudze. Jest tak zróżnicowana gama urządzeń, w tym starsze, które wciąż są w użyciu, że nie jest łatwo objąć je wszystkimi. Właśnie dlatego projektowanie z myślą o urządzeniach mobilnych jest tak popularne. Filozofia jest prosta. Zacznij od najprostszego projektu mobilnego i rozbudowuj go na coraz większych ekranach. W ten sposób działają nawet najstarsze i najmniejsze urządzenia, ale z mniejszą zawartością i mniejszą liczbą funkcji. Witryna nie jest ograniczona, po prostu wyświetla na początku tylko najważniejsze i najczęściej używane informacje.
Oto interesująca sztuczka do radzenia sobie z telefonami; obróć rozdzielczości pulpitu na swoją stronę. Jasne, istnieją niezwykłe wartości odstające, ale większość obecnych telefonów podąża za tym wzorcem.
- 720x1280 powszechne na starszych urządzeniach — przez wiele lat 720p odwrócony był najpopularniejszym standardem dla urządzeń mobilnych. W takim przypadku nie musisz się martwić trybem poziomym, ponieważ jest taki sam jak stacjonarny 720p. Wystarczy pokryć rozdzielczość portretową o szerokości 720 pikseli.
- 1080x1920 środek pola - 1080p to standard od bardzo dawna. Nadal jest bardzo powszechny na urządzeniach średniej klasy. Jeśli zamierzasz obsługiwać tylko jedną rozdzielczość mobilną, to jest to.
- 1440x2560 aktualny top-end - Urządzenia mobilne stają się coraz większe, a ekrany mają coraz wyższą rozdzielczość. 1440p jest interesującym standardem, ponieważ istnieje wiele różnych szerokości ekranu – w tym przypadku długości – które mieszczą się w tym zakresie. Zarówno na komputerach stacjonarnych, jak i na urządzeniach mobilnych, najpopularniejszy to 1440x2560. Daje to ekranowi typowe proporcje 16:9. Na urządzeniach mobilnych ma mniejsze znaczenie niż na komputerach stacjonarnych, ponieważ długość urządzenia nie ma większego wpływu na Twoje projekty.
Zanim z radością obsłużysz tylko trzy rozdzielczości mobilne, powinieneś również zdać sobie sprawę, że niektórzy ludzie używają śmiesznie starych telefonów z małymi ekranami. Zawsze powinieneś budować w minimalnej rozdzielczości, aby Twoja witryna wyglądała dobrze nawet dla kogoś, kto korzysta z telefonu sprzed kilku lat.
Proste wskazówki, o których warto pamiętać
Łatwo jest zebrać kilka faktów na temat rozdzielczości ekranu, spływu i zacząć wyśmiewać projekty, i właśnie wtedy wpadasz w kłopoty. Podczas projektowania witryny internetowej należy pamiętać o kilku kluczowych pomysłach, które sprawdzają się w większości, jeśli nie we wszystkich sytuacjach.
- Responsywny projekt jest płynny — Możesz odczuwać skłonność do budowania ogromnej liczby punktów przerwania w swoim CSS, aby uwzględnić każdy możliwy rozmiar ekranu i sytuację. To świetny sposób na doprowadzenie się do szału. Responsywne projektowanie stron internetowych ma być na tyle elastyczne, aby wypełniać luki i nieprawidłowości. Jeśli zorientujesz się, że definiujesz zbyt wiele liczb statycznych, niezależnie od tego, czy są one w zapytaniach o media, czy też dla samych elementów, prawdopodobnie idziesz w złym kierunku.
- Ludzie nie zawsze maksymalizują swoją przeglądarkę — Ten rodzaj idzie w parze z poprzednim punktem. Możesz projekt dla rozmiarów ekranu, ale gdy ktoś nie zmaksymalizuje okna przeglądarki, wszystko idzie z dymem. Zachowując płynność projektowania, możesz uniknąć problemów z różnymi rozmiarami okien przeglądarki.
- Przetestuj wszystko - Spróbuj złamać swoją witrynę. Tylko w ten sposób znajdziesz wszystkie błędy i niespójności, które zrujnują wrażenia odwiedzającego. Chrome ma wbudowane narzędzia do testowania rozdzielczości urządzeń z pełną listą popularnych urządzeń do pracy. Zawsze masz możliwość samodzielnego przeciągnięcia okna przeglądarki do różnych rozmiarów, aby zobaczyć, jak witryna wygląda w różnych rozmiarach, jak się dostosowuje i jak się psuje.
- Nie oczekuj, że Twoi użytkownicy będą mieli najnowsze i najlepsze - To wraca do poprzedniego punktu o starszych telefonach i małych rozdzielczościach. Nie można oczekiwać, że ludzie będą mieli nowe urządzenia. Dotyczy to zarówno rozdzielczości ekranu, jak i mocy obliczeniowej. Wczytywanie strony ze zbyt dużą ilością grafiki i za dużo JavaScript to dobry sposób, aby ludzie z wolnym urządzeniem odeszli i nigdy nie wracali.