2020년의 모든 비즈니스에 모바일 친화적인 웹사이트는 선택이 아니라 필수입니다.
모든 웹 트래픽의 절반 이상이 iPhone, iPad, Android 휴대폰 및 태블릿과 같은 모바일 장치에서 생성된다는 사실을 알고 놀라실 수 있습니다. 이제 비즈니스 웹사이트가 모바일 친화적이지 않고 작은 화면에서 보기 쉽지 않은 경우 브랜드는 그 어느 때보다 잠재 고객의 50% 이상을 놓칠 수 있습니다.
2020년에는 전 세계적으로 거의 45억 명이 인터넷을 사용하고 대다수(39억 명)가 모바일 장치를 통해 인터넷에 액세스합니다.
웹사이트가 모바일 친화적이면 모든 표준 휴대기기의 사용자를 위해 설계, 개발 및 최적화됩니다.
이 Google 도구를 사용하여 현재 웹사이트가 모바일 친화적인지 테스트할 수 있습니다. 이 간단한 테스트는 사이트가 어떻게 쌓이는지 평가하는 데 1분도 채 걸리지 않습니다. 사이트에서 어떤 사용성 오류가 발생하고 어떻게 개선할 수 있는지 알 수 있습니다.
점점 더 많은 인터넷 사용자와 소비자가 모바일 장치를 사용하여 인터넷을 검색하고 온라인 쇼핑을 하고 있다는 사실 외에도 모바일 친화적 웹사이트는 다른 많은 이점도 누리고 있습니다. 예를 들어, Google은 모바일 친화적 웹사이트를 우선시하므로 귀하의 비즈니스는 모바일 친화적이지 않을 수 없습니다. Google은 모든 인터넷 검색 트래픽의 거의 95%를 책임지고 있으므로 웹사이트가 검색 순위에서 밀려나면 중요한 노출과 비즈니스를 놓칠 수 있습니다.
웹사이트가 모바일 친화적이지 않으면 모바일 장치에서 탐색하고 보고 사용하기 어려운 경우가 많습니다. 웹 사이트 방문자는 콘텐츠를 읽기 위해 확대/축소하거나 클릭할 버튼이나 링크를 찾기 위해 끝없이 스크롤해야 할 수 있습니다. 이러한 종류의 웹 사이트 경험은 실망스럽고 사용자는 사이트를 떠날 가능성이 더 큽니다. 웹사이트에서 불필요한 반송을 방지하려면 쉬운 탐색을 우선순위에 두십시오. 버튼, 텍스트 및 메뉴 옵션을 확대합니다. 터치 스크린 탐색은 버튼이 너무 크거나 너무 작거나 페이지 스크롤을 시도하는 손가락의 경로에 있는 경우 우발적인 클릭으로 이어질 수 있습니다.
웹사이트가 반응형이면 사이트 뷰어가 더 쉽습니다. 스크롤, 패닝, 확대/축소 및 가장 중요한 혼란을 최소화합니다. 웹사이트 방문자는 웹사이트에 방문했을 때 혼란스러워 하고 싶지 않습니다. 혼란스러운 고객은 절대 행동하지 않습니다.
반응형 디자인은 방문자가 사이트를 보는 데 사용하는 장치에 관계없이 모든 방문자에게 즐거운 경험을 제공합니다. 반응형 디자인은 페이지가 브라우저 너비의 100% 크기인 열(일반적으로 12개)로 분할되는 그리드 시스템을 사용합니다. 이 그리드는 유동적이고 유연하며 그 안의 콘텐츠는 화면 크기에 맞게 자체적으로 조정 및 재배열(이동, 스택 등)할 수 있습니다. "반응형"이라는 용어는 그리드와 그 안의 콘텐츠가 표시되는 화면 크기를 인식하고 "반응"할 수 있기 때문에 사용됩니다.
웹사이트가 반응형인지 확인하려면 전문 개발자를 고용하여 사이트를 구축하거나 Squarespace와 같은 반응형 플랫폼을 사용하여 만드세요.
너무 기술적이지 않으면서도 Javascript와 CSS를 사용하면 Google에서 웹사이트를 뷰어로 볼 수 있으며 최적의 검색 순위를 위해 적절하게 색인을 생성할 수 있습니다. 웹사이트에서 Googlebot의 액세스를 차단하면 순위가 낮아지고 가시성이 떨어질 수 있습니다.
Flash를 피하십시오. Android 또는 iOS에서는 지원하지 않으므로 사용하더라도 모바일 장치에는 표시되지 않습니다. 그러면 사용자에게 "재생할 수 없는 콘텐츠"와 같은 오류가 표시됩니다. 이러한 종류의 오류는 시청자를 혼란스럽게 만들고 만족스럽지 못한 경험을 유발할 수 있습니다.
이미지를 다룰 때는 고품질 사진과 그래픽만 포함해야 합니다.
너무 작거나 저해상도의 이미지는 사용하지 마세요. 모바일 사이트와 데스크톱 사이트가 이미지에 대해 동일한 대체 텍스트를 갖도록 하여 일관성을 유지하세요. 이 텍스트는 이미지를 설명하는 데 사용되는 텍스트입니다.
표준 글꼴은 작은 장치에서 훨씬 읽기 쉽습니다. 웹에 안전하고 HTML/CSS와 호환됩니다. Android 및 iOS와 같은 많은 장치에는 Open Sans, Lato 또는 Roboto와 같은 웹 안전 글꼴이 사전 설치되어 있습니다. 또한 모바일에 맞게 글꼴 크기를 최적화해야 합니다. 일반적으로 모바일에서 본문에 가장 적합한 글꼴 크기는 16픽셀입니다. 데스크탑에서는 좋은 크기로 보일 수 있는 것이 휴대폰에서는 작게 나타날 수 있고 작은 장치에서 작은 텍스트는 눈에 큰 부담을 줍니다. 미디어 쿼리를 사용하여 다양한 화면에서 글꼴 크기를 제어할 수 있습니다. 경험상 작은 화면에서는 읽기 어려울 수 있으므로 매우 장식적인 스크립트 글꼴은 사용하지 않는 것이 좋습니다. 긴 텍스트의 경우 Georgia와 같은 깨끗하고 단순한 세리프 글꼴이나 Roboto와 같은 일반적인 산세리프 글꼴을 선택합니다.
모바일용으로 브랜딩할 때 제목 줄을 줄이고 텍스트를 줄이고 큰 CTA 버튼을 포함하도록 노력하십시오(그러나 전체 모바일 화면을 차지할 정도로 크지는 않음). 모바일이 발달하면서 소화하기 쉬운 콘텐츠를 우선시하는 경향이 있습니다. 현재 온라인 콘텐츠를 평가합니다. 귀하의 웹사이트, 블로그 및 이메일 마케팅을 살펴보십시오. 메시지의 핵심을 잃지 않고 어디에서 단순화할 수 있습니까? 의도적으로 생각하고 컬링에서 가능한 한 전략적입니다. 콘텐츠를 작성할 때 데스크톱에서 하는 것과 동일한 명확한 제목을 모바일에서 작성해야 합니다.