반응 형 웹 디자인을위한 최상의 화면 크기는 무엇입니까?

8월 23, 2020

공개:”본 문서는 개인의 의견의 연구에 기초한 내 경험의 거의 20 년이다. 이 페이지에는 제 3 자 광고가 없거나 어떤 종류의 링크가 있습니다. 제 3 자 사이트에 대한 외부 링크는 나에 의해 검토됩니다. 면책 조항. “숀 앤더슨,쓰레기

이 없다 하나 최고의 화면 크기 디자인이다. 웹 사이트는 다른 브라우저와 플랫폼의 모든 화면 해상도에서 책임감 있고 빠르게 변환해야합니다., 접근 가능. 모바일 친화적. 먼저 청중을위한 디자인. 360×640~1920×1080 디자인.

위한 디자인을 바탕 화면을 표시합에서 1024×768 을 통해 1920×1080
디자인에 대한 모바일 디스플레이를 이용 360×640 을 통해 414×896
디자인을 위해 태블릿 디스플레이에 601×962 을 통해 1280×800
체크 Google 애널리틱스와 최적화에 대한 타겟 고객에서 가장 일반적인 해상도 크기
하지 않습을 위한 디자인의 모니터 크기 또는 화면 해상도입니다. 화면 크기와 브라우저 창 상태는 방문자마다 다릅니다.
디자인은 반응이 빠르고 빨라야합니다., 현재 사용자의 창 크기로 변환하는 액체 또는 반응 형 레이아웃을 사용하십시오.
모니터링 Google 검색 콘솔 모바일 친화적이고 유용성 알림

그것은 여전히 좋아 보이는 일에 모든 크기는 왜*사용*권고 고도 액세스할 수 있는 액체 레이아웃을 사용하여 백분율 너비를 제어하는 레이아웃이 있습니다. 이제 추천은 반응 형 웹 사이트 템플릿입니다.,

세 가지 주요 기준을 최적화 하기 위한 페이지 레이아웃에 대한 특정한 화면 크기:

웹 페이지 초기 가시성:모든 주요 정보를 볼 수 있어 사용자가 볼 수 있도록 그것은 스크롤하지 않고? 이 사이에 균형을 얼마나 많은 항목은 다음과 같 대 얼마나 세부사항은 각 항목에 대해 표시됩니다.
웹 페이지 가독성:할당 된 너비가 주어지면 다양한 열의 텍스트를 읽는 것이 얼마나 쉬운가요?
웹 페이지 미학:요소가이 화면 크기에 적합한 크기와 위치에있을 때 페이지가 얼마나 잘 보입니까?, 모든 요소가 올바르게 줄을합니까-즉,사진 바로 옆에 캡션 등이 있습니다.?

사용성 지침은 또한 크기의 전체 범위에서 세 가지 기준을 모두 고려하는 것이 좋습니다. 360×640 에서 1920×1080 화면 해상도로 브라우저 창을 확인하십시오.

귀하의 페이지는 전체 해상도 범위에 걸쳐 모든 기준에 높은 점수를해야한다.

귀하의 페이지는 또한 그러한 극단이 덜 중요하지만 더 작고 더 큰 크기에서 작동해야합니다.,

지만 같은 사용자가 확실하게 액세스할 수 있는 사이트,그들에게 보다 좋은 디자인은 때로는 허용되는 타협이다.,

Top Ten 가장 일반적인 스크린 해상도

방문자의 분석이 거의 반 만에 방문자는 6 개월의 2020:

반응형 웹사이트 템플릿은 좋은 베

견적:”응답 웹 디자인:를 제공합 같은 HTML 코드에 관계없이 동일한 URL 을 사용자 장치(예를 들어,데스크톱,태블릿 모바일,비주얼 브라우저),그러나 렌더링할 수 있을 기반으로 다르게 표시 화면 크기입니다. Google 은 구현 및 유지 관리가 가장 쉬운 디자인 패턴이기 때문에 반응 형 웹 디자인을 권장합니다.,”Google 개발자 안내,2020 년

