당신이 만드는 모든 웹사이트에서 따라야 할 모바일 친화적인 체크리스트

모바일에서 잘 작동하는 웹사이트를 만드는 것은 쉽지 않지만 할 수 있습니다. 사이트를 배송하기 전에 철저히 확인하는 한 모바일 사용자가 좋은 경험을 하지 못할 이유가 없습니다. 그러나 가장 주의를 기울여야 하는 요소가 무엇인지 궁금할 수 있습니다.

이 기사에서는 사이트가 충족해야 하는 7가지 기준에 대한 간단한 체크리스트를 제공합니다. 그렇다면 사용자는 훌륭한 모바일 경험을 갖게 될 것이며 그렇지 않은 경우 상황을 바꾸는 방법을 알려 드리겠습니다. 1번 포인트부터 시작하겠습니다!

모바일 친화적인 웹사이트의 중요성

모바일 친화적인 웹사이트를 갖는 것은 오늘날 그 어느 때보다 중요합니다.

'모바일 친화적'이라는 용어는 다소 모호하게 들립니다. 간단히 말해서 사이트의 콘텐츠를 쉽게 소비하고 모든 종류의 모바일 장치를 사용하여 상호 작용할 수 있다면 사이트는 모바일 친화적이라고 간주할 수 있습니다.

아시다시피 모바일 브라우징이 증가하고 있습니다. 즉, 많은 사람들이 웹 탐색의 기본 방법으로 모바일 브라우징을 사용합니다. 사이트가 사용하기 쉽지 않은 경우 사용자는 대안을 찾을 수 있습니다. 다행히도 웹사이트가 모바일 친화적인지 테스트할 수 있는 몇 가지 방법이 있습니다. 예를 들어 Google은 URL을 붙여넣기만 하면 모든 사이트에서 사용할 수 있는 테스트를 제공합니다.

하지만 자동화된 테스트는 완벽하지 않다는 점을 명심하십시오. 따라서 약간의 상식도 연습해야 합니다. 이를 위해 다음은 모바일 사용자에게 최대한 친숙한 사이트를 만드는 데 도움이 되는 몇 가지 팁입니다.

당신이 만드는 모든 웹사이트에서 따라야 할 7단계 모바일 친화적 체크리스트

모바일 트래픽의 중요성을 감안할 때 구축하는 모든 웹사이트는 처음부터 모바일 친화적이어야 합니다. 이 체크리스트는 모든 단계에 맞는지 확인하는 데 도움이 됩니다. 한 번 보자!

1. 다양한 해상도로 웹사이트 테스트

올바른 도구를 사용하면 여러 해상도에서 웹사이트를 쉽게 테스트할 수 있습니다.

모바일 사이트와 관련하여 가장 중요한 것 중 하나는 사이트가 데스크톱 버전에서 축소된 것처럼 보이지 않는다는 것입니다. 이는 요소의 모든 단일 요소가 여러 해상도에서 좋아야 함을 의미합니다.

반면에 모바일에서 보기 좋은 요소가 없으면 이탈률에 부정적인 영향을 미칠 수 있습니다. 현명한 방법은 미리 여러 ​​해상도에서 웹사이트를 테스트하고 문제가 발생하는지 확인하는 것입니다.

다행히도 이 프로세스는 들리는 것처럼 복잡하지 않으며 이를 수행하기 위해 여러 장치를 소유할 필요가 없습니다. 다음과 같이 다양한 해상도에서 웹사이트를 빠르게 테스트할 수 있는 서비스가 많이 있습니다.

• Chrome 개발자 도구: 이 기본 제공 Chrome 브라우저 기능에는 여러 해상도에서 사이트를 테스트하는 데 사용할 수 있는 장치 도구 모음 이 포함되어 있습니다.
• Screenfly 및 BrowserStack과 같은 서비스: 이러한 타사 서비스를 사용하면 훨씬 다양한 해상도에서 사이트를 테스트할 수 있습니다.

우리가 언급한 모든 도구는 무료이므로 예산에 문제가 없어야 하며 이 단계를 건너뛸 이유가 없습니다!

2. 작은 화면에서 메뉴와 탐색이 잘 표시되는지 확인

메뉴가 모바일에서 잘 표시되도록 하는 것은 사이트를 계속 사용할 수 있게 유지하는 데 중요합니다.

대부분의 경우 메뉴는 사람들이 사이트를 탐색하는 주요 방법입니다. 링크가 더 작은 해상도에서 클릭하거나 읽기 어려운 경우 사용성에 영향을 미칩니다. 또한 탐색에 사용된 장치에 관계없이 모든 메뉴 항목에 쉽게 액세스할 수 있도록 해야 합니다.

