WordPress용 반응형 웹 디자인 가이드
게시 됨: 2022-09-29이상하게도 웹사이트 트래픽의 절반 이상이 모바일 장치에서 발생합니다. WordPress에 반응형 웹 디자인을 사용하고 있습니까?
웹 사이트를 구축할 때 저지를 수 있는 가장 큰 실수 중 하나는 데스크톱 브라우저 전용으로 디자인하고 구축하는 것입니다. 우리는 그것을 얻는다. 우리 모두는 전에 그 죄를 지었습니다. 우리 대부분은 휴대폰으로 웹사이트를 구축하지 않습니다. 우리는 TV 앞에 있는 랩톱이나 두 대의 거대한 모니터가 나란히 있는 사무실에서 선호하는 설정으로 구성합니다.
그러나 데스크톱용으로 구축하고 모바일을 사후 고려 사항으로 취급하면 대부분의 웹 사이트 방문자가 소외됩니다. 대부분의 고객이 드라이브 스루에 있는 패스트푸드점을 운영하고 식당에서 사람들을 기다리며 모든 시간을 보내지는 않을 것입니다. 매출의 절반 이상이 드라이브 스루에서 나오므로 매장에서 운영을 최적화하는 동시에 식사하는 고객에게도 서비스를 제공해야 합니다.
이 게시물은 웹사이트가 모든 화면 크기의 사람들에게 작동해야 하는 방법과 이유를 보여줍니다. 또한 WordPress 웹 사이트에 반응형 웹 디자인을 통합하는 가장 좋은 방법을 배우게 됩니다.
반응형 웹 디자인이 중요한 이유
목걸이 걸쇠를 꼬집거나 바비 인형에게 신발을 신는 것과 같은 작은 물체로 작업하는 것이 얼마나 답답한지 아십니까? 웹사이트가 반응형이 아닐 때 모바일 방문자의 경우와 같습니다.
웹사이트가 화면 크기에 맞지 않으면 방문자가 어려움을 겪을 가능성이 더 큽니다. 반응형 디자인은 디자인과 레이아웃이 사용자의 화면 크기에 맞게 조정되도록 웹사이트를 구축하는 방법입니다.
반응하지 않는 웹사이트 디자인의 문제는 다음과 같습니다.
- 버튼과 사이트 탐색이 너무 작아서 클릭할 수 없습니다.
- 텍스트가 너무 작아서 읽을 수 없습니다.
- 이미지, 표 또는 기타 콘텐츠가 화면에 비해 너무 커서 잘림
웹사이트 방문자는 한 번에 이러한 문제를 간과했을 수 있습니다. 그러나 이제 사람들은 귀하의 사이트가 휴대전화에서 완벽하게 작동하기를 기대합니다. 귀하의 사이트가 모바일 친화적이지 않은 경우 방문자는 사이트를 떠나 휴대전화에서 작동하는 경쟁업체의 사이트를 찾습니다.
모바일 최적화 부족으로 인해 불이익을 받는 것은 고객만이 아닙니다. 또한 검색 엔진은 사이트의 모바일 친화성을 정기적으로 확인합니다. 작은 화면에서 작동하도록 설계되지 않은 경우 검색 순위가 낮은 사이트에 불이익을 줍니다.
사이트의 모바일 친화성을 확인하는 방법
Google은 모바일 친화성을 매우 중요하게 생각하여 사이트를 테스트하는 데 사용할 수 있는 특별한 도구를 만들었습니다.
사이트의 모바일 친화성을 확인하는 방법은 다음과 같습니다.
- https://search.google.com/test/mobile-friendly 로 이동합니다.
- 웹사이트 도메인 입력
- 테스트 URL 클릭
- 결과를 기다리십시오. 몇 분 정도 걸릴 수 있습니다.
- 보고서를 봅니다. 도구가 오류를 발견하면 사이트를 모바일 친화적으로 만들기 위해 수정해야 할 사항이 나열됩니다.
WordPress용 반응형 웹 디자인을 구현하는 방법
WordPress 웹 사이트에 반응형 웹 디자인을 활용하는 것은 간단합니다. 반응형 테마를 선택하거나 기존 테마 또는 디자인을 반응형으로 수정할 수 있습니다.
반응형 테마 선택
정기적으로 업데이트되는 최신 테마를 선택하는 경우 반응형 테마일 가능성이 높습니다. 테마 개발자는 응답하지 않는 테마를 만드는 데 시간을 낭비하지 않습니다. 그들은 대부분의 WordPress 사용자가 다양한 화면 크기에서 작동하는 테마를 원한다는 것을 알고 있습니다.
테마를 미리 볼 때 데스크탑에서만 보지 마십시오. 휴대전화나 시뮬레이터를 사용하여 모바일 기기에서 어떻게 보이는지 확인하세요.
기존 테마 또는 디자인 수정
테마의 CSS를 조정하여 반응하지 않는 테마나 디자인을 수정할 수 있습니다. W3Schools의 이 튜토리얼은 반응형 웹 디자인을 구현하기 위해 CSS를 작성하는 방법을 배울 수 있는 좋은 장소입니다.
사용자 정의 CSS를 사용 하는 경우 테마를 업데이트할 때 사용자 정의 CSS를 유지하는 방법 에 대한 이 게시물을 읽으십시오.
WordPress의 반응형 디자인 고려 사항
반응형 테마를 선택하든 직접 코딩하든 상관없이 모바일 장치에서 웹사이트를 비우호적으로 만들 수 있는 요소에 주의하세요.
플러그인 확인
플러그인은 웹사이트의 디자인이나 레이아웃을 수정할 수 있습니다. 새 플러그인을 사용하여 사이트에 기능을 추가할 때 작은 화면에서 테스트하십시오. 플러그인 옵션이 테마의 응답성을 취소하지 못하게 하십시오.
팝업 조심
팝업은 모바일 장치에서 문제가 될 수 있습니다. 온라인에서 레시피를 검색하는 사람은 누구나 자신이 야기하는 문제를 증명할 수 있습니다. 조리법과 원격으로 관련되지 않은 떠들썩한 이야기를 스크롤할 때 팝업 창에서 뉴스레터를 구독하거나 요리책을 다운로드하도록 권장합니다. 문제는 팝업 창이 모바일 화면보다 커서 닫기 옵션이 보이지 않는다는 것입니다. 그런 사람은 하지 마세요. 모바일 친화성을 유지하려면 작은 화면에서 큰 팝업을 비활성화하십시오.
메뉴 길이에 주의
많은 테마가 기본적으로 반응형이지만 모든 데스크톱 디자인이 모바일 반응형 사이트로 쉽게 변환된다는 의미는 아닙니다. 탐색 메뉴는 여러 문제를 일으킬 수 있습니다. 메뉴가 여러 수준으로 엄청나게 길면 모바일 드롭다운에서 사용하기가 번거로울 수 있습니다. 모바일 장치용으로 슬림한 버전의 탐색을 사용하는 것이 좋습니다.
호스트 품질이 모바일 친화성에 미치는 영향
반응형 웹 디자인 외에도 사이트 속도는 모바일 방문자가 웹사이트를 어떻게 생각하는지에 중요한 역할을 합니다. Wi-Fi에 연결되지 않은 경우 모바일 브라우저는 종종 훨씬 느린 인터넷 연결을 처리합니다. 인터넷 연결이 느리고 로딩 속도가 느린 사이트는 재앙의 지름길입니다.
느린 인터넷 연결과 열악한 셀 범위를 수정하기 위해 많은 노력을 기울일 수는 없지만 사이트가 가능한 한 빨리 빨라지도록 할 수 있습니다. 사이트 로드 속도는 웹 호스트의 품질에 크게 좌우됩니다. Pressable에서 우리 서버는 WordPress.com, WordPress VIP 및 WooCommerce 뒤에 있는 동일한 천재들에 의해 구축되었습니다. 우리는 WordPress를 안팎으로 알고 있으며 WordPress 사이트를 위한 가장 빠르고 최고의 서버를 구축했습니다.
지금 가입 하고 Pressable의 차이점을 경험해 보세요.
