Responsive Web Deisgn
UX고민하기_15 Best Practices for web design
최근에 시간이 꼬이다가, 결국 이번에도, 최근에 본 기사 정리하기..
원본 출처
http://www.incomediary.com/best-practices-responsible-responsive-web-design
반응성 웹 디자인이라는 것은 단순히 늘어나거나, 줄어드는 문제가 아니다.
화면 사이즈에 맞추어서 한 개의 사이트를 전달하는 셀 수 없는 방법이다.
무엇을 더하고 무엇을 제거하고 무엇을 가장 중요하게 할 것인가? 한 가지 코드 기반으로 어떻게 할 수 있을까
1. 내비게이션 메뉴를 숨겨라
작은 화면에서 내비게이션 메뉴를 숨기는 것은 레이아웃을 심플하게 할 수 있는 좋은 방법이다. 아이콘, 텍스트 또는 아이콘+텍스트로 사용자에게 어디에 메뉴가 있는지 알려줄 수 있다.
메뉴가 내려오면서 표시되는 단순한 드롭다운 메뉴 거나 메뉴가 확장되면서 메인 콘텐츠들을 덮거나 전체 화면을 겹치게 표시하는 등의 방법으로 표현할 수 있다.
'BBC Sport'는 누르면 아래로 펼쳐지는 메뉴를 사용하고 있다.
한 페이지에 다수의 접히는 메뉴를 가지고 있다면, 다른 모션으로 표현한다면, 사용자가 쉽게 페이지의 구조를 이해할 수 있을 것이다.
'Huge'는 오버레이 메뉴를 사용하고 있는데, 이것을 데스크톱 모드에서도 사용하고 있다. 버거 아이콘을 계속 사용하고 콘텐츠 페이지를 간단하게 구성했다.
2. 수평적으로 Swipe 가능한 메뉴들
작은 화면에서 메뉴들을 보여줄 수 있는 또 다른 방법은 화면 가장자리 넘어간 콘텐츠를 일부 보여주는 것이다. 텍스트의 일부분을 보여주고, swipe 동작을 통해서 보여준다.
The Guardian은 [All] 버튼을 누르면 메뉴가 드롭다운으로 표시되는 명확한 horizontal scroll 메뉴를 사용하고 있다. 가능한 공간에서 다른 방법을 적용한 좋은 예시이다.
구글의 Horizontal scroll 메뉴는 텍스트 링크 리스트이다. 사용자에게 더 있는 콘텐츠가 있다는 것을 알려주는 간단한 방법으로 스크린 가장자리를 누르면 추가로 표시된다. 각 텍스트 링크를 누르면 드롭다운 메뉴로 표시된다.
3. 선택할 수 있는 영역에, 버튼과 링크를 크게 표시하라
모바일에서 버튼을 더 작게 하기보다는 더 크게 하라, 그래서 그것이 누르기 좋을 것이다. 사실 이것을 단순히 작은 화면에 적용할 것이 아니라 태블릿이나, PC 같은 어느 기기에서든 클수록 좋다.
큰 버튼들은 사용성을 높인다. 예로, 당신이 뉴스 헤드라인에 "read more"라는 텍스트 링크를 포함한 그리드를 디자인한다고 할 때, Read More을 링크로 만들기 보다는, 콘텐츠 전체를 블록 링크로 만들어라, 그러면 사용자는 어디든 클릭할 수 있을 것이다.
Oliver Bonas 사이트에 [Add to Basket] 버튼은 크고 명확하며 눈에 띄게 디자인되어있다.
The Pretty Green Energy사이트는 콘텐츠 리스트에 크게 선택하기 좋은 영역에 큰 버튼을 배치했다.
4. 조화로운 크기, 굵기의 폰트
머리말과 단락의 글의 크기 비율은 균형을 이루어야 한다. 큰 머리글들은 모바일에 적합하지 않다. 특히, 몇 줄이 넘 칠경 우, 모든 것은 적절하게 크기 조절이 되어야 한다.
새로운 모바일 기기는 고해상도 화면을 제공하기 때문에 텍스트를 더 또렷하고 읽기 쉽게 표현한다. 당신은 모바일 화면에 좀 더 작게 하고, 큰 화면에는 폰트 크기를 더 크게 할 수 있다.
Nike는 PC에서 배너에서 효과적인 두툼한 폰트를 사용하고 있고 모바일에서는 한 줄에 맞추기 위해서 얇은 폰트로 사이즈를 줄여서 표현하고 있다.
No Drama는 화면에 맞추기 위해서 타이틀을 줄여서 표현하였다.
5. 최적의 단락 너비
더 큰 화면에 더 넓은 레이아웃을 만들 때, 콘텐츠의 글의 가로길이를 고려하는 것은 중요하다. 만약에 텍스트가 너무 긴 경우, 줄간 읽는 것이 어려워지면서 가독성을 낮춘다. 비슷하게, 너무 짧은 줄을 갖는 것은 읽는 리듬을 끊고 눈을 뒤에서 앞으로 너무 자주 움직이게 한다.
일반적으로 65~75 문자 정도의 길이를 유지한다. 이것은 텍스트의 최대 가로길이를 500/700 픽셀이 될 것이다.
99u 페이지는 읽는 가로길이가 잘 균형 잡혀있다. 간단한 링크와 좋은 위치에 자리 잡고 있는 사이드바들은 기사의 구독에 방해되지 않는다.
좋은 가로나비를 가진 다른 예로, The Guardian의 기사는 하얀 여백과 깨끗하게 정리된 사이드 바로 복잡해 보이지 않는다.
