Jaka jest standardowa szerokość witryny w pikselach lub gdzie są statystyki?
Odpowiedzi:
Nie ma standardu, mimo że większość programistów zakłada standard 1024x768.
Istnieje system siatki CSS o nazwie 960grid, który przyjmuje szerokość ciała jako 960px, a następnie rozbija kolumny w 96 kolumnach przy 10px lub 80 przy 12px.
Problem polega na tym, że ekrany komputerów stają się coraz większe, w niektórych regionach powoli, ale są.
Z drugiej strony, w topach technicznych masz mniejsze ekrany w urządzeniach mobilnych i netbookach.
Radzenie sobie z tą rzeczywistością może być bolesne. Na ratunek przychodzą CSS Media Queries. Alternatywnie możesz użyć tagu link (z rel handheld), aby zapewnić alternatywną wersję dla urządzeń mobilnych.
Skorzystaj z linków referencyjnych
Jaka jest standardowa szerokość witryny w pikselach?
Dowolna liczba większa niż 0 i mniejsza niż nieskończoność.
Obecne najlepsze praktyki w zakresie elastycznego projektowania stron internetowych (RWD) to obsługa każdego urządzenia niezależnie od jego szerokości w pikselach. Zazwyczaj wymaga to użycia zapytań o media w celu zapewnienia różnych stylów dla różnych zakresów rozmiarów ekranu. Rzeczywiste zastosowane zakresy mają mniejsze znaczenie niż konstrukcja jest spójna w różnych rozmiarach, a witryna utrzymuje funkcjonalność w różnych rozmiarach.
Użytkownicy bardzo często widzą różne rozmiary ekranu, nie zastanawiając się nad tym, więc chcesz zminimalizować niespodziankę, gdy przeciągną okno, aby zadokować na połowie ekranu lub przechyli telefon.
Niektóre powszechnie stosowane zakresy szerokości to:
Te zakresy są tak powszechne, że powiedziałbym, że są praktycznie standardem. Nie wszystkie zakresy muszą być użyte, na przykład witryna może mieć płynną szerokość dla wszystkiego poniżej 768, a następnie o stałej szerokości i wyśrodkowana dla 768+.
Biorąc to wszystko pod uwagę, pamiętaj, że liczby, których używasz, nie mają szczególnego znaczenia, o ile witryna działa na dowolnym urządzeniu, na którym użytkownik ją wyświetli.
gdzie są statystyki?
Teraz najtrudniejsza część, rzeczywiste dane. Jeśli przeprojektowujesz witrynę, jedyne ważne dane to twoje. Co Wikipedia lub przepełnienie stosu lub Google lub którykolwiek-inne-large-website-to-moc-list-analytics-data mówi nie ma znaczenia dla twoich danych na swoim miejscu.
Jeśli statystyki pokazują, że większość użytkowników używa głównie określonego zakresu szerokości urządzenia, prawdopodobnie powinieneś skupić się na obsłudze tych użytkowników w pierwszej kolejności. To wszystko powiedziało: jeśli Twój projekt reaguje prawidłowo, nie musisz w ogóle koncentrować się na żadnym konkretnym rozmiarze.
W przypadku nowych witryn lub witryn, które wcześniej nie zawierały danych analitycznych, zastanów się nad zastosowaniem metody mobilnej i upewnij się, że korzystasz z danych analitycznych, aby odpowiednio dostosować się do bazy użytkowników.
Dziwi mnie, że nikt inny nie wspomniał o rozmiarze przeglądarki Google .
Jeśli chodzi o standardy:
80% przeglądających może obsłużyć do 1000px szerokości, ale te, które mogą obsłużyć więcej niż 1000px często nie. Dzięki monitorom szerokoekranowym wiele osób wyrówna okna do połowy ekranu. Teraz, gdy Win7 obsługuje drag-n-dock, prawdopodobnie stanie się jeszcze bardziej popularny.
Jeśli chodzi o wysokość: pierwsze wrażenie dla użytkownika znajduje się na górze strony o wielkości około ~ 600 pikseli. Jednak większość użytkowników wie i spodziewa się, że zawartość spadnie „poniżej zakładki” i jest skłonna do przewijania.
Jeśli chcesz przekroczyć 1000 pikseli, zdecydowanie polecam płynny układ, aby użytkownicy netbooków i mniejszych ekranów mogli nadal widzieć zawartość poprawnie.
~ 960px ma zwykle znormalizowaną szerokość, ale tak naprawdę zależy to od zawartości i stylu.
W zeszłym roku przeprowadziłem mały test przy użyciu Google Analytics, aby dowiedzieć się, jakie są średnie szerokości i wysokości wewnętrznej przeglądarki (co faktycznie widzą użytkownicy).
Jak powiedzieli inni, nie ma standardu dla tego rodzaju rzeczy. Oto kilka wskazówek, które spowodują lub zahamują twoją witrynę:
Zawsze korzystałem z wartości procentowych lub z najgorszego scenariusza: najmniejsza rozdzielczość ekranu, z którą zwykle się spotyka, to 800 x 600, a nawet to jest rzadkie. Wszystko poniżej jest prawdopodobnie na urządzeniu mobilnym. Szerokość 775px jest dobrym medium do użycia, lub po prostu 80%, jeśli wiesz, że Twoja witryna nadal będzie atrakcyjna, gdy zostanie przeskalowana na większy ekran. Najczęstszym problemem jest to, że zawartość tekstu (po skalowaniu do szerokości 1600 pikseli) wydaje się pusta i krótka. Posiadanie witryny do szerokości 775 pikseli to naprawi, ale może nie wyglądać dobrze z ogromną otwartą przestrzenią po obu stronach.
NIGDY nie zmuszaj użytkowników do przewijania w lewo lub w prawo. Odcięcie zawartości stron jest najszybszym sposobem na utratę potencjalnych klientów lub czytelników.
Miej nawigację gdzieś u góry lub w miejscu, w którym użytkownicy nie muszą przewijać, aby ją znaleźć.
I tylko wskazówka dotycząca treści; albo mają wysoką grafikę / niską informację lub wysoką informację / niską grafikę. Próbowanie połączenia obu z nich zawsze wygląda okropnie.
Standardem byłoby „możliwie jak największa szerokość / wysokość”. To zależy od ekranu użytkownika:
Warto wiedzieć, jak popularne są rozdzielczości ekranu, a następnie oprzeć swój szablon na ogólnym użyciu przez większość ... Osobiście polecam stosowanie Responsive Design - w ten sposób Twoja strona działa na wszystkich urządzeniach i wszystkich rozdzielczościach.
Od stycznia 2013 r.
1366x768 25,4%
1920x1080 11,0%
1280x1024 9,7%
1440x900 7,3%
1280x800 8,2%
1680x1050 5,7%
1600x900 5,0%
1920x1200 2,9%
1360x768 2,1%
2560x1440 1,1%
Inne 11,6%
Google Analytics rejestruje rozdzielczości ekranu użytkownika. Można łatwo utworzyć raport niestandardowy, aby sprawdzić, jakie są typowe rozmiary ekranu o swoich gości. Oto statystyki (najlepsze 15) mojej witryny na maj 2013 r .:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Statystyki różnią się między witrynami w zależności od rodzaju odbieranego ruchu, dlatego należy odpowiednio zaprojektować. Sam wolę płynne projekty o szerokości procentowej, 1000 pikseli min-widthi rozsądnej cenie max-width.
Tak naprawdę nie ma czegoś takiego jak standard, a statystyki są całkowicie zależne od docelowych danych demograficznych. Celowanie w ludzi technicznych będzie generalnie skutkować lepszym sprzętem i wyższymi rozdzielczościami, mniej technicznymi odwrotnie. Ale są też telefony, netbooki itp., Które mają znacznie niższe rozdzielczości niż norma w większości przypadków.
Dla odniesienia zazwyczaj zakładam, że teraz jest to co najmniej 1024 x 768.
W każdym razie tutaj są niektóre: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
960 pikseli jest najbardziej bezpieczny, ponieważ działa na ekranie 1024 x 768 i pozostawia miejsce na pasek przewijania, a także działa na iPhonie w trybie poziomym (ponieważ piksel podwaja ekran 480 x 320 do skutecznego 960 x 640 i nie ma pasek przewijania).
Biorąc pod uwagę, że większość współczesnych monitorów szerokoekranowych ma rozdzielczość „1440 x 900” lub większą, pomyślałbym, że szerokość 1280 pikseli staje się coraz bardziej „standardem”, szczególnie jeśli chodzi o wyświetlanie obrazów.
UWAGA: szerokość 1280 pikseli była szerokością wielu starszych ekranów 17-calowych i 19-calowych o proporcjach 4: 3.