대부분의 웹 사이트가 왜 세로 모드로보기에 최적화되어 있습니까? [닫은]

나는 단지 이것을 알아낼 수 없다. 거의 모든 모니터는 가로 세로 비율이 높이보다 훨씬 큰 가로 세로 비율을 갖지만 거의 모든 웹 사이트는 다른 방식으로 정확하게 설계 되었습니까? 나는 실제로 웹 개발자가 아니며 순간에 물건을 실험하고 있지만이 광기가 나를 당황시킵니다!

편집 : 요점은 웹 사이트의 높이를 제한하고 싶지 않다는 것입니다. 요점은 가로 모드에서 1920x1080이있을 때 사용 가능한 모든 공간을 채우고 싶습니다.

편집 2 : 내가 말하는 것을 이해하려면 이것을보십시오.

현재 줄의 끝에 도달하면 다음 줄을 추적하지 않고 눈이 얼마나 멀리 스캔 할 수 있는지에 대한 제한이 있습니다. 최적의 선 너비와 가독성에 대한 많은 연구가 있습니다 (이 것을 포함하여 ).

당신은 그것을 각도로 끓일 수 있지만, 그 시점에서 최적의 것을 알기 위해서는 사용자가 모니터에서 얼마나 떨어져 있는지 알아야합니다. 이것이 대부분의 권장 사항이 ems, 문자 또는 단어 로 측정하기위한 것입니다. 픽셀 크기는 글꼴 크기에 따라 다르지만 일반적인 합의는 여전히 유효합니다.

1080p 화면의 전체 너비를 사용하도록 포맷 된 기사를 읽는 데 개인적으로 어려움을 겪을 것입니다. 나는 당신도 그렇게 확신합니다. 우리의 현재 규약은 인쇄 레이아웃 디자인 지침에서 파생되었으며 레이아웃 지침은 실질적으로 변경되지 않았습니다. 유일한 차이점은 브라우저에서 페이지와 상호 작용할 수 있다는 것입니다.

추가 논평 : (의견에 제기 된 질문에서)

화면에서 HTML이 할 수있는 작업에는 제한이 있습니다. 우선 페이지가 없습니다. 스크롤 막대 만. 브라우저가 마크 업을 표시하는 방법에 대한 합리적인 동작을 설계하는 것은 매우 어려운 제안입니다. 멀티 컬럼에 대한 CSS3 속성 레이아웃은 아직 후보 추천 단계의 그것을 만든하지 않았습니다. 이 기사에서 설명한 것과는 별도로 해킹 이있다 . 그러나 아직 대부분의 사이트에서 아직 준비가되지 않았습니다.

콘텐츠에 스크롤이 필요하지 않는 한 괜찮습니다. 다중 열 방식은 사용자가 사이트와 상호 작용하는 방식에 대한 몇 가지 과제를 제시 할 수 있습니다.

현재 De Facto 표준에 대한 해설 :

귀하의 질문에 대한 철회 방법과 귀하가 제공 한 예를 다루기 위해, 웹 디자인은 잠재적으로 상충되는 여러 요구 사항의 균형을 유지해야하며 웹 사이트를 전문적으로 보이도록 유지해야합니다. 대부분의 개발 하우스는 설계자와 고객의 요구에 균형을 맞추기 위해 하나의 해상도로 설계합니다. 이 해상도는 쉽게 사용할 수있는 데이터를 기반으로 합니다 . 또한 과거 웹 트래픽 레코드 또는 대상 환경에 대한 지식을 기반으로 할 수 있습니다.

가장 일반적인 화면 너비 (1024, 1280, 1366)는 가장 작게 (1024p) 디자인하고 페이지의 디자인을 중앙에 배치하면 다른 약간 큰 가로 크기 에서도 여전히 멋지게 보입니다 . 모든 형식을 모든 형식으로 정렬하는 것은 매우 어렵고 화면 너비에 따라 여러 형식을 지원해야하는 경우가 훨씬 적습니다. 1080p 사용자 수는 증가하고 있지만 여전히 지원해야하는 모든 사람의 비율은 매우 적습니다.

