반응 형 웹 디자인에 가장 적합한 화면 크기는 무엇입니까?

QUOTE : “Google은 웹 사이트 크롤링에 모바일 크롤러와 데스크톱 크롤러라는 두 가지 크롤러를 사용합니다. 각 크롤러 유형은 해당 유형의 기기를 사용하여 페이지를 방문하는 사용자를 시뮬레이션합니다. Google은 사이트의 기본 크롤러로 하나의 크롤러 유형 (모바일 또는 데스크톱)을 사용합니다. Google에서 크롤링하는 사이트의 모든 페이지는 기본 크롤러를 사용하여 크롤링됩니다. 모든 새 웹 사이트의 기본 크롤러는 모바일 크롤러입니다. 또한 Google은 다른 크롤러 유형 (모바일 또는 데스크톱)을 사용하여 사이트의 몇 페이지를 다시 크롤링합니다.이를 보조 크롤링이라고하며 사이트가 다른 장치 유형과 얼마나 잘 작동하는지 확인하기 위해 수행됩니다. ” Google 웹 마스터 가이드 라인, 2020

2015 년 4 월 21 일부터 전 세계적으로 모바일 친화적 인 사이트가 다양한 기기에서 웹 사이트의 순위에 미치는 영향

중소 기업을위한 웹 사이트를 만드는 경우-Google 자연 목록에서 실적이 좋은 웹 사이트를 원한다는 것을 알게 될 것입니다. 검색 엔진 최적화에 관심이 있다는 것을 알게 될 것입니다.

QUOTE : “저는 20 년 동안 전문 SEO를 연습 한 경험이 있습니다.이 SEO 자습서는 Google에서 웹 사이트 순위를 매기는 데 사용하는 팁과 SEO 모범 사례 모음입니다.” Shaun Anderson, Hobo 2020

SEO는 Google이 정량화 한 것처럼 적어도 모바일 사용자를 위해 부분적으로는 좋은 웹 사이트 UX를 기반으로합니다.

p>

QUOTE : “이제 모바일 검색이 데스크톱 검색을 능가하므로 사이트가 모바일 친화적이어야합니다. 이제 Googlebot은 모바일 크롤러를 웹 사이트의 기본 크롤러로 사용합니다. ” Google 웹 마스터 가이드 라인, 2020

현재는 기본적으로 반응 형 웹 사이트 디자인과 모바일 친화적임을 의미합니다. 특히 Google에서는 “인덱스를 모바일 우선으로 만듭니다. “.

2019 년 5 월 ~ 2020 년 5 월 전 세계 데스크톱 화면 해상도 통계

참고로, 다음은 최근 (2020 년)에 기록 된 현재 전 세계 상위 화면 해상도 목록입니다.

전 세계에서 가장 일반적인 데스크톱 화면 해상도 크기

• 1366 × 768 – 23.49 %
• 1920 × 1080 – 19.91 %
• 1536 × 864 – 8.65 %
• 1440 × 900 – 7.38 %
• 1280 × 720 – 4.89 %
• 1600 × 900 – 4.01 %
• 1280 × 800 – 3.33 %

2019 년 5 월 – 2020 년 5 월 전 세계 모바일 화면 해상도 통계

전 세계에서 가장 일반적인 모바일 화면 해상도 크기

• 360 × 640 – 17.91 %
• 375 × 667 – 7.61 %
• 414 × 896 – 6.52 %
• 360 × 780 – 5.56 %
• 360 × 760 – 5.06 %
• 414 × 7 36 – 3.74 %

전 세계 태블릿 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

전 세계에서 가장 일반적인 태블릿 화면 해상도 크기

• 768 × 1024 – 51.98 %
• 1280 × 800 – 7.11 %
• 800 × 1280 – 5.34 %
• 601 × 962 – 4.47 %
• 600 × 1024 – 2.85 %
• 1024 × 1366 – 1.96 %

미국의 데스크톱 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

미국의 상위 화면 해상도 (2020)

