새로운 웹 페이지 레이아웃을 만들 때 다양한 화면 크기의 휴대 전화, 태블릿, 데스크톱 등 모든 장치가 있다고 생각합니다. 이 다양성을 수용하는 두 가지 방법을 볼 수 있습니다. 하나는 모든 화면 크기에 맞게 완전히 유동적 인 레이아웃을 만드는 것입니다. 반면에 일반적인 크기에 최적화 된 레이아웃을 만들려고했습니다. 이 경로는 필연적으로 화면 크기가 매우 다른 일부 새로운 장치와 충돌 할 수 있으며 대상 크기에 대한 초기 설정 및 테스트가 필요합니다.
이 경로 중 하나가 다른 경로보다 선호됩니까, 아니면 고려하지 않은 다른 옵션이 있습니까?
답변:
동일한 웹 페이지가 브라우저 너비에 따라 두 개 이상의 수공예 레이아웃 중 최상의 버전을 제공하는 반응 형 디자인 ( '적응 형'디자인이라고도 함)은 대부분의 웹 사이트에서 가장 강력한 옵션입니다. 이유를 알아 보려면 웹 디자이너가 사용할 수있는 모든 옵션을 살펴 보는 것이 도움이됩니다.
컨텐트 너비가 브라우저 너비와 상관없이 동일한 고정 페이지 너비는 장치 전체에 균일 한 모양과 느낌을 제공하며보다 유연한 디자인보다 코딩, 사고 및 유지 관리가 덜 필요합니다.
고정 너비 레이아웃은 사람들이 모든 브라우저에서 픽셀 완성도와 균일 한 모양을 갈망했던 과거 시대의 유물이라고 생각합니다. 하드 보일드 웹 디자인의 저자 앤디 클라크 (Andy Clarke) 는 이러한 사고 방식이 죽었다고 생각합니다.
"과거에는 기능에 상관없이 모든 브라우저에서 동일하게 보이고 작동하는 웹 사이트를 만들기 위해 열심히 노력하는 것이 표준 관행이었습니다.이를 위해서는 모든 브라우저에서 지원하지 않는 기술을 사용하지 않고 타협해야했습니다.
이게 딱딱한가요?
장난 치지 마라 이것은 우리의 기술을 발전 시키거나 더 나은 웹을 구축하는 방법이 아닙니다. 이런 종류의 구식 사고는 우리를 뒤로합니다. 그것은 우리가 옳은 일을 행하지 않는 것에 대한 변명을 강요합니다. 현재 웹 관리자 인 우리가 할 수있는 최악의 일은 가능한 모든 것을 제한하는 것입니다. "
— Andy Clarke, 하드 보일드 웹 디자인, p6 [PDF Edition here ]
일부는 고정 레이아웃을 게으름의 높이로보고 있지만 고정 너비 디자인은 유동적이거나 적응적인 레이아웃보다 매우 똑똑한 디자인 팀에 의해 여전히 선택됩니다. 예를 들어, Apple 은 현재 iPad 및 iPhone과 동일한 레이아웃을 iMac에 제공합니다. 왜 모바일 웹 브라우징을 대중에게 가져 오는 책임을지는 회사가 모바일 장치 용 웹 사이트를 최적화하지 않습니까?
필요하지 않다고 생각하기 때문입니다.
Apple은 웹 사이트를 작은 화면에 맞게 조정하는 대신 넓은 화면의 웹 사이트를 편안하게 처리 할 수 있도록 하드웨어와 소프트웨어를 구축했습니다. Apple은 '모바일 최적화 된'환경이 브라우저 창이 아닌 기본 응용 프로그램에서 가장 잘 전달된다고 생각합니다. 이것이 모바일에 최적화 된 웹 스토어를 제공하는 대신 Apple Store 앱을 제공하는 이유 입니다. 그리고 이것이 게시자가 맞춤형 웹 사이트를 통해 잡지 앱을 제공하도록 권장하는 이유입니다. 애플의 현재 웹 디자인 철학은 분명하다. 그것들을 지배하는 하나의 레이아웃은 모두 잘 작동한다. 그 밖의 모든 것을 위해 앱이 있습니다.
이런 이유로 홀로 고정 레이아웃이 그 어느 때보 다 관련성이 있다고 주장하는 사람들도 있습니다. 모바일 브라우저 소프트웨어가 개선되기를 기다리는 동안 유동적이고 적응적인 레이아웃은 차이를 막을 수 있으며 HTML과 JavaScript는 개발자를 사일런트 앱 스토어에서 발전시키고 유혹 할 수 있다고 말합니다.
내 의견으로는, 모바일 장치에서 웹을 오랫동안 손가락으로 두드 리거나 드래그하여 스크롤하는 것은 iPhone에서도 전혀 재미가 없습니다. 사용하는 기기에 관계없이 최고의 웹 경험이 웹 사이트를 읽고, 출판하고, 상호 작용하는 것이 즐겁지 않다고 생각하는 경우, 각 지점에 맞는 컨텐츠를 제공한다는 점을 인정해야합니다. 방문객은 고려할 가치가 있습니다.
화면을 채우기 위해 페이지 너비가 흐르는 유동 레이아웃 (보통 최대 너비까지)은 뷰포트에 더 적합한 너비로 컨텐츠를 제공하여 다양한 플랫폼에서 더 나은 경험을 약속합니다.
실제로 유동적 인 레이아웃은이 퀴즈에서 Cameron Moll이 지적한 것처럼 해결하는 것보다 더 많은 문제를 일으 킵니다.
"... 유체 설계는 컴퓨터가 사무실을 종이없이 만드는 것과 같은 방식으로 모든 레이아웃 문제를 해결합니다."
— Cameron Moll, "모든 사이트가 유동적이어야합니까?", 2006 년 9 월
유동적 인 레이아웃을 채택하면 디자인 제어를 포기하고 텍스트가 다시 줄 바꿈되고 이미지가 리플 로우되며 선 길이가 예상치 않게 달라질 수 있으며 텍스트, 이미지 및 탐색 요소가 작은 폭으로 뭉개져 열이 튀어 나와 떠오를 수 있습니다. 그냥 당신을 자극합니다.
유동적 인 레이아웃은 게으른 옵션이기도합니다. 적응 형 웹 디자인에 대한 샷건 접근 방식입니다. 3 ~ 4 개의 고정 너비 디자인으로 맞춤형 경험을 제공하는 대신 크고 작은 화면에서 작동 할 수 있기를 기대할 수없는 경험을 제공하며 완전히 고려하지 않은 모든 차이를 희망적으로 해결합니다. 사이.
유동적 인 레이아웃은 쓸모가 없습니다. 그것들을 작동시키는 방법이 있습니다. 456 베뢰아 세인트 블로그는, 예를 들어, 더 큰 아무것도에 대한 고정 된 하나를 사용하는 후 주어진 폭에 유체 레이아웃을 채택한다. 또한 너비가 아주 작은 경우 세로 막대를 사용하여 작은 화면에서 쉽게 읽을 수있는 단일 열을 사용합니다. 그러나 이것은 더 이상 유동적 인 레이아웃이 아닙니다. 더 나은 것입니다. 그것은이다 응답 디자인.
동일한 웹 페이지가 방문자의 브라우저 너비에 따라 두 개 이상의 제작 된 레이아웃 중 하나의 버전을 제공하는 '응답 성'또는 '적응성'레이아웃은 웹 사이트를 최고로 보이게하는 점진적 향상의 핵심 부분입니다. 그것은 모든 방문자를 위해 할 수 있습니다.
적응 형 레이아웃을 채택하는 것은 적응 형 웹 디자인 의 저자 인 Aaron Gustafson의 말에 따르면 '우수한 고객 서비스' 입니다. 우리가 사이트를 잘 디자인한다면 방문자들에게 우리가 소란을 느끼지 않고 완벽하게 만들어진 경험을 제공해야한다고 그는 말합니다.
"웹 디자이너와 개발자로서 우리는 세심하고 눈에 거슬리지 않는 웨이터만큼 일을 잘하려고 노력해야하지만 단순한 작업은 아닙니다. 웨이터가 고객이 문을 통해 오는 경우가 빈번히 필요할지 모르는 것처럼 리필은 거의 없으며, 사용자가 사이트에 도착했을 때 특정 사용자의 요구를 알 수있는 방법이 없습니다. 대신 우리는 그 요구를 충족시키기 위해 일어나야합니다. 고맙게도, 점진적인 향상의 사용자 및 콘텐츠 중심의 접근 방식 (우아한 저하의 최신 브라우저 접근 방식과 달리)을 통해 쉽게 달성 할 수 있습니다. "
— Aaron Gustafson, 적응 형 웹 디자인, p12 [PDF edition here ]
웹 디자이너로서 우리가하는 일은 방문자에게 적응하고 그들이 우리에게 적응하도록 강요하지 않는 것이 애플의 생각처럼 웹 디자인에서 최근에 개발 된 것입니다. 제 생각에는 일종의 르네상스입니다. 우리는 수년간의 인쇄 디자인에서 좋은 습관을 고르는 체리를 완성했습니다. 이제 인쇄 된 페이지의 사전 정의 된 공간에서 작업하여 부과되는 걸쇠를 버려야합니다.
브라우저를 고정 캔버스로 취급 한 후에는 정의 된 캔버스가 전혀 없다는 사실을 받아들이고 있으며 이는 방문자 통계에서 볼 수있는 다양한 화면 크기 조합에서 더욱 분명해집니다. . 각각의 새로운 장치를 목표로하는 고유 한 '페이지 크기'로 취급하는 대신 (그리고 새로운 장치가 나올 때 병력을 모으는 대신)보다 미래 지향적 인 규칙을 따를 수 있습니다.
특정 휴대 전화와 태블릿을 생각하는 대신 '대형', '중형'및 '소형'과 같은 대역으로 생각한 다음 해당 대역에서 가장 잘 보이는 사이트를 디자인 할 수 있습니다. 새로운 장치가 나오면 어떤 밴드 에나 맞으며 두 밴드 사이의 경계에 있더라도 고정식 또는 유동식을 사용하는 것보다 경험을 더 잘 제어 할 수 있습니다 나열한 것.
에서 응답 웹 디자인, 에단 마 코트는 팔이 호출을 제공합니다 :
"우리는 놓아야한다.
각각 특정 장치 나 브라우저에 맞게 분리 된 디자인을 만드는 대신 동일한 경험의 측면으로 취급해야합니다. 다시 말해, 우리는 더 유연 할뿐만 아니라 사이트를 렌더링하는 미디어에 적응할 수있는 사이트를 만들 수 있습니다.
요컨대, 우리는 반응 형 웹 디자인 을 연습해야합니다 . 우리는 디자이너가 필요로하는 컨트롤을 포기하지 않고도 웹 고유의 유연성을 수용 할 수 있습니다. "저는 업무에 표준 기반 기술을 포함시키고 온라인 디자인에 대한 철학을 약간 변경함으로써"
— Ethan Marcotte, 반응 형 웹 디자인, p8 [PDF 버전은 여기에서 제공 ]
그러나 어떤 밴드를 사용하십니까? Ethan Marcotte는 반응 형 웹 디자인 에서 다음 3 가지를 권장합니다 . (그들이하는 일을 배우고주의 사항을 이해하기 위해 책 을 들고 싶을 수도 있습니다 . )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Joni Korpi의 Less Framework를 포함하여 적응 형 웹 사이트를 구축 할 수 있도록 설계된 다양한 CSS 프레임 워크도 있습니다.
임의의 중단 점을 사용하는 대신 사이트 디자인에 따라 밴드를 지정하는 것이 좋습니다. 브라우저의 화면 너비를 줄이고 디자인이 중단 될 때마다 해당 너비는 "중단 점"중 하나 여야합니다. 디자인이 모든 너비에서 좋아 보일 때까지 CSS 미디어 쿼리로 너비를 줄이고 중단 점을 추가하십시오. 이런 식으로 디자인을 시도한 소수의 화면 크기 대신 모든 장치에서 디자인이 좋아 보입니다. Chrome을 사용하는 경우 개발자 도구 (보기> 개발자> 개발자 도구)를 켜고 브라우저 너비를 줄이면 오른쪽 상단 모서리에서 중단 점의 위치를 파악하는 데 사용할 수있는 현재 너비를 읽을 수 있습니다.
고려해야 할 또 다른 대중적인 접근 방식은 핵심 스타일 시트가 가장 작은 장치의 스타일을 처리하고 미디어 쿼리가 다른 방법 대신 더 큰 화면 너비를 처리하는 Mobile First 반응 형 디자인입니다. 특히 CSS 배경 이미지를 많이 사용하는 경우 모바일 장치에서 성능이 더 빨라질 수 있습니다. (브라우저 너비를 최소로 시작하여 위쪽으로 작업하기 만하면 같은 방식으로 중단 점을 구성 할 수 있습니다. 실제로 사용할 수있는 실제 장치 수를 테스트하는 것을 잊지 마십시오. 개방형 장치 방문을 고려하십시오. 실험실 .)
간단히 말해서, 적응 형 디자인은 웹 디자이너 및 공동 정원 웹 사용자로서보고 경험하는 기쁨입니다. 예를 들어 다음 과 같이 일본 회사 정보 건축가 사이트를 방문하십시오 .
Aaron Gustafson이 예측 한 것처럼, 같은 페이지에서 디자인을 볼 때까지 자신이 수용되고 있다는 사실조차 알지 못합니다.
각 경우에 경험이 더 즐거울 수는 없습니다. 컨텐츠를 읽기 위해 페이지를 생각하거나 상호 작용할 필요가없고, 화면에서 왜 이상한지 궁금해하는 시간을 보내거나, 탐색 요소를보기 전에 확대하여 탐색 할 수 있습니다. 당신. 그리고 그 반응 디자인은 거의 항상 다른 옵션을 압도하는 이유입니다.
현재 권장되는 최선의 접근 방식은 단일 접근 방식으로 다양한 장치와 화면 크기 / 해상도를 만족시켜야하는 "응답 성 웹 디자인"이라는 것을 사용하는 것입니다.
반응 형 웹 디자인의 방법, 이유 및 이유를 설명하는 훌륭한 기사는 http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and- 에서 찾을 수 있습니다 . 자원/
스타일 이 디자인 에 얼마나 영향을 미치는지에 달려 있습니다. 크기 측면에서 유연성을 제한하는 많은 요소, 고객 요구 사항, 타사 콘텐츠가 있습니다.
당신이 좋아 보이는 사이트를 구축 할 수 있다면 어떤 규모로든 확장 가능한 모든 사용자에게 유용하게 사용할 수 있습니다!
다음 옵션은 세로 메뉴, 내비게이션 보조 도구 등과 같은 특정 요소에 의해 지정된 최소 너비의 스타일을 유지 하고 기본 컨텐츠 열의 크기를 조정하여 남은 사용 가능한 공간을 채 웁니다. 그럼에도 불구하고 특정 콘텐츠 (배너 광고, 위젯, 비디오 등)에 따라 항상 쉬운 것은 아닙니다.
대부분의 사이트는 고정 폭 공통 분모 레이아웃입니다. 가장 낮은 공통 분모 는 말하지 않았습니다 . 자신의 통계 나 w3schools 통계를 보면 85.1 %의 사람들이 너비가 1024 픽셀 이상이고 98.9 %의 사람들이 너비가 1024 픽셀 이상임을 알 수 있습니다. 너비가 1024 픽셀 인 레이아웃을 쉽게 구현하고 1.1 % 더 많은 사람들이 가로로 스크롤 할 필요가 없도록하는 노력에 대해 생각해보십시오. 왜 이것이 웹 사이트 디자인에 매우 일반적인 선택인지 알게 될 것입니다.
물론 청중을 고려하십시오. w3schools 방문자와 일치하지 않을 수 있습니다. 더 많은 방문자가 귀하의 요구에 적합하지 않은 경우 의도적으로 더 많은 방문자를 소외시킬 수 있습니다. Stuck In Customs 는 대상이 주로 대형 디스플레이에서 작동하는 그래픽 및 사진에 관심이있는 사람들이기 때문에 매우 넓게 설계되었습니다. 또한 경험이 그들에게 훨씬 더 대담합니다.