Pracuję nad częścią graficzną strony i poproszono mnie o zaprojektowanie strony w Photoshopie. Zastanawiam się, jakie są średnie wymiary i szerokości przeglądarki dla witryny, dzięki czemu mogę tworzyć makiety z tymi wymiarami.
website-design
Hugh G. Wreckshin
źródło
źródło
Odpowiedzi:
W dzisiejszych czasach projektowania stron internetowych szerokość przeglądarki nie ma znaczenia. Istnieje tak wiele różnych urządzeń, że POTRZEBUJESZ, aby Twoje projekty były responsywne , ponieważ działają one na ekranie o dowolnym rozmiarze.
Aby to zrobić, powinieneś użyć jakiegoś systemu siatki szerokości płynu i celować w określone urządzenia za pomocą zapytań @media .
Zapytania o media to po prostu różne zestawy reguł CSS dla różnych rozmiarów portów widoku. Zapytania o media również reagują na dynamiczną zmianę szerokości przeglądarki. Gdy zmniejszasz przeglądarkę, strona reaguje, upuszczając liczby zmiennoprzecinkowe lub przechodząc z 12 kolumn do 1 lub 2. Reaktywność reaguje również na użytkowników urządzeń mobilnych i tabel, gdy zmieniają orientację z pionowej na poziomą lub odwrotnie.
Docelowe rozmiary:
Aby zobaczyć to w akcji, spójrz na siatkę bezramkową . W rzeczywistości nie jest płynny, ale po dostosowaniu przeglądarki zmienia się z 14 kolumn na 1
Twitter Bootstrap , prosty framework CSS, HTML i JS zbudowany z popularnych komponentów interfejsu użytkownika, jest również dobrym przykładem nowoczesnych, responsywnych praktyk projektowych.
Inną rzeczą, którą możesz chcieć wziąć pod uwagę, jest gęstość pikseli . IPhone 4 i nowy iPad mają wyświetlacze siatkówki, które są 2x ostrzejsze niż normalne ekrany. To sprawia, że praktyka serwowania duszków i obrazów zamiast tekstu jest prawie przestarzała. Na iPadzie obrazy z tekstem wyglądają okropnie.
Tak więc odpowiedź na pytanie brzmi: nie ma standardowej szerokości przeglądarki, dla której powinieneś zaprojektować. Powinieneś podejmować decyzje projektowe w oparciu o użytkowników i sprawić, by był on najbardziej dostępny dla jak największej liczby osób.
źródło
Wiele szablonów układu wykorzystuje szerokość 960 pikseli, ponieważ pasuje to do standardowej rozdzielczości szerokoekranowej 1024 pikseli, daje miejsce na pasek przewijania i jest łatwo podzielne przez 2, 3, 4, 5, 6, 8, 10, 12 i 16 - idealne do kolumnizacji Układ.
Przykład: patrz http://960.gs .
Inne frameworki, takie jak bootstrap, używają 940px, aby uwzględnić pewne marginesy między kolumnami.
źródło
Jeśli kierujesz reklamy na przeglądarki stacjonarne, możesz w razie potrzeby łatwo przejść do szerokości około 1000 pikseli.
Rozdzielczość ekranu StatCounter
Dlaczego około 1000 pikseli, gdy najbardziej typowe wyświetlacze mają 1024 lub więcej pikseli? Ponieważ musisz zezwolić na paski przewijania i chrom okna.
Jeśli specjalnie kierujesz reklamy na przeglądarki mobilne, dobrym wyborem może być szerokość 320 pikseli, chociaż przeglądarki mobilne zwykle skalują zawartość do szerokości widoku, więc szerokość 950 lub 960 pikseli może być świetna. Należy pamiętać, że 320 pikseli CSS / HTML to 640 pikseli urządzenia na urządzeniach o wysokiej DPI, takich jak iPhone.
Rozdzielczość ekranu mobilnego StatCounter
Twój rynek docelowy również może coś zmienić. Jeśli kierujesz reklamy do znających się na technologii odbiorców, możesz spodziewać się, że sytuacja zmieni się na bardziej nowoczesne urządzenia. Jeśli budujesz witrynę rządową, musisz zadbać o szerszy zakres.
Jak budujesz witrynę? Jeśli używasz systemu siatki, takiego jak Blueprint CSS lub 960 Grid System, może to również decydować o rozmiarze (większość systemów siatki można również zmienić na inne rozmiary).
Możesz również chcieć przyjrzeć się responsywnemu projektowi, jeśli próbujesz dobrze pracować zarówno na urządzeniach mobilnych, jak i stacjonarnych.
źródło
w tym czasie oszczerstwo na całym świecie to 1024 x 768, dobrze jest zrobić stronę internetową w rozmiarze 1003 pikseli ...
źródło