SEMALT로 사이트를 모바일 친화적으로 만들기


목차

  1. 소개
  2. 모바일 친화적이라는 것은 무엇을 의미합니까?
  3. 사이트가 모바일 친화적인지 확인하는 방법
  4. 반응 형 디자인이 모바일 친화적 인 디자인과 동일합니까?
  5. 웹 사이트를 모바일 친화적으로 만드는 방법
  6. 결론

소개

전 세계 웹 트래픽의 50 % 이상이 모바일 장치에서 발생하며이 숫자는 매년 계속 증가하고 있습니다. 또한 모든 인터넷 사용자의 80 %가 스마트 폰을 소유하고 있습니다. 귀하의 웹 사이트와 그 콘텐츠가 모바일 친화적이지 않다면, 당신은 확실히 많은 트래픽을 잃고 있으며, 이로 인해 트래픽 흐름과 Google TOP에서의 순위가 차단 될 수도 있습니다.

따라서 Google은 모바일 사용자에게 모바일 친화적 인 페이지를 제공하고 싶다고 분명히 말했기 때문에 웹 사이트와 모바일 콘텐츠를 모바일에 최적화해야합니다.

모바일 친화적이라는 것은 무엇을 의미합니까?

모바일 친화적 인 사이트 나 콘텐츠가 있다는 것은 웹 페이지의 콘텐츠를 데스크톱이나 노트북 컴퓨터뿐만 아니라 모바일 장치에서도 쉽게 사용할 수 있다는 것을 의미합니다.

사이트가 모바일 친화적인지 확인하는 방법

사이트가 모바일 친화적 사이트라는 기준을 충족하는지 궁금 할 수 있습니다. 모바일 친 화성 요구 사항을 준수하지 않는 사이트에 대한 Google의 제재를 피하기 위해서는 이러한 기준을 충족해야합니다.

Google에는 사이트의 모바일 친 화성을 쉽게 테스트하는 데 사용할 수있는 자체 모바일 친화적 인 테스트 도구가 있습니다. 테스트가 완료되면 모바일 친 화성 수준에 따라 사이트에 등급이 부여됩니다.

반응 형 디자인이 모바일 친화적 인 디자인과 동일합니까?

좋아요, 사실을 똑바로합시다. 아마도 "반응 형"디자인과 "모바일 친화적"디자인이라는 용어를 보거나 들어 보셨을 것입니다. 그러나 이것은 기술적으로 정확하지 않습니다.

반응 형 디자인을 사용하는 것은 모바일 친화적 인 사이트를 만드는 다른 방법 중 하나 일뿐입니다. 웹 사이트가 반응하는 것은 사이트의 콘텐츠가 항상보고있는 화면 크기에 맞게 조정됨을 의미합니다. 모바일 친화적 인 사이트를 만드는 데 가장 많이 사용되는 기술입니다.

웹 사이트를 모바일 친화적으로 만드는 방법

웹 사이트가 이미 실행 중이거나 곧 구축하려는 경우 모바일 친화적으로 만드는 것이 최우선 과제입니다.