관심이 있으시다면 , "A List Apart" 의 디자인 기사를 읽어 보는 것이 좋습니다 . 원하는 것을하는 것이보기보다 어렵다는 생각을 시작하게됩니다. 1080p 디자인에 대한 질문을 게시 했을 때 첫 번째 초기 응답은 "모든 것을 더 크게"만들었습니다. 대부분의 웹 디자이너에게는 아직 레이더에 없었던 것입니다.

대부분의 웹 사이트는 더 키가 크며 더 넓어 자연스럽게 아래로 스크롤하여 더 많은 콘텐츠를 읽을 수 있습니다. 나는 개인적으로 가로 스크롤 막대를 싫어한다. 그들은 폐지되어야한다!

웹 사이트는 여전히 세로이며 사이트는 화면 하단을 넘어서 확장됩니다. 사이트의 키는 제한이 없습니다.

이제 무한히 긴 웹 페이지가 있습니다 (감사합니다, AJAX). 무한히 넓은 페이지를 본다면 어떻게 하시겠습니까? (나는 사냥꾼을 죽이고 디자이너를 죽이고 페이지에서 클릭하는 것만으로는 충분하지 않습니다. 디자이너는 죽어야합니다.)

각 줄을 스크롤 한 다음 다시 스크롤하면 한 줄씩 자살하게됩니다. 이것이 사람들이 페이지 넘기기 앱과 같은 멋진 책을 만드는 이유입니다. 따라서 스크롤 할 필요가 없습니다.

이전 답변을 읽은 후 몇 가지 점이 누락되었음을 알 수 있으므로 그 점을 설명하려고 시도합니다.

어려운 열 구현

너비가 큰 페이지에 대해 이야기 할 때 "물리적"신문에서 볼 수있는 것과 같은 텍스트 열에 대해 이야기하고 있다고 생각합니다. 그것에는 두 가지 문제가 있습니다.

먼저 실제 HTML 4 및 XHTML 1.0 / 1.1은 텍스트를 열로 표시하지 않습니다. Firefox (및 기타 일반 브라우저)에 대한 해킹이 있지만 Internet Explhorror에서는 작동하지 않습니다.

둘째, 실제 Firefox 구현 또는 향후 HTML 5에서 텍스트를 열에 표시해야하는 경우 열 너비와 열 수를 지정해야합니다. 높이 (예 : 페이지 높이, 머리글 높이 및 바닥 글 높이)를 지정할 수 없으며 브라우저에서 열 수를 조정할 수 없습니다.

세로 스크롤 막대가없는 가로 스크롤 막대 만있는 열에서 사용 가능한 레이아웃을 만드는 것은 사실상 불가능합니다.

100 % 높이 없음

실제 HTML / XHTML은 페이지 너비에 따라 요소의 크기를 조정하기위한 것입니다. 측정 항목에 페이지 높이를 사용하는 것은 매우 어렵습니다.

즉, 컨텐츠를 올바르게 표시하려면 JavaScript 해킹을 사용해야합니다. 즉, 자바 스크립트를 사용하지 않는 사람들의 경우 웹 사이트를 완전히 사용할 수 없게됩니다.

반 화면 페이지로 탐색

큰 16 : 9/16 : 10 화면에서는 두 개의 창을 나란히 ( Windows Seven의 Win+ ←/ Win+ ) 사용하는 것이 일반적이지 않습니다 →. 이것은 브라우저 창의 너비와 높이가 작다는 것을 의미합니다.

고정 대 동적 너비

대부분의 웹 사이트가 세로 모드로보기에 최적화되어 있다고 가정하면 잘못되었을 수 있습니다.

첫째, 대부분의 웹 사이트는 전혀 최적화되지 않았으며 일반적으로 웹 개발에 대해 전혀 모르거나 거의 모르는 사람들이 작성합니다.

둘째, 너비가 고정 된 웹 사이트와 너비가 브라우저 웹 너비의 백분율에 해당하는 웹 사이트에는 차이가 있습니다.

