웹 사이트를 디자인하려면 어떤 브라우저 너비를 사용해야합니까?

9

웹 사이트의 그래픽 부분을 작업 중이며 Photoshop에서 웹 사이트를 디자인하라는 요청을 받았습니다. 웹 사이트의 평균 크기와 브라우저 너비가 무엇인지 궁금하여 해당 크기의 모형을 만들 수 있습니다.

website-design

— 휴 지 난파선
소스

그것은 다른 질문과 완전히 다른 질문입니다. 이것은 전체 웹 사이트 모형 이미지의 기본 해상도가 다른 웹 사이트 내의 그래픽을 요구하는 것이어야합니다.

— Xitcod13

2

왜 닫혔는지 확실하지 않으면 다른 스레드와 중복되지 않습니다. (나는 다시 열기로 투표) 제목을 좀 더 정확하게 변경했습니다. -대부분의 사용자는 이제 1024 x 768 이상으로 설정된 브라우저로 서핑합니다. 1000 픽셀을 최대 너비로 사용하는 것이 일반적으로 허용됩니다. 960 그리드, 부트 스트랩 등의 공식이 인기를 얻는 이유입니다.

— Scott

미안하지만, 거의 같은 제목에 매달렸다. 재개 ...

— Farray

이것이 사이트의 고정 너비 레이아웃을 가정합니까? 또는 "시각이 좋지 않아 사용자가 640x480의 해상도를 사용하는 경우 사이트는 다음과 같이 보입니다 ..."라는 레이아웃과 리플 로우 방식을 보여주는 모형에 하나의 프레임을 포함시킬 가치가 있습니까? (OK, 대신 800x600을 사용할 수 있습니다)

— Andrew Leach

7

현대의 웹 디자인 시대에 브라우저 너비는 관련이 없습니다. 다양한 크기의 장치 에서 작동하므로 디자인을 반응 형으로 만들 필요가 있습니다.

그러기 위해서는 일종의 유동 폭 그리드 시스템을 사용해야하며 @media 쿼리를 사용하여 특정 장치를 대상으로해야 합니다 .

미디어 쿼리는 단순히 다른 뷰 포트 크기에 대한 서로 다른 CSS 규칙 세트입니다. 미디어 쿼리는 또한 브라우저 너비를 동적으로 변경하는 것에 반응합니다. 브라우저를 더 작게 만들면 플로트를 삭제하거나 12 열에서 1 또는 2로 이동하여 페이지가 응답합니다. 응답 성은 또한 방향을 세로에서 가로로 또는 그 반대로 변경할 때 모바일 장치 및 테이블의 사용자에게 반응합니다.

대상 크기 :