이 게시물에서 공유 된 대부분의 팁은 모바일 친화적 인 페이지를 만드는 반응 형 디자인 방법을 선호합니다. 즉, 여기에 사용할 수있는 몇 가지 팁이 있습니다. 웹 사이트 디자인 (또는 경우에 따라 재 설계).
  1. 큰 텍스트 블록을 사용하지 마십시오. 모바일 웹 사이트 화면의 텍스트 양을 줄이는 것이 가장 좋습니다. 물론 방문자에게 메시지를 전달하려면 단어가 필요하지만 큰 텍스트 블록은 상당히 압도적이며 읽기에 엄청나게 보일 수 있습니다.

    단락이 너무 길면 방문자가 겁을 먹을 수 있습니다. 독자를 격려하기 위해 문장과 단락을 가능한 한 짧게 유지하십시오.

  2. 올바른 글꼴 사용 : 모바일 사이트에서 명확하고 읽기 쉬운 글꼴을 사용해야합니다. 방문자가 콘텐츠를 읽기 위해 눈을 피로하게 만드는 글꼴을 원하지 않습니다. 웹 디자인 과정에서 올바른 글꼴을 선택하는 것이 중요합니다.

    글꼴 선택과 텍스트 정렬 방식은 사이트를 시각적으로 매력적이거나 끔찍하게 만들 수 있습니다. 글꼴을 사용하여 텍스트를 구분할 수도 있습니다.

    예를 들어, 굵은 글꼴을 사용하여 머리글, 주제 또는 하위 주제를 나타낼 수 있으며 일반 크기의 글꼴은 텍스트 본문에 사용됩니다.

  3. 속도 향상 : 연구에 따르면 약 53 %의 사람들이로드하는 데 3 초 이상 걸리는 모바일 웹 사이트를 이탈합니다. 모바일 웹 사이트를로드하는 데 더 오래 걸릴수록 이탈률이 높아지고 궁극적으로 Google TOP에서 순위가 ​​낮아집니다.

    페이지로드 시간을 가능한 한 낮게 유지하려면 디자인을 단순화하십시오. 불필요한 무거운 이미지 나 코드는 피하십시오.

    Semalt를 사용하여 현재 페이지 속도를 확인할 수 있습니다. 무료 웹 분석 도구. 데스크톱 및 모바일 장치 모두에 대한 페이지 속도 점수를 보여줍니다. 이 도구는 속도 향상을 위해해야 ​​할 일도 알려줍니다.

  1. 메뉴를 간단하게 만드십시오. 데스크톱 용 웹 사이트를 디자인 할 때 많은 것을 잊을 수 있습니다. 그러나 모바일 장치는 화면이 더 작기 때문에 관대하지 않을 수 있습니다.

    방문자가 메뉴 옵션을 선택하기 위해 항상 스크롤하거나 확대 및 축소하는 것을 원하지는 않습니다.

    가능한 최소한의 옵션으로 전체 웹 사이트를 단순화하십시오. 가능하면 모든 옵션이 화면에 맞고 충분히 보이는지 확인하십시오. 웹 사이트를 살펴보고 사용자를위한 메뉴 옵션을 단순화하십시오.

  2. 긴 형식을 좋아하는 사람은 없습니다. 사용자가 모바일 사이트에서 정보를 제공 할 때 세금 양식을 작성하는 것처럼 느끼게하지 마십시오. 데스크톱 사이트를 사용하여 긴 양식을 채울 때 그다지 번거롭지 않을 수 있지만 더 작은 화면에서 그렇게해야하는 것은 확실히 압도적 일 것입니다.

    양식이 너무 긴 경우 다시 디자인해야합니다. 양식을 살펴보고 각 줄이 정말로 필요한지 스스로에게 물어보십시오. 예를 들어 사용자가 제품을 구매하도록 유도하려는 경우 청구 및 배송 정보만으로 충분합니다. 취미를 요구하지 마세요.

    사실 대부분의 장바구니 포기의 가장 큰 이유는 확장되고 복잡한 결제 프로세스 때문입니다.

  3. CTA를 명확하게 표시하세요. 모바일 사이트를 최대한 활용하려면 클릭 유도 문안 버튼이 잘 보이는지 확인하세요. 디스플레이에 둘 이상의 CTA로 방문자를 공격하지 마십시오. 이번에는 화면이 더 작다는 것을 기억하십시오.

    모든 페이지에 대해 기본 목표 (새 구독, 구매, 다운로드 등)에 대해 생각하고 해당 페이지에 대한 CTA가 해당 목표에 집중하도록하십시오.

    조사 결과 웹 사이트의 53 %가 3 초 이내에 쉽게 식별 할 수없는 CTA 버튼이있는 것으로 나타났기 때문에 이렇게하면 경쟁 업체보다 앞서 나갈 수 있습니다.

  4. 검색 기능 추가 : 때로는 사이트에 많은 옵션이 필요할 수 있습니다. 전자 상거래 웹 사이트의 경우 특히 그렇습니다.

    옵션이 너무 많으면 방문자에게 혼란을주고 전환에 부정적인 영향을 미치는 것은 사실이지만 검색 기능을 웹 디자인에 통합하면 작업이 크게 단순화됩니다.

    검색 창을 추가하면 사용자가 찾고있는 내용을 정확하게 입력 할 수 있으므로 복잡한 메뉴를 탐색해야하는 스트레스를 피할 수 있습니다.

  5. 고객 지원이 명확하게 보이도록합니다. 모바일 방문자가 문제가 발생했을 때 도움을 받기 위해 쉽게 연락 할 수 없다면 비즈니스에 나쁜 평판을줍니다.

    방문자가 고객 서비스 팀에 신속하게 액세스 할 수 있도록 사이트의 눈에 잘 띄는 곳에 모든 관련 연락처 정보를 제공해야합니다.

  6. 버튼이 충분히 큰지 확인하십시오. 손가락으로 쉽게 탭할 수 있도록 웹 사이트 버튼을 충분히 크게 디자인해야합니다. 이것은 마우스 나 키보드로 탐색을 수행 할 수있는 데스크톱의 큰 화면이 아닙니다.

    스마트 폰 사용자의 75 %는 엄지 손가락으로 화면을 탭하므로 ​​버튼과 기타 클릭 가능한 요소는 충분히 커야합니다.

    또한 모바일 장치를 사용하는 사람들이 화면 모서리에 도달하기가 매우 어렵 기 때문에 화면 중앙에 버튼과 기타 중요한 요소를 배치하는 것이 좋습니다.

  7. 팝업 제거 : 현실을 직시하자, 팝업은 일반적으로 특히 모바일 사이트에서 성가시다. 대부분의 사람들은 엄지 손가락을 사용하여 모바일 웹 페이지를 탐색합니다. 팝업은 일반적으로 닫기가 어렵습니다. 데스크톱 또는 노트북 화면에 표시되는 작은 "x"버튼이 모바일 화면에서는 더 작아지기 때문입니다.

    많은 경우 방문자가 광고를 닫으려고 할 때 실수로 광고를 클릭하기도합니다. 결국 다른 페이지에 완전히 방문하게되어 사용자 경험을 망칠 수 있습니다.

    모든 비용을 들여 팝업을 사용해야하는 경우 가능한 한 양식을 단순화하거나 방문자가 클릭 할 때만 팝업을 사용하는 두 번째 옵션을 시도 할 수 있습니다.

  8. 웹 사이트를 재 설계하는 것을 고려하십시오. 귀하의 사이트가 잘 구축되어 있다면 많은 청중이 귀하의 웹 사이트 디자인에 익숙하기 때문에 이것은 그다지 실현 가능하지 않을 수 있습니다. 그러나 웹 사이트가 비교적 새로운 경우 웹 사이트를 다시 디자인 할 때 반응 형 테마를 사용해보십시오. Semalt는 웹 사이트 재 설계에 도움을 줄 수있는 최고의 웹 개발 팀 중 하나를 보유하고 있습니다.

  1. "너비"가 항상 백분율로 표시되는지 확인하십시오. 약간의 기술을 익힐 때입니다. 웹 페이지 요소를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"(Google Chrome 용)를 선택하면 패널이 나타납니다.

    왼쪽 창에서 요소를 클릭하면 해당 값이 오른쪽 창에 표시됩니다. 픽셀 또는 백분율로 설정할 수있는 "너비"값이 표시되어야합니다.

    백분율로 설정하면 화면 크기가 변경됨에 따라 해당 요소의 너비가 조정됩니다.

  2. 미디어 쿼리 사용 : 미디어 쿼리를 사용하는 방법을 알고 있다면 요소 너비에 픽셀을 계속 사용할 수 있습니다. 미디어 쿼리를 사용하는 것이 반응 형 디자인의 핵심입니다.

    사이트가 다양한 화면 크기에서 어떻게 작동 할 것인지 지정하기 만하면됩니다. 그렇기 때문에 일부 페이지는 화면 크기가 변경됨에 따라 크기가 조정되고 모양이 변경됩니다.

    좋은 테마를 구입하거나 가장 최신의 모바일 친화적이고 SEO 전략으로 웹 사이트를 구축하는 Semalt와 같은 훌륭한 웹 개발 회사의 서비스를 고용하는 경우 모든 기술적 인 물건이 실제로 필요하지 않습니다.

결론

모바일 친화적 인 사이트를 구축하면 최대한 많은 트래픽을 확보하고 전체 Google TOP 순위를 높일 수 있습니다. 이는 귀하의 비즈니스에 더 많은 전환율을 의미합니다. 이 기사의 팁을 따라 사이트를 모바일 친화적으로 만들고 웹 사이트가 제공하는 모든 이점을 누리십시오.