Jaka rozdzielczość strony internetowej jest najlepsza?

Można oczywiście przyjąć pewne wartości wyjściowe. U mnie projekt desktopowy często zaczyna się od 1440 px, natomiast jako minimalną szerokość, przy której sprawdzam stronę, przyjmuję około 320 px. Nie oznacza to jednak, że wszystko pomiędzy załatwia kilka sztywnych breakpointów (punktów w których wymuszamy zmianę).

Jeśli pozwalają na to materiały i charakter projektu, układ, wielkość tekstu oraz odstępy powinny płynnie dopasowywać się do dostępnego miejsca. Sama rozdzielczość ekranu nie powinna być jedynym wyznacznikiem.

Jaka powinna być szerokość strony internetowej?

Przy projektowaniu można przyjąć kilka wartości wyjściowych, ale nie należy traktować ich jak obowiązującej normy.

Dla desktopu często zaczynam od projektu o szerokości 1440 px. Na mniejszych laptopach warto sprawdzać okolice 1280 px, tabletów około 960 px, a w przypadku telefonów nawet 320 px.

Trzeba przy tym rozróżnić szerokość ekranu od szerokości samej treści. Monitor Full HD ma 1920 px szerokości, ale nie oznacza to, że tekst powinien rozciągać się od lewej do prawej krawędzi. W praktyce główna treść strony jest zazwyczaj znacznie węższa.

Znaczenie ma również wysokość ekranu. Użytkownik laptopa z niskim ekranem może zobaczyć znacznie mniej niż osoba korzystająca z dużego monitora, mimo że oba urządzenia formalnie zaliczymy do „desktopu”.

Jak dobrać szerokość strony do różnych ekranów?

Do tego służy responsywność. Strona automatycznie zmienia swój układ zależnie od ilości dostępnego miejsca.

Breakpointy, np. 760px, mogą być dobrym punktem wyjścia, ale nie powinny być świętą wartością wpisaną w projekt tylko dlatego, że „tak się robi”.

Dobrym przykładem jest menu. Jeśli jest krótkie i bez problemu mieści się na tablecie, nie ma większego sensu zamieniać go wcześniej w hamburger tylko dlatego, że został przekroczony ustalony breakpoint. W ten sposób techniczne założenie zaczyna pogarszać użyteczność.

Podobnie nie każda sekcja na telefonie musi automatycznie zamieniać się w długi pionowy ciąg elementów. Czasami lepszy będzie układ poziomy, przewijanie części zawartości albo pozostawienie dwóch elementów obok siebie.

Rozdzielczość a wielkość strony internetowej - co naprawdę ma znaczenie?

Współczesne projektowanie nie polega na ustaleniu jednej szerokości strony i próbie utrzymania jej za wszelką cenę.

Coraz częściej zmieniają się nie tylko całe układy strony, ale również pojedyncze komponenty. Przykładowo boks z CTA może wyświetlać przycisk obok tekstu, gdy ma wystarczająco dużo miejsca, a przenieść go poniżej dopiero wtedy, gdy sam komponent zrobi się zbyt wąski.

Pozwalają na to m.in. container queries. W uproszczeniu: element strony może reagować nie na szerokość całego ekranu, ale na miejsce, które rzeczywiście dostał.

Dlatego zamiast pytać o jedną idealną rozdzielczość strony, lepiej zapytać: czy strona dobrze wykorzystuje przestrzeń, którą ma do dyspozycji?

Bo użytkownik raczej nie będzie zmieniał rozdzielczości monitora tylko dlatego, że projektant bardzo polubił swoje 1440px.