모바일 장치를 모바일 콘텐츠 또는 디자인으로 리디렉션
몇 년 전부터 전문가들은 모바일 장치를 사용하는 방문자의 웹 사이트 트래픽이 급격히 증가하고 있다고 말합니다. 이러한 이유로 많은 기업들이 온라인 상태에서 모바일 전략을 채택하기 시작하여 전화 및 기타 모바일 장치에 적합한 경험을 제공합니다.
휴대 전화 용 웹 페이지 디자인 방법을 배우고 전략을 구현하는 데 시간을 할애했다면 사이트 방문자가 해당 디자인을 볼 수 있는지 확인해야합니다. 당신이 이것을 할 수있는 많은 방법들이 있고 다른 것들보다 더 잘 작동하는 것들이 있습니다. 다음은 웹 사이트에서 모바일 지원을 구현하는 데 사용할 수있는 방법과이를 달성하는 가장 좋은 방법이 오늘날의 웹에 있다는 것을 보여주는 마지막 단계에 대한 권장 사항입니다.
다른 사이트 버전에 대한 링크 제공
이것은 훨씬, 휴대 전화 사용자를 다루는 가장 쉬운 방법입니다. 페이지를 볼 수 있는지 또는 볼 수 없는지 걱정하지 말고 단순히 페이지 상단 근처에 별도의 모바일 버전의 사이트를 가리키는 링크를 넣으십시오. 그러면 독자는 모바일 버전을 보거나 "정상"버전으로 계속할지 여부를 스스로 선택할 수 있습니다.
이 솔루션의 장점은 쉽게 구현할 수 있다는 것입니다. 모바일 용으로 최적화 된 버전을 만든 다음 일반 사이트 페이지 상단 근처에 링크를 추가해야합니다.
단점은 다음과 같습니다.
- 모바일 사용자를위한 별도의 사이트 버전을 유지해야합니다. 사이트가 커질수록 두 번째 버전을 유지하는 것을 잊어 버리고 사이트가 동기화되지 않을 수 있습니다.
- 태블릿 용 세 번째 버전을 만드시겠습니까? 웨어러블 용 네 번째 버전은 어떻습니까? 이러한 장치 별 버전 개념은 통제 불능 상태로 빠르게 바뀔 수 있습니다.
- 비 모바일 독자가 볼 수있는 (그리고 아마도 클릭 할 수있는) 페이지 상단에 못생긴 링크를 넣어야합니다.
궁극적으로이 접근법은 현대 모바일 전략의 일부가 될 수없는 오래된 것입니다. 더 나은 해답을 얻는 동안 때때로 스톱 갭 픽스 (stop-gap fix)로 사용되기도하지만, 현재는 단기간의 밴드 텐트입니다.
자바 스크립트 사용
위에서 언급 한 접근 방식의 변형으로 일부 개발자는 일부 유형의 브라우저 검색 스크립트를 사용하여 고객이 모바일 장치에 있는지 여부를 감지 한 다음 해당 모바일 사이트로 리디렉션합니다. 브라우저 감지 및 모바일 장치의 문제점은 수천 개의 모바일 장치가 있다는 것입니다. 하나의 자바 스크립트로 모든 것을 탐지하려고하면 모든 페이지가 다운로드 악몽에 빠질 수 있습니다. 그리고 여전히 위에서 언급 한 접근법과 동일한 많은 단점이 있습니다.
핸드 헬드 형 CSS 미디어 사용
CSS 명령 인 @media handheld는 휴대 전화와 같은 핸드 헬드 장치 용 CSS 스타일을 표시하는 이상적인 방법 인 것처럼 보입니다. 이것은 모바일 장치 용 페이지를 표시하기위한 이상적인 솔루션 인 것 같습니다. 하나의 웹 페이지를 작성한 다음 두 개의 스타일 시트를 작성합니다. 첫 번째 "화면"미디어 유형은 모니터 및 컴퓨터 화면에 맞게 페이지 스타일을 지정합니다. 두 번째는 "핸드 헬드"스타일로 휴대 전화와 같은 소형 장치를위한 페이지 스타일입니다. 쉽게 들리지만 실제로는 실제로 작동하지 않습니다.
이 방법의 가장 큰 장점은 웹 사이트의 두 가지 버전을 유지 관리 할 필요가 없다는 것입니다. 그 중 하나만 유지하면, 스타일 시트는 어떻게 보일 것인가를 정의합니다 - 실제로 우리가 원하는 최종 솔루션에 가까워지고 있습니다.
이 방법의 문제점은 많은 휴대폰이 핸드 헬드 미디어 유형을 지원하지 않는다는 것입니다. 대신 화면 미디어 유형으로 페이지를 표시합니다. 그리고 많은 오래된 휴대폰과 핸드 헬드는 CSS를 전혀 지원하지 않습니다. 결국이 방법은 신뢰할 수 없으므로 모바일 버전의 웹 사이트를 제공하는 데 거의 사용되지 않습니다.
PHP, JSP, ASP를 사용하여 사용자 에이전트 검색
이것은 모바일 장치가 사용하지 않는 스크립팅 언어 나 CSS에 의존하지 않기 때문에 모바일 사용자를 사이트의 모바일 버전으로 리디렉션하는 훨씬 좋은 방법입니다. 대신 서버 측 언어 (PHP, ASP, JSP, ColdFusion 등)를 사용하여 사용자 에이전트를 살펴본 다음 모바일 장치 인 경우 모바일 페이지를 가리 키도록 HTTP 요청 을 변경합니다.
이렇게하는 간단한 PHP 코드는 다음과 같습니다.
stristr ($ ua, "Windows CE") 또는
stristr ($ ua, "AvantGo") 또는
stristr ($ ua, "Mazingo") 또는
stristr ($ ua, "모바일") 또는
stristr ($ ua, "T68") 또는
stristr ($ ua, "Syncalot") 또는
stristr ($ ua, "Blazer")) {
$ DEVICE_TYPE = "MOBILE";
}
if (isset ($ DEVICE_TYPE) 및 $ DEVICE_TYPE == "MOBILE") {
$ location = 'mobile / index.php';
머리글 ( '위치 :'. $ 위치);
출구;
}
?>
여기서 문제는 모바일 장치에서 사용하는 많은 다른 잠재적 인 사용자 에이전트가 있다는 것입니다. 이 스크립트는 많은 것을 포착하고 리다이렉션하지만 모든 수단으로 리디렉션하지는 않습니다. 그리고 더 많은 것들이 항상 추가됩니다.
또한 위의 다른 솔루션과 마찬가지로 독자에게는 별도의 모바일 사이트를 유지해야합니다. 두 개 이상의 웹 사이트를 관리해야한다는 단점은 더 나은 해결책을 찾는 데 충분한 이유입니다.
WURFL 사용
모바일 사용자를 별도의 사이트로 리디렉션하도록 결정한 경우 WURFL (Wireless Universal Resource File)을 사용하는 것이 좋습니다. 이 파일은 최신 무선 사용자 에이전트 데이터뿐만 아니라 해당 사용자 에이전트가 지원하는 기능 및 기능을 포함하는 XML 파일 (및 현재 DB 파일) 및 다양한 DBI 라이브러리입니다.
WURFL을 사용하려면 XML 구성 파일을 다운로드 한 다음 언어를 선택하고 웹 사이트에서 API를 구현하십시오. Java, PHP, Perl, Ruby, Python, Net, XSLT 및 C ++에서 WURFL을 사용하기위한 도구가 있습니다.
WURFL을 사용하면 많은 사람들이 항상 config 파일을 업데이트하고 추가한다는 이점이 있습니다. 따라서 사용중인 파일이 다운로드를 거의 끝내기 전에 구식 인 반면, 한 달에 한 번 다운로드하면 독자가 독자적으로 사용하지 않는 모든 모바일 브라우저를 갖게 될 가능성이 있습니다 문제. 물론 단점은 계속 다운로드하고 업데이트해야한다는 것입니다. 따라서 사용자를 두 번째 웹 사이트로 안내 할 수 있고 단점을 만들 수 있습니다.
최고의 솔루션은 반응이 빠른 디자인입니다.
따라서 서로 다른 장치를위한 다른 사이트를 유지하는 것이 답이 아니라면 무엇입니까? 반응이 빠른 웹 디자인 .
반응 형 디자인은 CSS 미디어 쿼리를 사용하여 다양한 너비의 장치에 대한 스타일을 정의하는 곳입니다. 반응 형 디자인을 사용하면 모바일 사용자와 비 모바일 사용자를위한 하나의 웹 페이지를 만들 수 있습니다. 그렇다면 모바일 사이트에 표시 할 콘텐츠에 대해 걱정할 필요가 없으며 모바일 사이트에 최신 변경 사항을 전송해야합니다. 또한 CSS를 작성하고 나면 새로운 것을 다운로드 할 필요가 없습니다.
응답 성이 뛰어난 디자인은 매우 오래된 장치와 브라우저에서 완벽하게 작동하지 않을 수 있습니다 (대부분은 현재 사용하고 있어도 별다른 문제가 아니며 걱정할 필요가 없습니다). 추가 기능이므로 콘텐츠에 스타일을 추가하는 것이 아니라 멀리)이 독자는 아직도 당신의 웹 사이트를 읽을 수있을 것이다, 다만 오래된 장치 또는 브라우저에 이상적 보지 않을 것이다.