반응형 웹 디자인 진화의 다음 단계: 반응도 분석
게시 됨: 2016-01-17의문의 여지가 없이 반응형 웹 디자인(RWD)은 인터넷에서 강력한 존재감을 드러내고자 하는 모든 사람들의 표준이 되었습니다. 시간이 지남에 따라 대부분의 웹 디자이너와 개발자는 규칙, 모범 사례, 레이아웃 표준 및 지침을 일반적으로 생성, 구현 및 수용했습니다.
그러나 RWD가 널리 사용되고 있음에도 불구하고 아직 어리고 대단함에도 불구하고 나날이 새로운 장치가 도입되는 등 여러 측면에서 여전히 개선되어야 함을 잊지 마십시오. .
RWD가 심각하게 실패하는 시나리오 중 하나는 응답성을 위해 정보를 올바르게 처리하는 것입니다. 예를 들면: 때때로 널리 받아들여지는 RWD 표준을 적용한 후 3개 이상의 열을 표시하는 데스크탑 디자인이 있을 수 있지만 더 작은 해상도를 위한 디자인은 이 정보가 보이지 않도록 쌓임으로써 많은 정보를 얕잡아 봅니다. 첫눈에 또는 경우에 따라 레이아웃에서 완전히 사라집니다.
물론 이러한 부정확한 정보 처리가 모든 사이트에 문제가 되는 것은 아니지만, 사실 각 사이트 레이아웃과 반응형 방식은 콘텐츠와 방문자에게 원하는 영향을 기반으로 설계되어야 합니다.
Boston Globe 홈페이지 데스크톱 버전의 전경 광고는 모바일에서 볼 때 사라집니다.
새로운 직위: 반응형 디자인 분석가
모든 프로젝트는 다른 모든 프로젝트와 다르며 대부분의 경우 주요 특성이 고유합니다. 따라서 디자인과 아키텍처도 독특해야 합니다. 이것이 반응형 디자인의 표준 규칙이 모든 사람에게 적용되지 않는 주된 이유이며 반응형 웹 디자인을 완전하고 적절하게 활용하려면 모든 프로젝트에 대한 심층 분석이 필요합니다. 이 시점에서 새로운 직책이 핵심적인 역할을 할 수 있습니다. 모든 프로젝트에는 내용과 구조를 분석하고 중요한 정보의 처리와 응답성 간의 균형을 찾는 데 도움을 줄 수 있는 사람이 필요합니다. 이 작업의 중요성이 나타나기 시작했습니다. 예를 들어 Linkedin에서 서핑하는 동안 다음과 같은 흥미로운 인용문을 발견했습니다.
" 반응형 웹 디자인을 기반으로 하는 웹 사이트의 예가 수백 또는 수천 개에 이르지만 이를 채택한 대기업은 소수에 불과하며 일반적으로 경험으로 또는 부분적으로만(...) 그 이유가 실제로 있다고 생각합니다. 할 수는 있지만 실제로는 페이지 레이아웃과 정보 아키텍처가 많이 복잡해집니다. 일반적으로 타협으로 이어질 다른 장치 간의 가장 일반적인 분모를 계획해야 합니다. ” Magnus Jern, CEO Golden Gekko
흥미로운 과제: 정확한 사용자 경험에 한 걸음 더 다가서기
반응형 디자인 분석가의 주요 과제 중 하나는 실제로 차이를 만들 수 있는 정보의 경시를 피하기 위해 정확한 구조를 만드는 것입니다. 최신 게시물을 맨 위에 유지하려는 욕구 때문에 더 작은 화면에 맞게 축소할 때 데스크탑 레이아웃의 첫 번째 행에서 다른 컨테이너를 제거하는 경향이 있습니다. 일반적으로 이러한 '기타 컨테이너'에는 주요 광고주의 정보가 포함됩니다. 전경 스폰서는 사이트의 맨 처음 장면에서 광고가 나가는 것을 보고 싶어하지 않습니다. 비용을 지불하는 것이 아니겠습니까? 따라서 전략적 콘텐츠 배치는 이 반응형 디자인 프로세스에서 핵심입니다.
웹에 액세스할 수 있는 장치의 지속적인 개발과 다양한 장치에서 사이트의 정확한 레이아웃을 표시해야 하는 필요성으로 인해 반응형 디자인이 진화하고 있다는 사실을 잊어서는 안됩니다. 그 시각을 잃지 않고 콘텐츠 배치와 시청자에게 미치는 영향을 더 중요하게 여기기 시작할 때입니다. 위에서 인용한 바와 같이 이 작업은 실제로 단일 디자이너/개발자가 수행할 수 없습니다. 특정 사람이나 팀이 필요합니다. 표시하고자 하는 정보의 구조와 관련성은 물론 대상, 내용의 유형 및 관련성에 요약된 많은 변수를 분석하고 고려합니다.
또한 이러한 팀이나 개인은 모든 해결 방법에 대해 정확한 구조 집합을 생성할 수 있어야 하며 개발 및 디자인 팀에 자신의 아이디어와 구조를 표현할 수 있는 명확하고 강력한 의사 소통 기술이 있어야 합니다. 이는 반응형 미적 디자인과 강력한 적응형 콘텐츠 배치를 프로젝트에 제공하는 데 도움이 됩니다.
콘텐츠 안무: 반응도 분석에 대한 첫인상
2011년 중반 Trent Walton이 도입한 반응형 레이아웃을 디자인할 때 콘텐츠에 점점 더 많은 중요성을 부여하는 데 도움이 되는 흥미로운 접근 방식을 콘텐츠 구성(Content Choreography)이라고 합니다.
이 개념의 첫 번째 단계 중 하나는 콘텐츠 우선 순위를 설정하는 것이며, 일단 완료되면 콘텐츠가 레이아웃 위에서 춤을 추기 시작할 수 있습니다. 구조와 계층 구조가 깨지고 우선 순위에 따라 콘텐츠가 재배열되는 방식을 정확하게 예시하는 이 간단한 접근 방식을 살펴볼 수 있습니다.
Content Choreography, 콘텐츠에 더 많은 중요성을 부여하기 위한 흥미로운 접근 방식.
이 방법을 사용하면 가로로 배치된 콘텐츠가 조옮김될 때 동일한 순서로 배치되지 않아야 합니다. 대신, 그러한 콘텐츠는 모든 콘텐츠 상자의 중요성에 따라 배치할 사전 설정된 규칙 집합을 따릅니다.
반응형 레이아웃의 주요 문제 중 하나는 모바일 해상도로 크기를 조정할 때 상자의 예측 가능한 동작입니다(광고의 잘못된 배치에 대해 위에서 설명한 상황). 콘텐츠 구성은 이 문제에 대처하는 좋은 솔루션일 수 있습니다. 아래 이미지에서 두 단계를 볼 수 있습니다. 맨 위에 있는 단계는 동일한 순서를 유지하는 수직 더미로 옮겨진 일반적인 수평 상자 배열을 보여줍니다. 따라서 전경 광고는 특권 위치를 잃고 작은 모바일 화면에서 숨겨질 수 있습니다.
맨 아래는 콘텐츠 안무를 적용한 결과일 수 있는 구현을 보여줍니다. 일반적인 가로 배열은 관련성에 따라 쌓이고 광고는 V-arrangement의 맨 위에 유지되고 전경 위치는 관계없이 유지됩니다. 웹사이트를 표시하는 장치의 해상도.
일반 반응 구현과 안무 반응 구현의 비교.
광고를 위한 콘텐츠 구성의 고급 구현은 반응형 광고에서 선보였으며 이름은 Stretch입니다. 관련성에 따라 위치를 변경하는 것뿐만 아니라 더 작은 해상도에서 훨씬 더 잘 표시되고 주요 인상에 계속 표시되도록 광고 모양을 변경하여 전경 스폰서의 투자가 모든 페니의 가치가 있게 됩니다(콘텐츠가 계속 표시되기 때문에 반응형 디자인을 잘못 구현해도 광고가 손실되지 않습니다.
아직 갈 길이 멀고 이것이 웹 디자인 과정에서 이 전문화된 위치를 구현해야 하는 이유입니다. 콘텐츠에 관해서는 미리 정의된 특정 템플릿이 있을 수 없기 때문입니다. 콘텐츠의 각 범주가 다르므로 필요합니다. 관객들에게 다양한 방식으로 보여줍니다.