블로그를 모바일 친화적으로 만드는 방법에 대한 팁

Google은 최근 모든 블로그가 모바일 친화적인지 확인하기 위해 모바일 친화적 알고리즘 업데이트를 사용하고 그렇지 않은 블로그를 처벌할 것이라고 발표했습니다. 많은 블로거가 웹사이트를 모바일 친화적으로 만드는 방법과 블로그가 모바일 친화적인지 여부를 확인하는 방법에 대해 궁금해했습니다. 그렇기 때문에 블로그를 모바일 친화적으로 만드는 것이 왜 그토록 중요한지, 그리고 실제로 어떻게 해야 하는지에 대한 가장 중요한 정보를 모았습니다.

요즘 블로그 방문자의 많은 부분이 컴퓨터 대신 모바일 장치를 사용하고 있습니다. 그리고 구글은 모바일 기기에서 보기에 적합한 사이트의 순위를 올리겠다고 약속했기 때문에 블로그나 웹사이트가 모바일 기기에 친숙한지 확인하는 것이 그 어느 때보다 중요합니다.

물론, 구글이 원하는 것에 관한 것만은 아닙니다. 블로그를 모바일 친화적으로 만드는 것도 귀하와 귀하의 독자에게 가장 큰 이익이 됩니다. 많은 사람들이 모바일 장치를 사용하여 인터넷을 서핑하기 때문에 블로그를 보다 편리하게 읽을 수 있기 때문입니다. Pew Internet Project의 연구에 따르면 모든 휴대전화 소유자의 1/3 이상이 인터넷에 액세스하기 위해 데스크톱이나 노트북보다 휴대전화를 더 많이 사용합니다. 따라서 모든 스마트폰에서 블로그를 쉽게 보고 블로그의 독자층을 늘리려면 모바일 친화성을 고려해야 합니다. 그리고 실제로 생각보다 쉽게 ​​달성할 수 있습니다.

모바일 친화성 테스트

Google에서 이 모바일 친화적 알고리즘을 제시하면서 모든 사람이 모바일 친화적 테스트 도구를 사용하여 이 측정항목에 대해 블로그와 웹사이트를 테스트할 수 있도록 했습니다. " 테스트할 URL 입력" 상자에 블로그 URL을 입력 하고 " 테스트 실행 "을 클릭하면 도구가 귀하의 블로그가 모바일 친화적인지 여부를 알려줍니다.

웹 사이트가 모바일 친화적이라면 아무 것도 할 필요가 없기 때문에 잠시 휴식을 취할 수 있습니다. 그러나 이 Google 도구에서 귀하의 블로그가 모바일 장치에서 읽기가 가장 쉽지 않다고 판단되면 이 부서에서 최대한 빨리 개선해야 합니다.

WordPress, Joomla!, Drupal, Blogger, Tumblr, Google Sites, Bitrix 등과 같이 콘텐츠 관리 소프트웨어(CMS)를 사용하여 블로그를 운영하는 사람들의 경우 이러한 소프트웨어 시스템의 대부분이 사용자 지정에 문제가 되지 않습니다. 웹사이트를 자동으로 모바일 친화적으로 만드는 도구를 제공합니다. 그러나 웹사이트를 만들기 위해 CMS 소프트웨어를 사용하지 않는 구식 루트를 택했거나 CMS를 사용했지만 웹사이트가 여전히 모바일 표준에 미치지 못하는 경우 개선 방법에 대한 몇 가지 팁이 있습니다. 사이트의 모바일 친화성.

1. CMS 최신버전 업데이트 및 모바일 테마 사용

CMS를 사용하는 경우 소프트웨어를 업데이트하거나 블로그에 사용 중인 테마를 변경하기만 하면 됩니다. 대부분의 CMS는 사이트를 모바일 친화적으로 만들기 위한 모든 도구를 이미 제공하지만 CMS가 최신 버전으로 업데이트되었는지 확인해야 합니다. 예를 들어, Joomla는 최신 버전의 소프트웨어로 업데이트된 경우에만 모바일 지원을 제공합니다. 그러나 다른 소프트웨어의 경우 웹사이트 테마를 변경하여 모바일 친화적으로 만들도록 요구할 수 있습니다. 일부 오래된 테마는 모바일 장치에서 보기 좋지 않아 적합하지 않기 때문입니다. 그렇게 하려면 CMS의 관리 패널로 이동하여 대시보드에서 테마 탭을 찾아 블로그 테마를 반응형 및 모바일 친화적인 테마로 변경합니다. 예를 들어, WordPress는 수백 가지의 다양한 테마를 제공하며 그 중 많은 부분이 반응형일 뿐만 아니라 무료입니다. 안타깝게도 모바일 지원을 제공하지 않는 CMS를 사용하는 경우 더 많은 개선 사항이 필요하며 콘텐츠 관리 소프트웨어를 전환하는 것이 더 현명할 수 있습니다.