세로 모드의 320 x 480 모바일 장치
가로 모드의 480 x 640 소형 태블릿 또는 iPhone
세로 모드에서 768 x 1024 태블릿
가로 모드에서 1024 x 768 태블릿
1200 개 이상의 데스크톱 브라우저
2900 ++ 대형 미디어 디스플레이 또는 회의 (필수는 아니지만 누군가가 매우 큰 디스플레이에서 사이트를보고있는 경우에는 어떻게됩니까?

이것을 실제로 보려면 Frameless 그리드를 살펴보십시오 . 실제로 유동적이지는 않지만 브라우저를 조정하면 14 열에서 1로 줄어 듭니다.

널리 사용되는 사용자 인터페이스 구성 요소로 구축 된 간단한 CSS, HTML 및 JS 프레임 워크 인 Twitter Bootstrap 도 현대적인 반응 형 디자인 방식의 좋은 예입니다.

고려해야 할 또 다른 사항은 픽셀 밀도 입니다. iPhone 4와 새로운 iPad에는 일반 화면보다 2 배 선명한 레티 나 디스플레이가 있습니다. 이것은 텍스트 대신 스프라이트와 이미지를 제공하는 관행을 거의 쓸모 없게 만듭니다. 텍스트가있는 iPad 이미지에서는 끔찍합니다.

따라서 질문에 대한 대답은 설계해야 할 표준 브라우저 너비가 없다는 것입니다. 사용자를 기반으로 디자인 결정을 내려야하며 대부분의 사람들이 가장 쉽게 접근 할 수있는 위치에 디자인 결정을 내려야합니다.

— Chris_O
소스

귀하의 틀없는 그리드 링크는 지금 죽었어요.

— Ruslan

6

많은 레이아웃 템플릿은 일반적인 1024px 와이드 화면 해상도에 적합하고 스크롤 막대를위한 공간을 제공하며 2, 3, 4, 5, 6, 8, 10, 12 및 16으로 쉽게 나눌 수 있으므로 960 픽셀 너비를 사용합니다. 배치.

예는 http://960.gs 를 참조하십시오 .

부트 스트랩 과 같은 다른 프레임 워크는 940 픽셀을 사용하여 열 사이의 여백을 설명합니다.

— 차이 스케
소스

960gs 사이트에 대한 멋진 참조. @ 휴 당신은 당신을 돕기 위해 그들의 psd 템플릿을 사용해야합니다.

— skids89

6

데스크톱 브라우저를 대상으로하는 경우 필요한 경우 약 1000 픽셀 너비로 쉽게 이동할 수 있습니다.

StatCounter 화면 해상도

가장 일반적인 디스플레이가 1024 픽셀 이상일 때 왜 약 1000 픽셀입니까? 스크롤 막대와 창 크롬을 허용해야하기 때문입니다.

모바일 브라우저를 구체적으로 타겟팅하는 경우 320 픽셀 너비를 사용하는 것이 좋습니다. 모바일 브라우저는 일반적으로보기 너비에 맞게 콘텐츠의 크기를 조정하므로 너비가 950 또는 960 픽셀 일 수 있습니다. iPhone과 같은 높은 DPI 장치에서 320 CSS / HTML 픽셀은 640 장치 픽셀입니다.

StatCounter 모바일 화면 해상도

목표 시장도 상황을 바꿀 수 있습니다. 기술에 정통한 사용자를 대상으로하는 경우보다 최신 장치로 왜곡 될 수 있습니다. 정부 사이트를 구축하는 경우 더 넓은 범위를 수용해야합니다.

또한 사이트를 어떻게 구축하고 있습니까? Blueprint CSS 또는 960 Grid System과 같은 그리드 시스템을 사용하는 경우 크기도 지정할 수 있습니다 (대부분의 그리드 시스템도 다른 크기로 변경할 수 있음).

데스크톱뿐만 아니라 모바일에서도 잘 작동하려는 경우 반응 형 디자인을 살펴볼 수도 있습니다.

— 마크 에드워즈
소스

4

960 그리드 시스템에 이어 두 번째입니다. 매우 유연하며 대부분의 시청자에게 적합합니다.

— Lauren-Clear-Monica-Ipsum이

"... 필요한 경우 너비가 1024 픽셀로 쉽게 이동할 수 있습니다."이것은 화면 너비 중 일부가 브라우저 창 경계에 의해 차지된다는 점에서 중요한 경고가 누락 된 것 같습니다.

— e100

반응 형 디자인의 경우 +1 2014 년까지 더 많은 사람들이 컴퓨터보다 모바일에서 웹을 볼 수 있다는 점을 고려할 때이 프로젝트에 웹을 사용하지 않더라도 반응 형은 최소한 조사를위한 좋은 경로라고 생각합니다.

— DBUK

이것은 매우 오래된 답변입니다. 화면은 특히 TV와 4K 화면이 사용되는 상단에 더욱 다양한 있습니다

— 자크 Saucier

-3

이 시점에서 전 세계적으로 비방 한 데스크탑 크기는 1024x768입니다 .1003px 크기의 웹 사이트를 만드는 것이 좋습니다 ...

— 그래픽 디자인 가이
소스

3

왜 1003px ....?

— e100

좌초 크기는 세계이기 때문 폭 1024 폭과 좌우 이익률가 1024px 11px 폭 스크롤 막대의 필요성 및 5px 768 높이

— 그래픽 디자인 가이

2

댓글을 다운 투표 할 수 있기를 바랍니다 ... :(하지만 FYI @Rizwanabbasi : 스크롤 막대는 다른 시스템에서 서로 다른 너비를 가지며 (터치 장치에는 없습니다) 스크롤 막대는 변경 될 수 있습니다 (Google 은하 고 있습니다) )의 Gmail에서의 애플리케이션의 예를 들어 그.

— 로버트 Koritnik

오타 여야합니다

— shash7 8:12에