웹 사이트 만들기 모바일에서 잘 되는 것이 쉽지는 않지만 가능한 작업입니다. 제출하기 전에 사이트를 확인하는 한 모바일 사용자가 좋은 경험을 하지 못할 이유가 없습니다. 그러나 어떤 요소에 가장 주의를 기울여야 하는지 궁금할 수 있습니다.
이 자습서에서는 사이트가 충족해야하는 간단한 기준 목록을 제공합니다. 그렇다면 사용자는 훌륭한 모바일 환경을 경험할 수 있으며 그렇지 않은 경우 변경 방법을 알려드립니다. XNUMX 번 포인트부터 시작하겠습니다!
1-여러 해상도에서 웹 사이트 테스트
모바일 사이트와 관련하여 가장 중요한 것 중 하나는 사이트가 데스크톱 버전의 축소 된 버전으로 보이지 않아야한다는 것입니다. 즉, 각 요소는 여러 해상도를 주시해야합니다.
반면에 모바일에 제대로 표시되는 요소가 없으면 이탈률에 부정적인 영향을 미칠 수 있습니다. 현명한 일은 당신의 사이트 웹 미리 여러 해상도에서 모든 것이 올바르게 표시되는지 확인하십시오.
다행히도 이 프로세스는 들리는 것처럼 복잡하지 않으며 이를 수행하기 위해 여러 장치를 소유할 필요가 없습니다. 모든 것을 빠르게 테스트할 수 있는 서비스가 많이 있습니다. 사이트 웹 다음과 같은 다양한 해상도에서
크롬 개발 도구 :이 기본 제공 Chrome 브라우저 기능에는 여러 해상도에서 사이트를 테스트하는 데 사용할 수있는 기기 툴바가 포함되어 있습니다.
같은 서비스 Screenfly et BrowserStack :이 타사 서비스를 사용하면 훨씬 더 다양한 해상도로 사이트를 테스트 할 수 있습니다.
우리가 언급 한 모든 도구는 무료이므로 예산이 문제가되지 않아야하며이 단계를 건너 뛸 이유가 없습니다!
2-메뉴와 탐색이 작은 화면에 표시되는지 확인합니다.
대부분의 경우 메뉴는 사용자의 기본 탐색 수단입니다. 방문자. 링크가 작은 해상도에서 클릭하거나 읽기 어려운 경우 유용성에 영향을 미칩니다. 또한 탐색에 사용하는 장치에 관계없이 모든 메뉴 항목에 쉽게 액세스할 수 있기를 원합니다.
이를 염두에두고 몇 가지 단계를 수행하여 모바일 메뉴를 테스트 할 때 아무것도 놓치지 않도록하십시오.
- 모든 메뉴 항목이 표시되는지 확인하십시오.
- 각 링크가 정렬되고 하위 메뉴가 중첩되어 있는지 확인하십시오.
- 각 메뉴 항목을 읽고 클릭 할 수 있는지 확인하십시오.
가장 현대적인 WordPress 테마는 자동으로 반응 형 메뉴를 만듭니다. 사이트에서이 측면에 문제가있는 경우 테마 변경을 고려해야합니다.
3-이미지가 작은 해상도에서 좋은지 확인
이미지는 모든 것의 핵심 부분입니다 사이트 웹, 그러나 때로는 그래픽이 최상의 해상도가 아닐 수도 있습니다. 예를 들어, 누군가가 모바일을 통해 귀하의 사이트에 액세스할 때 귀하의 로고를 읽을 수 없다면 이는 귀하의 브랜드 이미지에 분명히 영향을 미칠 것입니다.
대부분의 경우 사람들은 이미지 "왜곡"에 대해 더 걱정하지만 크기 조정도 문제가 될 수 있습니다. 모든 이미지가 모든 해상도에 완벽하게 맞춰지는 것은 아니지만 문제를 덜기 위해 취할 수있는 단계가 있습니다.
브랜드에 중요한 이미지에 노력을 초점을 맞 춥니 다.
SVG와 같은 인기있는 이미지 유형에 대한 확장 가능한 대안을 찾으십시오.
가능하면 잘린 이미지를 선택하여 더 작은 크기에 더 잘 맞습니다.
이 팁을 염두에 두는 한 계속 진행할 수 있습니다. 컴퓨터 그래픽과 같이 매우 복잡한 이미지의 경우 저해상도에서는 완전히 크기를 조정하지 못할 수 있습니다.
4-가독성을 위해 콘텐츠 테스트
모바일 장치의 유용성에 가장 큰 영향을 미치는 한 가지 측면은 가독성입니다. 더 작은 폼 팩터로 작업 할 때는 글꼴을 줄이는 대신 작은 화면 크기에도 불구하고 텍스트가 계속 표시되도록하여이를 보완해야합니다. 여기서 목표는 간단합니다. 사용자가 콘텐츠를 읽기 위해 확대 할 필요가 없어야합니다. 결국 이것은 사용자를 성가 시게하는 완벽한 방법입니다.
다행히 가독성은 다루기가 비교적 간단한 측면입니다.
- 내용에 대해 매우 읽기 쉬운 기본 글꼴을 선택하십시오.
- 가능하면 자막을 사용하여 콘텐츠를 쉽게 읽을 수있는 섹션으로 분류하십시오.
- 텍스트가 표시되는 방식을 더 많이 제어 할 수있는 테마를 선택하십시오.
우리의 마지막 요점과 관련하여 많은 현대 테마는 당신이 찾고있는 옵션을 제공해야합니다.
이 팁이 전부입니다. 모바일 장치에 맞게 블로그를보다 효과적으로 최적화하는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 언제든지 문의하십시오.