미국에서 가장 일반적인 데스크톱 화면 해상도 크기

• 1920 × 1080 – 19.15 %
• 1366 × 768 – 14.91 %
• 1440×900 – 9.59 %
• 1536×864 – 7.7 %
• 1280×720 – 4.89 %
• 1600×900 – 4.28 %
• 1280 × 800 – 3.92 %

미국의 모바일 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

미국에서 가장 일반적인 모바일 화면 해상도 크기

• 414 × 816 – 17.89 %
• 375 × 667 – 14.2 %
• 375 × 812 – 11.97 %
• 360 × 640 – 8.55 %
• 414 × 736 – 8.54 %
• 412 × 846 – 4.7 %
• 360 × 740 – 4.39 %

미국의 태블릿 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

미국에서 가장 일반적인 태블릿 화면 해상도 크기

• 768 × 1024 – 54.68 %
• 800 × 1280 – 5.75 %
• 1280 × 800 – 5.73 %
• 601 × 962 – 5.41 %
• 1024 × 1366 – 3.06 %
• 600 × 1024 -2.57 %

영국의 데스크톱 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

상위 화면 해상도 영국 (2020)

영국에서 가장 일반적인 데스크톱 화면 해상도 크기

• 1920 × 1080 – 20.62 %
• 1366 × 768 – 17.32 %
• 1440 × 900 – 11.65 %
• 1536 × 864 – 8.38 %
• 1280×720 – 5.2 %
• 1280×800 – 4.73 %

2019 년 5 월 – 2020 년 5 월 영국 모바일 화면 해상도 통계

영국에서 가장 일반적인 모바일 화면 해상도 크기

• 375 × 667 – 16.66 %
• 414 × 816 – 14.11 %
• 360 × 640 – 9.95 %
• 375 × 812 – 8.55 %
• 360 × 740 – 5.67 %
• 360 × 780 – 5.39 %
• 414 × 736 – 4.75 %

영국의 태블릿 화면 해상도 통계 2019 년 5 월 – 2020 년 5 월

영국에서 가장 일반적인 태블릿 화면 해상도 크기

• 768 × 1024 – 58.31 %
• 1280 × 800 – 6.92 %
• 800 × 1280 – 6.02 %
• 601 × 962 – 3.68 %
• 600 × 1024 – 3.26 %
• 1024 × 1366 – 1.71 %

전 세계 데스크톱, 모바일 및 태블릿 시장 점유율

전 세계 데스크톱, 모바일 및 태블릿 시장 점유율

1. 모바일 – 50.48 %
2. 데스크톱 – 46.51 %
3. 태블릿 – 3.0 %

* 참고 – 위의 통계는 신뢰할 수 있지만 하나의 출처에서 나온 것이므로 알 수없는 방식으로 왜곡 될 수 있습니다. 그래프는 http://statcounter.com/에서 제공합니다.

모든 브라우저에서 똑같이 보이는 사이트를 어떻게 디자인 할 수 있습니까 & 해상도?

그럴 수 없습니다.

모든 브라우저, 플랫폼 및 화면 해상도에서 동일하게 보이도록 웹 사이트를 디자인하는 것은 불가능하므로 시도하지 마십시오.

방문자 브라우저 설정에 맞게 확장 및 축소되는 너비 (%)를 사용하여 디자인을위한 표없이 유동적 인 레이아웃을 선택하거나 거의 동일한 효과를 얻을 수있는 반응 형 디자인 솔루션을 고려할 수 있습니다.

Google은 반응 형 디자인을 선호합니다. 이는이를 채택한 사람들에게 희소식입니다.

QUOTE : “반응 형 웹 디자인을 사용하고 올바르게 구현하는 사이트 모든 데스크톱 콘텐츠 및 마크 업을 포함하는 동적 게재는 일반적으로 아무것도 할 필요가 없습니다. ” Google 2017 년 11 월

모바일이 떠오르고 있습니다. 따라서 새 웹 사이트를 개발하는 경우 처음부터 웹 사이트가 실제로 얼마나 모바일 친화적인지 생각해야합니다.