2. 소제목 사용

모바일 사용자에게 편리한 블로그 콘텐츠의 경험 법칙은 하나의 긴 텍스트로 된 기사가 아닌 작은 단락으로 텍스트를 흡수하도록 하는 것입니다. 따라서 블로그 게시물의 텍스트는 독자가 텍스트에서 쉽게 방향을 잡을 수 있도록 잘 구성되어야 합니다. 부제목을 사용하면 쉽게 할 수 있습니다. 소제목을 사용하면 텍스트가 자동으로 여러 개의 하위 챕터로 나누어져 기사를 읽는 동안 독자가 ​​제자리를 잃을 가능성이 줄어듭니다. 그리고 스마트폰에서 무언가를 읽는 동안 자리를 잃는 것은 많은 모바일 장치 사용자에게 매우 일반적인 문제이기 때문에 모바일 스크롤은 길고 단조로운 텍스트를 읽기 어렵게 만들기 때문에 제목을 사용하여 해결하십시오.

제목 태그를 사용하여 제목을 쉽게 삽입할 수 있습니다. 가장 크고 가장 중요한 표제에 대한 태그는 <h1>입니다. 이 태그는 가장 일반적으로 텍스트의 제목에 사용됩니다. 다른 제목에는 <h1>에서 <h6>까지의 하향식 계층 구조가 있는데, 이는 거의 눈에 띄지 않는 제목이지만 여전히 콘텐츠를 분할하고 읽기 쉽게 만드는 데 도움이 됩니다.

3. 이미지에 적합한 크기 선택

블로거들은 보통 컴퓨터의 일반적인 화면 크기에 따라 블로그 게시물에 사용할 이미지의 크기를 선택하지만, 블로그 게시물을 휴대폰과 같은 작은 화면에서 볼 때 일반적으로 이미지가 모두 끝납니다. 같은 크기가 됩니다. 이는 모바일 장치 사용자가 이미지를 적절한 비율로 보지 못한다는 것을 의미합니다. 따라서 크기가 더 작을 뿐만 아니라 일반적으로 1500 x 2500픽셀 미만의 그림이 가장 좋지만 크기도 더 작도록(500KB 미만 권장) 사진을 만드십시오. 모바일 장치 친화적 인 사진을 갖는 것 외에도 이미지의 파일 크기를 줄이면 사용자가 페이지를 더 빨리 로드할 수 있습니다. 더 작은 사진은 로드하는 데 더 적은 데이터를 사용하기 때문입니다.

사진을 더 작게 만들려면 파일 크기와 크기가 필요합니다. Photoshop에서 이 작업을 수행할 필요가 없기 때문에 가지고 있는 모든 사진 편집기를 사용하십시오. JPEGmini 또는 Pixlr 을 사용하는 것이 좋습니다. 이러한 사진 편집기를 사용하면 품질을 손상시키지 않고 이미지 크기를 줄일 수 있기 때문입니다.

4. 반응형 디자인 사용

블로그나 웹사이트를 위한 반응형 디자인은 웹사이트를 브라우저 창의 너비에 맞게 자동으로 조정하기 때문에 다양한 화면 크기의 다양한 플랫폼과 장치에서 더 편리하게 볼 수 있는 기회를 제공합니다. 그리고 블로그 방문자가 쉽게 읽을 수 있도록 이 조정 중에 일반적으로 블로그 디자인이 변경됩니다. 예를 들어 이미지가 축소되고 열이 세로로 정렬되며 메뉴도 변경됩니다. 그러나 이러한 변경 사항이 저절로 발생하지 않는 경우 직접 수행하는 데 사용할 수 있는 도구가 있습니다.