에서는 오늘날의 세계 많은 사람들이 사용하는 휴대용 기기(태블릿과 스마트폰)으로 웹을 탐색하고 반응형 웹사이트 디자인(RWD)로 떠오르고 있다 매우 가능성이 높은 솔루션(그것은 여전히 논의에 의해 애호가)하여 화면 크기에 도전합니다.

이 방법에서 이동하는 고정 폭 웹사이트하고 대신 사용하여 미디어 쿼리에 CSS 스타일 시트를 만드 웹사이트에 응답하는 크기가 다른 뷰포트의 휴대용 장치와 작은 화면입니다.,

그래서 무엇이든 장치는 사람이 될 수 있을 사용하여 귀하의 웹 사이트를 볼 수 있을 그들에게 최대한 경험을 가능합니다.

테이블의 내용을

구글을 선호하 모바일 사이트

Google 지 흐름의 온라인 상거래 및 그들은 단지 결정해야 합 디자인에 대한 만족스러운 사용자 경험을 여러 기기에서 당신이 원하는 경우를 기대하여 순위가 높은 경쟁력있는 키워드를 사용합니다.

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

April21,2015,전 세계적으로,어떻게 모바일 사이트가 영향을 받 랭킹 성능을 위해 웹사이트에 걸쳐 다양한 장치입니다.

경우 웹사이트에 대한 작은 기업에 당신은 그들이 원하는 웹사이트는 잘 실행할 것이 구글에서 유기성이 알고 있는 그들에 관심이 있는 검색 엔진 최적화:

견적:”나는 20 년 동안의 경험이 연습 전문 SEO. 이 SEO 튜토리얼은 내가 구글에서 웹 사이트 순위를 사용하는 팁과 SEO 모범 사례의 내 모음입니다.,”숀 앤더슨,쓰레기 2020

SEO 은 지금 따라 부분에 좋은 웹사이트 UX,Google 를 정량화,그것도 모바일 사용자를 위해.

견적:”모바일 검색을 초과하는 데스크톱 검색은,그것의 중요한 귀하의 사이트 모바일 친절합니다. Googlebot 은 이제 웹 사이트의 기본 크롤러로 모바일 크롤러를 사용합니다.”Google 웹마스터 가이드라인,2020 년

에서는 기본적으로는 반응형 웹사이트 디자인 및 모바일용으로 특히 Google”우리 모바일 인덱스-먼저”.,

데스크탑 화면 해상도 통계 세계적인 수 있습 2019–수 있습 2020

참조를 위해 다음의 목록이 현재 최고 화면 해상도로 전 세계적으로 기록된 최근(2020):

가장 일반적인 바탕 화면 해상도 크기는 전 세계

1366x768–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–수 있습 2020

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

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

태블릿 화면 해상도 통계 세계적인 수 있습 2019–수 있습 2020

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

768×1024–51.98%
1280×800–7.11%
800×1280–5.,34%
601×962–4.47%
600×1024–2.85%
1024×1366–1.96%

데스크톱 스크린 해상도에서 통계 미국 May2019–수 있습 2020

Top 화면 해상도로 미국에서(2020)

가장 일반적인 바탕 화면 해상도의 크기에 United States Of America

1920×1080–19.15%
1366x768–14.91%
1440×900–9.59%
1536×864–7.7%
1280×720–4.89%
1600×900–4.28%
1280×800–3.,92%

모바일 통계 화면의 해상도에서 우리할 수 있습 2019–수 있습 2020

가장 일반적인 모바일 화면 해상도의 크기에 United States Of America

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–수 있습 2020

가장 일반적인 태블릿 화면 해상도의 크기에 United States Of America

768×1024–54.,68%
800×1280–5.75%
1280×800–5.73%
601×962–5.41%
1024×1366–3.06%
600×1024-2.57%

데스크톱 스크린 해상도에서 영국 May2019–수 있습 2020

최고 화면 해상도에서 영국(2020)

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

1920×1080–20.62%
1366x768–17.32%
1440×900–11.65%
1536×864–8.38%
1280×720–5.2%
1280×800–4.,73%

모바일 통계 화면의 해상도는 영국에서 May2019–수 있습 2020

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

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%

태블릿 화면 해상도에서 영국 May2019–수 있습 2020

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

768×1024–58.,31%
1280×800–6.92%
800×1280–6.02%
601×962–3.68%
600×1024–3.26%
1024×1366–1.71%