실제로 코딩 할 때 단순하게 유지하는 것을 목표로합니다.

당신은 – 할 수 없습니다 – 모두를 기쁘게 – 그리고 어떤 웹 사이트 크기가 가장 좋은지에 대한 질문은 여전히 뜨거운 주제입니다. 저보다 사용 성과 UX 전문 지식이 더 많은 디자이너들이 토론합니다.

경험을 통해 제가 아는 것은 잠재 고객과 이들이 사용하는 장치를 식별하고 웹 사이트를 구축하는 것이 매우 중요하다는 것입니다. 해당 잠재 고객에게 적합합니다.

그리고 해당 잠재 고객에는 GOOGLEBOT이 포함됩니다.

모바일 사이트가 다른 URL로 리디렉션됩니까 & 귀하의 사이트입니까?

그건 이상적이지 않습니다. 실제로 그런 적이 없습니다.

예전으로 돌아가서 일부 사람들은 웹 사이트의 텍스트 전용 버전을 사용하여 콘텐츠를 제작했습니다. 웹 요소를 지원하지 않는 사용자 / 브라우저 용 사이트 – (보통 헛된) 콘텐츠의 접근성을 높이기위한 시도입니다.

W3C는 다른 모든 방법이 실패 할 경우 추천하는 데 사용하기도했습니다.

다른 방법으로 준수를 수행 할 수없는 경우 웹 사이트가이 부분의 조항을 준수하도록하기 위해 동등한 정보 또는 기능이있는 텍스트 전용 페이지가 제공되어야합니다. 텍스트 전용 페이지의 내용은 기본 페이지가 변경 될 때마다 업데이트됩니다. 섹션 508

접근성을 위해 방문자에게 하나의 URL을 전달하는 것이 항상 이상적이며, 모바일 또는 스마트 폰 콘텐츠를 전달할 때 차이가 없습니다. 사이트의 모바일버전을 만드는 방법을 고려 중입니다. 물론 Google이 모바일 우선 인덱스로 전환하는 경우에는 훨씬 더 중요 할 수 있습니다.

Google은 모바일에서 주로 귀하를 평가할 수 있습니다. 가까운 장래에 경험할 수 있습니다. 따라서 Google SERP에서 곧 보게 될 큰 변화를 알아야합니다.

Google이 방문자인 경우 일반적으로 제공하는 것이 훨씬 더 중요합니다. 검색 엔진에 대한 표준 URL 문제로 인해 하나의 URL이 발생했습니다. 이는 얼마 전에 표준 링크 요소를 구현하기 이전의 경우였습니다.

따라서 이상적인 상황은 항상 하나의 URL을 제공하는 것입니다.

스마트 폰콘텐츠 (일반적으로 일반적인 웹 콘텐츠로 간주 됨)가있는 경우 l HTML 페이지, 더 작은 디스플레이를 위해 레이아웃이 조정 됨) rel = canonical을 사용하여 데스크톱 버전을 가리킬 수 있습니다. 이를 통해 웹 검색을위한 데스크톱 버전에 집중할 수 있습니다. 사용자가 스마트 폰으로 해당 데스크톱 버전을 방문하면 모바일 버전으로 리디렉션 할 수 있습니다. 이는 URL 구조에 관계없이 작동하므로 스마트 폰-모바일 사이트에 하위 도메인 / 하위 디렉터리를 사용할 필요가 없습니다. 그러나 더 좋은 방법은 동일한 URL을 사용하고 리디렉션없이 적절한 버전의 콘텐츠를 표시하는 것입니다. John Mueller, Google

Google의 권장 사항을 무시하는 것은 현명한 조치가 아닙니다.