예를 들어 Foundation 3 , Skeleton 및 Bootstrap . 이러한 프레임워크는 블로그를 자동으로 조정하므로 모든 장치에서 쉽게 읽을 수 있습니다. 이것들을 사용하는 것은 가능한 모든 조합을 혼자서 코딩하는 것보다 훨씬 쉽습니다. 물론 뷰포트의 너비(vw), 뷰포트의 높이(vh), 뷰포트의 높이와 너비의 최소값(vmin), 뷰포트의 높이와 너비의 최대값(vmax)과 같은 CSS3의 새로운 상대 길이 단위를 사용하여 이를 수행할 수도 있습니다. 단, 코딩은 시간과 함께 기술과 시간이 필요하며, 프로그래머 경험이 없으시다면 전자를 추천드립니다.

5. 심플한 디자인 사용

모바일 사용자는 크고 복잡한 디자인 웹 사이트가 모바일 장치에서 느려지기 때문에 단순한 사이트 디자인을 선호합니다. 통계적으로 대부분의 모바일 사용자는 주의 집중 시간이 상당히 짧기 때문에 단순한 디자인은 화려한 디자인으로 독자의 주의를 산만하게 하는 것보다 콘텐츠에 대한 독자의 주의를 쉽게 유지할 수 있도록 합니다.

이는 사이트 레이아웃을 간단하고 이해하기 쉽게 만드는 것을 의미합니다. 서비스 제공업체에서 제공하는 테마를 사용하는 경우 더 간단한 테마로 변경할 수 있습니다. 예를 들어, WordPress는 모바일 장치를 압도하지 않지만 데스크탑에서도 여전히 멋지게 보일 수 있는 우아하고 단순한 디자인을 많이 제공합니다. 그러나 HTML을 사용하여 웹사이트를 만든 경우 간단한 템플릿을 다운로드하면 사이트가 멋지게 보이고 모바일 친화적이기도 합니다. 예를 들어 Envato Market 은 사이트에서 선택하고 사용할 수 있는 다양한 단순한 디자인을 제공합니다.

6. 표준 글꼴 사용

재미있는 글꼴은 블로그를 더 창의적으로 보이게 할 수 있지만 모든 모바일 장치가 멋진 데스크탑 글꼴을 지원하는 것은 아니기 때문에 이러한 글꼴은 블로그의 모바일 독자에게 성가실 수도 있습니다. 따라서 콘텐츠를 보려면 모바일 장치 사용자는 휴대폰에 새 글꼴을 다운로드해야 하며 이는 많은 사람들에게 가치가 없는 번거로움입니다. 게다가, 모든 글꼴이 사전 설치되어 있더라도 좀 더 창의적인 글꼴은 크기가 더 작기 때문에 스마트폰에서 읽기 어려울 수 있습니다.

따라서 Times New Roman, Verdana, Comic Sans MS, WildWest 또는 Bedrock과 같은 전통적인 글꼴을 선택하십시오. 또한 사용하기로 결정한 글꼴의 가독성을 확인하여 스마트폰의 작은 화면에서 볼 때 텍스트를 읽을 수 없는지 확인하십시오. 일반적으로 웹사이트의 모든 텍스트는 14픽셀 이상이어야 합니다. 이렇게 하면 매우 작은 화면의 모바일 장치를 사용하는 경우에도 텍스트가 쉽게 읽을 수 있을 만큼 충분히 커지기 때문입니다.

7. 페이지당 콘텐츠 최소화

컴퓨터, 태블릿 또는 스마트폰과 같은 모든 장치에 페이지가 로드되면 장치는 페이지의 모든 콘텐츠를 다운로드합니다. 컴퓨터를 사용하는 경우 일반적으로 문제를 일으키지 않지만 많은 양의 데이터가 모바일 장치를 압도할 수 있습니다. 이를 방지하려면 각 페이지의 콘텐츠 양을 최소화해야 합니다. 이렇게 하면 블로그가 모든 모바일 장치에서 작동하기 때문입니다.

페이지의 콘텐츠를 페이지당 5MB 미만으로 줄이는 것이 좋습니다. 모든 브라우저에서 페이지 콘텐츠의 크기를 쉽게 확인할 수 있습니다. 온라인에서 사용할 수 있는 많은 웹 페이지 크기 검사기 도구 중 하나를 사용하십시오. 5MB를 초과하는 경우 페이지의 텍스트, 이미지 및 기타 구성 요소의 크기와 양을 수동으로 줄이거 나 블로그 발췌문을 사용하여 방문자가 블로그를 더 쉽게 볼 수 있도록 하십시오.

