사이트의 모바일 버전이 모든 기기와 호환되지 않을 수 있으므로 모바일 웹 사이트 디자인은 복잡합니다. 설계자는 모바일 존재감을 의미 있고 가치있는 것으로 만들기 위해 최고의 설계 방법을 알고 있어야합니다.
모바일에 최적화 된 웹 사이트를 만드는 방법 중 가장 좋은 방법은 웹 개발자들 사이에서 지속적인 논쟁이 있습니다. 모바일 웹 사이트를 개발하는 데는 세 가지 주요 방법이 있습니다.
이것들은:
- 반응이 빠른 웹 디자인.
- 전용 모바일 웹 사이트.
- RESS: 서버 측 프로그래밍은 장치 유형에 따라 CSS와 HTML을 렌더링합니다.
각 방법에는 장단점이 있습니다. 웹 개발자는 상황에 맞는 최상의 기술을 구현하기 위해 각 기술을 알고 있어야합니다.
모바일 웹 사이트를 디자인하는 3 가지 방법
반응 형 웹 디자인 (RWD)
RWD는 CSS3 미디어 쿼리를 사용하여 웹 페이지의 레이아웃을 장치의보기 영역 크기에 맞 춥니 다. 동일한 HTML 코드를 사용하여 태블릿, 휴대 기기, 데스크톱 및 기타 가젯을위한 다양한 웹 페이지 레이아웃을 제공합니다.
은혜:
- 웹 사이트는 비슷한 콘텐츠와 HTML 마크 업을 가지므로 모바일 방문자는 사용하는 장치의 종류와 상관없이 동일한 경험을 갖습니다.
- 단일 URL을 사용하면 사용자가 콘텐츠에 쉽게 연결하고 공유 할 수 있습니다. 웹 페이지가 둘 이상의 URL 주소에서 사용 가능한 경우 사용자는 혼란 스러울 수 있습니다.
단점:
별도로 모바일 콘텐츠를 최적화 할 수는 없습니다. 따라서 RWD를 사용하는 설계자는 모바일 사용자를 위해 별도로 컨텐츠를 조정할 수 없습니다.
HTTP 아카이브의 2013 년 1 월 데이터에 따르면 평균 웹 페이지는 약 1.3MB입니다. 그러나 대부분의 RWD 사이트는 비교적 큽니다. 이 크기가 커지면 모바일 사이트의 성능이 저하되어 속도가 느려집니다.
모바일 사용자는 모바일 전용 사용자 인터페이스 디자인 패턴에 더욱 익숙해 져 있습니다. 또한 모바일 사용자는 멀티 태스킹에 익숙합니다. 탐색 구조가 특정 장치에 맞게 사용자 정의되지 않은 경우 여러 작업을 동시에 수행하려고 할 때 문제가 발생할 수 있습니다.
전용 모바일 사이트
이 방법은 완전히 별도의 웹 사이트를 만들어 모바일 사용자의 경험을 향상시킵니다.
은혜:
- 관리의 단순성: 모바일 사이트 및 데스크톱 사이트에 별도의 변경이 필요합니다. 변경 사항은 각 버전별로 제한됩니다. 즉, 데스크톱에서 모바일 플랫폼에 대한 변경 사항에 액세스 할 수 없음을 의미합니다.
- 모바일 전용 웹 사이트를 개발할 때 해당 잠재 고객을 위해 특별히 간소화하고 최적화하는 것이 더 쉬워집니다.
- 모바일 사용자를 위해 콘텐츠 및 탐색 구조를 사용자 지정할 수 있습니다.
단점:
전용 모바일 사이트에서는 페이지 URL이 여러 개이므로 소셜 미디어를 통해 웹 페이지를 공유하는 것은 더욱 어려워집니다. 데스크톱 사용자가 소셜 미디어 플랫폼에서 공유하는 모바일 URL을 클릭하면 실수로 데스크톱 버전이 아닌 모바일 버전의 모바일 사이트가 수신 될 수 있습니다.
중복 콘텐츠 문제를 피하기 위해 웹 개발자는 rel = "alternative"및 rel = "canonical"메타 태그를 사용해야합니다. 모바일 사용자가 Google을 검색하고 데스크톱 URL을 클릭하면 사용자는 데스크톱 버전을 보거나 웹 페이지의 모바일 버전으로 리디렉션됩니다. 모바일 버전이 없으면 사용자에게 오류 메시지가 표시됩니다.
모바일 사용자를위한 완전히 다른 웹 사이트를 만드는 것은 사이트가 모바일 사용자를 위해 특별히 맞춤화됨을 의미합니다. 그러나 이러한 목적을 달성하기 위해 웹 개발자는 기능과 콘텐츠를 잘라야합니다. 이러한 기능과 콘텐츠는 악몽입니다.
반응 형 웹 디자인+ 서버 측 구성 요소 (RESS)
이 방법은 서버 측 프로그래밍에 따라 서로 다른 장치에 대해 사용자 지정 HTML과 CSS를 제공합니다. 모바일 사용자를위한 코드는 데스크톱 사용자의 코드와 다릅니다.
이 구현의 주 목적은 웹 사이트의 성능을 향상시키는 것입니다. 이 방법은 반응 형 웹 디자인과 결합하면 잘 작동합니다. 따라서이 구현은 응답 성 웹 디자인 + 서버 측 구성 요소 (RESS)라고 할 수 있습니다.
은혜:
- 네비게이션 구조는 데스크톱 및 모바일 사용자가 수행하는 다양한 작업에 맞게 사용자 정의 할 수 있습니다.
- 개발자는 HTML 및 CSS에서 페이지 요소를 제거하여 원하는 디스플레이를 얻을 수 있습니다.
- HTML에서 불필요한 JavaScript를 제거하여 모바일 장치의 CPU 리소스, 메모리 및 캐시를 비울 수 있습니다.
단점:
- 동적 HTML은 서버의로드를 증가시킵니다.
- 장치 검색은 신뢰할 수 없습니다.
- HTML 및 CSS는 모바일 성능에 최적화되어 있습니다. 데스크톱 버전은 더 많은 HTTP 요청과 Java 스크립트를 사용합니다.
어떤 방법을 선택할 것인가?
모바일에 최적화 된 사이트를 설계하기로 결정하는 것은 판매하는 제품, 대상 고객, 필요한 투자, 경쟁률, 전환율 등에 따라 다릅니다. 가장 잘 작동 할 디자인 방법은 주로 화면 형식, 운영 체제, 브라우저 및 해상도.
가장 반응이 빠른 웹 디자인 사이트는 최적으로 구현되지 않아 결과적으로 이러한 사이트는로드하는 데 더 많은 시간이 걸립니다. 경쟁이 치열하기 때문에 사이트가 더 느리게 실행되면 고객을 잃을 수 있습니다. 사용자는 다른 웹 사이트로 전환하기 만하면됩니다. 전용 모바일 사이트로로드 시간이 짧은 웹 사이트를 만들 수는 있지만이 구현에도 여러 가지 단점이 있습니다.
RESS는 두 가지 주요 단점을 극복하고 RWD의 이점을 제공합니다. RESS의 가장 큰 단점은 장치 탐지가 신뢰할 수 없다는 것입니다. 프로세스가 제대로 작동하도록 새 장치를 자주 테스트해야합니다.
DeviceAtlas, WURFL 및 새로운 장치를 감지 할 수있는 다른 서비스가 있습니다. 데이터베이스의 새 장치를 업데이트하는 데 큰 도움이됩니다.
모바일 웹 디자인은 웹 사이트가 모바일 장치에 제대로 표시 될 때만 성공합니다. 설계자가 작은 모바일 창에서 데스크톱 사이트의 모든 필수 부분을 표현하는 것은 어려운 일이지만, 모바일 웹 사이트를 더 빠르고, 더 완벽하게 만들기위한 새로운 기술이 매일 등장합니다.
Shutterstock을 통한 모바일 웹 사이트 사진
15 코멘트 ▼
