유동적인 웹사이트는 더 이상 만들 가치가 있습니까?
저는 지금 웹사이트를 만들고 있는데 유동적으로 만들어야 할지 말아야 할지 결정하려고 합니다.고정 너비 웹 사이트는 훨씬 쉽게 만들 수 있고 일관성 있게 보이도록 만들기도 훨씬 쉽습니다.
하지만 솔직히, 저는 개인적으로 모니터의 전체 너비까지 확장되는 유동적인 웹 사이트를 보는 것을 선호합니다.제 질문은 대부분의 현대 브라우저에서 마우스 휠을 스크롤하여 웹 사이트의 크기를 조정할 수 있다는 사실에서 나온 것입니다.
그래서 유동적인 웹사이트를 만드는 것이 문제를 일으킬 가치가 있습니까?
시청자와 콘텐츠에 따라 다릅니다.
다음은 제가 존경하는 사이트들이며 제가 본받을만한 예라고 생각합니다.
유체 예:
정적 예제:
좀 섞어주세요!
저는 대부분 정적인 것을 선호하는 것 같습니다.더 많은 브라우저에서 보기 좋게 만드는 것이 더 쉽습니다.그것은 또한 읽기 더 쉽습니다.
웹 사이트를 유동적으로 만들지만 최소/최대 너비 속성을 추가하는 것이 저에게는 두 가지 모두의 최선인 것 같습니다.유동성을 지원하지만 특정 폭(예: 800px 및 1200px)으로 제한합니다.
사용자에게 달려 있습니다. 고려해야 할 몇 가지 사항은 다음과 같습니다.
- 줄이 매우 길면 텍스트를 읽기가 어렵습니다.
- 시청자의 해상도는 일반적인 해상도보다 크거나 작을 수 있으며, '잘못된' 정적 너비를 선택하는 것은 시청자를 짜증나게 할 수 있습니다.
- 유동적인 사이트를 유지 관리하는 것은 정적인 사이트보다 훨씬 어려울 필요는 없습니다.
그렇고 말고요.거대한 모니터를 가진 사람들이 페이지 크기를 조정해야 하는 것은 큰 불편입니다.레이아웃에 따라 약간 어색할 수도 있습니다.사소한 불편함이 사이트에 대한 사람들의 의견에 실제로 영향을 미칠 수 있습니다.
또한, 넷북은 사이트를 디자인하는 것을 어렵게 만드는 이상한 해상도를 가지고 있습니다.예를 들어, 1024x600으로 쓰고 있습니다.
요즘은 (현대 브라우저에서) 특별히 어렵지 않습니다. 특히min-그리고.max-heightCSS의 경우, 그리고 CSS3의 새로운 그레이디언트 등에서 이미지 스케일링은 가까운 미래에 큰 문제가 되지 않을 것입니다.
아래의 의견에 대해, 저는 이 특정한 경우에서 장점이 단점을 능가한다고 생각합니다 - IE6은 모든 곳에서 문제가 되고 있습니다.우리는 그것을 처리해야 합니다.
여러분은 대부분의 컴퓨터 사용자들이 브라우저를 확대하는 방법조차 모른다는 것을 깨달아야 합니다!대부분의 사용자들은 우리가 가지고 있는 컴퓨터에 대한 이해와는 거리가 멉니다.우리는 항상 그 사실을 기억해야 합니다.
텍스트 기반 앱: 아니요.테이블 기반 앱: 예.
유체 배치의 장점
- 큰 모니터를 가진 사람들은 그들의 스크린 부동산을 사용할 수 있습니다.
- 페이지에 많은 정보가 있을 때 대형 모니터를 사용하는 사용자가 더 쉽게 사용할 수 있습니다.
유체 레이아웃의 단점:
- 유체 너비 텍스트 열은 너무 넓으면 읽기 어렵습니다.신문에서 칼럼을 사용하는 데는 좋은 이유가 있습니다. 신문에서 칼럼을 사용하는 것은 다음 줄로 건너뛰는 것을 훨씬 더 쉽게 만듭니다.
- CSS의 제한 때문에 (어느 정도) 구현하기 어렵습니다.
표 형식의 데이터(iTunes, db manager 등)를 표시하는 경우 유체 폭이 좋습니다.텍스트(기사, Wiki 페이지 등)를 표시하는 경우 유체 폭이 잘못되었습니다.
내 아이폰의 관점에서 코드 블록을 사용할 때 고정 폭 레이아웃은 문제가 있습니다.와이드 코드 블록에 대한 스크롤 막대가 표시되지 않아 블록 오른쪽 끝을 읽을 수 없습니다.
그렇지 않으면 어떤 사이트를 디자인하고 있는지, 다른 크기의 화면과 창에서 어떻게 보이는지에 대한 간단한 문제라고 생각합니다.앞서 언급했듯이 최대 너비를 설정하는 옵션이 있지만 코드 블록과 아이폰에도 동일한 주의 사항이 적용됩니다.저는 둘 다 디자인했고, 둘 중 하나를 선호하지 않습니다.
하지만, 유동적인 레이아웃으로 브라우저 크기를 가지고 놀면서 박스들이 움직이는 것을 보는 것은 재미있지만, 저는 쉽게 즐길 수 있습니다.
가장 중요한 것은 웹 사이트 또는 응용프로그램의 지배적인 사용 사례를 고려하는 것입니다.당신은 사람들이 그것을 모바일 기기에서만 사용하기를 기대합니까?휴대폰, 넷북, 데스크탑?
Ethan Marcotte의 "응답형 웹 디자인"을 살펴보십시오. http://www.alistapart.com/articles/responsive-web-design/
미디어 쿼리를 사용하여 진정으로 유동적인 레이아웃을 사용하는 방법을 보여주는 훌륭한 기사입니다.다른 사용자 에이전트를 위해 별도의 프런트 엔드를 구축해야 하는 경우도 있지만, 미디어 쿼리가 여러 사용자 에이전트에 걸쳐 여러 해상도를 제공하는 완벽한 도구인 경우도 있습니다.
그것은 당신이 무엇을 하려고 하는지에 달려 있습니다.SO를 보세요.폭이 정해져 있고 아주 좋습니다.사실, 만약 그것이 유동적이라면, 그것은 약간의 PITA일 것입니다.어떤 사이트들은 유동적인 레이아웃이 더 좋아 보이지만, 개인적으로 유동적인 이유가 없다면 저는 고정적으로 사용할 것입니다.
댓글에 많은 좋은 점이 있지만 질문을 들어보면 당신은 유동적인 디자인을 정말 좋아하고 디자인을 만들고 싶어하는 것 같으니, 당신의 사이트입니다. 웹의 다른 모든 사이트와 같을 필요는 없습니다.
모든 솔루션의 장점을 알고 있어야 합니다.
어느 정도까지는 - 네.
텍스트가 너무 넓으면 읽기가 귀찮아지기 시작하는 특정 너비가 있습니다.대형 모니터가 있는 경우 쉽게 테스트할 수 있습니다. 메모장을 들고 줄 바꿈 없이 텍스트를 붙여 넣기만 하면 됩니다.
하지만, 더 작은 크기로 내려갈 때, 유동적인 것이 좋은 생각일 수 있습니다.휴대 전화 브라우저는 점점 더 "정상" 웹 사이트를 표시할 수 있지만, 너비가 제한되는 경우가 있으므로 사이트가 조금 더 작은 공간에 들어갈 수 있으면 이점이 있습니다.
개인적으로 저는 브라우저를 모니터에 유지하는 것을 좋아하지만 모니터 너비(24인치)의 절반만 유지합니다.거기에 잘 확장되는 사이트들은 매우 좋습니다.
대부분 사용자 편의를 위한 케이스라고 생각합니다.모든 사이트가 유동적인 것으로부터 혜택을 받는 것은 아니지만, 적어도 최대 너비까지 유동적인 경우(예: 800px 또는 기타) 텍스트 콘텐츠가 많은 사이트가 가장 혜택을 받을 것이라고 생각합니다.
예. 페이지 확대는 좋지만 주로 텍스트를 크게 만드는 데 사용되며, 보기 포트를 텍스트로 채우는 데 사용되지 않습니다.본문 텍스트가 이미 너무 넓으면 일반적으로 본문 텍스트를 읽을 수 없도록 축소할 수 있습니다.
텍스트를 확대/축소 여부에 관계없이 뷰포트에 맞게 하려면 액체 레이아웃이 필요합니다.
'긴 줄은 읽기 어렵다'는 점은 고정 폭 설계(*)를 정당화하려는 디자이너들에 의해 종종 과장되지만, 실제로는 종이에 했던 것만큼 화면에 강하게 나타나지는 않는 것 같습니다.물론 좋은 선행/선 높이를 설정하는 것은 중요하며, 최대 폭은 긴 선의 최악의 초과를 방지하는 데 사용될 수 있습니다.(글꼴 상대 EM 단위로 설정합니다.)IE6에서는 최대 폭을 얻을 수 없지만, 한때의 재해는 아닙니다. (만약 당신이 그런 사람들을 정말로 신경 쓴다면 자바스크립트를 조금만 사용해서 고칠 수 있습니다.)안 해요.)
(*) 그래픽 레이아웃에서는 작업량이 적습니다.하지만 StackOverflow와 같은 단순한 레이아웃의 경우 유동적이지 않을 이유가 없습니다.Tsk @SO, 에!)
서문:전문 웹 아티스트가 아닙니다.
저는 휴대전화와 초광대역 화면 크기, 특히 상당히 흥미로운 복잡성을 가진 모든 것들이 그렇게 흐르게 하기에는 너무 많은 하찮은 것들이 있다는 것을 발견했습니다.
일반적으로 저는 고정 폭 사이트를 중심으로 설계합니다. 보통 [600,1200].
저는 또한 매우 넓은 콘텐츠 열을 읽는 것이 번거롭다는 것을 알게 되었습니다.열 줄당 최적의 단어 수를 제안하는 연구가 있었던 것으로 기억합니다.
이렇게 만들 수 있습니다.
메인 레이아웃을 유체로 만든 후 '최대 폭: 1140px'를 적용하고 중심을 맞춥니다.
이를 통해 큰 화면에는 텍스트가 '긴 줄'로 표시되고 작은 화면에는 웹 페이지가 올바르게 설정되지 않습니다(800x** 이하는 제외).
저는 새로운 프로젝트에 이 방법을 적용했고 그것은 매력적으로 작동하고 있습니다.
a.t.b .. :)
의사결정 유체/고정은 웹사이트의 내용을 기반으로 해야 한다고 생각합니다.
일반 정보(예: 뉴스 포털)가 많은 사이트의 경우 유동적인 레이아웃을 사용하는 것이 좋습니다.
웹 서비스는 고정된 차원에서 더 잘 보이고 작동하기 때문에 인터페이스 요소가 위치한 위치를 항상 알 수 있으며 인터페이스 요소가 계속해서 이동하지 않습니다.
는 만들 가치가 , ,▁are▁yes▁websites.
말씀하신 것처럼 디자인 단계에서 계획을 제대로 세우면 보기 좋고 합리적입니다.
Ctrl + Scrollbar의 영향에 대한 당신의 의심은 큰 문제가 아닙니다.이 기능은 주로 내게 필요한 접근성을 위해 크기를 늘려서 텍스트를 더 쉽게 읽을 수 있도록 하는 것입니다.
그러나 모든 크기를 픽셀(px)로 표시하면 해당되지 않습니다.크기를 지정하기 위해 "em"을 사용할 때만 적절한 조정이 수행됩니다.설정/해제할 수 있는 방법이 있습니다.
저는 800px 미만의 고정 팬입니다...더 좁은 열을 읽는 것이 더 쉽고, 어디서든 작동할 수 있습니다.즉, 하이퍼텍스트를 표시하는 웹사이트를 만들려고 한다면...애플리케이션 프런트 엔드를 제공하는 웹 사이트는 웜의 또 다른 캔이라고 생각합니다.
유체 설계(진정한 유체)는 어렵습니다.매우 어렵습니다.단순히 페이지 너비의 문제가 아닙니다. 글꼴이 확장되고 모든 것이 확장됩니까?이상적임:
- 크기는 다음에서 정의해야 합니다.
em보다는px - ...글꼴뿐만 아니라 요소 크기에도 적용됩니다!
- 글꼴 크기 또는 확대/축소 수준의 변경을 고려할 때 페이지 요소는 서로 상대적으로 동일한 크기여야 합니다.
당사의 주요 제품은 유동적이며, 특히 사용자 생성 콘텐츠가 많이 포함되어 있기 때문에 디자이너로서의 제 관점에서 볼 때 고통스럽습니다.
한 가지 예로, 이미지 - 고정 너비 사이트에서는 너비의 절반을 채우고 멋지게 보이는 이미지를 가질 수 있습니다.유동적인 장소에서, 이 이미지는 마치 하얀 공간의 바다에서 사라지고 다소 외로워 보일 가능성이 높습니다.
인생은 한 번 더 쉬워져야 합니다.border-radius그리고 다른 CSS3 속성들이 더 많이 작동하지만, 슬프게도 우리의 핵심 청중은 여전히 IEF@!*를 사용하는 공무원들입니다.ING 6!
"그럴 가치가 있나요?"라는 질문에 답하기 위해서입니다.네, 제대로 하시면 됩니다.
여기 시나리오가 있습니다. 고정 폭 사이트를 선택하십시오. 상사는 이 사이트를 고객에게 1920x1600 노트북으로 보여준 다음 "이 사람의 화면에서 모든 것이 작아 보이는군요!"라고 불평합니다.
사용자가 화면을 이동하고 확대하는 것보다 사용자의 화면에서 확장이 잘 되는 것이 좋다고 생각합니다.사용자들이 스마트폰에서 울트라 모바일 PC에 이르기까지 다양한 기기에서 각각 표준 해상도가 아닌 다양한 해상도를 가진 웹 서핑을 하는 시대에, 여러분의 사이트를 그러한 화면에서 볼 때 사용자 경험을 높은 수준으로 유지하는 것이 중요하다고 생각합니다.텍스트 길이와 관련하여, 특정 비율로 제한될 수 있으므로 레이아웃에 잘 맞을 것입니다.또한 사이트를 유동적으로 작성하는 데 도움이 될 수 있고, 코딩 유지보수성에 도움이 될 수 있는 프레임워크가 있다고 생각합니다.
저는 대다수의 사람들에게 반대하고 아니라고 말할 것입니다. 추론: 위키백과와 같은 유동적인 사이트는 줄이 길기 때문에 큰 화면에서 읽기에는 악몽입니다. (비록 인용이 가장 좋은 때에는 읽기 어렵게 만들지만)
이 문제는 화면 해상도와 관련하여 텍스트 크기를 조정하는 메커니즘이 없기 때문에 실제로 발생합니다.더 큰 해상도에서 자동으로 텍스트를 더 크게 만들 수 있다면, 일반적으로 읽기에 가장 좋은 것으로 간주되는 행당 80자 가까이 접근할 수 있습니다.
이미지와 다른 고정 크기 요소의 문제도 있습니다.이미지를 크게 만들고 필요한 경우 브라우저가 축소하도록 할 수 있지만 다운로드 시간이 훨씬 길어지고 많은 브라우저에서 이미지 품질 문제가 발생할 수 있습니다.
저는 최대 너비가 800px에서 1000px 사이로 고정되어 있지만 텍스트가 너무 작아서 읽을 수 없고 눈이 아플 때가 많기 때문에 좌우로 스크롤하지 않고도 콘텐츠를 읽을 수 있도록 축소할 수도 있습니다.그래서 제가 자랑스러워할 만한 사이트를 만들고 싶기 때문에 제가 노력하는 것이 보통입니다.
언급URL : https://stackoverflow.com/questions/1413602/are-fluid-websites-worth-making-anymore
'itsource' 카테고리의 다른 글
| Excel VBA:워크북 범위, 워크시트에 따라 명명된 공식/지정된 범위(활성 워크시트에 따라 결과가 변경됨) (0) | 2023.08.30 |
|---|---|
| 문자열에서 하위 문자열을 일치시키는 방법, 대소문자 무시 (0) | 2023.08.30 |
| JavaScript URL 디코드 기능 (0) | 2023.08.30 |
| 제출 단추를 누른 기준으로 상위 양식을 선택하려면 어떻게 해야 합니까? (0) | 2023.08.30 |
| npm build는 build라는 이름의 스크립트를 패키지에서 실행하지 않습니다.제이손 (0) | 2023.08.25 |