첫 번째 경우 대부분의 웹 사이트가 세로 또는 가로 모드에 맞게 최적화되지 않은 것을 알 수 있습니다. 일반적으로 너비는 1024, 800 이하로 고정되어 1920x1080 해상도의 24 인치 화면에서 볼 때 의미가 없습니다.

두 번째 경우, 24 인치 화면에서 페이지를 전체 화면 모드로 보는 경우이 웹 사이트가 가로 및 세로 모드로 올바르게 표시 될 수 있습니다.

예 : 사진 갤러리가있는 웹 사이트를 상상해보십시오. 페이지에는 축소판이 있으며 축소판을 클릭하면 실물 크기의 사진이 표시됩니다. 축소판이 페이지의 동적 너비와 함께 부동 왼쪽 인 경우 가로 모드에서는 멋지게 표시됩니다. 실물 사진을 보는 것이 특히 좋습니다.

현대식 모니터가 가로 모드 인 이유는 무엇입니까?

1. 비디오 형식. HD 비디오는 가로 방향 디스플레이에 더 적합합니다.
2. 독서. 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로, 가로 모드에서 방향을 조정할 때 스크롤없이 완전한 전체 블록을 쉽게 읽을 수 있습니다.

편집 : 귀하의 의견을 검토하고 원래의 질문의 의도를 재구성 한 후에 오늘날 가장 일반적인 2 및 3 열 레이아웃을 목표로하는 것처럼 보입니다. 이를 위해 웹 사이트 기록을 간략하고 간략하게 요약합니다.

웹 사이트가 왜 세로 모드로보기에 최적화되어 있습니까?

나는 그것들이 전혀 최적화되어 있지 않다고 생각합니다. 특정 측면을 항상 사용할 수 있고, 특정 측면을 종종 사용할 수 있으며, 특정 측면에서만 특정 상황에서만 사용할 수있는 것은 종종 절충입니다. 기껏해야 전화 최적의 절충안이 될 수 있습니다.

컨텍스트 별 컨텐츠와 함께 각 페이지에 핵심, 예상 탐색 및 보조 컨텐츠를 배치 할 수 있기 때문에 2 열 및 3 열 레이아웃이 그대로 보급됩니다. 초기 웹에서는 많은 사이트에서 레이아웃을 실험하여 동적 탐색 목록 (또는 메뉴, 그러나 원하는 메뉴)을 사용하여 단일 열 레이아웃으로 표시하려는 항목을 제공했습니다. 주요 내용. 그러나 그것은 두 부분으로 이루어진 도전이었다 : a) 크로스 브라우저 호환성이 부족한 기술적 도전; b) 유용성 : 기술적 도전이 극복 된 경우에도 (직접적인 경우) 직관적이거나 불필요한 사냥 게임 (탐색 용) 및 파괴 (경험적 만족도 일부 솔루션이 마우스 클릭).

이를 극복하기 위해 대부분의 현장은 사실상의 표준을 채택하고 그 결과를 받아 들였습니다. 하나의 탐색을 표시하는 두 개의 열 또는 다른 하나의 컨텐츠를 표시하거나 세 번째 열이 추가되어 2 차 핵심이 아닌 탐색 컨텐츠가 표시 될 수 있습니다 (문맥 관련 도움말, 메모 또는 광고 또는 실제 사람을 표시하는 최근의 통신 스트림) 사이트 또는 컨텍스트와 관련된 활동). 컨텍스트의 실제 내용이 중간에 붙어 있습니다.

이것을 고정 너비 레이아웃이라고합니다. 전체 너비 레이아웃이 있거나 유체라고도합니다. 고정 폭이 사용 된 이유가 있습니다. 하나는 모니터의 해상도가 사용성에 영향을 미친다는 것입니다. 27 인치에서와 같이 거대한 모니터를 사용하는 경우 사이트가 끔찍하게 보일 것입니다. 모든 텍스트, 그림 및 모든 것이 너무 넓어지면 레이아웃이나 사이트를 파악하기가 어려울 것입니다. 유체 레이아웃은 주로 목록 또는 데이터 유형의 사이트에 사용됩니다 예를 들어 eBay는 더 나은 경험을 제공하기 위해 목록에 유체 레이아웃을 사용합니다 포럼은 유체 레이아웃의 이점을 누릴 수 있지만 블로그, 광고, 사진, 또는 비즈니스 사이트는 고정 너비 사이트에서 훨씬 유리합니다.

