웹 사이트의 경우 가변 너비 레이아웃 또는 고정 너비 레이아웃을 사용하는 것이 더 낫습니까?
화면 해상도가 다르기 때문에 웹 사이트 탐색 경험이 다를 수 있습니다. 웹 사이트를 고정 너비로 배치하는 것이 더 낫습니까? (그렇다면 표준 해상도에 대해 다른 고정 너비가 있어야합니까?) 또는 웹 사이트를 항상 가변 너비로 배치해야합니까?
나는 여기에 쉬운 대답이 없다고 생각합니다. 궁극적으로 그것은 당신이 무엇을 만들고 있고 누구를 위해 만들고 있는지에 달려 있기 때문입니다. 고정 너비 사이트와 가변 너비 사이트는 모두 장단점이 있습니다.
여기서 지적해야 할 한 가지는 고정/유동 사이트에 대한 모바일 경험에 대해서는 이야기하지 않을 것입니다. 모바일 사이트는 모바일 사이트에 대한 포트가 아니라 모바일 사이트 전용 디자인 일 때 모바일 사이트가 가장 좋기 때문입니다.
고정 폭-장점
고정 너비 사이트는보다 일관된 환경이며 가변 너비 사이트보다 개발 속도가 빠릅니다. 또한 폭, 선 길이, 타이포그래피 크기 등에 대한 엄격한 값을 설정할 수 있기 때문에 디자이너가 프리젠 테이션을보다 세밀하게 제어 할 수 있습니다. 또한 가변 폭 사이트보다 유지 관리가 훨씬 쉽습니다.
고정 폭-단점
반면에 Edge 사례가 나타나면 고정 너비 디자인이 실패하기 시작합니다. 현재 사람들은 1024px 너비의 해상도 모니터 용 사이트를 설계하는 것이 매우 일반적이지만, 여전히 낮은 해상도의 컴퓨터를 가진 사람들이 있습니다. 지금은 960px 그리드를 사용하여 설계된 응용 프로그램을 만들고 있습니다. 오늘 분석을 살펴본 결과 사용자의 3 %가 800 x 600 모니터를 사용하고 있으며 총 약 5 %가 1024 x 768 미만의 해상도를 사용하는 것으로 나타났습니다. 사이트의 너비가 고정되어 있기 때문에 사용자는 아마도 매우 나쁜 경험을하고있을 것입니다 .
유체 폭-장점
유체 폭은 사용자의 설정에 따라 디자인이 확장되도록합니다. 디자인이 그들에게 적응하는데, 이것은 좋은 것입니다. 이를 통해 사이트는 비례적인 음의 공간을 유지할 수 있으므로 사이트가 너무 복잡하거나 열린 느낌이 들지 않습니다 (구체적으로 그렇게 설계되지 않은 경우).
유체 폭-단점
불행하게도, 유체 폭 설계는 Edge 사례에도 영향을 미치지 않습니다. 너비가 너무 얇거나 너무 넓 으면 특히 텍스트에서 나쁜 일이 발생할 수 있습니다. 너무 짧거나 긴 줄 길이는 본질적으로 읽을 수 없습니다. 또한 이미지 나 Flash 객체와 같은 다양한 형태의 미디어는 유체 너비 디자인에서 확장하기가 어렵습니다. IE 이미지의 크기를 조정하려면 자바 스크립트가 필요합니다. 그렇지 않으면 픽셀 화됩니다.
반응 형 웹 디자인
몇몇 사람들이 예를 보여 주었지만 아직이 기술을 이름으로 언급하지는 않았습니다. Ethan Marcotte는 최근 사용자의 화면 해상도에 따라 완전히 변경 될 수있는 유체 레이아웃을 설명하기 위해이 용어를 만들었습니다 (세부 정보 여기 참조). 고정 너비와 유동 너비의 하이브리드입니다. 미디어 또는 라인 길이가 제어되지 않도록 최소값과 최대 값을 설정할 수 있으며 디자인이 사용자 설정에 맞게 조정할 수 있습니다. 물론이 기술에는 고유 한 장단점이 있습니다. 사용자 설정을 위해 특별히 선택된 레이아웃이 제공되었지만 이러한 유형의 사이트는 개발하기가 어렵습니다. 모든 브라우저가이를 수행하는 데 필요한 미디어 쿼리를 지원하지는 않습니다. 또한 기본적으로 여러 레이아웃을 개발하여 빌드 및 유지 관리하는 데 걸리는 시간을 연장합니다.
"항상 사용하지 마십시오"또는 "사용하지 마십시오"라고 담요를 깔는 것은 불가능하다고 생각합니다. 결정을 내리기 전에 항상 니즈를 평가해야한다고 말하고 싶습니다. 대부분의 경우 고정 너비 레이아웃이 귀하의 목적에 부합하지만 유동적이거나 반응적인 레이아웃이 추가 어려움을 겪으면서 훨씬 더 나은 사용자 경험을 제공 할 수 있다고 생각합니다.
100 % 가변 너비를 사용할 때의 문제는 화면이 가장 작고 큰 사용자에게는 제대로 표시되지 않는다는 것입니다. 나는 일반적으로 최소/최대 너비를 설정하여 표준의 기본 콘텐츠 섹션을 디자인 한 다음 중요한 (고정) 콘텐츠를 중앙에 배치합니다. 그런 다음 화면을 채우기 위해 늘리거나 축소하는 가변 너비 디자인 요소 (중요하지 않기 때문에)를 가질 수 있습니다.
이런 식으로 중요한 정보는 항상 많은 해상도로보기 좋으면서도 올바르게 표시됩니다.
나는 웹 디자이너는 아니지만 유동적 인 레이아웃을 만들어야한다고 생각합니다. 즉, 현재 너비에 따라 자동으로 동적으로 변경되는 레이아웃입니다. 이렇게하면 전화와 같은 좁은 장치와 다양한 디스플레이 폭이 모두 잘 지원됩니다.
블로그 포스트 마지막으로, 유동적 인 Hicksdesign 는이 기술을 설명하고 보여줍니다. 3 열, 2 열 및 1 열 레이아웃이 있으며 브라우저 창 너비에 따라 선택됩니다.
줄 길이가 너무 길면 텍스트를 읽기가 어렵습니다. 따라서 가변 너비 사이트의 경우 가독성을 유지하기 위해 모든 텍스트 영역에 대해 최대 너비가 있어야합니다.
가변 너비 사이트를보기 좋게 만드는 것이 훨씬 어렵습니다.
내가하고있는 일에 달려 있지만 여전히 고정 너비 사이트에 기대는 경향이 있습니다. 그 이유는 UI를보다 잘 제어하고 여러 화면 크기에서 일관되게 유지할 수 있기 때문입니다. 유체 폭이 많은 사이트는 크고 작은 모니터에서 끔찍한 것처럼 보입니다 (설계 용도에 따라 다름).
나를위한 일반적인 규칙 :
- 사이트의 유용성이 인터페이스에 크게 의존하거나 내용이 대부분 텍스트 인 경우 : 고정 너비
- 사이트에 최소한의 인터페이스가 있지만 내용이 시각적으로 보이는 경우 (예 : 사진 사이트 또는지도 앱) 유동적입니다.
다음은 몇 가지 장단점을 요약 한 것입니다. http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- 당신을 위해 /
가능할 때마다 px에서 %에서 개체의 특정 높이와 너비를 설정하려고합니다.
가변 너비를 고려하거나 더 넓은 화면을위한 대체 레이아웃을 제공하는 것이 좋습니다.
고정 너비를 사용하는 경우 작은 너비가 아닌지 확인하십시오! 옐로우 페이지 스캔과 같이 사이트를 읽는 500 또는 600px 너비의 사이트를 보았습니다.
나는 가용 너비를 기반으로 대체 레이아웃을 제공하는 The Man In Blue의 접근 방식에 오랫동안 팬이었습니다. 실시간 데모보기
가로 방향으로 웹 사이트의 레이아웃을 디자인 할 수 있습니다. 1920x1080의 고해상도 (이것이 가장 일반적 임)와 함께 점점 더 많은 와이드 스크린 모니터가 사용되고 있습니다. 거기에 세로 고정 레이아웃을 표시하는 브라우저 창을 최대화하려고 시도한 적이 있습니까? 화면의 절반에서 2/3 정도가 배경색/이미지로 채워져 있습니다.
Windows 7을 사용하면 창 크기를 화면의 절반으로 빠르게 조정하고 옆에 고정시킬 수 있습니다. WindowsKey + Left/Right
고정 너비를 사용하면 일부 사람들은 웹 사이트가 모니터에 비해 너무 작다고 생각하고 일부는 모니터에 비해 너무 큰 것으로 생각할 수 있기 때문에 가변 너비가 아마도 길입니다.
웹 사이트의 내용에 따라 다릅니다. 텍스트가 많으면 텍스트가 퍼지고 사용자가보다 효율적으로 읽을 수 있으므로 가변 너비가 더 의미가 있습니다. 모양이 더 중요한 마케팅 웹 사이트와 비슷하다면 고정 너비 웹 사이트를 멋지게 보이게 만드는 것이 훨씬 어려워 고정 너비로 이동하십시오.
고정 크기 레이아웃을 설계 할 때 가정하는 것은 일부 사용자에게는 잘못된 것입니다. 모든 사람에게 만족스러운 경험을 제공하는 유일한 방법은 유연하고 반응이 빠른 디자인을 사용하는 것입니다.
두 가지 문제 (중복 방지 시도) :
브라우저가 전체 화면이라고 가정 할 수 없습니다. 화면 해상도를보고하는 분석은 스토리의 일부만을 알려줍니다.
사용자가 동일한 글꼴 크기를 사용한다고 가정 할 수 없습니다. 서체 크기에서 읽기에 너무 넓은 줄은 서체 크기를 몇 단계 늘려야하는 사람에게는 읽기에 너무 넓지 않을 수 있습니다. 반대로, 글꼴 설정에 따라 고정 너비를 설정 한 열은 사용자에게 한 줄에 5 개의 단어가 표시 될 수 있음을 의미 할 수 있습니다.
모든 사용자가 사용할 수 있으려면 웹 디자인에서 브라우저가 제공하는 공간 만 사용하면됩니다. 사용자가 자신의 경험을 최적화하기 위해 브라우저 크기를 조정했다고 신뢰하십시오. 그런 다음 그 범위 내에서 작업해야합니다. 이 방식은 30 인치 모니터와 7 인치 태블릿 (휴대 전화 전용 버전을 만들지 않은 경우 전화)에서도 작동합니다.