2020 년 현재 세계에서 35 억 명의 스마트 폰 사용자가 있습니다. 이는 전 세계 인구의 45%입니다. 2019 년 현재 사람들은 9000 개 이상의 별개의 장치로 인터넷에 액세스했습니다. 모든 사용자는 액세스하는 모든 웹 사이트가 모바일 장치에서 완벽하게 렌더링 될 것으로 기대합니다. 즉,웹 사이트 개발자는 전 세계에 걸쳐 화면 크기의 다수에 표시되는 웹 사이트를 디자인해야합니다.즉,반응 형 디자인이 필요합니다.,그러나 모든 디자이너가 알고 있듯이 반응 형 디자인을 실행하는 것은 디자인 할 화면 크기를 아는 것으로 시작해야합니다. 이 기사에서는이 질문을 탐구하고 반응 형 디자인을위한 최고의 비명 크기에 대해 설명합니다.
반응 형 디자인이란 무엇입니까?
반응 형 웹 디자인은 모바일,태블릿 및 데스크톱 장치에서 잘 작동하는 웹 사이트를 만드는 디자인 전략을 의미합니다. 웹사이트 디자인 반응 위험을 멀리 하는 것이 상당수의 사용자 사용자의 80%가 주장하는 그들이 거부 웹사이트는 잘 작동하지 않는 기능을 가지고 있습니다.,
또한 Google 은 순위에 대한 매개 변수로”모바일 친화”를 살펴 봅니다. Google Webmaster Central 블로그를 인용하기 위해
“4 월 21 일(2015 년)부터 순위 신호로 모바일 편의성 사용을 확대 할 예정입니다. 이러한 변화에 영향을 미칠 모바일 검색을 모든 언어로 전 세계에 큰 영향을 미칠 것에서 우리의 검색 결과입니다. 따라서,사용자가를 얻을 쉽게 찾을 관련성이 높은-품질 검색 결과 최적화를 위한 그들의 장치입니다.”
그렇다면 이상적인 반응 형 화면 크기는 어떻게 찾습니까?,
참고:이유를 이해하기 반응형 디자인은 필수적인 웹사이트 성공을 이해해야 한 광고는 계속 증가하는 자연의 장치 조각. 이 현상에 대한 최신 정보를 얻기 위해 장치 조각화에 우리의 전자 책을 다운로드합니다.,
이미지원
에 따르면 세계적인 스크린 해상도 통계(Nov2018–Nov2019),가장 일반적으로 사용되는 해상도습니다:
무료로 응답에 대한 테스트 일반적으로 사용되는 해상도
를 시험하는 시험의 응답의 웹 사이트에서 실제 장치입니다.물론 모바일 편의성에 중점을 두었다고해서 데스크톱 장치를 포기한다는 의미는 아닙니다. 아래 차트에서 알 수 있듯이 데스크톱 장치는 여전히 인터넷 사용의 상당한 부분을 차지합니다.,
이미지원
- 모바일–52.03%
- 데스크탑–45.17%
- 태블릿–2.,8%
에 따르면 마이크로 소프트의 문서,
의 거대한 숫자로 장치를 대상과 스크린 크기에 걸쳐 윈도우 10 생태계 보다는 오히려 UI 를 최적화하는 각 장치는 추천한 디자인을 위해 몇 가지 핵심 폭 카테고리(또한”이라는 중단점”):
- 작은(보다 작은 640px)
- 중간(641px 을 1007px)
- 형(1008px 고 큰)
에도 불구하고 이 정보를 기억이 없다는 표준 화면 크기 위해 웹 디자인입니다., 의 성격에 따라 웹사이트,사용자가 사용할 수 있는 특정 장치를 제공하지 않습 화면 크기와 해상도 위에서 언급된다. 웹 디자인에 적합한 화면 크기를 파악하려면 분석에 투자하십시오. 타겟 고객이 가장 많이 사용할 가능성이 높은 것을 찾아보십시오. 해당 장치가 앞서 언급 한 해상도를 준수하지 않으면 믹스에 포함 시키십시오.,
1-클릭 액세스를 응답 검사 도구
구현하기 위한 모범 사례에 대해 응답자
훨씬 더 쉽게 된 웹사이트 디자인을 위해 여러한 화면 크기와 다음과 같은 지침을 제공합니다:
- 알점에서 응답 디자인 중단점은”지점”에서는 웹사이트의 콘텐츠 디자인에 적응에서 특정 방법을 제공하기 위해 최상의 사용자 경험을 제공합니다. 웹 사이트를 반응 적으로 만들려면 디자이너가 콘텐츠가 잘못 정렬 된 것처럼 보일 때 중단 점을 추가해야합니다., 사이트가 정렬되는 장치의 수에 따라 응답 성을 보장하기 위해 여러 중단 점을 설정해야합니다. 반응 형 중단 점에 관한이 기사를 참조하여 그 효과와 그 효과에 대해 자세히 알아보십시오.
- 성 유동성자:유체 디자인을 말한 디자인의 레이아웃에 있는 이동할 수 있(확장하고 계약)하에 맞는 장치 뷰포트에서 실행 됩니다. 고정 된 디자인 레이아웃은 정렬되지 않은 모든 뷰포트에서 바람직하지 않게 왜곡됩니다., 작업 디자인에 레이아웃을 사용하여%단위뿐만 아니라 최대 폭을 보장하는 레이아웃에 맞는 모바일 장치 뷰포트지고없이 너무 넓어 데스크톱에서 장치 뷰포트.
- 마찰 감소:이것은 기본적으로 디자인이 여러 장치에서 사용하기 쉬워야 함을 의미합니다. 반응 형 디자인은 웹 사이트가 어떻게 생겼는지뿐만 아니라 접근성과 유용성 측면에서 어떻게 수행되는지를 포함합니다. 특히 초점을 작은 화면의 마찰이기 때문에,화면 크기 감소,웹 요소에 적은 공간을 렌더링하고 더 많은 가능성을 스크램블과를 왜곡.,
- 모바일 디자인-처음:때문에 마찰이 발생할 가능성이 높은 작은 화면에서,디자인 모바일 처음 접근 방식이다. 반대로 수행하는 것이 더 쉽지만 모바일 뷰포트의 데스크톱 레이아웃을 좁히는 것이 더 어렵습니다. 모바일 우선 설계시 디자이너는 최적의 사용자 경험을 제공하는 데 절대적으로 필요한 것을 포함합니다.,
여기에 몇 가지 방법에 대해 이동하는 모바일 먼저 디자인:
- 우선 순위를 중요한 메뉴의 옵션
- 제거하는 모든 visual 주의 산만
- 최적화 디자인을 위해 tapability–은 모든 것을 쉽게 활
- 불필요한 양식 및 정보 필드
- 하이라이트의 주요 CTA
- 눈에 띄게 제공합 검색 및 필터링 기능
- 더 많은 기능을 적은 입력: 분명히 입력하면 어렵 모바일 기기에서 그것보다 바탕 화면에 장치. 그래서 웹 사이트의 모바일 버전에 입력 할 필요성을 최소화하는 것이 합리적입니다., GPS,QR 코드 판독,생체 인식 ID 등과 같은 장치 기능을 의식적으로 활용하여 타이핑을 대체하십시오. 필요한 기능을 시작하는 링크를 배치하여 사용자가 관련 번호를 공유,이메일 또는 전화를보다 쉽게 할 수 있도록하십시오. 최고의 반응 형 디자인은 불편한 모바일 상호 작용을 단순화하고 제거하는 것을 포함한다는 것을 명심하십시오.
- 테스트,검사,테스트:면 개발자 혹은 디자이너 알고 있는 최고의 화면 크기에 대한 반응하는 디자인,그들은 작품을 만들고 반응하는 웹 사이트., 그러나 웹 사이트가 실제로 구축 된 장치에 의미가있는 방식으로 렌더링되도록하려면 정확히 테스트해야합니다. 이를 수행하는 쉬운 방법은 반응 형 디자인 검사기를 사용하는 것입니다. 대신 실행의 웹사이트를 통해 개별적인 장치와 다른 뷰포트의 URL 을 입력하으로 검사하고 보는 방법에 나타나는 다양한 최신 장치에서 다른 자주 사용되는 장치해상도입니다. 위에 링크 된 검사기는 iPhone X,Galaxy Note10,iPhone8Plus 등과 같은 최신 모바일 장치에서 반응 형 검사를 제공합니다.,
는 동안 반응형 디자인하기 어려운 것처럼 보일 수 있습니다 실행하는 정보를 이 문서에서 추구한 이 프로세스를 단순화하기 위해 개발자와 디자이너가 있습니다. 에 의해 무엇을 하는 것은 위에서 설명한,그것은 훨씬 더 쉽게 된 웹 사이트를 만드시는 그것의 고객에 관계없이 장치에 액세스하는 데 사용하는 웹 사이트입니다.
무료로 응답 검사기를 사용해보십시오