확실하지는 않지만 인쇄 된 대부분의 "문서"는 세로 방향으로 인쇄되도록 설계되었으며 많은 사람들이 여전히 웹 사이트를 "문서"로 디자인한다고 생각합니다. 이것은 문화적인 문제일까요? 또 다른 가능한 설명은 모니터 너비가 모니터 높이보다 다양하다는 것입니다 ...

나는 일반적으로 오랫동안 활동을 보지 못한 스레드에 답변을 게시하는 것이 바람직하지 않다고 생각합니다. 그러나 아직 언급되지 않은 관련 사항이 있다고 생각합니다.

먼저 몇 달 전에 발견 한 다음 Firefox 확장 기능을 언급하겠습니다. Column Reader

https://addons.mozilla.org/en-US/firefox/addon/column-reader/

왜 세로 스크롤합니까?

비교를 위해 : 세로 열로 작성된 언어를 고려하십시오. 이와 같은 언어의 경우 현재 와이드 스크린 모니터가 이상적입니다. 그래서 그것이 작동하는 방식입니다 : 선의 방향에 수직으로 스크롤합니다. 우리의 선은 가로이기 때문에 책 페이지는 세로 형식입니다.

이전 답변에서 지적했듯이 브라우저 레이아웃 엔진의 리플 로우 기능은 수직으로 리플 로우됩니다.

다중 열 기능

브라우저 개발 팀은 다음과 같은 방법으로 다중 열 기능을 추가 할 수 있습니다. 먼저 전체 페이지를 단일 열로 렌더링 한 다음 사용 가능한 창 공간의 픽셀 높이를 가진 스트립으로 자르고 해당 스트립을 측면으로 표시하십시오. 옆에. 그러나 기둥을 얼마나 넓게 만드십니까? 실제 텍스트에 아주 작은 너비를 사용하더라도 사용 가능한 창 공간의 전체 너비에 대한 특정 배경색의 페이지 코드가 종종 있습니다.
그런 다음 렌더링 엔진은 안전하게 재생되고 전체 가로 공간을 단일 열에 할당해야합니다.

웹 디자이너가 리플 로우 다중 열 레이아웃을 구현할 수 있습니까?
그것은 심각한 어려움을 겪을 것입니다. 사용 가능한 창 공간의 높이와 너비를 확보하고 스트립을 Javascript에서 열로 자르고 정렬해야합니다. 그런 다음 두 조각으로 잘린 이미지로 수행 할 작업을 결정해야합니다.

이런 종류의 일을 처리하는 것은 레이아웃 엔진이하는 일입니다. 다중 열 레이아웃 리플 로우를 용이하게하는 Javascript 라이브러리를 작성하고 작성하려면 Javascript로 렌더링 엔진 을 작성해야합니다 . 그것은 플랫폼에서 플랫폼을 만들고 있습니다.

모니터 크기

실제로 컴퓨터 모니터가 지난 몇 년 동안 줄어드는 것이 실망 스러웠 습니다. 대형 모니터의 높이는 1200 픽셀, 현재는 1050 개입니다. 예, 더 넓지 만 텍스트의 경우 공간을 활용할 수 없습니다.

또한 세로 방향에서는 모니터가 너무 좁습니다.
두 모니터를 세로 방향으로 두 모니터는 1200x1600px입니다. 저에게 1200 픽셀은 최소입니다.

CSS의 조건문

고정 너비 레이아웃에 대한 설명입니다.

나는 웹 디자이너가 넓은 범위의 너비를 수용하면서 스크롤 막대를 피하고 가독성을 유지하는 CSS 명령을 좋아한다 : "max-width". 최소 너비, 최대 너비, 최소 높이, 최대 높이와 ​​같은 네 가지 명령이 있습니다. 텍스트가 포함 된 div의 경우 최대 너비 (예 : 65em)를 지정하십시오.