QUOTE : 요약하자면 현재 Google의 크롤링, 색인 생성 및 순위 시스템은 일반적으로 데스크톱을 기준으로합니다. 페이지 콘텐츠의 버전으로, 해당 버전이 모바일 버전과 크게 다를 때 모바일 검색 자에게 문제를 일으킬 수 있습니다. 모바일 우선 색인 생성은 색인 생성 및 순위 지정을 위해 콘텐츠의 모바일 버전을 사용하여 주로 모바일 사용자가 원하는 정보를 찾는 데 도움이된다는 것을 의미합니다. 웹 마스터는 스마트 폰 Googlebot의 크롤링이 크게 증가하는 것을 볼 수 있으며 결과의 스 니펫과 Google 캐시 페이지의 콘텐츠는 페이지의 모바일 버전에서 가져온 것입니다.Google 2017 년 11 월

Google은 사이트가 모바일 우선 색인에 대해 준비되었는지 확인하기 위해 다음 팁을 제공하지만 기본적으로 반응 형 웹 디자인을 사용하는 경우 이 변경으로 최소한의 문제가 있어야합니다.

• 사이트의 모바일 버전에도 중요한 , 고품질 콘텐츠. 여기에는 일반적인 크롤링 및 색인 생성이 가능한 형식의 텍스트, 이미지 (대체 속성 포함) 및 동영상이 포함됩니다.

• 구조화 된 데이터는 사용자가 좋아하는 색인 생성 및 검색 기능에 중요합니다. 사이트의 모바일 버전과 데스크톱 버전 모두에 있어야합니다. 구조화 된 데이터 내의 URL이 모바일 페이지에서 모바일 버전으로 업데이트되었는지 확인합니다.

• 메타 데이터는 사이트의 두 버전 모두에 있어야합니다. 색인 생성 및 제공을 위해 페이지의 콘텐츠에 대한 힌트를 제공합니다. 예를 들어 사이트에있는 모든 페이지의 두 버전에서 제목과 메타 설명이 동일한 지 확인하세요.

• 별도의 모바일 URL (m.-dot 사이트)과 상호 연결하기 위해 변경할 필요가 없습니다. 별도의 모바일 URL을 사용하는 사이트의 경우 기존 링크 rel = canonical 및 링크 rel = alternate 요소를 이러한 버전간에 유지하세요.

• 별도의 모바일 URL에서 hreflang 링크를 확인하세요. 국제화를 위해 link rel = hreflang 요소를 사용하는 경우 모바일 URL과 데스크톱 URL을 별도로 연결하세요. 모바일 URL의 hreflang은 다른 모바일 URL의 다른 언어 / 지역 버전을 가리켜 야하며 마찬가지로 여기에서 hreflang 링크 요소를 사용하여 데스크톱을 다른 데스크톱 URL과 연결해야합니다.

• 사이트를 호스팅하는 서버에 잠재적으로 증가 된 크롤링 속도를 처리 할 수있는 충분한 용량이 있는지 확인합니다. 이는 반응 형 웹 디자인 및 동적 게재를 사용하는 사이트에는 영향을 미치지 않으며 모바일 버전이 m.example.com과 같은 별도의 호스트에있는 사이트에만 영향을 미칩니다.

사용자는 한 페이지 아래로 스크롤 할 것으로 예상

첫 번째 기준에서 알 수 있듯이 스크롤은 항상 주요 고려 사항입니다. 사용자는 일반적으로 필요하지 않은 경우 스크롤하는 것을 좋아하지 않았습니다.하지만 수년에 걸쳐 변경되었습니다.

따라서 디자인 할 때 사용자가 스크롤 만하면 볼 수있는 정도를 고려해야합니다. 화면 전체 또는 두 개. 5 개 이상의 화면은 페이지에 너무 많은 사본이있을 수 있음을 나타냅니다. 물론 이것은 일부 기사가 심층적 인 정보를 의미하고 사용자가 일부 페이지 콘텐츠 및 콘텐츠 유형을보기 위해 조금 더 기다려야한다는 견해와 균형을 이룹니다.

스크롤 및 초기 가시성은 분명히 화면 크기에 따라 달라집니다. 화면이 클수록 스크롤없이 볼 수있는 부분에 더 많은 콘텐츠가 표시되고 스크롤이 덜 필요합니다.

