나는 지금 웹 사이트를 만들고 있는데 유동적으로 만들지 여부를 결정하려고합니다. 고정 너비 웹 사이트는 훨씬 쉽게 만들고 일관성을 유지하기가 훨씬 쉽습니다.
솔직히 말해서, 나는 개인적으로 모니터의 전체 너비로 확장되는 유동적 인 웹 사이트를 선호합니다. 내 질문은 대부분의 최신 브라우저에서 컨트롤을 잡고 마우스 휠을 스크롤하여 기본적으로 모든 웹 사이트의 크기를 조정할 수 있다는 사실에서 비롯됩니다.
문제의 가치가있는 유동적 인 웹 사이트를 만드는 것입니까?
답변:
웹 사이트를 유동적으로 만들지 만 최소 / 최대 너비 속성을 추가하는 것이 두 세계에서 가장 좋은 것 같습니다. 유동성을 지원하지만 특정 너비 (예 : 800px 및 1200px)로 제한합니다.
고려해야 할 사항은 다음과 같습니다.
물론. 모니터 크기가 큰 사람들이 페이지 크기를 조정해야하는 것은 큰 불편입니다. 일부 레이아웃에서는 약간 피할 수도 있습니다. 아무리 사소한 불편에도 불구하고 실제로 사이트에 대한 사람들의 의견에 영향을 줄 수 있습니다.
또한 넷북에는 해상도가 이상하여 사이트를 디자인하기가 어렵습니다. 예를 들어, 나는 이것을 1024x600으로 쓰고 있습니다.
요즘 (특히 현대 브라우저에서) 특히 CSS 와 함께 min-그리고 max-heightCSS3에서 새로운 그라디언트 등은 특히 어렵지 않으므로 이미지 스케일링은 가까운 미래에 큰 문제가되지 않습니다.
아래의 의견에 대한 응답으로, 나는이 특별한 경우에 찬반 양론보다 찬성한다고 생각합니다-IE6은 모든 곳에서 문제입니다. 우리는 단지 그것을 처리해야합니다.
대부분의 컴퓨터 사용자는 브라우저를 확대 / 축소하는 방법을 모릅니다. 대부분의 사용자는 우리가 가진 컴퓨터를 이해하지 못합니다. 우리는 항상 그 사실을 기억해야합니다.
텍스트 기반 앱 : 아니요 . 테이블 기반 앱 : 예 .
유동적 인 레이아웃의 장점
유동적 인 레이아웃의 단점 :
테이블 형식 데이터 (iTunes, db manager 등)를 표시하는 경우 유체 너비가 좋습니다. 텍스트 (문서, 위키 페이지 등)를 표시하는 경우 유동 너비가 잘못되었습니다.
내 아이폰의 관점에서 볼 때 고정 너비 레이아웃은 코드 블록을 사용할 때 문제가됩니다. 와이드 코드 블록의 스크롤 막대가 표시되지 않으므로 블록의 맨 오른쪽을 읽을 수 없습니다.
그렇지 않으면 어떤 종류의 사이트를 디자인하고 다른 크기의 화면과 창에서 어떻게 보이는지에 대한 간단한 문제라고 생각합니다. 앞에서 언급했듯이 최대 너비를 설정하는 옵션이 있지만 코드 블록과 iPhone에 동일한 경고가 적용됩니다. 나는 두 가지를 모두 디자인했으며 다른 것을 선호하지 않습니다.
유동적 인 레이아웃으로 브라우저 크기를 가지고 놀면서 상자가 움직이는 것을 보는 것이 재미 있지만 쉽게 즐겁게 할 수 있습니다.
가장 중요한 것은 웹 사이트 나 응용 프로그램의 지배적 인 사용 사례를 고려하는 것입니다. 사람들이 모바일 장치에서만 독점적으로 사용할 것으로 기대하십니까? 휴대폰, 넷북, 데스크탑?
Ethan Marcotte의 "응답 성 웹 디자인"을 살펴보십시오. http://www.alistapart.com/articles/responsive-web-design/
미디어 쿼리를 사용하여 유동적 인 레이아웃을 사용하는 방법을 보여주는 훌륭한 기사. 때로는 다른 사용자 에이전트에 대해 별도의 프런트 엔드를 구축해야하지만 때로는 미디어 쿼리가 다른 사용자 에이전트간에 여러 해상도를 제공하는 완벽한 도구입니다.
당신이하려는 일에 달려 있습니다. SO를보십시오. 너비가 고정되어 있으며 훌륭합니다. 실제로 유동적이라면 약간의 PITA 일 것입니다. 일부 사이트는 유동적 인 레이아웃으로 더 좋아 보이지만 개인적으로 유동적 인 이유가 없다면 고정되어 갈 것입니다.
포인트까지-네
너비가 너무 넓 으면 텍스트를 읽기가 성가 시게되는 특정 너비가 있습니다. 큰 모니터가 있는지 쉽게 테스트 할 수 있습니다. 메모장을 잡고 줄 바꿈없이 텍스트를 붙여 넣으십시오.
그러나 더 작은 크기로 내려갈 때는 유동적 인 것이 좋습니다. 휴대 전화 브라우저는 "정상적인"웹 사이트를 점점 더 잘 표시 할 수 있지만 때로는 너비가 제한되어있어 사이트가 좀 더 작은 공간에 적합 할 경우 이점이 있습니다.
개인적으로 나는 또한 브라우저를 모니터에 놓고 모니터 너비의 절반 (24 ")으로 유지하는 것을 좋아합니다. 잘 확장되는 사이트는 매우 좋습니다.
나는 그것이 대부분 사용자 편의 사례라고 생각합니다. 모든 사이트가 유동적으로 이익을 얻는 것은 아니지만, 텍스트 내용이 많은 사이트는 최대 너비 (800px 또는 그 이상)까지 유동적 인 경우 가장 유익한 사이트라고 생각합니다.
예. 페이지 확대 / 축소는 훌륭하지만 주로 텍스트를 뷰포트로 채우지 않고 텍스트를 더 크게 만드는 데 사용됩니다. 본문의 텍스트가 이미 너무 넓은 경우에는이를 맞추기 위해 축소하면 대개 읽을 수 없게됩니다.
확대 / 축소 여부에 관계없이 텍스트를 뷰포트에 맞게 만들려면 액체 레이아웃이 필요합니다.
'긴 줄을 읽기 어렵습니다'에 대한 요점은 종종 고정 너비 디자인 (*)을 정당화하려고하는 설계자들에 의해 과장된 것이지만 실제로는 종이 에서처럼 화면을 강하게 유지하지는 않습니다. 물론 좋은 리딩 / 라인 높이를 설정하는 것이 중요하며, 최대 너비를 사용하여 최악의 초과 라인을 막을 수 있습니다. (글꼴 기준 em 단위로 설정하십시오.) IE6에서는 최대 너비를 얻지 못했지만 이것이 한 번의 재앙이 아닙니다. (그 사람들을 정말로 염려한다면 약간의 JavaScript로 문제를 해결할 수 있습니다.
(* 그래픽 레이아웃의 경우 작업량이 적습니다. 그러나 StackOverflow와 같은 간단한 레이아웃의 경우 실제로 유동적이지 않을 이유가 없습니다. Tsk @SO, eh!)
유체 설계 – 진정으로 유동적 임 – 어렵다. 열심히. 페이지 너비의 문제가 아닙니다. 서체가 확장되고 모든 것이 확장됩니까? 이상적으로 :
em오히려 정의되어야합니다px우리의 주요 제품은 유동적이며, 특히 사용자가 생성 한 많은 콘텐츠를 포함하기 때문에 디자이너로서의 관점에서 고통입니다.
고정 너비 사이트에서 이미지의 경우 너비의 절반을 채우고 멋지게 보이는 이미지를 가질 수 있습니다. 유동적 인 사이트에서이 이미지는 공백의 바다에서 길을 잃을 가능성이 높으며 외로워 보입니다.
인생은 한 번 쉬워 border-radius지고 다른 CSS3 속성이 더 많이 사용되지만 슬프게도 우리의 핵심 청중은 정부 노동자입니다. 모두 여전히 IE F @! * ING 6!
질문에 대답하기 위해 "그만한 가치가 있습니까?" 네 , 제대로한다면
시나리오는 다음과 같습니다. 고정 너비 사이트를 선택하십시오. 상사는 새로운 1920x1600 랩톱에서 클라이언트에게이를 표시 한 다음 "이 사람 화면에서 어떻게 작게 보이는지"에 대해 불평합니다.
나는 대다수에 반대하고 NO라고 말할 것이다. 추론 : Wikipedia와 같은 유동적 인 사이트는 긴 줄 길이로 인해 큰 화면에서 읽는 것이 악몽입니다.
화면 해상도를 기준으로 텍스트 크기를 조정할 수있는 메커니즘이 없기 때문에 실제로 문제가 발생합니다. 더 큰 해상도에서 텍스트를 자동으로 더 크게 만들 수있는 경우 일반적으로 가독성에 가장 적합한 것으로 간주되는 줄당 80- 홀수 문자에 가깝게 유지할 수 있습니다.
이미지 및 기타 고정 크기 요소의 문제도 있습니다. 큰 이미지를 가질 수 있고 필요한 경우 브라우저가 축소하도록 할 수 있지만 다운로드 시간이 훨씬 길거나 다른 브라우저의 이미지 품질 문제와 같은 다른 문제가 발생할 수 있습니다.