데스크탑 vs 모바일 vs 태블릿 시장이 전 세계적으로 공유

모바일–50.48%
데스크탑–46.51%
태블릿 3.0%

*노트 통계 위에서 하나(이기는 하지만 믿을만한)소스,그래서 될 수 있는 비뚤어진 방법으로 우리가 알고하지 않을 수 있습니다. http://statcounter.com/에 의해 제공된 그래프.,

모든 브라우저&해상도에서 동일하게 보이는 사이트를 어떻게 디자인 할 수 있습니까?모든 브라우저,플랫폼 및 화면 해상도에서 동일하게 보이도록 웹 사이트를 설계하는 것은 불가능하므로 시도하지 마십시오.

선택할 수 있습을 위한 유체 없이는 레이아웃 테이블의 디자인으로,%너비는 확장하고 계약에 맞게 방문자는 브라우저 설정 또는 고려할 수 있습으로 찾고 응답 디자인 솔루션을 달성하는 동일한 것입니다.,

Google 호의 반응형 디자인은 사람들을위한 좋은 소식을 채택했다:

견적:”사이트 이용하의 반응형 웹 디자인과 올바로 구현하는 동적인 제공(을 포함하는 모든 콘텐츠 및 태그)일반적으로 아무것도 할 필요가 없습니다.”구글 NOV2017

모바일이 증가하고 있는 경우 그렇게 개발하고 새로운 웹 사이트–당신은 방법에 대해 생각해야 합 모바일 웹사이트 정말에서 시작합니다.실제로 물건을 코딩 할 때 일을 단순하게 유지하는 것을 목표로합니다.,

지 않을 것입니다 수 없습니다–모두를하시기 바랍고 질문하는 웹사이트 크기가 최고입니다 여전히 뜨거운 주제에 대한 논쟁에 의해 디자이너들과 더 많은 가용성과 UX 전문 지식을 보다 I.

내가 무엇을 알기에서의 경험은 그것의 중요한 중요성을 식별하기 위해 관객들과 장치들이 사용하고,귀하의 웹사이트 구축(대체)하는 관객입니다.

그리고 그 청중은 GOOGLEBOT 을 포함합니다.

모바일 사이트가 다른 URL&사이트의 버전으로 리디렉션됩니까?

글쎄,그건 이상적이지 않아. 그것은 사실,적이있다.,

방법을 다시 일에서–일부는 민속 사용되는 텍스트만 버전 웹사이트의 콘텐츠를 생산 하위 사용자는 브라우저 지원하지 않는 요소의 자신의 웹 사이트에서(일반적으로 헛된)시도하여 그들의 콘텐츠에 액세스할 수 있습니다.

W3C 심지어는 그것이 내가 생각하는 경우 다른 모든지 못했습니다:

텍스트만의 페이지와 동등한 정보 또는 기능을 제공될 것 웹 사이트를 만들의 규정을 준수하고,이 부분을 때 규정 준수 달성될 수 없습니다., 텍스트 전용 페이지의 내용은 기본 페이지가 변경 될 때마다 업데이트됩니다. SECTION508

그것은 항상 이상적인 중 하나를 제공한 URL 을 방문자에 대한 접근성을 목적으로 차이가 없을 전달할 때 모바일이나 스마트 폰의 콘텐츠에 대해 생각하는 경우를 만들”a”모바일 버전의 사이트입니다. 구글이 모바일 우선 인덱스로 이동하는 경우 이것은 물론,잘 더욱 중요 할 수있다.,

Google 수 있습니다 아주 잘 평가를 주로 모바일에서 경험을 가까운 장래에–그래서 우리는 모두 정말 알고 있어야의 큰 변화는 우리가 볼 수 있습니다 아주 빨리 구글의 상승.

Google 이’방문자’일 때 일반적으로 검색 엔진에 대한 정식 URL 과제로 인해 단 하나의 URL 을 제공하는 것이 더 중요합니다.

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

