Czy w makie jest standardowy rozmiar szerokości witryny? Jaki jest ten rozmiar Czemu?

Większość moich makiet zaczynam od szerokości 1200 pikseli, mimo że projektuję dla rozdzielczości 1024 pikseli. Skonfigurowałem przewodniki w makiecie na 1000px. Wysokość może się różnić. Powodem, dla którego poszerzam mój plik makiety, jest zobaczenie, jak czuje się projekt, gdy wokół niego jest dużo oddechu. Obecnie większość ludzi używa więcej niż 1024 pikseli.

Czy istnieje standardowa szerokość do projektowania makiet stron internetowych?

Tak nie może?

Dawno, dawno temu (patrz poniżej) projektowanie stron internetowych w dużej mierze próbowało stworzyć jeden widok, który pasowałby dość dobrze na większości ekranów. W ciągu ostatnich pięciu lat sytuacja zmieniła się drastycznie wraz z przyjęciem Responsive Web Design (RWD).

RWD to zasada projektowania polegająca na robieniu projektów w sposób, który pozwala im odpowiednio dopasować się do dowolnego urządzenia, niezależnie od jego wielkości.

Podczas tworzenia stron internetowych zapytania o media są często stosowane w celu zastosowania różnych zestawów stylów do stron internetowych, w zależności od wielu czynników. Niektóre typowe czynniki to:

• aktualna szerokość ekranu
• aktualna wysokość ekranu
• szerokość urządzenia
• wysokość urządzenia
• orientacja urządzenia

Ponieważ style mogą być kierowane na określone rozmiary ekranu, nierzadko jest tworzenie wielu zestawów projektów ukierunkowanych na określone zakresy.

Żeby było jasne, nie ma ustalonych „standardów”. Nie ma organu zarządzającego ani organizacji, która powiedziałaby, że „projektanci powinni projektować zgodnie z tymi wytycznymi dotyczącymi wielkości”, ponieważ ostatecznie jest to wyrok oceniający.

Powiedziawszy to, branża zajmująca się tworzeniem stron internetowych opracowała zestaw wspólnych punktów przerwania, które pojawiają się wielokrotnie.

Typowe punkty przerwania dotyczą bieżącej szerokości ekranu i zwykle są to:

_{jednostki w px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

Przyczyny tych konkretnych liczb są dość przyziemne. Oryginalny iPhone miał ekran o wymiarach 320 × 480; oryginalny iPad miał ekran o wymiarach 768 × 1024; 1600 × 1200 są wspólne dla większych rozdzielczości ekranu.

Chociaż często występują makiety w niektórych lub wszystkich tych punktach przerwania, często konieczne jest zapewnienie wielu renderingów konkretnej strony pokazujących pośrednie punkty przegięcia projektu.

Kompozycja o płynnej szerokości, która pokazuje ułożone w stos elementy o szerokości 768 pikseli, może wymagać uwzględnienia projektu dla 900 pikseli, w którym elementy zostały przełączone na dwie kolumny. Jeśli okaże się, że musisz dostarczyć wiele zestawów projektów dla tych pośrednich punktów przerwania, zdecydowanie zaleciłbym zaprojektowanie poszczególnych komponentów i pokazanie punktów przerwania, w których komponent zmienia się dla poszczególnych komponentów, bez uwzględnienia reszty strony w makiecie.

Pomaga to również uniknąć typowych pułapek projektowych, w których brakuje konkretnych elementów interfejsu użytkownika lub nie są one zgodne między punktami przerwania.

Poniżej znajduje się starsza wersja tej odpowiedzi, którą przechowuję ze względu na potomstwo, ale od pewnego czasu nie była odpowiednia

Dziwi mnie, że nikt jeszcze o tym nie wspominał:

Google ma ładne narzędzie programistyczne o nazwie

Rozmiar przeglądarki

To powinno raczej odpowiedzieć na twoje pytanie sam.

Mam kilka uwag na temat aktualnych trendów:

Obecnie zdecydowana większość użytkowników ma rozdzielczości 1024 x 600 (tablet / netbook) lub więcej. Trzeba pamiętać o usunięciu 24pxpaska przewijania, który pozostawia niezłą szerokość nawet 1000 pikseli. Jeśli chodzi o wysokość: internauci są bardzo dobrzy w przewijaniu w pionie, ponieważ przyzwyczaili się już do przewijania kół myszy. Wysokość początkowa jest ważna przede wszystkim przy pierwszych wrażeniach.

Użytkownicy nie są tak dobrzy w przewijaniu w poziomie, więc nie zaleca się tworzenia układów szerszych niż 1000 pikseli.

Również wielu użytkowników z większymi ekranami nie używa całego ekranu w swojej przeglądarce internetowej. Zwłaszcza teraz, gdy Windows 7 zawiera prostą funkcję przeciągnij i dokuj, aby upuścić okno na połowę ekranu.

W podsumowaniu:

• unikaj statycznych szerokości powyżej 1000 pikseli
• upewnij się, że Twoje pierwsze wrażenie wygląda ładnie w rozdzielczości 1024 x 600
• nie bój się upuścić zawartości poniżej zakładki.

Krótka odpowiedź: 775 x 400 dla 800 x 600, a dla 1024 x 768 użyj 1000 x 500.

Długa odpowiedź: nigdy nie można mieć pewności, że prezentacja będzie wyglądać poprawnie na komputerze klienckim (może mieć inny system operacyjny, przeglądarki, inny skalibrowany monitor lub niższą rozdzielczość z dużą czcionką ustawioną tak, aby lepiej czytać). Z tego powodu zawsze pokazuję prezentację na moim komputerze, jeśli mogę.

Jeśli nie mogę pokazać tego na moim komputerze w kwestii wielkości, stosuję te moje osobiste zasady (nie traktuj moich pomiarów jako świętych, każdy ma swoje własne):

Jako bezpieczny rozmiar jest dobry do optymalizacji dla 800 x 600 (usuwając pasek przewijania i górny pasek używam 775 x 400 jako „powyżej linii”). Ale w dzisiejszych czasach z tańszym ekranem o szerszym standardzie zacząłem projektować dla 1024 x 768 (1000 x 500)

Ważne jest, aby optymalizować nie wysokość, ale szerokość. Wysokość można rozwiązać za pomocą zwykłego przewijania myszy, a jeśli nie masz myszy Mac, nie możesz przewijać w poziomie, aby wyświetlić więcej informacji, jeśli nie masz myszy mac. Warto jednak wiedzieć, gdzie mniej więcej można ustawić dolną linię ekranu, nawet jeśli nie można dokładnie ustalić.

UWAGA: Używam tak niskiej wysokości nawet przy 1000px, ponieważ ludzie mają zwykle wiele dodatkowych pasków przewijania w podstawowej przeglądarce (na przykład GoogleRank lub zakładki i wiele innych), więc zawsze lubię projektować w najgorszej możliwej sytuacji.

Ps przepraszam za mój zły angielski :)