8. YouTube 동영상 사용

블로그 기사에 비디오를 많이 게시하는 경향이 있는 경우 모바일 장치에서 볼 때와 컴퓨터에서 볼 때의 모습이 많이 다르다는 점을 기억해야 합니다. 또한 일부 모바일 장치는 특정 비디오 형식도 지원하지 않으므로 사용자가 사이트에서 비디오를 재생할 수 없는 경우를 방지하려면 포함된 YouTube를 사용하십시오. YouTube가 각 동영상에 대해 제공하는 포함 코드는 이미 반응형입니다. 즉, 거의 모든 기기에서 동영상을 볼 수 있고 더 이상 동영상 크기와 형식에 대해 스트레스를 받을 필요가 없습니다.

" 구독 " 버튼 아래에 있는 "공유" 버튼을 클릭하여 YouTube 동영상의 임베드 코드를 얻을 수 있습니다. 그런 다음 " 임베드 " 탭을 클릭하고 제공된 코드를 사이트에 복사합니다. 또한 변환하거나 조정하지 않고도 게시물에 완벽한 크기의 비디오를 가질 수 있습니다.

9. 탭 가능한 버튼과 메뉴로 링크 교체

많은 경우 웹사이트의 링크는 모바일 사용자가 손가락으로 쉽고 정확하게 탭하기에는 너무 작습니다. 그리고 블로그 독자는 보고 싶은 콘텐츠를 정확하게 탭할 수 없을 때 정말 짜증날 수 있습니다. 그렇기 때문에 웹사이트의 모든 링크를 최소 44x44픽셀 크기의 버튼으로 교체해야 합니다.

WordPress와 같은 CMS를 사용하는 경우 플러그인을 사용하여 이러한 버튼을 만들 수 있습니다. CMS 제어판으로 이동하여 적절한 플러그인을 찾아 설치하고 올바르게 사용하기 위한 지침을 따르십시오. 그러나 웹사이트를 직접 코딩했다면 무료 링크 버튼 생성기 중 하나를 사용할 수 있습니다. 그러면 버튼을 직접 코딩하는 동안 사용하는 시간을 절약할 수 있습니다.

10. 계속 테스트

마지막으로, 모든 개선 사항을 완료하고 블로그가 최대한 모바일 친화적이라고 생각되면 인터넷에서 찾을 수 있는 Google 테스트 도구 또는 기타 모바일 친화성 테스트 도구를 사용하여 블로그를 다시 테스트하십시오. 이제 모든 것이 정상이고 도구가 블로그가 모바일 친화적이지 않기 때문에 패널티를 받지 않는다고 확신한다면 긴장을 풀고 훌륭한 콘텐츠를 만들어 웹사이트를 계속 성장시킬 수 있습니다. 하지만 확실히 하기 위해 여러 기기에서 웹사이트를 테스트하는 것이 좋습니다.

친구나 가족에게 휴대전화와 태블릿에서 블로그를 보도록 요청하세요. Android 및 IOS 기기뿐만 아니라 완전히 다른 운영 체제를 사용하는 기기에서 사이트를 테스트합니다. 그리고 해당 기기에서 블로그의 모든 주요 페이지를 살펴보세요. 블로그의 모바일 친화성을 실생활에서 테스트해야만 사이트가 실제로 모든 가제트에서 쉽게 보고 읽을 수 있다는 것을 확신할 수 있습니다.

모바일 친화성은 멋진 사이트 디자인을 갖는 것뿐만 아니라 웹사이트에서 사용자 경험을 개선하는 것이기도 합니다. 그렇기 때문에 블로그를 모바일 친화적으로 만들면 보고 이해하기 쉽기 때문에 더 많은 사람들이 귀하의 웹사이트를 기꺼이 다시 방문하게 될 것입니다. 그리고 웹 서핑을 위해 휴대 전화를 기본 장치로 사용하는 사람들의 수가 매년 증가하고 있기 때문에 웹 사이트가 이러한 스마트폰 사용자에게 친숙하고 콘텐츠를 표시하도록 하는 것이 가장 좋습니다. 그것들을 편리하고 읽기 쉬운 방식으로.