요즘 웹 사이트를 디자인하는 '가장 일반적인'너비와 높이는 얼마입니까?

저는 그룹 프로젝트를 진행 중이며 동료들이 온라인 응용 프로그램에 대한 비전에 관한 그림을 제출하도록 노력하고 있습니다. 이 응용 프로그램은 PC를 통해 볼 수 있습니다. 업계 표준이 없다고 생각하지만 고정 너비 레이아웃을 가진 사이트에는 일반적인 접근 방식이 있어야한다고 보증합니다. 업계에서 가장 일반적인 비율의 상식을 알아야합니다.

우리는이 프로토 타입을 단순하게 유지하려고하므로 브라우저, 화면 너비 등을 감지하지 않습니다.

웹 페이지가 가장 최근에 디자인되고있는 '가장 일반적인'너비와 높이는 무엇입니까? 동료들에게 그림을 기반으로 특정 비율 감각을 선택한 이유를 말할 때 소스를 배치 할 수 있다면 매우 도움이 될 것입니다.

이 질문을 어떻게했는지 참고하십시오.

가장 일반적인 화면 해상도를 요구하지 않습니다.
가장 일반적인 브라우저를 요구하지 않습니다.

고정 크기 레이아웃과 관련하여 대부분의 웹 사이트에서 어떤 차원을 선택하고 있는지 알고 싶습니다. 나는 사람들이 일반적으로 스크롤하므로 높이가 ~ '표준'의 일부가 아닐 수도 있다는 것을 알고 있습니다. 이 경우 가장 일반적인 너비로 설정합니다.

website-design

— 존 R
소스

답변:

당신이 말했듯이 표준 유동성이 매우 유동적이기 때문에 디자인을 가장 잘 시각화하는 데 도움이되는 것을 사용하십시오.

너비가 960 픽셀 인 경우 고정 너비 디자인의 경우 현재 "표준"인 것 같습니다. 웹 사이트가 해당 너비의 레이아웃을 탐색하는 데 전념 한 것이 일반적 입니다.

(나는 당신이 유동적 인 디자인을 사용하여 도망 치길 원하지 않는다고 가정합니다.)

— 존 콘데
소스

실제로 설정해야하는 표준 너비가 없습니다. 지난 몇 년 동안 1024x768 모니터를 사용하는 사람의 수가 급격히 줄어 들었으므로 960의 너비는 그다지 중요하지 않습니다. 수많은 새로운 장치 (스마트 폰, 태블릿, 랩톱 및 데스크탑)가 등장함에 따라 각 케이스에 대해 여러 스타일 시트를 작성해야합니다.

CSS 미디어 쿼리를 사용하면 사용자의 화면 해상도에 따라 스타일을 변경할 수 있습니다. 모든 비주얼 스타일을 처리하는 일반 스타일 시트로 사이트를 만든 다음 모바일, 태블릿, 표준 데스크톱 / 노트북 및 페이지를 구성하는 여분의 와이드 스크린 용으로 분리합니다.

몇 가지 예에 대한 W3.org에서이 페이지를 확인하십시오 - http://www.w3.org/TR/css3-mediaqueries/

더 많은 작업을 수행하지만 사용자가 사이트를 탐색하는 데 사용하는 것과 상관없이 최상의 경험을 얻을 수 있습니다.

— 카슨
소스

@John Conde가 말한 것. 또한 대상 고객이 누구인지 고려해야합니다. 예를 들어 내 웹 사이트가 기술 블로그 또는 가제트 블로그 인 경우 대상 사용자가 일반 사용자보다 기술에 정통 할 수 있으므로 1200 + px 너비의 레이아웃으로 촬영할 수 있습니다. 또는 웹 마스터를위한 사이트 / 블로그 / 포럼에 집중하고 있다면 좀 더 넓게 갈 것입니다.

하루가 끝나면 대량 인구 통계를 파악하고 궁극적으로 효과가있는 것을 따르십시오.

명심해야 할 두 가지 중요한 사항 ...

1) 디자인이 900+ px로 작동 할 수 있다면 인구 통계가 여유가 있어도 1200+ px로 늘릴 이유가 없습니다.

2) 목표 해상도가 없을 수있는 사람들을 수용 할 수있는 적절한 구조를 갖추어야합니다.

— 아딜
소스

포인트 # 2에 동의하지 않습니다. 지난 몇 년 동안 판매 된 대부분의 랩톱에서 가장 일반적인 너비 인 1366px 와이드 디스플레이를 사용하면 두 개의 900px 창을 나란히 놓고 동시에 볼 수는 없습니다. 그래도 900px 레이아웃이 하나만 있으면 가로 공간의 34 %가 공백으로 낭비됩니다. 이 경우 1200px가 이상적인 너비입니다. 그래 그래서, 거기에 있다 을 스트레칭하는 이유는.

— 닌클

@ nhinkle : 실제로 포인트 2를 읽지 않는다고 생각합니다. 두 개의 900px 창을 서로 옆에 맞추는 것과 응답이 어떻게 관련되어 있습니까? 또한 John R이 요구하는 내용을 이해하려면 질문을 올바르게 읽으십시오. 이 같은 극단적 인 사용 사례에 대해 토론하지 않습니다 당신이 서로 옆에 또는 디자인을 할 수있는 49 픽셀 모니터 (중 2) 원하는 내 경우에는 2 개 900px 창을하고자하는. 오히려 그것은 당신이나

— 저가

사과합니다. 두 번째가 아닌 첫 번째 요점에 답하려고했습니다. 혼란을 일으켜서 죄송합니다. 내 요점은 여전히 현실입니다. 대부분 의 사용자는 900px 레이아웃이 많은 공간을 낭비 할만 큼 넓은 디스플레이를 가지고 있습니다. 나는 당신이 당신의 대답에서 말한 대부분의 것에 동의하지만, 당신의 첫 번째 "기억해야 할 것"은 실제로 사실이 아닙니다. 인구 통계가 1200 픽셀을 사용할 수있는 경우 1200 픽셀을 사용해야합니다. 그렇지 않으면 300 픽셀을 낭비하게됩니다.

— 닌클

@ nhinkle : 당신은 내 요점 # 1을 잘못 읽고 있습니다. 내 디자인에서 900px 내에 사이트를 쉽게 표시 할 수 있다면 왜 1200px로 늘리려 고합니까? 또한, 사용자의 13 %는 여전히 화면 소수 먹으 렴 부여가 1024x768의 해상도하지만, 불편을 느슨한 판매, 광고 클릭 수, 리드 또는 어떤 비즈니스 모델이 자사 충분히 큰이 ... (자료에서 인용 : W3 스쿨을 .com / browsers / browsers_display.asp )

— Adil

나는 당신의 요점을 얻는다. 내 요점은 사용자가 1200px 너비의 레이아웃을 사용하기에 충분한 화면을 가지고 있다면 그렇게해야한다는 것입니다. 예를 들어, 스택 교환 사이트는 약 1000px 너비로 최적화되어 있지만 많은 사용자들이 포스트 소스와 마크 다운 미리보기를 나란히 볼 수있는 옵션을 요청했습니다. w3schools는 웹 사용자를 대표하는 샘플은 아니지만,이 논의는 디자인에 적합하다면 1200이 논리적 일 수있는 사이트에 대한 것입니다.

— 닌클