if / else를 얻습니다.
사용 가능한 공간이 65em보다 작 으면 텍스트가 그에 따라 리플 로우됩니다. 가로 스크롤 막대 없음 사용 가능한 공간이 65em보다 크면 포함 div가 65em으로 설정됩니다.

와이드 스크린 모니터는 지난 2 년 동안 실제로 시작되었습니다. 더 비싼 옵션이었습니다.

디자인 측면에서 볼 때 웹 페이지 (문서)가 오래 걸리면 사용자가 아래로 스크롤해야하는 것이 몇 가지 이유로 스크롤하는 것보다 훨씬 뛰어나다는 것이 항상 알려져 있습니다. 첫째, 이것은 대부분의 컴퓨터 문서가 작동하는 방식이므로 더 "정상적인"패턴입니다. 페이지 다운 키는 있지만 키를 가로 지르는 페이지는 없습니다. 둘째, 요즘 우리는 거의 어디에서나 볼 수있는 마우스 휠을 가지고 있으므로 위 / 아래로 스크롤하는 것은 스크롤하기보다 훨씬 쉬운 활동입니다.

마지막으로, 어떤 와이드 스크린 해상도를 선택 하시겠습니까? 내 데스크탑은 1920x1080입니다. 내 노트북은 1440x900입니다. 당신은 어느 것을 디자인합니까?

대부분의 모니터가 오늘날 판매되고있는 가로 방향이라는 사실은 사실이지만 웹 사이트를 디자인 할 때 뷰어가 어떤 화면 해상도를 사용할지 정확히 알 방법이 없다는 점도 고려해야합니다. 화면 해상도가 1024 이하인 인터넷 사용자의 여전히 15 %가 있습니다. 정보를보기 위해 스크롤하기 전에 수평 확장을위한 공간이 많이 남아 있지 않습니다. 또한 일부 사용자는 완전히 최대화 된 창에서 인터넷을 서핑하지 않습니다. 이 문제에 대한 유일한 해결책은 브라우저 창의 크기에 따라 동적 인 디자인을 개발하는 것입니다. 당신이 이것을 시도했다면 절대적으로 왕의 고통으로 필요하지 않는 한 다시 시도하는 것이 매우 주저 할 것입니다. 이미 언급 한 것처럼 더 작은 너비를 갖는 다른 많은 이유가 있습니다.

여러 가지 이유가 있습니다.

• 대부분 텍스트로 된 문서는 전통적으로 세로 비율이므로 웹에서는이를 유지합니다.

• 짧은 줄의 텍스트를 읽는 것이 더 쉽습니다. 나는 인용을하지 않았지만, 그것은 지침이 아닌 표준이되기까지 매우 일반적인 디자인 조언입니다.

• 폭이 좁은 디자인이 더 유연합니다. 브라우저를 전체 와이드 스크린 모니터 전체 화면의 절반에만 표시하고 그 옆에 다른 텍스트 (일반적으로 텍스트 편집기 또는 다른 브라우저 창)를 배치하고 싶습니다. 나는 그냥 있기 때문에 수 1920 픽셀 웹 페이지를 통해 내가 항상이 원하는 것을 의미하지 않는다. 실제로 웹 페이지를 보거나 어떻게 볼 것인지에 대한 가정을하는 웹 디자이너는 다소 어색합니다. "이 페이지는 IE6의 800x600에서 가장 잘 보입니다."에 잘못된 플래시백을 제공합니다.

• 더 나은 선택은 모든 너비로 확장되는 유동적 인 디자인이며 CSS는 텍스트를 위해 잘 작동합니다 (대부분의 경우 최신 브라우저에서 가능). 그러나 이미지, 내장 비디오, 플래시 및 기타 최신 내장 개체는 많은 작업없이 항상 이러한 종류의 디자인을 망칩니다. 제대로 된 결과를 얻는 데 오랜 시간이 걸리는 유연한 스케일링 디자인과 사실적이고 좁은 고정 폭 디자인 중에서 선택하면 상당히 많은 사람들이 더 쉬운 (더 싼) 경로를 선택할 수 있습니다.