경우 당신은”스마트”가 컨텐츠(이는 우리가 참으로 정상적인 웹 콘텐츠,그것은 일반적으로 정상적인 HTML 페이지에서 조정 가능한 레이아웃을 위한 작은 디스플레이)사용할 수 있습니다 rel=표준을 바탕 버전입니다. 이것은 우리가 웹 검색을위한 데스크톱 버전에 집중하는 데 도움이됩니다. 사용자가 스마트 폰으로 해당 데스크톱 버전을 방문하면 모바일 버전으로 리디렉션 할 수 있습니다. 이것은 URL 구조에 관계없이 작동하므로 스마트 폰 모바일 사이트에 하위 도메인/하위 디렉토리를 사용할 필요가 없습니다., 그러나 더 나은이 동일한 Url 을 사용하여 적합한 버전의 콘텐츠없이 리다이렉 존 Mueller,구글

을 무시하고는 Google 의 권고 사항은 자주하지 않 스마트 이동.

견적:정리해 보면,현재 우리의 crawling,indexing, 랭킹 시스템은 일반적으로 살펴 데스크탑 버전의 페이지의 콘텐츠는 문제가 발생할 수 있습니다바일 검색을 때는 버전에서 크게 다릅 모바일 버전입니다., 모바일 최초의 인덱싱을 의미는 우리가 사용하여 모바일 버전의 콘텐츠 인덱싱하고 순위,더 나은 도움을 우리는 주로 모바일 사용자가 원하는 정보를 쉽게 찾을 수 있습니다. 웹마스터는 것이 크게 증가 크롤링에 의한 스마트폰,Googlebot 및 조각 결과에서,뿐 아니라 콘텐츠에 구글 페이지를 캐시 될 것입니다,모바일 버전에서의 페이지입니다., Google Nov2017

Google 이 제공하기 위해 다음 사이트가 포함되어 있는지 확인에 대한 준비 모바일 인덱스의 첫 번째,하지만 본질적으로 사용하는 경우에는 반응형 웹 디자인에 대한 템플릿 사이트에 당신이 있어야 하는 최소한의 문제로 이러한 변경

는지 확인 사이트의 모바일 버전 또한 중요하고,높은 품질의 내용입니다. 여기에는 텍스트,이미지(alt-attributes 포함)및 비디오(일반적인 크롤링 가능 및 색인 가능 형식)가 포함됩니다.,
구조화된 데이터에 중요한과 색인,검색 기능을 사용자가 사랑에:그것이 있어야 모두에서 모바일과 데스크탑 버전의 사이트입니다. 구조화된 데이터 내의 Url 이 모바일 페이지의 모바일 버전으로 업데이트되는지 확인합니다.
메타데이터 존재해야에서 두 버전 모두의 사이트입니다. 인덱싱 및 서빙을위한 페이지의 콘텐츠에 대한 힌트를 제공합니다., 예를 들어 제목과 메타 설명이 사이트의 모든 페이지의 두 버전 모두에서 동등한지 확인하십시오.
변경할 필요가 없음에 대한 연결과 분리 모바일 Url(m.-점 사이트). 별도의 모바일 Url 을 사용하는 사이트의 경우 기존 link rel=canonical 및 link rel=대체 요소를 이러한 버전간에 유지하십시오.
별도의 모바일 Url 에서 hreflang 링크를 확인하십시오., 국제화를 위해 link rel=hreflang 요소를 사용하는 경우 모바일 및 데스크톱 Url 을 별도로 연결합니다. 모바일 Url’hreflang 지적해야 한 다른 언어/지역 버전에 다른 모바일 Url 와 마찬가지로 링크를 바탕으로 다른 데스크톱을 사용하여 Url 을 hreflang 링크 요소가있다.
도록 서버를 호스팅 사이트를 처리하는 데 충분한 용량으로 증가 크롤링율입니다., 에 영향을 미치지 않는다는 사이트를 사용하여 응답성이 뛰어난 웹 디자인 및 동적,봉사만이트 사이트 모바일 버전에 별도의와 같은 호스트 m.example.com.

사용자가 기대하는 페이지를 아래로 스크롤 스