이를 염두에 두고 모바일 메뉴를 테스트할 때 아무것도 놓치지 않도록 몇 가지 단계를 살펴보겠습니다.

1. 모든 메뉴 요소가 보이는지 확인하십시오. 스크롤하여 도달할 수 있는지 확인하지 않는 경우.
2. 각 링크가 정렬되어 있고 하위 메뉴가 중첩되어 있는지 확인하십시오.
3. 각 메뉴 항목을 읽을 수 있는지 확인하고 클릭하십시오.

Divi와 같은 대부분의 최신 WordPress 테마는 자동으로 반응형 메뉴를 생성합니다. 사이트의 이 부분에 문제가 있는 경우 새 테마로 업데이트하는 것이 좋습니다.

3. 작은 해상도에서도 이미지가 잘 보이는지 확인

사이트의 이미지는 해상도에 관계없이 똑같이 멋지게 보여야 합니다.

이미지는 모든 웹 사이트의 핵심 구성 요소이지만 때로는 그래픽이 낮은 해상도에서 최상으로 보이지 않을 수 있습니다. 예를 들어 누군가 모바일을 통해 사이트에 액세스할 때 로고를 읽을 수 없다면 분명히 브랜드에 영향을 미칠 것입니다.

대부분의 경우 사람들은 이미지 '뒤틀림'에 대해 더 걱정하지만 이미지를 축소하는 것도 문제가 될 수 있습니다. 모든 이미지가 모든 해상도에서 완벽하게 보이도록 조정할 수 는 없지만 문제를 줄이기 위한 조치를 취할 수 있습니다.

1. 브랜딩에 중요한 이미지에 노력을 집중하세요.
2. SVG와 같이 널리 사용되는 이미지 유형에 대한 확장 가능한 대안을 찾으십시오.
3. 가능하면 잘린 이미지를 선택하여 작은 크기에서 더 잘 보이도록 하십시오.

이 팁을 염두에 두는 한 계속 진행하는 것이 좋습니다. 인포그래픽과 같이 매우 복잡한 이미지의 경우 저해상도에 완전히 적용되지 않을 수 있음을 기억하십시오.

4. 가독성을 위해 콘텐츠 테스트

작은 화면은 가독성에 영향을 줄 수 있지만 쉽게 조정할 수 있습니다.

모바일 장치 사용성에 가장 큰 영향을 미치는 한 가지 측면은 가독성입니다. 더 작은 폼 팩터로 작업하는 경우 텍스트가 단순히 축소되는 대신 읽을 수 있는 크기로 표시되도록 보정해야 합니다. 여기의 목표는 간단합니다. 사용자가 사이트를 확대하거나 꼬집어서는 안 됩니다. 결국, 그것은 성가신 방문자를 위한 완벽한 요리법입니다.

다행히 가독성은 비교적 다루기 쉬운 측면입니다.

• 콘텐츠 본문에 대해 읽기 쉬운 기본 글꼴을 선택하십시오.
• 콘텐츠를 쉽게 스캔할 수 있는 섹션으로 나누려면 가능한 한 부제목을 사용하세요.
• 텍스트가 표시되는 방식을 더 잘 제어할 수 있는 테마를 선택하세요.

마지막 요점과 관련하여 많은 현대 테마가 원하는 컨트롤을 제공해야 합니다. 예를 들어, Divi를 사용하면 데스크탑과 모바일 모두에서 모듈 텍스트의 크기를 미세 조정할 수 있습니다.

5. 사이트 요소가 상호 작용하기 쉬운지 확인

손가락을 사용하여 요소와 상호 작용하는 것은 까다로울 수 있으므로 디자인을 조정해야 합니다.

이 단계는 많은 부분을 다룰 수 있지만 우리와 함께 참아 주십시오. 지금까지 메뉴가 사용하기 쉽도록 하는 것이 얼마나 중요한지 살펴보았지만 사이트의 나머지 대화형 요소도 마찬가지입니다. 버튼, 링크, 양식 등 - 모두 모바일 장치에서 계속 사용할 수 있어야 합니다.

여기서 중요한 고려 사항은 물론 크기입니다. 해상도에서 아래쪽으로 이동함에 따라 우리가 이야기한 대부분의 요소도 축소됩니다. 사이트의 유용성에 영향을 줄 수 있으므로 상호 작용하기가 너무 어려운지 테스트하는 것은 귀하의 일입니다.

방법은 앞에서 언급한 서비스 대신 실제 모바일 장치를 사용하는 것이 좋습니다. 결국, 요소가 마우스 대신 손가락으로 사용하기 쉬운지 알아야 합니다. 주의해야 할 사항은 다음과 같습니다.

