휴대폰용 사이트를 디자인하려면 어떻게 해야 하나요?

https://stackoverflow.com/questions/624262

05-07-2019
|

문제

휴대폰으로 검색할 수 있는 사이트 개발을 어떻게 시작하나요?예를 들어 iPhone에서 Gmail 사이트를 탐색하면 사이트가 일반 사이트와 다르게 보입니다.이를 위해서는 두 개의 서로 다른 사이트를 디자인해야 합니까?모바일 브라우저에서 사이트에 접속하는지 어떻게 알 수 있나요?

해결책

두 개의 서로 다른 사이트를 디자인할 필요는 없지만 모바일 사용자가 사이트에 액세스할 수 있도록 하는 것이 중요하다면 디자인하기를 원할 것입니다.

이 문제를 해결하는 방법에는 여러 가지가 있으며 각각 장단점이 있습니다.귀하의 사이트에 데이터베이스에 정보가 있고 일련의 템플릿을 사용하여 해당 데이터를 게시한다고 가정합니까?(Ruby on Rails나 Django 사이트와 같습니다.PHP 사이트;블로그;등) 다수의 정적 HTML 페이지를 직접 코딩했다면 이 작업은 훨씬 더 노동 집약적일 것입니다.

1:SCREEN 및 MOBILE에 대한 동일한 HTML, 다른 스타일시트

아이디어:모든 요청에 동일한 HTML 구조를 전달합니다.SCREEN용 스타일시트와 MOBILE용 스타일시트를 만듭니다.

좋은:프로그래머인 당신을 위해.2개의 완전히 별도의 템플릿 사이트를 유지하는 것보다 2개의 스타일시트를 유지하는 것이 더 쉽습니다.

