반응형 디자인의 일반적인 위기와 해결 방법

견고한 기반과 물만큼 유연한 레이아웃 요소가 없으면 전통적인 의미의 '디자인'도 아닙니다. 반응형 디자인은 시장의 장치 흐름과 함께 진행되고 있습니다. 모두가 실험을 하고 있으며 웹 디자이너가 되는 것이 그 어느 때보다 굉장합니다.

반응형 디자인에 대한 사례가 너무 많아서 한 세트를 보고 최고라고 부르기가 어렵습니다. '해야 할 일' 목록이 없습니다. 그러나 우리는 서로의 실수로부터 배울 수 있습니다.

반응형 웹 디자인을 위해 배운 내용은 다음과 같습니다.

청중을 위한 디자인. 당신 자신이 아닙니다.

매우 빠르고 훌륭하게 디자인된 웹사이트와 모바일 사용자를 위한 훌륭한 UX를 통해 대부분의 인도인 청중에게 다가가려 한다고 가정해 보겠습니다. 거기에는 12억 명의 사람들이 있습니다. 즉각적으로 엄청난 타격을 입어야 합니다. 숫자 자체가 당신에게 유리합니다. 또는 그곳의 겨우 13%의 사람들이 스마트폰을 가지고 있다는 것을 알았다면 그럴 것입니다. (출처: Google 모바일 플래닛).

이것은 청중을 배우고 이해하는 것이 중요한 이유 중 하나일 뿐입니다.

문화적 다양성, 연령, 성별, 직업, 언어, 인기 있는 장치 등은 브랜드/웹사이트를 만들거나 깰 수 있는 매우 중요한 요소가 될 수 있습니다.
생각보다 쉽습니다.

디자이너는 자신이 누구를 위해 디자인하는지 잘 모르는 것으로 알려져 있습니다.

따라서 UX 아키텍트가 없다면 직접 조사하는 것이 좋습니다. 그것은 결국 당신의 작업에 반영될 것이므로 어깨를 으쓱하고 그것이 당신의 강점이 아니라고 말하지 마십시오.

모바일 전용 번호는 Google의 Mobile Planet을 사용하세요. 고객에게 청중에 대해 질문하십시오.

청중의 입장에 설 수 있다면 직관적으로 사용자 친화적인 디자인을 만들 수 있습니다. 로켓 과학이 아니라 기본적인 인간 정신입니다.

'와이어프레임'에는 스토리가 필요합니다

반응형 디자인 프로젝트는 상호 작용 없이는 불완전합니다. 귀하의 모형에도 동일하게 적용됩니다.

귀하의 디자인은 (아마도) 콘텐츠가 표시되고 아무 일도 일어나지 않는 한 페이지짜리 공연이 아닐 것입니다.

상호 작용, 상태, 애니메이션 또는 효과가 없습니다. 기본적으로 사이트를 성공(또는 생각 없이 사용하는 경우 실패)으로 만들 수 있는 모든 것이 제거됩니다. Style Tiles는 정당한 이유가 있는 고전이지만(창립자가 “디자인에 대한 대화를 시작하기 위해”라고 말했듯이) 오늘날의 디자인 용어로 정교하기에는 너무 단순합니다.

아이디어의 대화형 프로토타입을 만드는 데 시간을 투자하십시오. 프론트 엔드 개발을 시작하기 전에 광범위하게 협력하십시오.

아이디어를 그냥 던지지 마십시오. 스토리텔링이라고 들어보셨나요?

프로토타입과 직관만으로 고객에게 반응형 인터랙티브 스토리를 전하세요.

Balsamiq, Axure, UXPin 등과 같은 도구를 사용하여 이러한 '스토리'의 시각적 버전을 만듭니다. 말로 그들의 상상력을 쓰다듬어 주십시오. 잘 만들어진 프로토타입으로 먹이십시오.
나중에 디자인 및 개발 작업을 간소화하고 고수해야 할 어느 정도 정의된 트랙을 제공하는 데 도움이 됩니다. 그리고 보너스로: 첫인상은 여전히 ​​중요합니다. 좋은 프로토타입은 프로젝트에 대한 열정을 보여줍니다.

내용: 첫째, 가시적이며 적응 가능합니다. 언제나

응답하는 이유는 메시지에 균일하게 액세스할 수 있고 장치에 구애받지 않고 더 넓은 범위에 도달할 수 있기 때문입니다.

콘텐츠를 숨겨야 반응형 디자인의 전체 목적을 무너뜨릴 수 있습니다.

모바일 청중은 어쨌든 데이터를 다운로드할 것이므로 그것을 숨기는 요점이 무엇입니까? 콘텐츠 요소 인벤토리를 생성합니다. 모든 페이지에 표시되는 요소와 특정 페이지에 표시되는 요소를 식별합니다. 예를 들어 CTA 버튼은 모든 단일 페이지 또는 특정 버튼(예: 방문 페이지, 관련 리소스 페이지 등)에 있을 수 있습니다.

콘텐츠 요소를 먼저 배치한 다음 거기에서 구축합니다. 종소리와 휘파람은 끝에 간다.

첫째: 사용자 목표와 그들이 웹사이트에서 원하는 것을 이해한 다음, 사용자의 기기에서 쉽게 액세스할 수 있도록 콘텐츠를 조정합니다.

모바일 페이지에 맞게 백만 단어의 기사를 짜내는 대신 사용자가 끝없이 스크롤하지 않고 정보를 정독할 수 있는 기회를 제공하십시오. 그리고 프론트 엔드 또는 서버 측 스크립팅은 (실제) 답이 아닙니다.

이를 수행하는 좋은 방법은 미리보기에 대해 간단하고 정확한 요약을 사용하는 것입니다 .

사용자가 나머지 콘텐츠를 스크롤할지 여부를 결정하게 하십시오. TL; DR은 모든 사람에게 공통적입니다(미디어 조직을 포함하여 실제 사실 확인 없이 과대 광고에 기반한 기사가 게시되는 이유입니다). 따라서 콘텐츠 끝에 섹션을 추가하고 더 쉽게 만드십시오.

두 번째: 사용자에게 단편적인 정보가 아닌 완전한 정보를 제공하십시오.

반응형 열과 서체를 사용합니다. 유동적인 데이터 테이블에는 Zurb 반응형 테이블을 사용하십시오. 미디어를 압축합니다(성능 향상을 위해 CDN 및 캐싱 사용).
콘텐츠는 당신의 메시지입니다. 기기 크기에 관계없이 선명하고 잘 보이는지 확인하세요.

보너스: 콘텐츠 우선은 콘텐츠 계층 구조를 염두에 두므로 탐색을 보다 원활하게 설계할 수 있습니다.

장치 제한 및 기능 존중

'모바일 우선' 또는 '점진적 향상'에 대해 말할 때 우리는 진정으로 최소한의 것을 이해하고 수용하고 있습니까? 다음은 '최소한의 것'이 무엇인지에 대한 요약입니다.

• 사용 가능한 화면 너비: 최소 120픽셀.
• 마크업 언어 지원: 컨텐츠 유형 application/xhtml + xml과 함께 제공되는 XHTML Basic 1.1.
• 문자 인코딩: UTF-8
• 이미지 형식 지원: JPEG, GIF 89a.
• 색상: 최소 256색.
• 스타일 시트 지원: CSS 레벨 1, CSS 레벨 2 @media 규칙과 핸드헬드 및 모든 미디어 유형
• HTTP: HTTP/1.0 또는 최신 HTTP1.1
• 스크립트: 클라이언트 측 스크립팅을 지원하지 않습니다.

이러한 사양을 바탕으로 기능적인 디자인을 만드는 것은 어렵지 않습니다. 문제는 규모를 키우는 것입니다.
장치의 크기를 고려하는 것은 좋지만, 이는 시작에 불과하며 전체가 아닙니다. 스크립트(성능 및 경험) 축소 및 정규화, 충분한 공백을 고려하여 깨끗한 인터페이스 설계(탭용), 연결 및 장치의 부하 제한(성능) 존중, 항상 엄격한 테스트가 여기에서 중요합니다.

부담을 덜어주세요

이에 대해 논평하고 싶지는 않지만(이 주제에 대해 많은 의견이 있습니다), 더 높은 순위와 더 나은 사용자 경험을 위한 페이지 속도의 중요성은 부인할 수 없습니다.

간단히 말해서: 페이지 로드 속도가 느린 경우 아무도 따라잡을 때까지 기다리지 않을 것입니다.

모바일 우선과 같은 접근 방식은 실제로 매우 효과적입니다. 점진적 향상에서는 UI 요소, 기능 및 모든 장치의 가장 좁은 대역폭을 위해 설계한다는 사실과 같은 최소한의 모든 것부터 시작합니다. 여전히 모바일 우선 접근 방식의 장점을 부정하는 사람들은 이것이 다른 모든 것보다 성능과 속도를 염두에 둔다는 데 동의할 것입니다.

또한 미디어 크기를 확인해야 한다는 사실을 상기할 필요가 없습니다.

따라서 CDN(중간에서 높은 트래픽 웹 사이트에 적합)과 특히 페이지 로드를 줄이는 백엔드 개발 기술을 사용하십시오. 캐싱을 사용합니다. 웹용 JPG 이미지를 저장하기 전에 관련 상자를 선택하여 인지된 성능(사이트가 사용자에게 '느끼는 속도')을 개선합니다.

디자인을 간결하고 깔끔하게 유지하십시오 (모든 클라이언트와 사용자 중 최소한).

TL; 박사

그래서 하나의 반응형 웹을 위한 디자인을 배웠습니다.

• 청중을 위한 디자인. 조금 조사하고 숫자에 대해 Google Mobile Planet(및 기타 유사한 도구)을 사용합니다.
• Wireframe은 이야기로 생생하게 살아날 수 있습니다. '프로토타입'은 장치/시스템의 예비 버전을 의미합니다. 실제로 작동하는 것으로 만드십시오. 대화형 프로토타이핑 도구를 사용합니다.
• 콘텐츠를 가시적이고 적응 가능하게 만드십시오. 어쨌든 다운로드될 때 모바일에서 콘텐츠를 숨기지 마십시오. 원본 게시물이 하나 있는 경우 모바일에서 읽기에 더 적합한 짧은 관련 요약을 추가합니다.
• 장치의 한계와 기능을 존중하십시오. 마우스/핑거 탭 논쟁은 제쳐두고, 치수는 제쳐두고, 타겟 청중이 사용하는 장치의 최소 사양을 위해 디자인하십시오.
• 성능에 주의하십시오. 더 나은 검색 순위뿐만 아니라 경험도 제공합니다.

저자 약력: Lucy Barret은 HireWPgeeks Ltd와 연관되어 있습니다. 그녀는 WordPress 변환 서비스에 HTML을 제공하고 그녀를 도울 전문 개발자 팀이 있습니다. 그녀는 또한 열정적인 블로거이며 그녀의 지식을 WordPress의 대규모 커뮤니티와 공유하는 것을 좋아합니다. Facebook 및 Google+와 같은 소셜 미디어 네트워크에서 그녀의 회사를 팔로우하세요.