• 클릭 유도문안(CTA), 양식 및 메뉴 항목을 쉽게 클릭할 수 있는지 확인하십시오.
• 사용자가 잘못된 항목을 클릭하게 할 수 있는 중요한 요소 간에 겹치는 부분이 있는지 확인합니다.

어떤 요소가 문제를 일으키는지 알게 되면 필요에 따라 크기를 조정하기만 하면 됩니다. Divi와 같은 테마를 사용하는 경우 각 모듈의 설정 화면에서 할 수 있습니다.

6. 팝업에 지나치게 의존하고 있지 않은지 확인

팝업은 효과적일 수 있지만 사이트의 유용성에도 영향을 미칩니다.

팝업에서 탈퇴 및 전환에 자주의 결과와 같이 매우 중요한 증가합니다. 그러나 그들은 또한 그들이 개종하는 만큼 많은 사람들을 짜증나게 하는 경향이 있습니다.

그것은 당신이 침입 모바일 팝업을 사용하는 경우가 겁 정확히 얼마나 많은 사람들이 찾아 낼 어렵지만, 우리는 몇 가지 검색 엔진 당신을 말할 수있다 - Google과 같은이 - 그것은 당신을 처벌 할 것이다. 메인 콘텐츠를 가리는 팝업을 사용하거나 사용자가 액세스하기 전에 팝업을 확인하도록 하는 경우 검색 엔진 최적화(SEO)에 어려움을 겪을 수 있습니다.

팝업이 유용할 수 있다는 것을 알고 있지만 다음과 같이 덜 방해가 되는 대안이 있습니다.

• 세련된 옵트인 양식.
• 최적화된 CTA.

획기적인 것은 아니지만 양식과 CTA를 최적화하면 더 적은 수의 사용자를 소외시킬 수 있으므로 장기적으로 더 큰 수익을 얻을 수 있습니다. 또한 검색 엔진 순위도 영향을 받지 않습니다.

7. 웹사이트 로딩 시간 테스트

웹사이트가 1초 이내에 로드되면 결과에 매우 만족할 수 있습니다.

우아한 테마의 단골이라면 가능한 한 항상 성능을 강조한다는 것을 알게 될 것입니다. 로딩 속도가 빠른 사이트는 많은 사람들이 눈치채지 못하는 부분이지만 반대 상황이 발생했을 때 확실히 주목합니다.

로딩 시간이 길면 이탈률이 증가하고 사이트의 활용도가 떨어집니다. 또한 모바일 사용자 중 일부는 최적의 연결보다 적은 연결을 사용하여 사이트를 탐색할 수 있으므로 모바일 사용자에게 특히 중요합니다.

WordPress 웹 사이트 최적화는 전체 기사를 자체적으로 다룰 수 있는 주제이지만 다음은 몇 가지 빠른 팁입니다.

• 가능하면 Divi와 같은 모바일에 최적화된 테마를 사용해 보세요.
• 공간을 덜 차지하도록 이미지를 최적화하십시오.
• 귀하의 웹사이트에 캐싱 솔루션을 구현하십시오.

이것들은 모두 견고한 단계이지만 로딩 시간을 낮게 유지하기 위해 할 수 있는 전부는 아닙니다. 자세한 내용은 WordPress 설정을 최적화하는 방법에 대해 얼마 전에 게시한 전체 기사를 확인하세요.

결론

웹사이트가 모바일 친화적인지 확인하는 것이 그 어느 때보다 중요합니다. 현재 추세가 유지된다면 앞으로 몇 년 동안 대부분의 트래픽이 모바일 소스에서 유입되는 것을 보게 될 것입니다(아직 그렇지 않은 경우). 지금 할 수 있는 가장 현명한 일은 데스크탑 과 모바일 장치 모두에서 동등하게 실질적인 경험을 제공하는 것입니다.

웹사이트가 모바일 친화적인지 여부가 확실하지 않은 경우 다음을 확인하는 데 도움이 되는 간단한 체크리스트를 참조하세요.

1. 다양한 해상도에서 웹사이트를 테스트하세요.
2. 메뉴와 탐색이 작은 기기에서도 잘 표시되는지 확인하세요.
3. 이미지가 낮은 해상도에서 잘 보이는지 확인하십시오.
4. 가독성을 위해 콘텐츠를 테스트합니다.
5. 사이트의 요소와 상호 작용하기 쉬운지 확인하세요.
6. 팝업에 지나치게 의존하고 있지 않은지 확인하십시오.
7. 웹사이트의 로딩 시간을 테스트합니다.

사이트가 모바일 친화적인지 확인하는 방법에 대해 질문이 있습니까? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!

32픽셀/Shutterstock.com의 기사 썸네일 이미지.