차례:
- 행동을 취할 수있는 단일 클릭 유도문 만들기
- 작은 화면 크기를위한 디자인
- 휴대 기기는 데스크톱 컴퓨터보다 크기 때문에 스크롤해야 볼 수있는 공간
- 산 세리프 (Sans Serif) 또는 세리프 (Serif) 글꼴을 사용하는 경우 글꼴 알파벳의 문자 높이와 문자 사이의 공백을 고려하십시오. 약간 높은 문자 높이와 문자 사이에 약간의 공백이있는 글꼴은 가독성을 높일 수 있습니다.
- 모바일 용 이미지를 최적화하려면
- 모바일과 데스크톱 디자인을 비슷하게 유지하십시오.
- 플래시는 모바일 사이트에서 플래시를 사용할 때 Google이 SERP 등급을 부딪 치고 SERP 경고를 삽입하는 것으로 알려져 있기 때문에 SEO에도 좋지 않습니다.
비디오: Developer Keynote (Google I/O '19) 2024
SEO 전략의 일환으로 사용자가 귀하의 웹 사이트를 방문 할 때 보게되는 모든 것을 생각하십시오. 웹 사이트. 단어, 그림 및 비디오에서 사이트 탐색에 이르기까지 웹 사이트의 콘텐츠 가 표시됩니다.
이제 모바일 사고 방식을 익히고 뉴욕 거리를 걷는 휴대 기기를 이용할 때 방문자가 웹 사이트 콘텐츠를 어떻게 경험할 것인지 생각해보십시오.
모바일 친화적 설계와 관련하여 단 한 가지만 기억한다면 모바일 친화적 인 웹 사이트는 가능한 최상의 사용자 경험을 제공하기 위해 무엇보다도 필요합니다.
행동을 취할 수있는 단일 클릭 유도문 만들기
콘텐츠를 모바일 용으로 만들기 위해 사용자가 필요한 것을 쉽게 찾고 행동을 취할 수 있도록 가능한 한 쉽게 만들고 싶습니다. 사용자가 마우스 클릭이 아닌 작은 화면과 손가락 탭으로 작업하는 모바일 환경에서 두드러진 클릭 투 콜 (click-to-call) 클릭 유도 문안 버튼은 사용자가 일반적인 작업을 쉽게 수행 할 수 있도록 도와줍니다. 작업을 완료한다는 것은 전환 을 의미합니다!
클릭 통화 버튼은 모바일 사용자가 이미 휴대 전화를 들고 있기 때문에 모바일 전용 클릭 유도 문안입니다. 이 버튼은 사용자가 필요한 것을 얻고 (나와 채팅 함) 필요한 것을 얻을 수 있도록 도와줍니다 (변환).
Bruce Clay, Inc. 모바일 경험의 맨 위에 전략적으로 배치 된 클릭 투콜 (click-to-call) 버튼의 예가 있습니다.
또한 모바일 사용자가 상점 앞을 찾거나 이동 중에도 작업을 수행하는 데 도움이되는 단일 탭 단추를 만드는 것을 고려하십시오. 프로 그레시브 모바일 사이트에는 사용자가 지역 에이전트를 찾고 페이지를 아래로 스크롤하지 않고도 지불 할 수있게 해주는 버튼이있는 예제가 있습니다.
스크롤없이 볼 수있는 부분에있는 원 클릭 버튼은 모바일 사용자가 작업을 수행하는 데 도움이됩니다.작은 화면 크기를위한 디자인
모바일 장치는 데스크톱 컴퓨터보다 작기 때문에 페이지에 내용을 넣을 공간이 적고 공백이 적습니다. 소규모 화면 콘텐츠 최적화 도구에는 다음과 같은 것들이 있습니다.
-
로고를 모바일 홈 페이지로 다시 연결되는 링크로 사용하십시오.
-
공백을 최소화하고 대부분의 페이지가 실제 내용으로 채워지는지 확인합니다.
-
토글 메뉴, 와 같은 오프 스크린 요소를 작성하여 확장 및 닫기 할 수있는 탐색 요소입니다. 가능한 경우 버튼에 표시되는 텍스트를 줄입니다.
-
스크롤없이 볼 수있는 부분에 특히주의하십시오.
휴대 기기는 데스크톱 컴퓨터보다 크기 때문에 스크롤해야 볼 수있는 공간
(사용자가 스크롤해야 볼 수있는 공간 페이지). 스크롤없이 볼 수있는 부분 콘텐츠를 선택할 때 사려 깊고 사용자 중심적이어야합니다. 또한 스크롤없이 볼 수있는 부분 위에 올려 놓은 콘텐츠가 빠르게로드되는지 확인하십시오. 사이트 속도와 스크롤없이 볼 수있는로드 시간은 사용자 경험에 중요하며 중요한 모바일 순위 요소이기도합니다. 읽을 수있는 모바일 글꼴 선택 웹 사이트에 단어를 올릴 때마다 우선적으로 사용자가 이해할 수 있어야합니다. 사용자는 다양한 장치에서 단어를 명확하게보고 신속하게 읽을 수 있어야합니다. 현재 모바일 화면 크기 나 그래픽 품질을 위해 모든 표준이 존재하지 않으므로 폰트 선택에 대한 모든 권장 사항을 좁힐 수는 없습니다. 글꼴에 대해 알아야 할 규칙은 다음과 같습니다.
산 세리프 (Sans Serif) 또는 세리프 (Serif) 글꼴을 사용하는 경우 글꼴 알파벳의 문자 높이와 문자 사이의 공백을 고려하십시오. 약간 높은 문자 높이와 문자 사이에 약간의 공백이있는 글꼴은 가독성을 높일 수 있습니다.
인구 통계 학적 사실을 알고 노인들은 더 작고 응축 된 글꼴을 읽기가 더 힘들 수 있습니다.
-
글꼴과 배경간에 충분한 대비를 제공하여 사용자가 옥외에서 또는 화면의 눈부심이 요인이되는 다른 상황에서도 콘텐츠를 볼 수있게하십시오.
-
가장 안전한 방법은 Arial, Helvetica, Courier, Georgia, Times New Roman, Trebuchet MS 또는 Verdana와 같이 모바일 장치 제조업체와 사용자가 승인하는 공통 글꼴을 사용하는 것입니다.
-
이미지 최적화
-
웹 사이트를 모바일 친화적으로 만들려면 이미지를 데스크톱 및 휴대 기기에서 빠르게로드 할 수있는 크기로 저장해야합니다. 빠르게로드되는 최적화 된 이미지는 사용자와 검색 엔진을 모두 행복하게 유지합니다.
모바일 용 이미지를 최적화하려면
이미지를 JPG, GIF 또는 PNG와 같은 압축 파일 형식으로 저장하십시오.
이미지의 크기를 필요 이상으로 크게하지 마십시오. 큰 이미지는 큰 파일 크기를 의미하므로로드 시간이 느리다는 것을 기억하십시오.
-
반응 형 디자인을 사용하는 경우에도 이미지 크기를 최적화하십시오. 반응 형 디자인을 사용하면 CSS를 사용하여 감지 된 화면의 크기에 따라 이미지의 크기를 조정하는 최대 너비 절 (최대 너비: 100 %)을 작성하여 이미지를 모바일 용으로 최적화 할 수 있습니다.
-
멀티 스크린 용 디자인
-
멀티 스크린 사용을 위해 모바일 컨텐츠를 최적화하려면 사용하는 색상, 글꼴 및 테마를 바탕 화면 색상, 글꼴 및 테마와 가깝게 모방해야합니다. 이렇게하면 방문자가 새 기기를 사용하여 웹 사이트를 탐색 할 때 올바른 위치에 도착했음을 확신하고 브랜딩을 강화하는 데 도움이됩니다. 프로 그레시브 보험 (Progressive Insurance)은 이런 일을 잘합니다.
모바일과 데스크톱 디자인을 비슷하게 유지하십시오.
Flash 사용 금지
일반적으로 Flash를 사용한 설계는 신뢰할 수 없으며 데스크탑 또는 모바일 설계에 권장되지 않습니다. 여기에는 Flash를 사용하여 비디오 컨텐츠를 재생하는 것이 포함됩니다. iPhone과 같은 일부 휴대 기기는 플래시를 전혀 렌더링 할 수 없기 때문에 플래시가 필요한 웹 사이트의 모든 요소는 사용자 환경을 좋지 않게 만듭니다.