책임감 있는 반응형 웹 디자인을 위한 15가지 모범 사례

반응형 웹 디자인은 단순히 짜고 늘리는 문제가 아닙니다.

하나의 웹사이트를 화면의 너비에 따라 무수히 많은 방식으로 전달하는 것입니다.

무엇을 추가할까요? 무엇을 제거할 것인가? 가장 중요한 것의 우선순위를 정하는 방법은 무엇입니까? 검색 순위에 미치는 영향은 무엇입니까? 단 하나의 코드 기반으로 이 모든 작업을 수행하는 방법은 무엇입니까?

웹사이트를 반응형으로 코딩하려면 전문가가 필요합니다.

그래서 저희는 AwesomeWeb의 가장 뛰어난 반응형 웹 디자이너 중 한 명인 Tim Cross에게 적절하고 책임감 있으며 반응형 웹 사이트를 구축하는 데 필요한 통찰력을 제공해 달라고 요청했습니다.

Tim을 고용하든 웹사이트에 직접 응답성을 추가하기로 결정하든, 이 자료를 수행해야 할 작업을 알 수 있는 리소스로 보관하십시오.

1. 숨겨진 탐색 메뉴.

작은 화면에서 기본 탐색 메뉴를 숨기는 것은 레이아웃을 단순하게 유지하는 좋은 방법입니다. 아이콘, 텍스트 또는 이 둘의 조합은 메뉴가 있는 위치를 사용자에게 나타냅니다.

옵션에는 메뉴가 아래로 슬라이드되어 아래의 주요 콘텐츠를 덮는 간단한 드롭다운 메뉴 또는 메뉴가 확장되어 전체 화면을 덮는 오버레이 방법이 포함됩니다.

BBC Sport는 누르면 펼쳐지는 드롭다운 메뉴를 사용합니다. 동일한 페이지에 여러 개의 축소된 메뉴가 있으므로 사용자가 페이지의 계층 구조를 이해하는 데 도움이 되도록 다양한 클릭 유도문안을 사용합니다.

거대은 오버레이 메뉴를 사용합니다. 또한 데스크탑 보기에서 이 메뉴 스타일을 사용하여 버거 아이콘을 계속 표시하고 페이지의 내용을 단순화합니다.

초보 블로거를 위한 최고의 팁:

브랜드를 가능한 한 최고의 조명으로 표현하는 프리미엄 테마 에 투자하십시오.

무료 테마는 시작하기에 좋지만 대부분은 제대로 사용자 정의할 수 없습니다. 첫인상이 중요하다는 말을 기억하십시오!

2. 가로로 스와이프할 수 있는 메뉴.

작은 화면에 메뉴를 표시하는 또 다른 방법은 메뉴를 계속 표시하되 콘텐츠가 화면 가장자리에서 넘치도록 하는 것입니다. 잘린 텍스트의 일부를 표시하는 것은 스와이프하여 표시할 수 있음을 나타냅니다.

Guardian은 명확한 수평 스크롤 메뉴를 사용하며 추가 클릭 유도문안으로 "전체"를 볼 수 있습니다. 이 메뉴는 눌렀을 때 드롭다운 메뉴로 나타납니다. 사용 가능한 공간에 다양한 방법을 적용한 좋은 예입니다.

Google의 수평 스크롤 메뉴는 일반 텍스트 링크의 목록으로, 화면 가장자리에서 넘칩니다. 이는 사용자에게 더 많은 콘텐츠를 표시하는 간단한 방법입니다. 각 텍스트 링크에는 눌렀을 때 나타나는 드롭다운 메뉴가 있습니다.

3. 버튼과 링크에 클릭할 수 있는 큰 영역을 지정하십시오.

모바일에서 버튼을 작게 만드는 것보다 탭하기 쉽도록 크게 만드세요. 사실 이것은 작은 화면에만 적용되는 것이 아니라 터치 스크린 태블릿에서 데스크톱 PC에 이르기까지 장치가 무엇이든 큰 것이 좋습니다.

큰 버튼은 사용성을 향상시킵니다. 버튼을 더 크게 만드는 것뿐만 아니라 텍스트 링크도 커짐에 ​​따라 이점이 있습니다. 예를 들어, 뉴스 헤드라인 그리드가 있고 각 텍스트 링크 안에 "자세히 알아보기"라는 텍스트 링크가 있는 경우 이 링크를 만드는 대신 전체 콘텐츠를 링크로 차단하여 사용자가 아무 곳이나 클릭할 수 있도록 합니다. .

사용하기 더 쉽습니다. 모두를 위한 더 나은 경험.

Oliver Bonas 사이트의 Add to Basket 버튼은 크고 명확하며 대비되는 색상으로 페이지에서 눈에 띕니다.