• 가장 유연한 선택은 사용자가 조정할 수있는 웹 파트 캔버스 인 iGoogle과 같은 것입니다. 그런 다음 원하는대로 텍스트와 이미지 블록을 정렬하여 원하는만큼 넓거나 좁을 수 있습니다. 이제 방문하기 전에 방문하는 모든 사이트의 악몽을 읽기 전에 사용자 정의가 필요하다고 생각합니다.

현재 사이트의 웹 디자인 표준은 가로 스크롤 막대없이 1024px 이상의 화면 해상도를 수용 할 수 있도록 960px 너비로 개발하는 것입니다. 모든 사람이 새로운 24 인치 모니터를 사용하는 것은 아니기 때문에 이것은 최소한의 요구 사항입니다. (작은 해상도의 새로운 하드웨어 인 태블릿 및 넷북 생각)

웹 사이트 desing의 해상도는 대상 청중의 영향을받으며 그에 따라 조정되어야합니다.

또한 사용성 측면에서 텍스트 줄의 너비는 11 ~ 14 단어 (줄 높이를 조정하면 더 커질 수 있음) 여야합니다. 따라서 모든 웹 사이트에서 유동적 인 디자인을 처리 할 수있는 것은 아닙니다.

방문자에게 컨텐츠 영역 외부의 페이지가 비어 있지 않다는 느낌을주지 않으려면 사용자 화면의 크기를 넘어서서 확장되는 텍스처 / 컬러 스트립을 추가 할 수 있습니다. ( http://www.cnn.com/ 과 같이 헤더에만 적용되지만 전체 페이지에 적용 할 수 있음)

대부분의 웹 사이트가 왜 세로 모드로보기에 최적화되어 있습니까?

가로가 완벽하게 실행 가능한 옵션 인 경우 세로 모드로 종이를 인쇄하는 이유는 무엇입니까?

많은 사람들이 말했듯이, 2 ~ 3 개의 긴 줄을 읽는 것보다 많은 짧은 줄을 읽는 것이 더 쉽습니다.

그 외에도 1280 * x 픽셀을 내용으로 채우면 웹 페이지가 복잡 해져서 해결해야 할 사항이 아무도 없습니다. 웹 페이지는 모든 작업이 아닌 특정 작업을 수행해야합니다.

웹 2.0 트렌드는 페이지에 적은 정보를 입력하고 클릭 유도 문안을 명확하고 간결하게 만들어줍니다. 이 일반적으로 받아 들여지는 디자인 철학은 제안하는 것과 정반대입니다.

1024 해상도로 개발해야하는 많은 이유가 있지만 클러 터 요소가 더 중요한 요소 중 하나라고 생각합니다.

나는 대답은 그래서 당신이 윈도우 7로 보이는 것을 사용하고있는 것으로 나타났습니다 : Win+를←

그럼에도 불구하고 웹 사이트가 수직으로 최적화되는 주된 이유는 CSS에서 정적 너비 레이아웃을 코딩하는 것이 더 쉽고 여러 플랫폼에서 올바른 크로스 브라우저로 보이기 때문입니다. 유체 폭은 때때로 사용되지만 가독성을 높이는 것은 아닙니다.

영화를 보거나 게임을 할 때 모든 수평 공간을 물건과 함께 사용하는 것이 좋지만 독서를 할 때는 머리를 돌리지 않고도 눈을 자연스럽게 스캔 할 수 있도록 작은 텍스트 열만 원합니다. 웹 페이지의 왼쪽과 오른쪽에 더 많은 크랩을 추가하면 페이지의 기본 콘텐츠가 산만 해지는 경향이 있으므로 많은 디자이너가 빈 공간을 두어 매력적인 공백을 만듭니다.

또한, 그냥 있기 때문에 당신이 가지고 좋은 모니터는 대부분의 사람들이 좋은 와이드 스크린 모니터를 가지고 있음을 의미하지 않는다. 레이아웃 크기를 확인하는 데 유용한 리소스는 Google의 browsersize 입니다.

모니터 방향이 잘못되었습니다. 프로그래머의 모니터는 가로보다는 세로보다 넓어야합니다.