으로 첫 번째 기준은 알 수 있듯이,스크롤은 항상 중요한 고려 사항입니다. 사용자는 일반적으로 필요하지 않은 경우 스크롤을 좋아하지 않았다-비록,수년에 걸쳐,그 변경.따라서 디자인 할 때 화면 전체 또는 두 개만 스크롤하면 사용자가 얼마나 많이 볼 수 있는지 고려해야합니다., 5 개 이상의 화면 긴 페이지에 너무 많은 복사본이 있을 수 있습니다 당신에 게 표시 될 수 있습니다. 물론,이것은 균형을 볼 것을 몇 가지 기사를 의미 깊이있는 정보를 조각하고 사용자가 기대하는 것이 조금 더 기다려을 보려면 페이지 내용과 콘텐츠 유형입니다.

모두 스크롤력 분명히 따라 달라집에 스크린 크기:더 큰 스크린을 보여 더 많은 콘텐츠를 겹의 위와 스크롤합니다.

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

반드시 그런 것은 아니지만 어쩌면.,

으로 많은 것을 응용 프로그램이 최적화–모바일 사이트는 더 많거나 적은 유지 보장하기 위해 트래픽을 이미 받고,반드시 아주 당신이 더 이상 무료로 트래픽을 수 있습니다.

지 않는 경우에 이미 트래픽이 많이 모바일에서 방문자 좋아하지 않는 경우 이이트에서 Google 에서 눈에 띄는 효력에 교통 수준의(웹로그 분석에서 이상)초기에서–그러나 시간이 지남에 따–그것은 아마 매우 중요한 도전을 이동합니다.,

랑은 발생되는––다시 구글에 의해,그리고 그 사용자와 경쟁 할 경우에 더욱 경쟁력있는 유기농 상승이 아직 또 다른 장애물은 작은 기업을 통해 얻을 수 있습니다.

장기적으로 이 모바일 변환 될 수 있는 좋은 것은 사용자에 대한–그러나 단기적으로–그것은 흥미로운 일이 될 것이 어떤 효과를 볼에 있는 작은 기업은 전환율–으로의 변환 요금 모바일을 통해 자주보다 적은 있습니다.,

Google 은이 모바일 친화적 인 알고리즘이 Google Penguin 과 Google Panda 알고리즘 모두보다 SERPs 에 더 큰 영향을 미칠 것이라고 말했습니다.

을 확인하는 방법에 대한 중요하 모바일 사용성 사이트에서 자주 발생하는 문제

Google 검색 콘솔

을 추적할 수 있어야 합 모바일에 오류가 Google 검색 콘솔(일명 구글 웹마스터 도구)시 오류를 시간이 지남에 따라 사라지는 경우에 당 사이트가 올바르게 구성되어 있습니다.,”>

Part1–도하십시오 Insights,모바일 시험 및 모바일용성

Part2–뷰포트 확대하고 플러그인

3 부–탭 대상, 여백과 글꼴 크기

4 부–리디렉션

웹 개발자들을 찾을 수 있어야 나는 다른 최근 게시 유용한 지금 해당 사이트의 속도는 순위 요소에 구글:

견적:”의 모바일 버전에 웹 사이트를 이상적으로 부하에서의 3 초과 더 빨리 더 나은입니다., 매우 느린 사이트는 부정적인 순위 요소 일 수 있습니다(Google 에서 확인). 단지 가능한 한 빨리 페이지를 만들기 위해,충족 할 수있는 설정 임계 값 또는 속도 점수가 없습니다.”숀 앤더슨,쓰레기 2020

면책 조항

조건:”는 동안 만들었을 보장하기 위해 모든 노력을 기울일 것이 제공한 정보는 정확하지 않은 조언이다.;나는 어떤 오류 또는 누락에 대한 책임이나 책임을 받아 들일 수 없습니다. 저자는 제 3 자 사이트 또는 제 3 자 서비스를 보증하지 않습니다. 자신의 위험에 따라 제 3 자 사이트를 방문하십시오., Google 또는 기타 제 3 자와 직접 제휴하지 않습니다. 이 웹 사이트는 분석 및 기본 웹 사이트 기능에만 쿠키를 사용합니다. 이 문서는 법률 자문을 구성하지 않습니다. 저자는이 사이트에 제시된 데이터에 액세스 양식을 발생할 수있는 책임을지지 않습니다. 내부 페이지에 대한 링크는 내 자신의 콘텐츠 및 서비스를 홍보합니다.”Shaun Anderson,Hobo