고정 폭 대 동적 폭


15

브라우저의 크기를 조정하면 페이지의 구성 요소가 함께 "스크래치"되는 유연한 레이아웃과 달리 브라우저 창의 크기를 조정하면 스크롤 막대가 표시되는 고정 너비 레이아웃으로 점점 더 많은 사이트가 있음을 알았습니다. .
이와 같은 StackExchange 사이트는 고정 레이아웃의 예입니다. 유연한 레이아웃의 예로는 Gmail과 iGoogle이 있습니다. 다른 것을 선택하는 이유는 무엇입니까?

답변:


11

가변 폭 레이아웃에서는 복잡한 디자인을 구현하기가 매우 어려울 수 있습니다. 그래서 나는 그것이 역할을한다고 상상합니다.

매우 넓은 텍스트를 읽는 것이 불편하다는 사실도 있습니다. StackExchange 사이트의 열 크기는 매우 관리하기 쉽고 읽기 쉽습니다. 가변 너비 레이아웃을 사용하면 읽을 수 없게되지 않고 본문 전체를 확장 할 수 없습니다. Google조차도 검색 결과의 너비를 제한합니다.

물론 Google 문서 및 Google지도와 같이 공간이 부족한 사이트가 있다면 사용 가능한 모든 공간을 사용하기 위해 가변 너비 구성표를 사용하고 싶습니다.


1
텍스트 읽기 너비 포인트의 경우 +1 모니터의 너비가 1680 픽셀인지 여부는 중요하지 않습니다. 신문이 전체 페이지 너비에 텍스트를 넣지 않습니다.
theotherreceive

8

복잡한 사이트에서 개발자가 훨씬 쉽게 수정했습니다. 또한 대부분의 고정 너비 사이트의 너비는 약 1000 픽셀입니다. 브라우저의 1 %만이 800x640을 사용하고 0 %는 640x480을 사용하기 때문입니다. 여기에서 최신 통계를 확인 하십시오 . 모바일은 포함되지 않습니다. 완전히 다른 볼 게임입니다.

가변 너비 레이아웃의 가치는 사람들이 최대화되지 않은 창에서 웹 사이트를 쉽게 사용할 수 있다는 것입니다.

청중을보고 원하는 경험과 가변 폭이 필요한 경우 개발할 수없는 다른 기능보다 가변 폭이 더 중요한지에 따라 결정해야합니다.


가변 레이아웃에서 작동하지 않는 기능의 예를 알려주시겠습니까?
BenV

3
가변 레이아웃에서는 기능이 작동하지 않습니다. 페이지 덩어리가 서로 이동하는 방식을 관리해야하므로 가변 너비 레이아웃을 테스트하고 개발하는 데 더 많은 시간을 소비해야합니다.
벤 호프만

아, 나는 당신의 마지막 문장을 잘못 해석했습니다. 지금은 이해.
BenV

일부 가변 레이아웃의 한 가지 문제점은 기본 컨텐츠에 대해 최소 너비가 설정되어 있지 않기 때문에 창이 너무 좁 으면 텍스트가 매우 좁은 열로 스 쿼어되어 읽기가 매우 어렵다는 것입니다. 고정 너비 레이아웃은 최대 너비가 아닌 너비를 하드 코딩 할 때 반대의 문제가 있으며 가로 스크롤없이 기본 텍스트를 읽을 수 없습니다.
Marius Gedminas

3

CSS를 사용하여 최소 너비와 최대 너비를 설정 한 다음 백분율 너비를 사용하여 나머지를 두 극단 사이에 흐르게하는 두 가지 사이에 타협이 있습니다. 예를 들어 왼쪽 메뉴 열이 200px보다 좁지 않고 주요 내용이 흐르도록 할 수 있습니다. 이 기술을 사용하면 매우 높은 해상도 나 매우 낮은 해상도를 보지 않고도 사이트를 방문자 해상도로 확장 할 수 있습니다. 결국 HTML은 흐름에 맞게 디자인되었습니다. 이는 마크 업 언어이며 인쇄와는 다릅니다.

이 방법은 블로그 나 텍스트 정보가 많은 디자인과 같이 비교적 단순한 디자인에 적합합니다. 실제로, 나는 그것을 내 개인 웹 사이트 에서 사용합니다 . 많은 사람들이 이제 와이드 스크린 또는 고해상도 모니터를 가지고 있습니다. 제 작업 모니터의 너비는 1680px입니다. 왜 큰 부동산을 잃고 디자이너가 자신에게 적합한 고정 너비를 결정했기 때문에 가로로 스크롤해야합니까? 화면? 결국 좋은 디자인은 사용자에게 최상의 경험을 제공하는 것입니다. 디자이너의 모니터에서 "예쁘게"보이는 것만이 아닙니다.


1

선택하지 않아도됩니다. List Apart반응 형 디자인에 대한 훌륭한 기사를 가지고 있습니다. 주요 아이디어는 미디어 쿼리 를 사용 하여 브라우저 창 또는 뷰포트 크기의 변경 사항을 포착하고 필요에 따라 CSS를 다시 할당 할 수 있다는 것 입니다. 거기에 읽을 것이 많으므로 수분이 많은 세부 사항에 대해서는 기사 를 확인 하십시오. 그러나 길고 짧은 그것의 대한 (또는는 "폭 축소"해야 그것을?)를 봐을 하기 전에 그리고 후에 그 예 페이지. 이 전에 당신이 할 경우 멋지게 지점으로 페이지 저울,하지만 조금 투박한를 얻을 충분히 좁힐. 당신이 그것을 너무 잘 작업에 확장을 위해 축소 할 때 또한 페이지뿐만 아니라 스케일하지만 레이아웃을 변경합니다.


1

홈페이지 유용성에 대한 Jakob Nielsen113 설계 지침에 따르면 :

67 액체형 레이아웃을 사용하여 홈페이지 크기가 다른 화면 해상도로 조정되도록하십시오.

또한 가장 위반 된 10 가지 홈페이지 디자인 가이드 라인 중 하나입니다 .

얼어 붙은 레이아웃과 싸우는 것은 잃어버린 전투처럼 보이지만 반복 할 가치가 있습니다. 사용자마다 모니터 크기가 다릅니다. 큰 모니터를 사용하는 사람들은 브라우저의 크기를 조정하여 여러 창을 동시에 볼 수 있기를 원합니다. 모든 사람의 창 너비가 800 픽셀이라고 가정 할 수는 없습니다. 일부 사용자에게는 너무 많고 다른 사용자에게는 너무 적습니다.


0

믹스 업은 어떻습니까? 공간이 충분하면 # content-section을 고정 너비 (70em)로 표시합니다. 그렇지 않으면 섹션이 뷰포트 / 브라우저 창의 80 %로 축소됩니다.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }

0

동적 레이아웃의 장점은 모바일 장치를 포함한 모든 화면 크기에서 작동한다는 것입니다. 모든 크기에서보기 좋게 만드는 것이 더 어렵습니다. 질문은 방문자가 휴대 기기를 사용할 것입니까?입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.