Pretty Green Energy 사이트에는 콘텐츠 목록 항목에 큰 버튼과 클릭할 수 있는 큰 영역이 있습니다.

4. 글꼴 두께와 크기의 균형을 맞춥니다.

머리글과 단락 텍스트 사이의 크기 비율은 균형이 잘 맞아야 합니다. 큰 헤더는 특히 몇 줄에 걸쳐 늘어나는 경우 모바일에서 보기 좋지 않습니다. 모든 것은 적절하게 크기를 조정해야 합니다.

최신 모바일 장치에는 고해상도 화면이 있어 텍스트를 더 읽기 쉽고 읽기 쉽게 만듭니다. 모바일 화면에서는 조금 더 작게 할 수 있고 더 큰 디스플레이에서는 글꼴 크기를 늘릴 수 있습니다.

Nike는 배너에서 잘 작동하는 데스크탑에서 더 두꺼운 글꼴을 사용합니다. 모바일에서는 글꼴을 밝게 하고 한 줄에 맞도록 크기를 줄입니다.

No Drama는 모바일에서 H1 타이틀을 축소하여 화면에 맞고 페이지에 무리를 주지 않습니다.

5. 최적의 판독 폭.

더 큰 화면에서 레이아웃을 더 넓게 만드는 동안 콘텐츠의 줄 길이를 고려하는 것이 중요합니다.

한 줄의 텍스트가 너무 길면 한 줄씩 따라가기 어렵기 때문에 읽기가 더 어렵습니다. 마찬가지로, 줄이 너무 짧으면 눈이 앞뒤로 너무 자주 움직여야 하므로 읽기 리듬이 깨집니다.

일반적인 관행은 줄 길이를 약 60-75자로 유지하는 것입니다. 이것은 텍스트 영역을 약 500/700픽셀 너비의 최대 너비로 설정하여 달성할 수 있습니다.

99u는 최적의 읽기 너비, 간단한 공유 링크 및 기사를 너무 많이 손상시키지 않는 잘 배치된 사이드바로 페이지의 균형을 잘 유지합니다.

읽기 너비가 적절할 뿐만 아니라 Guardian의 기사 레이아웃은 많은 공백과 명확하고 깔끔한 사이드바가 있어 복잡하지 않습니다.

6. 중요한 정보는 모바일 상단에 올려두세요.

모바일 상단에 전화번호, 연락처 정보, 지금 구매 클릭 유도문안 등을 표시합니다. 모바일 사용자는 정보를 빠르게 원하지만 이는 모든 장치에서도 잘 작동합니다.

현재 브라우저 크기가 매우 다양하고 "접기"라는 개념이 더 이상 존재하지 않는 경우에도 페이지 상단에 주요 행동 유도문안을 두는 것은 여전히 ​​중요합니다. 예를 들어 전자 상거래 제품 세부 정보 페이지에서 스크롤할 필요 없이 대부분의 사용자가 "장바구니에 추가" 버튼을 볼 수 있도록 하는 것이 좋습니다.

Metris Kitchen은 사용자가 연락처 정보(전시실 찾기)와 전환 액션(브로셔 요청)을 명확하고 빠르게 확인하는 것이 중요하기 때문에 주요 정보를 모바일 상단에 배치합니다.

Ebay는 가격과 지금 구매 버튼이 모바일에서 명확하게 표시되는지 확인합니다.

7. 더 작은 화면에서 접힐 때 콘텐츠 블록의 순서를 변경합니다.

작은 화면에 먼저 표시하는 것이 더 중요한지 결정한 다음 콘텐츠 순서를 변경합니다. 이는 CSS를 통해 달성할 수 있습니다(레이아웃이 너무 복잡한 경우 JS도 있음).

데스크탑에 텍스트 콘텐츠 블록과 이미지 블록이 나란히 있는 경우 더 적절한 것을 결정하십시오.

또는 페이지의 사이드바와 콘텐츠 영역 – 모바일에서 이것이 접히면 사이드바가 첫 번째가 되고 모든 콘텐츠를 페이지 아래로 밀어내므로 모바일에서 이것을 바꾸는 것이 좋습니다.

Brown Thomas의 이 사설 콘텐츠에서 제품 정보는 모바일에서 가장 먼저 표시됩니다. 데스크탑에서 콘텐츠 순서는 제품 옆에 라이프스타일 샷이 나타나도록 서로 바뀝니다.

Melanie F 제품 세부 정보 페이지는 모바일에서 먼저 제품 이미지를 배치한 다음 데스크탑에서 나란히 표시되도록 제품 정보를 푸시합니다.

8. 작은 화면에서 콘텐츠 숨기기.