Mamy program śledzący, który informuje nas o naszych użytkownikach. Ponad połowa ma rozdzielczość 1024 x 768. Używam tego jako „standardowego” rozmiaru monitora.

Nie jest to jednak obszar na żywo dla Twojej witryny - ludzie mają paski boczne, nie zawsze otwierają okno przeglądarki na pełną szerokość itp.

Lubię system siatki 960 . Liczby są elastyczne, a strona internetowa zawiera wiele szablonów do pobrania. Używam tego do moich makiet i do tej pory wszyscy byli całkiem szczęśliwi.

Musiałbym szukać statystyk, które by mnie poparły (np. Ten post na blogu SO ), ale 1024x768 przyjęło lub przejmuje rolę standardowego wspólnego mianownika dla rozdzielczości ekranu. Projektuję makiety internetowe dla szerokiej publiczności o szerokości 1000 pikseli, aby uwzględnić paski przewijania i obramowania okien o rozdzielczości 1024 pikseli. W przypadku bardziej szczegółowych odbiorców Pekka ma rację w swoim komentarzu. Dowiedz się, jaka jest norma dla odbiorców docelowych.

Rozmiar przeglądarki jest dziś trudnym pytaniem, ponieważ ludzie korzystają z dwóch rodzajów urządzeń, komputerów o coraz wyższych rozdzielczościach i telefonów o stosunkowo niskich rozdzielczościach.

Jeśli twoja witryna jest witryną, większość współczesnych komputerów (większość to 90% lub więcej) ma minimalną rozdzielczość 1024. Jeśli chcesz nieco mniej komputerów, ale nadal dobry odsetek niż 1200, również mieści się w tym zakresie.

Jeśli tworzysz witrynę mobilną, większość telefonów ma maksymalną rozdzielczość 480 pikseli na przeglądanie w poziomie, ale większość z nich ma również system renderowania dla większych witryn.

Pytanie o rozmiar dotyczy wyłącznie własnych odbiorców, jeśli twoim celem jest grupa projektantów, możesz mieć większą witrynę, jeśli ludzie w średnim wieku szukają nowego ubezpieczenia samochodu, powinieneś pracować trochę mniej, a jeśli to na telefon użytkowników, na których można oglądać na telefonach, jeszcze mniejszych.

Zależy to całkowicie od Twojej witryny, z reguły nie przekraczam 1000 dla tych klientów na starych komputerach. Jednak badania pokazują teraz, że projektowanie dla 1200 jest teraz akceptowalne w świecie projektantów, więc zdecydowanie jest to jedzenie do przemyślenia.

Twoim planem powinno być uderzenie w najniższy wspólny mianownik, a jeśli tak się stanie, to Joe Dinosaur na maszynie z systemem Windows 95 o wymiarach 800 x 600, to właśnie na to powinieneś zwrócić uwagę.

Zależy to również całkowicie od projektu Twojej witryny. Obecnie projektuję stronę internetową dla mojej agencji, która będzie miała szerokość 800, co oznacza preferencje, a nie zaspokojenie z konkretnymi osobami.

Niestety nie ma żadnego standardowego rozmiaru, ponieważ strony internetowe są teraz dostępne na wielu ekranach. Aby być bardziej bezpiecznym, należy sprawdzić najpopularniejsze rozdzielczości (na przykład 1024 x 768) i projektować na podstawie popularności.

Odpowiedź brzmi: nie, nie ma „standardu”.

Zalecam użycie 960px dla szerokości twojego szablonu, ponieważ większość rozdzielczości ekranu wynosi 1028px, więc pasek przewijania nie pojawi się i zobaczysz tło, którego użyłeś.

Sugeruję użycie 1024px dla standardowej szerokości. Ponieważ maksymalna liczba komputerów zbudowanych z monitorem CRT i rozdzielczością tego monitora wynosi 1024 * 768px.