읽는 시간 6분
웹사이트의 응답성을 테스트하는 것이 왜 중요한가요? Yandex.Metrica에 따르면 러시아에서 모바일 장치를 사용하는 사람들의 수가 50%에 육박하고 있으며 지속적으로 증가하고 있습니다.
에 관하여 검색 엔진이용자가 보다 편리한 모바일 발급을 위해 노력합니다. 2015년 2월 Google은 반응형 또는 모바일 버전이 있으면 순위에 긍정적인 영향을 미친다고 밝혔습니다. 정확히 1년 후인 2016년 2월 Yandex는 같은 내용을 발표했습니다.
반응형 웹사이트는 어떤 자질을 갖추어야 할까요?
- 가로 스크롤이 없습니다.
- 뷰포트 메타 태그가 정확합니다.
- 인터랙티브 요소(링크, 버튼, 양식 등)는 서로 너무 가깝지 않습니다.
- Flash 요소 부족, Silverlight 플러그인.
- 섹션을 통한 편리한 탐색.
- 콘텐츠(텍스트 및 그림)는 화면 크기에 맞게 조정되며 확대 없이 읽습니다.
사이트 적응성 온라인 점검 서비스
- Google 모바일 친화적 - https://search.google.com/test/모바일 친화적
스마트폰에서 사이트의 첫 화면이 어떻게 보이는지 표시하고 최적화 품질에 대한 전반적인 평가를 제공합니다.
장점
- 공식 구글 서비스.
- 특정 오류를 나타냅니다.
- 모바일 버전의 존재를 확인할 수 있습니다.
결점
- 사이트가 다른 화면 크기에서 어떻게 보이는지 볼 수 없습니다.
- 첫 화면만 보여주고, 사이트와 상호작용할 수 없습니다.
- Yandex.Webmaster 모바일 친화적 - https://webmaster.yandex.ru/site/tools/mobile-friendly/
Google의 도구와 달리 Yandex.Webmaster에서 권한을 확인한 자신의 리소스만 확인할 수 있습니다. 전체 등급을 보여주고 사이트가 스마트폰에서 어떻게 보이는지 보여줍니다.
장점
- Yandex 공식 서비스.
- 최적화의 특정 문제를 나타냅니다.
- 사이트에 모바일 버전이 있는지 이해합니다.
결점
- 귀하의 사이트만 확인할 수 있습니다.
- 사이트가 다른 화면에서 어떻게 보이는지 확인할 방법이 없습니다.
- Quirktools- http://quirktools.com/screenfly/
편리하고 기능적인 서비스, 사이트가 어떻게 보일지 볼 수 있습니다 다양한 장치스마트폰부터 TV까지.
장점
- 준비된 장치 목록에서 선택하거나 고유한 해상도를 설정할 수 있습니다.
- 사이트와 상호 작용할 수 있습니다.
결점
- 모바일 버전을 감지할 수 없습니다
- 오류 목록 없음
- Iloveadaptive- http://iloveadaptive.com/
대중적인 모바일 기기와 운영체제에 대한 적응성을 확인할 수 있는 서비스입니다.
장점
결점
- 화면 크기를 직접 지정할 수 없으며 준비된 목록에서만 선택하십시오.
- 오류 목록 없음
- 항상 자동으로 다운로드 모바일 버전, 다양한 해상도에서 데스크탑 버전이 어떻게 보이는지 확인할 수 없음
- http://adaptivator.ru/
장점
- 최적화 품질에 대한 일반적인 평가를 제공하고 오류 수정에 대한 조언을 제공합니다.
- 모바일 버전은 "안 보입니다".
결점
- 모바일 버전은 "안 보입니다".
- 화면 크기를 설정할 수 있는 방법이 없습니다.
결론
웹마스터 서비스(Yandex.Webmaster 또는 Google Search Console)에 액세스할 수 있는 경우 해당 서비스의 도움을 받아 적응성을 테스트하는 것이 가장 좋습니다. 그들은 귀하의 사이트에 가장 관련성이 높은 검색 엔진 요구 사항을 반영합니다.
이것이 가능하지 않은 경우 http://adaptivator.ru/와 함께 http://iloveadaptive.com/을 사용할 수 있습니다. 기능면에서 서로 보완하기 때문입니다.
많은 국가에서 스마트폰은 컴퓨터보다 인터넷 서핑에 더 일반적으로 사용됩니다. 따라서 모바일 장치에 맞게 사이트를 조정하는 것이 매우 중요합니다. 귀하의 페이지가 스마트폰 사용자에게 적합한지 알아보려면 Search Console의 특별한 도구가 도움이 될 것입니다.
용법
페이지가 스마트폰에서 보기에 적합한지 확인하는 것은 쉽습니다. 전체 URL을 입력하기만 하면 됩니다. 검사는 일반적으로 1분 미만이 소요됩니다. 페이지에 리디렉션이 있는 경우 해당 리디렉션도 처리됩니다.
확인 결과를 바탕으로 스마트폰에서 페이지가 어떻게 보이는지 확인하고, 볼 때 어떤 문제가 발생할 수 있는지 알아봅니다. 대부분 작은 글씨(작은 화면에서는 읽기 어려움)와 Flash 요소(대부분의 모바일 기기).
뷰포트 메타 태그 값이 설정되지 않았습니다.
페이지 코드는 장치의 화면 크기에 맞게 페이지 요소의 크기를 적절하게 조정하는 방법을 브라우저에 알려주는 뷰포트 속성을 지정하지 않습니다. 사이트가 다양한 화면 크기에서 올바르게 표시되도록 하려면 표시 영역 메타 태그를 사용하여 표시 영역을 조정합니다. 이에 대한 자세한 내용은 가이드의 반응형 웹 디자인 기본 섹션에 나와 있습니다.
표시 영역 메타 태그에는 기기 너비 값이 있어야 합니다.
고정 너비의 뷰포트 속성이 코드에 지정되어 있기 때문에 다양한 크기의 화면에 대한 페이지 조정은 불가능합니다. 이 경우 신청해야 합니다. 적응형 디자인화면에 맞게 페이지 배율을 조정하여
화면보다 넓은 콘텐츠
이 보고서는 텍스트와 이미지를 보기 위해 가로로 스크롤해야 하는 페이지를 식별합니다. 이 문제는 CSS 크기가 절대값으로 설정되거나 특정 브라우저 창 너비에 맞게 설계된 이미지가 사용될 때 발생합니다. 너비와 위치 값이 CSS 요소상대적이고 이미지의 크기가 조정됩니다. 이에 대한 자세한 정보는 가이드의 뷰포트 콘텐츠 크기 섹션에 나와 있습니다.
너무 작은 글꼴
이 보고서는 사용자가 읽기 위해 확대/축소 제스처를 사용해야 하는 작은 글씨로 된 페이지를 나열합니다. 뷰포트를 설정한 후에는 글꼴 크기가 올바르게 표시되도록 결정해야 합니다.
또는 와 같은 프레임워크는 페이지 레이아웃을 크게 촉진하고 속도를 높입니다.
모든 장치 및 모니터 확장에서 웹 페이지의 우수한 표시를 의미합니다. 아마도 모든 레이아웃 디자이너가 풀세트모든 장치 가능한 확장디스플레이, 레이아웃 테스트. 요즘 기술이 저렴하지 않기 때문에 이것은 놀라운 일이 아닙니다.
그래서. 산더미같은 휴대폰과 태블릿을 사는 것은 선택 사항이 아닙니다. 우리는 파산할 것입니다. 무엇을 할까요? 이러한 목적을 위해 우리는 적응형 사이트 테스트 서비스. 그들의 작동 원리는 매우 간단합니다. 대부분의 경우 페이지가 열리는 특정 크기의 프레임이 있습니다. 효과는 모바일 장치에서 볼 때와 거의 같습니다. 서비스가 휴대전화나 태블릿에서 페이지 표시를 항상 정확하게 표시하지는 않는다는 점에 유의하고 싶습니다. 레이아웃 중에는 서비스를 사용하여 테스트해야 하지만 완료 후에는 가능하면 가장 일반적인 장치에서 테스트합니다.
그래서. 귀하의 관심 최고의 도구반응형 웹사이트 테스트용.
Adobe의 반응형 웹사이트 테스트 도구입니다. 사용하려면 컴퓨터에 설치해야 합니다.
이 프로그램을 사용하면 WIFI를 통해 장치를 동기화하고 장치에 표시될 사이트를 볼 수 있습니다. 에 이 순간 iOS, Android, Kindle Fire 운영 체제를 지원하는 장치.
“Business Motor 팀의 프로젝트 매니저, 웹마스터, 카피라이터.
모바일 적응은 사이트 작업의 중요한 단계입니다. 모바일 랭킹 요소가 도입되면서 온보딩이 더욱 중요해졌습니다. 기본적인 사이트 이동성 테스트를 수행하는 방법을 알려드립니다.»
모바일 기기에서 사이트를 표시하는 편리함은 지난 몇 년꾸준히 성장하고 있습니다. 여기서 요점은 스마트폰과 태블릿에서 사이트를 보는 사용자 수가 증가할 뿐만 아니라 검색 엔진 수준에서의 순위에도 있습니다.
Google은 2015년 4월 21일에 이 요소가 사이트 위치에 미치는 영향을 공식적으로 발표했습니다. 더 최근에 Yandex 블로그에 대한 정보가 나타났습니다. 모바일 장치에 사이트를 표시하는 편의성을 고려한 알고리즘은 "블라디보스토크"라고 불리며 Yandex 담당자에 따르면 이미 러시아에서 활발히 구현되고 있습니다.
웹사이트를 모바일 사용자의 요구에 맞게 조정하는 것의 중요성이 커지고 있으며 앞으로도 계속 커질 것입니다. 모바일 적응은 방문자 전환과 페이지 순위에 모두 반영됩니다. 검색 결과. 그러나 프로젝트가 이러한 요구 사항을 충족하는지 어떻게 알 수 있습니까? 사이트가 모든 세부 사항에서 모바일 친화적인지 확인하는 방법은 무엇입니까? 우리는 오늘의 리뷰에서 이것에 대해 이야기 할 것입니다.
사이트가 모바일 친화적입니까?
진단의 첫 번째 단계는 모바일 장치에서 직접 사이트를 여는 것입니다. 그러나 여기에서도 특정 적응성 문제가 특정 브라우저와 특정 화면 크기에서만 나타날 수 있기 때문에 모든 것이 보이는 것처럼 단순하지 않습니다. 이러한 이유로 다음을 테스트하는 것이 좋습니다.
- 세로 화면 방향의 스마트폰(약 300픽셀 너비의 좁은 화면 포함)
- 와 함께 스마트폰에서 수평 방향화면(너비 480픽셀부터);
- 세로 및 가로 화면 방향이 있는 태블릿(768픽셀 너비부터).
사이트를 시도하는 것은 자연스러운 일입니다. 다른 장치항상 불편한 것은 아닙니다. 가까이에 있기 때문에 필요한 모든 가제트가 아닐 수 있습니다. 다양한 모바일 화면 에뮬레이터를 사용하여 이 문제를 해결할 수 있습니다. 그러나 타사 서비스에 문의할 필요는 없습니다. 유사한 에뮬레이터가 Google Chrome에 사전 설치되어 있습니다. 그것을 사용하려면 관심있는 사이트를 열고 F12 키(개발자 콘솔 호출)를 누르고 휴대폰 이미지가 있는 아이콘을 클릭하면 됩니다.
모바일 브라우저도 고유한 특성을 가질 수 있으므로 모바일 브라우저의 기능을 고려하는 것이 매우 중요합니다. 테스트할 때 다음 위치에서 사이트를 보는 것이 중요합니다.
- 사전 설치된 Android OS 브라우저;
- 구글 크롬 모바일;
- "빠른" 브라우저 - 예: Opera Mini 또는 UC 브라우저
- Safari(예: iPhone).
검색 엔진은 귀하의 사이트를 어떻게 보나요?
첫 번째 자동 체크, 사이트의 적응성 문제에 관심이 있다면 살펴볼 가치가 있습니다. 구글의 모바일 친화성 테스트. 이 도구는 매우 간단하며 모바일 장치의 페이지 최적화와 관련하여 명확한 판단을 제공합니다. 그리고 대답이 '아니오'인 경우 작은 화면과 Google 알고리즘 수준에서 사이트가 불편하고 모든 결과가 뒤따르는 것으로 간주되는 것이 거의 확실합니다.
스마트폰 화면의 콘텐츠 형식 지정에 대한 주장이 있는 경우 여기에 나열됩니다. 이를 통해 특정 디스플레이 문제를 신속하게 진단하고 바로 해결할 수 있습니다.
참고: 사이트의 스크린샷 모바일 화면스캔 결과에서 스마트폰에서 보는 것과 일치하지 않을 수 있습니다. 대부분의 경우 이는 검색 엔진에서 인덱싱한 파일만 모바일 친화적 테스트에 참여하고 스타일 파일(css)과 스크립트(js)는 robots.txt 수준에서 인덱싱을 위해 닫히는 경우가 많기 때문입니다. 그건 그렇고, 최신 Google 권장 사항에 따라 검색 엔진에 표시되어야합니다.
Google 및 Yandex 웹마스터 사무실의 모바일 장치에 대한 웹사이트 최적화
사이트가 모바일 장치에 표시하는 편리성에 대한 검색 엔진의 아이디어와 어떻게 일치하는지에 대한 정보는 웹마스터 사무실에서 얻을 수 있다는 점에 유의하는 것이 중요합니다. 구글 서치 콘솔및 Yandex.Webmaster(지금까지는 새 계정의 베타 버전에서만).
구글 서치 콘솔 결과 현재 수표페이지는 여기에서 볼 수 있습니다: 검색 트래픽 => 휴대기기의 조회가능성. 이 페이지는 모바일 친화적 테스트를 사용하여 얻을 수 있는 정보를 복제하지만 Google 로봇이 크롤링할 때 사이트의 모든 색인이 생성된 페이지에 대해 제공됩니다.
Yandex의 새 웹 마스터 사무실에는 아직 대량 현재 확인 데이터가 표시되지 않습니다. 대신 Google의 모바일 친화적 테스트와 유사한 도구를 찾을 수 있습니다. 이를 통해 검색 엔진 알고리즘이 특정 페이지를 스마트폰에서 보기에 편리한 것으로 간주하는지 수동으로 확인할 수 있습니다.
추신
검색 엔진이 사이트와 사이트의 적응성을 인식하는 방식은 매우 중요한 문제이지만 사용자 경험도 마찬가지로 중요합니다. 따라서 공식 기능에 따르면 페이지는 모바일 장치에서 보기 쉽도록 요구 사항을 완전히 충족할 수 있지만 실제로는 "라이브" 사용자의 경우 이러한 편의성이 의심스럽습니다. 이로 인한 직접적인 결과는 전환율 감소, 매출 감소, 행동 요인(이는 차례로 순위에도 영향을 미칩니다.)
일주일 후 이 주기의 다음 기사에서는 방문자의 눈으로 사이트를 보는 방법, 모바일 디스플레이에서 병목 현상을 찾는 방법 및 편의성을 평가하기 위해 사용해야 하는 기준에 대해 알려 드리겠습니다.
결론
모바일 장치에서 사이트를 쉽게 볼 수 있다는 것은 전환과 검색 순위페이지.
사이트의 적응성을 평가하는 첫 번째 단계는 다양한 화면과 다양한 모바일 브라우저에서 테스트하는 것입니다.
검색 엔진이 모바일 장치에 사이트를 표시하는 편의성을 평가하는 방법을 알아보기 위해 Google의 모바일 친화성 테스트와 웹마스터 사무실의 해당 기능(Google Search Console 및 새 사무실 Yandex의 웹마스터).
2015-09-11 8204 4 데니스 압둘린
반응형 디자인은 쉽지 않다 새로운 경향그리고 어느 정도는 필요하다. 이제 러시아어 사이트는 모든 화면에서 좋고 아름답고 편리하게 보이도록 만들어졌습니다.
온라인 서비스 목록을 공유합니다. 웹사이트 응답성 확인. 다른 블로그와 달리 최고의 서비스만을 제공합니다.
공식 uCoz 템플릿 스토어에서는 모든 테마가 반응형입니다. 이것은 판매용 템플릿을 게시하기 위한 주요 조건 중 하나입니다.
Screenfly - 장치 선택으로 사이트 적응성 확인
Screenfly는 인기 있는 화면 크기 목록이 있기 때문에 1위입니다. 휴대 전화, 스마트폰, 노트북 및 데스크탑 컴퓨터. 물론 자신만의 차원을 설정하고 볼 수 있으며, 프록시 서버를 통해 사이트를 보고 스크롤링을 활성화/비활성화하는 것도 가능합니다.
Mattkersley - 한 페이지에 모든 크기
이 프로젝트는 사이트에 대한 링크를 입력하고 페이지에 있는 모든 프레임에 이를 로드한다는 점에서 좋습니다. 5가지 사이즈로 바로 사이트 테스트가 가능합니다. 두 가지 모드가 있습니다. 너비를 테스트하거나 장치 이름과 높이를 표시하십시오.
Responsive.is - 여러 장치에 대한 응답성 테스트
편리하고 좋은 서비스지만 5개 기기에서만 사이트 확인이 가능합니다. 이전 서비스에 비해 매우 작은 규모입니다. 이 모든 크기에서 길을 잃은 사용자의 경우 여기에 나열되지도 않고 장치 아이콘만 표시됩니다.
개인적으로 그런 서비스를 이용하지는 않지만 브라우저의 너비를 줄이십시오. 또한 사이트 적응성 검사 서비스는 동일한 작업을 수행하므로 실제 장치에서 표준으로 프로젝트를 보는 것이 좋습니다. 안드로이드 브라우저그리고 아이폰의 사파리.
러시아어를 포함한 다른 서비스가 있습니다. 처음에는 정확히 가져오고 싶었지만 위에 나열된 사이트를 단순히 복사했으며 기존 텍스트는 "전화"대신에 단순히 번역되었습니다. 예를 들어 "전화"가 표시됩니다.