모바일 웹이 꾸준한 속도로 성장하고 Google에서 응답성을 기반으로 페이지 순위를 지정하는 것을 확인하면서 웹사이트가 다양한 기기와 화면 크기에 적응할 수 있도록 하는 것이 중요합니다.

그러나 반응형 웹 디자인은 단순히 레이아웃을 조정하거나 축소하는 것 이상입니다. 콘텐츠와 기능을 유지하면서 다양한 방식으로 단일 웹사이트를 제공하는 것입니다.

이를 염두에 두고 반응형 웹 디자인을 위한 7가지 모범 사례를 소개합니다.

1. 반응하는 생각

반응형 웹 디자인이 시작되었을 때 디자이너는 가장 큰 화면을 계획한 다음 가장 작은 화면에 이를 때까지 축소했습니다. 너무 자주, 그들은 더 작은 화면에 맞게 잘 분해되지 않는 멋진 요소를 포함했고, 이로 인해 모바일 버전은 원본의 축소된 사본이 되었고 약간의 사후 고려처럼 느껴졌습니다. 오늘날 모바일 장치는 많은 웹사이트에서 가장 많은 양의 트래픽을 구성하므로 모바일 사용자는 다른 사용자와 동일한 품질의 검색 경험을 기대하고 누릴 자격이 있습니다. 하지만 그렇다고 해서 더 큰 화면 크기도 무시해야 하는 것은 아닙니다. 많은 사람들이 여전히 큰 데스크탑을 사용하며 하루 종일 다른 화면 사이를 더 많이 이동합니다.

이 문제를 해결하는 가장 좋은 방법은 '모바일 우선' 접근 방식을 채택하는 것입니다. 먼저 가장 작은 화면에 맞게 디자인한 다음 화면 크기를 늘릴 때 필요에 따라 요소를 추가합니다.

인기 있는 중단점을 위한 디자인에 집중하되 그 사이의 간격도 고려하십시오. 매일 새로운 장치가 시장에 출시되고 현재 거의 사용되지 않는 화면 크기가 다음 달에 새로운 큰 일이 될 수 있습니다. 그리고 세로 모드에서 태블릿을 사용하는 사람들을 고려하십시오. 이것은 레이더에 빠져 결국 찌그러진 데스크탑이나 낭비되는 공간이 많은 기본 모바일 레이아웃처럼 보일 수 있습니다.

2. 내용에 주의

컨텍스트를 고려하지 않고 모든 요소를 ​​페이지에 맞추는 데 초점을 맞추는 '크기에 맞춤' 접근 방식의 함정에 빠지지 마십시오. 가장 중요한 콘텐츠와 기능에 집중하고 어떤 요소가 잘려야 하는지에 대해 잔인한 것부터 시작하세요. 다른 화면 크기로 이동할 때 각 단계에 포함되는지에 대해 질문하십시오. 너무 오래 생각해야 하는 경우 거기에 포함할 필요가 없을 것입니다. 필요한 콘텐츠와 기능이 명확해지면 레이아웃 작업을 시작할 수 있습니다. 화면 크기가 다양하다는 것은 '스크롤 없이 볼 수 있는 부분'이라는 전통적인 개념이 거의 사라졌음을 의미합니다. 사람들은 스크롤링에 익숙합니다. Facebook 및 Twitter와 같은 사이트의 등장은 이미 알고 있었습니다. 따라서 스크롤을 권장하지만 가장 중요한 정보는 화면 상단으로 유지하도록 사이트를 디자인하십시오. 여기에는 연락처 세부 정보, CTA 및 전자 상거래 사이트에서 가장 중요한 '장바구니에 담기' 버튼이 포함됩니다.

사용자에 대한 중요도에 따라 요소의 우선 순위를 지정합니다. 따라서 데스크탑의 이미지 옆에 텍스트를 맞출 수 있다면 모바일 장치에서 사용자의 관심을 끌기에 가장 적합한 것이 무엇인지 신중하게 생각하고 우선 순위를 확인하십시오. 미리보기 페이지에 첨부된 블로그 이미지와 같은 다른 요소는 모바일 버전에서 완전히 제외되어 콘텐츠 자체에 집중할 수 있습니다.

3. 확장 가능한 탐색 실험