모바일에서는 더 큰 화면에서 볼 수 있는 콘텐츠를 완전히 숨기거나 탭과 아코디언을 사용하여 콘텐츠를 표시/숨김으로써 콘텐츠를 숨겨 레이아웃을 단순화할 수 있습니다. 이렇게 하면 작은 화면에서 페이지가 깔끔하게 정리되고 사용자가 원하는 경우 더 많이 볼 수 있는 옵션과 함께 모든 주요 정보를 볼 수 있습니다.

christianlouboutin.com의 이 제품 페이지는 헤더를 단순화하고 모바일에서 제품 정보를 줄여 제품 이미지를 첫 번째 콘텐츠 블록으로 남깁니다.

Selfridges에서 썸네일 이미지의 회전 목마는 모바일에서 제거되고 스와이프할 간단한 왼쪽/오른쪽 화살표만 남습니다.

9. 더 넓은 화면에서 더 많은 콘텐츠를 보여줍니다.

더 넓은 화면을 사용하면 더 많은 콘텐츠를 화면 위로 밀어 올릴 수 있습니다. 사용자가 스크롤하기 전에 더 많은 콘텐츠를 바로 볼 수 있습니다. 레이아웃을 확장하고 더 많은 열을 수용할 수 있습니다.

Jimmy Gleeson의 이 포트폴리오 그리드 보기는 화면이 넓어짐에 따라 보이는 항목의 수를 늘려 더 많은 콘텐츠를 페이지 위쪽에 표시할 수 있습니다.

Smashing Magazine의 탐색 레이아웃은 매우 복잡하며 다양한 화면 크기에 따라 많이 변경됩니다. 이것은 레이아웃에 대해 진지하게 생각하고 장치 및 화면 크기별로 사용 ​​가능한 모든 공간을 최대화하는 좋은 예입니다.

10. 세로 모드의 태블릿을 잊지 마세요.

때로는 이 방향이 더 기본적이고 사용 가능한 모든 화면 공간을 활용하지 않는 작은 모바일 레이아웃에 속하거나 콘텐츠를 모두 찌그러뜨릴 수 있는 데스크톱 레이아웃과 함께 묶이게 됩니다.

CSS에서 미디어 쿼리를 더 잘 사용하면 레이아웃을 올바르게 얻을 수 있습니다.

이 항의 제품 세부 정보 페이지의 레이아웃은 레이아웃의 비율과 간격을 훼손하지 않고 더 작은 공간에 여전히 많은 정보를 담고 있습니다.

Firebox 제품 세부 정보 레이아웃은 테이블 세로 모드에서 어떤 것도 손상시키지 않습니다. 데스크탑에 표시되는 모든 것이 여전히 존재하며 컨텐츠는 균형 잡힌 간단한 방식으로 표시됩니다.

11. 이미지 확대 기능을 스크롤 가능한 긴 갤러리 페이지로 교체합니다.

작은 장치에서는 이미 보고 있는 이미지가 화면을 가득 채우면 이미지 창 확대가 작동하지 않습니다.

이미지 갤러리의 경우 스크롤할 수 있는 긴 페이지나 왼쪽/오른쪽 화살표가 있는 스와이프할 수 있는 캐러셀을 사용하세요. 긴 스크롤 가능한 갤러리는 태블릿과 데스크탑에서도 잘 작동합니다.

Apple의 이 이미지 갤러리는 데스크톱과 모바일에서 스크롤 가능한 긴 페이지를 사용합니다. 모바일에서는 캡션을 제거하여 레이아웃을 더욱 단순화했습니다.

UrbanEars의 이 제품 갤러리는 동일한 페이지에 표시되며 링크를 누르면 아래로 확장됩니다. 팝업의 기본적인 좋은 부분을 유지합니다. 새 페이지로 이동하지 않고 이미지를 더 좋고 더 유용한 방식으로 제공합니다.

12. UX를 터치 스크린에 최적화하십시오.

배너, 메뉴, 이미지 갤러리 등에 스와이프 제스처를 추가합니다.

터치 스크린은 본질적으로 사용하기 직관적이기 때문에 탐색 보조 장치를 사용하면 더 섬세할 수 있습니다. 예를 들어 회전 목마에서 화면의 절반 이미지가 더 많은 콘텐츠가 있음을 시사합니다.

터치 스크린에서 호버 이벤트가 일관되지 않습니다. 이것을 비활성화하고 터치 이벤트로 대체하십시오. 호버에 표시할 콘텐츠가 중요하지 않고 단지 멋진 장식이라면 터치 스크린에서 모두 함께 비활성화하십시오.

Born Group의 포트폴리오 페이지에 있는 마우스 오버 상태는 데스크탑에서 애니메이션으로 표시되며 프로젝트 제목을 표시합니다. 이 정보는 여전히 터치 스크린에서 액세스할 수 있어야 하므로 호버 이벤트는 터치 이벤트로 대체됩니다. 한 번 탭하면 정보를 볼 수 있고 다른 한 번 탭하면 프로젝트를 볼 수 있습니다.