반응 형 모바일 사이트로 변경하면 Google에서 더 많은 트래픽이 발생할까요?

꼭 그런 것은 아니지만 그럴 수도 있습니다.

Google 최적화와 관련된 많은 것입니다. 모바일 친화적 인 웹 사이트를 구축하는 것은 이미 발생하고있는 트래픽을 유지하는 데 다소 도움이되지만 더 이상 무료로 제공되는 것은 아닙니다. Google의 트래픽입니다.

모바일 방문자로부터 많은 트래픽을 아직 얻지 못했다면 – Google의이 업데이트가 트래픽 수준에 눈에 띄는 영향을 미칠지 확실하지 않습니다 (최소한 분석에서 ) 처음에는-그러나 시간이 지남에 따라 탐색하는 것은 매우 중요한 도전이 될 것입니다.

품질 Google과 그 사용자에 의해 다시 한 번 ity 기준이 높아지고 있습니다. 더욱 경쟁력있는 유기적 SERP에서 경쟁하고 싶다면 이는 소규모 기업이 극복해야 할 또 다른 장애물입니다.

장기적으로 –이 모바일 전환은 사용자에게만 좋은 일이 될 수 있습니다.하지만 단기적으로는 모바일 전환율이 데스크톱보다 낮은 경우가 많으므로 단기적으로는 소규모 비즈니스 전환율에 어떤 영향을 미치는지 확인하는 것이 흥미로울 것입니다.

Google은이 모바일 친화적 알고리즘이 Google Penguin 및 Google Panda 알고리즘보다 SERP에 더 큰 영향을 미칠 것이라고 말했습니다. 시간이 지남에 따라 더 많은 것을 알게 될 것입니다.

방법 사이트에서 중요한 모바일 사용성 문제를 확인하려면

Google Search Console

Google Search Console (일명 Google 웹 마스터 도구)에서 모바일 오류를 추적하고 오류가 사라지는 것을 확인할 수 있어야합니다. 사이트가 올바르게 구성된 경우 시간입니다.

사이트에서 모바일 친 화성을 테스트하는 도구

• Search Console URL 검사 도구
• Pagespeed Insights
• Think With Google
• 모바일 친 화성 테스트

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

파트 1 – PageSpeed Insights, 모바일 친 화성 테스트 및 모바일 사용 가능성

파트 2 – 뷰포트, 확대 / 축소 및 플러그인

파트 3 – 탭 대상, 여백 및 글꼴 크기

파트 4 – 리디렉션

웹 개발자는 다른 사이트 속도가 Google의 순위 요소이므로 유용한 게시물 :

QUOTE : “웹 사이트의 모바일 버전은 이상적으로는 3 초 이내에로드되어야하며 빠를수록 좋습니다. 매우 느린 사이트는 부정적인 순위 요소가 될 수 있습니다 (Google에서 확인). 충족해야 할 임계 값이나 속도 점수가 설정되어 있지 않습니다. 가능한 한 빨리 페이지를 만들 수 있습니다. ” Shaun Anderson, Hobo 2020

면책 조항

면책 조항 : ” 내가 제공 한 정보가 정확한지 확인하기 위해 모든 노력을 기울였습니다. 그것은 조언이 아닙니다.; 나는 오류나 누락에 대해 어떠한 책임이나 책임도지지 않습니다. 저자는 제 3 자 사이트 또는 제 3 자 서비스를 보증하지 않습니다. 귀하의 책임하에 타사 사이트를 방문하십시오. 저는 Google 또는 기타 제 3 자와 직접 제휴하지 않습니다. 이 웹 사이트는 분석 및 기본 웹 사이트 기능을 위해서만 쿠키를 사용합니다. 이 기사는 법률 자문이 아닙니다. 저자는이 사이트에 제시된 데이터에 액세스 할 때 발생할 수있는 어떠한 책임도지지 않습니다. 내부 페이지에 대한 링크는 내 콘텐츠와 서비스를 홍보합니다.” Shaun Anderson, Hobo