탐색은 반응형 웹 디자인에서 가장 어려운 측면 중 하나이지만 가장 중요한 것이기도 합니다. 대부분의 웹 디자인 규칙과 달리 이것은 일관성이 필요하지 않은 곳입니다. 큰 화면에서 사용되는 크고 복잡한 메뉴는 모바일에서는 작동하지 않으므로 다른 화면에 대해 다른 유형의 탐색을 만드는 것이 완벽하게 허용됩니다. 크기. 숨겨진 탐색은 메뉴의 존재를 나타내는 햄버거와 같은 간단한 아이콘으로 많은 모바일 사이트에서 인기가 있습니다. 아래 콘텐츠 위로 메뉴를 아래로 밀거나 전체 화면에 오버레이되도록 할 수 있습니다. 또 다른 옵션은 콘텐츠가 화면 측면에서 사라지고 사용자가 화면을 가로질러 스와이프하여 참여할 수 있는 수평 스와이프를 위한 것입니다.

무엇을 선택하든 일관성을 완전히 부정하지 마십시오. 메뉴는 기능이 다르더라도 시각적 특성 측면에서 다른 버전과 비슷한 느낌을 주어야 합니다.

4. 이미지에 관한 모든 것

웹사이트의 이미지 품질은 방문자의 사이트 첫인상에서 큰 부분을 차지하므로 매우 중요합니다. 그러나 큰 이미지는 대역폭 기능이 낮은 모바일 장치의 다운로드 속도에 부정적인 영향을 미칩니다. 콘텐츠와 마찬가지로 각 화면 크기에 대한 각 이미지의 포함에 대해 질문하고 절대적으로 필요한 이미지만 포함해야 하며 여러 개의 큰 이미지가 포함된 슬라이더와 같은 요소를 재고해야 합니다.

나머지 이미지를 최적화하여 적응형 크기 조정으로 유연하게 만들고 적절한 형식을 사용하여 저장합니다. 모바일에서는 이미지가 전체 화면으로 표시될 수 있으므로 모바일에서는 '이미지 확대' 기능이 필요하지 않을 수 있음을 기억하십시오. 이미지 갤러리를 포함해야 하는 경우 긴 스크롤 탐색을 선택하거나 가로 스와이프를 사용하여 갤러리 사이를 이동합니다.

5. 타이포그래피를 생각하라

선택하는 타이포그래피는 중대형 화면에서 작동하는 많은 서체를 더 작은 화면 크기로 축소하면 제대로 읽기가 너무 어려워지므로 신중하게 고려해야 합니다. 따라서 항상 다른 화면에서 철저히 테스트하십시오. 제목의 균형을 신중하게 조정하십시오. 제목의 기능은 명확해야 하지만 너무 크면 지나치게 지배적으로 보일 수 있습니다. 그리고 배경색과 글꼴 사이에 적절한 대비가 있는지 확인하십시오.

다른 화면 크기로 이동할 때 콘텐츠의 줄 길이에 주의하십시오. 줄이 너무 길면 읽기 어려울 수 있습니다. 줄 길이를 약 60-75자로 유지하고 더 넓은 화면에서는 사이드바 또는 이미지로 공간을 채웁니다.

6. 터치스크린에 최적화

반응형 웹 디자인은 다양한 화면 크기만 고려할 필요가 없습니다. 또한 다양한 입력 방법에 대해 최적화되어야 합니다. 그리고 터치스크린은 까다로울 수 있으므로 버튼 크기와 링크를 넉넉하게 사용하여 대략 44포인트 정사각형의 클릭 가능한 영역을 목표로 하는 것이 가장 좋습니다. 또한 터치스크린에 대한 사용자 경험을 최적화해야 합니다. 예, 본질적으로 직관적이지만 스와이프 제스처와 같은 미묘한 탐색 보조 기능은 유용한 추가 기능입니다.

7. 실제 기기에서 테스트

마지막으로 디자인을 계획하는 것이 중요한 단계이지만 이론에만 의존하지 마십시오. 디자인과 CSS 중단점을 확인하는 데 도움이 되는 모바일 에뮬레이터가 있지만 실제 테스트를 능가하는 것은 없습니다. 이러한 에뮬레이터 중 다수는 다양한 화면 크기만 복제하지만 다른 운영 체제의 기능은 복제하지 않습니다. 다양한 크기의 화면과 다양한 사용자가 있는지 확인하고 디자인을 철저히 테스트하십시오. 이것은 종종 새로운 관점을 제시하고 올바른 방향으로 가고 있는지 확인하거나 개선할 수 있는 부분을 보여줍니다.

반응형 웹 디자인은 지속적으로 발전하고 성장하고 있으며 여기에서 표면만 긁었습니다. 이 분야의 모범 사례도 자주 변경되므로 최신 개발 속도를 유지하는 것이 좋습니다. 많은 사용자가 장치에서 대역폭이 약하고 해상도가 낮고 처리 능력이 작기 때문에 사이트는 단순하고 잘 정리되어 있고 깨끗하고 사용하기 쉽고 다양한 화면에서 보기 좋게 표시되어야 합니다.