Made 사이트는 홈페이지 배너에 스와이프 이벤트를 추가했습니다. 그들은 사용자에 대해 명확하게 생각했고 이러한 터치 이벤트를 사이트의 나머지 부분, 스와이프가 자연스러운 장소(예: 제품 캐러셀)에서 활용합니다.

13. 이미지를 적게 사용합니다.

배경 그라디언트 및 버튼 호버 상태와 같은 많은 효과는 순수한 html 및 CSS로 얻을 수 있습니다. 페이지 로드 속도가 빨라 특히 모바일에 적합하며 많은 그래픽을 만드는 데 낭비되는 시간이 줄어듭니다.

아이콘에 글꼴을 사용하면 이미지를 만들 필요가 없습니다. 확장 가능하고 가장자리가 더 깨끗하고 로드 속도가 빠르며 레티나 디스플레이에 적합합니다. 이 최적화는 모든 기기와 화면에서 잘 작동합니다.

Desk.com 사이트는 아이콘 글꼴을 잘 사용합니다. 글꼴 색상을 변경하는 것만 큼 쉬운 색상을 추가하면 페이지에 더 많은 영향을 줄 수 있습니다.

Pretty Green Energy 사이트는 섹션 헤더에 큰 아이콘 글꼴을 사용합니다. 아이콘 글꼴의 크기를 늘리는 것은 간단하며 이미지를 편집할 필요가 없습니다.

14. 반응형 동영상.

이 방법을 사용하면 비디오 자체에 명시적인 높이나 너비를 설정하지 않고도 모든 크기의 비디오가 장치 크기에 자동으로 응답할 수 있습니다.

그것은 단지 몇 줄의 CSS로 달성됩니다. 이것은 페이지와 iframe에 직접 삽입된 비디오에서 잘 작동합니다.

Anyilu의 비디오는 페이지 전체에 걸쳐 펼쳐져 전체 공간을 채웁니다. 이것은 페이지에 큰 영향을 줍니다. 다른 화면 크기에서 자동으로 응답하고 크기를 조정합니다.

Brown Thomas의 포함된 비디오는 iframe을 사용하며 완전히 반응합니다. 높이나 너비가 지정되지 않아 콘텐츠 관리가 쉽고 빠른 페이지 생성이 가능합니다.

15. 폴드가 더 이상 존재하지 않습니다.

장치는 더 작고, 더 높고, 더 넓고, 더 깁니다.

페이지 상단에 모든 것을 집어넣는 것은 중요하지 않습니다. 길고 흐르는 콘텐츠 블록과 넉넉한 간격으로 페이지가 숨 쉬고 확장됩니다.

사람들은 자연스럽게 스크롤합니다. "스크롤 없이 볼 수 있는 부분" 아래에 더 많은 콘텐츠를 제공함으로써 실제로 페이지에 더 많이 참여하고 콘텐츠를 읽도록 초대하는 것입니다.

Apple의 iMac 제품 페이지는 스크롤할 때 많은 일이 발생하는 길고 흐르는 페이지입니다. 경험은 당신을 끌어당깁니다. 또한 고정 탐색을 활용하므로 페이지 아래로 이동할 때 지금 구매와 같은 주요 클릭 유도문안이 계속 표시됩니다.

Sonos 제품 페이지는 고정 너비 콘텐츠 텍스트 블록과 더 넓은 전체 화면 이미지 패널 간에 균형이 잘 맞습니다. 이렇게 하면 스크롤할 때 페이지가 흥미롭고 매력적으로 유지됩니다. 군더더기 없이 균형이 잘 잡혀 있습니다.

마무리

분석을 확인하십시오. 모바일 트래픽은 생각보다 높은 비율입니다. 그리고 나는 그것이 매달 성장하고 있다고 확신합니다.

사이트가 반응하지 않으면 사이트를 방문하는 모든 모바일 사용자가 좋지 않은 경험을 하게 됩니다.

반응이 좋다 하더라도 개선할 부분이 많다고 확신합니다.

반응형 웹 디자인은 제 특기입니다. WordPress, Modx 또는 기타 모든 웹사이트에서 작업할 수 있습니다. 내 고객은 일반적으로 월간 최소 10,000회 이상의 방문이 있으며 사이트의 복잡성에 따라 $1,500 – $3,000를 청구합니다.

저를 한 번 고용해 주시면 제가 일을 제대로 처리해 드리겠습니다. 그러면 모바일 환경이 좋지 않을 것이라고 다시는 걱정할 필요가 없습니다.

질문이 있는 경우 내 포트폴리오를 확인하고 여기에서 저에게 연락하십시오.