나쁜:사용자를 위한 것입니다.모바일 장치에서 사용하기 쉬운 사이트는 일반적으로 일반 브라우저에서는 비효율적입니다.그리고 데스크톱/노트북에 최적화된 사이트는 모바일 기기에서 비참하게 실패하는 경우가 많습니다.분명히 페이지를 코딩하는 방법에 따라 다르지만 대부분의 경우 일반 사이트를 모바일 브라우저로 푸시하는 것은 사용자에게 좋지 않습니다.(보다 http://www.useit.com/alertbox/mobile-usability.html Jakob Nielsen의 최근 모바일 사이트 사용성 연구 요약을 참조하세요.)

2:별도의 사이트 유지

(Gmail은 2개 이상의 시스템을 유지 관리합니다!기본적으로 동일한 데이터를 처리하는 다양한 컨테이너 애플리케이션/템플릿이 있습니다.전체 AJAX 브라우저 버전일반 HTML 브라우저 버전;기본 모바일 버전기본 Blackberry 애플리케이션기본 iPhone 애플리케이션도 있습니다.)

이는 모바일과 데스크톱 모두에 관심이 있는 사이트를 위한 새로운 표준입니다.귀하에게는 더 많은 작업이 필요하지만 일반적으로 사용자에게는 훨씬 더 좋습니다.

좋은 점은 아마도 모바일에서 작동하고 자바스크립트가 없거나 "전체 기능"을 사용할 수 없는 심각한 접근성 문제가 있는 드문 웹 사용자를 위한 대체 역할을 하는 단순하고 순수한 HTML 사이트를 만들 수 있을 것입니다. " 사이트.

또한 사용자 기반에 따라 다음과 같습니다.미국에서는 일반적으로 사람들이 데스크톱/노트북에 액세스할 수 있으며 보조 액세스를 위해 모바일 장치를 사용합니다.예를 들어 비행기표와 렌터카를 데스크톱 컴퓨터로 예약했는데 모바일에서 예약 코드를 조회하고 싶어요.대부분의 경우 모바일 사이트에서 제공하는 기능을 제한하지 않고 일반적이지 않은 사용 사례를 수행하려면 전체 컴퓨터가 필요할 수 있습니다.

기본 절차:

모바일 및 화면용 UI를 디자인하고 구축합니다.
두 개의 다른 URL에서 사이트를 시작하십시오.새로운 규칙은 데스크톱 버전의 경우 www.yoursite.com이고 모바일 버전의 경우 m.yoursite.com입니다.(이를 통해 사용자는 규칙을 알고 있는 경우 m.yoursite.com을 직접 탐색할 수 있습니다.)
www.yoursite.com에서 사용자 에이전트를 스니핑하고 사용자의 브라우저가 모바일인지 테스트하십시오.그렇다면 사용자를 m.yoursite.com으로 안내하세요.
1. 아마도 사용할 수 있는 다양한 서버 언어(PHP, Perl 등)로 작성된 스니퍼가 있습니다.라이센스를 확인하세요. 다음은 PHP로 작성된 스니퍼의 예입니다..
2. 에서 사용자 에이전트 스니핑에 관한 Wikipedia의 기사:"NTT DoCoMo의 I-Mode 또는 Vodafone의 Vodafone Live!와 같이 휴대폰을 대상으로 하는 웹사이트입니다.포털은 모바일 브라우저가 서로 크게 다르기 때문에 사용자 에이전트 스니핑에 크게 의존하는 경우가 많습니다.지난 몇 년 동안 모바일 브라우징 분야에서 많은 발전이 이루어졌지만, 이러한 새로운 기술을 갖추지 못한 구형 휴대폰이 여전히 많이 사용되고 있습니다.따라서 모바일 웹 포털은 검색에 사용되는 휴대폰에 따라 완전히 다른 마크업 코드를 생성하는 경우가 많습니다.이러한 차이는 작을 수 있습니다(예:더 작은 화면에 맞게 특정 이미지 크기 조정) 또는 상당히 광범위함(예:XHTML 대신 WML로 페이지 렌더링)."
m.yoursite.com에서 www.yoursite.com으로 돌아가는 링크를 제공하세요.이 링크를 클릭하는 사용자는 모바일 사이트로 다시 리디렉션되어서는 안 되며, 이를 수행하는 방법은 구현에 따라 다릅니다.

당신은 따라하고 싶을 수도 있습니다 쿼크스모드 모바일 테스트에 관한 그의 새로운 기사를 참조하세요.

삼:템플릿은 사용자 에이전트에 따라 서로 다른 데이터 청크를 출력하고 별도의 스타일시트를 유지합니다.

(2)와 마찬가지로 사용자 에이전트를 스니핑해야 합니다.(2)와 달리 여전히 동일한 페이지 논리를 사용하고 있으며 두 개의 별도 사이트를 유지 관리할 필요가 없습니다.주로 데이터 읽기에 관한 블로그나 웹사이트를 다루는 경우에는 괜찮을 수 있습니다.

템플릿 코드에서 다음과 같이 말할 수 있습니다.

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

이를 통해 대부분 하나의 템플릿 파일 세트를 유지 관리할 수 있습니다.또한 모바일 사용자에게 보내는 페이지를 간소화하여 사용자가 블로그 게시물 등을 읽고 싶을 때 페이지가 너무 커지는 일이 없도록 할 수 있습니다.

다른 팁

요즘 모바일 장치의 대부분은 "모바일 스타일 시트"를 지원하는 "모바일 스타일"을 지원하는 것이 단순히 대체 스타일 시트 인 것을 더 간단하게 표시합니다. 정상적인 방식으로 사이트에 모바일 스타일 시트를 추가하고 media="handheld" 기인하다:

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

그러면 이러한 스타일은 모바일에 적용됩니다.

이 방법의 유일한 문제는 HTML이 부피가 커지면 대부분의 모바일 브라우저가 느리기 때문에 페이지가로드하는 데 시간이 걸릴 수 있습니다 (Opera Mini 제외). 그렇기 때문에 Flickr 및 Digg와 같은 더 큰 사이트가 별도의 사이트를 사용하는 이유입니다.

추가 메모 :

부피가 큰 HTML은 오페라 미니에 영향을 미치지 않습니다.이 프록시는 외부로 렌더링을 수행 한 다음 장치에 특수 "이미지"를 보냅니다.
간단하고 깨끗한 HTML을 사용하면 일반 브라우저 및 모바일 장치에 동일하게 보낼 수 있습니다.
스타일 시트의 조합을 확인해야합니다. media 속성. 위의 코드를 추가하면 브라우저가 첫 번째 스타일 시트를 무시하게됩니다. 추가하면 media="all" 첫 번째로, 둘 다 사용됩니다 (따라서 시작하기보다는 원래 스타일을 무시할 수 있습니다).

모바일 브라우저 사용에서 WepPage가 어떻게 보이는지 확인하려면 오페라 미니 에뮬레이터

확인하십시오 wurfl 프로젝트. 그 의도는 개발자가 여러 전화 브라우저를 타겟팅하도록 돕고 HDML, WAP 및 XHTML-MP 시대에 모바일 사파리가 있기 전에 다시 시작했습니다. 그러나 iPhone과 같은 최신 장치의 기능을 저장하는 것은 최신입니다. 400 개가 넘는 장치에 대한 데이터가 있으며 Java, PHP, Perl, Ruby, Python, .NET, C ++에 라이브러리가 있습니다. 모바일 앱을 대상으로하는 것이 얼마나 광범위한 지에 따라 볼 것이 있습니다. 여기에 있습니다 Wurfl을 사용하는 사이트 목록.

Luca Passani (Wurfl의 공동 창립자이자 관리자)가 작성한 또 다른 관련 프로젝트는 다음과 같습니다. 스위처. 이를 사용하여 사이트의 모바일 버전으로 자동 리디렉션 할 수 있습니다.

간단하게 유지하십시오 오페라 미니 그리고 당신은 그것을 올바르게 얻을 것입니다. (iPhone은 일반 브라우저에 더 많은 것을 가지고 있습니다 ...)

콘텐츠에 중점을 둡니다
플러그인을 피하십시오
웹 표준을 따르십시오
컨텐츠를 레이아웃/디자인과 별도로 구체화하면 CSS를 사용하여 가능합니다.
텍스트와 사진을 사용하십시오.

필요한 경우 나머지 종과 휘파람을 추가하지만 종과 휘파람이 꺼지는 경우에도 사이트를 항상 사용할 수 있는지 확인하십시오. Lynx와 같은 간단한 브라우저 및 Firefox와 같은 일반 브라우저로 페이지를 탐색 할 수 있다면 올바른 길을 가고 있습니다.

자세한 내용은 자유롭게 방문하십시오 모든 브라우저 캠페인

편집 : 다른 유형의 브라우저에 대해 다른 CSS에서 작업하는 것이 분명하지 않지만 항상 동일한 컨텐츠를 사용하는 것이 분명하지 않은 경우. 방문하다 CSS 젠 가든 멋진 데모를 위해.

업데이트 : CSS 미디어 유형에 링크를 추가하고 다른 사람들이 언급 한 바와 같이 흥미로운 핸드 헬드 옵션입니다.

http://www.w3.org/tr/css21/media.html

이 작업을 수행하려면 두 개의 다른 사이트를 설계해야합니까?

예

모바일 브라우저에서 사이트에 액세스 할 수 있는지 어떻게 알 수 있습니까?

귀하의 프로그래밍 언어는 아마도 고객의 정보를 살펴볼 수있는 방법이 있습니다. 예를 들어 PHP는 슈퍼 글로벌 변수를 가지고 있습니다 $_SERVER 서빙 서버와 방문 클라이언트의 모든 정보가 있습니다. 이 경우, 당신은 $_SERVER['HTTP_USER_AGENT'], 다음과 같은 결과를 제공하면 페이지를 방문해야합니다.

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

이것은 Safari 4.0을 사용하여 Mac OS X 10.5.6을 실행하고 있음을 알려줍니다. 다양한 모바일 브라우저에 알려진 키워드가 있습니다. 예를 들어, iPhone의 브라우저의 한 버전에는 다음 사용자 에이전트가 있습니다.

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

"iPhone"은 이미 그것을 제공하지만 키워드 "Mobile"및 "Safari"에 의해 추가로 확인됩니다.

대부분의 사이트에는 모바일 사이트에 대해 약간 다른 서브 도메인이 있습니다 (대부분 "M"). 예를 들어 Flickr 용도 m.flickr.com

(사용하라는 권장 사항이 있습니다 .MOBI TLD 하지만 나는 그 중고를 본 적이 없다)

디자인을 매우 간단하게 만들고, 너무 많은 그래픽을 사용하지 마십시오. 가능한 한 작게 유지해야합니다.이것 디자인에 도움이 될 수 있습니다.

아마도 기본 사이트에 사용하는 것과 동일한 비즈니스 객체 등을 사용하여 모바일 사용자를 위해 다른 페이지 세트를 구성 할 것입니다.

두 광경의 디자인의 차이가 크지 않으면 별도의 CSS 파일을 제공하는 방법을 얻을 수 있습니까?

귀하의 사이트는 최대 요구 사항을 지원할 수있는 휴대폰으로 제한해야합니다. 당신은 모든 것을 즐겁게 할 수는 없습니다 휴대 전화.

귀하의 웹 사이트마다 CSS 스타일 세트가 있어야하며 HTTP 에이전트는 요청에 따라 클라이언트 유형을 확인해야합니다. CSS 선택이 수행해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow