휴대 전화 용 웹 페이지 개발을위한 모범 사례

Question

저는 대부분의 휴대 전화에서 어떻게 보일지 웹 페이지를 만들 수있는 방법을 알고 싶습니다. 정상적인 웹 페이지 제작을 위해 저는 dreamweaver cs3을 사용합니다. 내가 가지고 있지 않으면 에뮬레이터를 사용하고 싶지 않습니다. 중간에 모든 것을 가운데에 배치 할 수 없으며 양면에 자동 여백이 있습니다.

내가 sofar로 만든 페이지를 볼 때, 그들은 괜찮아 보입니다. 하지만 휴대 전화에서는 어떤 것들이 울려 퍼집니다. 휴대 전화에서 사용하기 위해 필요한 정보와 마크 업을 모두 제거 할 계획입니다.

그런 다음 가장 중요한 지금 나를 위해 하나

어떻게 다른 페이지를 제시하는 basicly, 문제가있는 경우 같은 주소로 휴대 전화 go's?

편집

내가 마지막 톰 답을 얻을 diddn't,하지만 난 사용할 수있는 브라우저 감지 스크립트를 발견했다.

감사, 리처드

Answer 1

, 당신은 도랑 함께 절충해야 데스크톱 컴퓨터에서 실행되는 대부분의 벨소리 및 호각 브라우저는 압연기 가동을 고려합니다.

• XHTML 문서로 mobile doctype을 선언하고 마크 업 및 스타일 시트가 올바른지 확인하십시오.
• CSS를 간단하게 유지하십시오. 아니요 : 마우스를 올리면 디자인의 일부로 이미지를 사용하지 마세요. 고정 크기/여백의 사용을 제한하십시오.
• 에뮬레이터는 실제 장치 자체만큼 테스트에 효과적이지 않습니다. Wifi/Bluetooth PAN을 사용하는 휴대 전화는 수명을 단축 할 수 있지만 이동 통신사의 네트워크를 테스트하면 속도와 대기 시간을 더 잘 이해하는 데 도움이됩니다.
• "일반적인 장치"는 없지만 웹킷의 CSS 애드온을 사용하지 않고도 웹킷에서 웹 사이트를 실제로 볼 수 있다면 엄청난 양의 장치 (Nokia S60, iPhone, Android 등)를 다루었습니다. Opera Mini와 함께 작업하면 더 많은 부분을 확장 할 수 있습니다.
• 가능한 한 출력을 압축하십시오. 최종 사용자가 화면에 표시되고 CPU 처리가 제한 될뿐만 아니라 네트워크에 의해 제한 될 가능성이 큽니다. 데이터를 빠르게 푸시할수록 웹 사이트는 느려집니다.

Answer 2

그냥 내 두 센트 : 그것은 자동 표시의 길이와 폭에 따라 자체를 조정하도록

1. 개인적으로는, 레이아웃 유체를 만들 것입니다. 많은 휴대 전화에는 옆으로 바둑판 식으로 배열했을 때 페이지 방향을 변경할 수있는 가속도계가 있습니다. 이 경우 가로 스크롤은 큰 노 - 노입니다.

2. 그냥 쓸모없는 것들을 제쳐두고 기본 정보 만 표시하면 고급 또는 세부 정보는 자세히 버튼 아래에 있어야합니다.

3. 이미지를 사용하지 마십시오. 가능한 한 최소한으로 사용하십시오. 이것은 사용자의 대역폭을 최대한 활용합니다. GPRS/EDGE 이하의 사용자를 타겟팅하는 경우 이미지를 더 잘 피하십시오. 3G에있는 사람들은 더 좋은 기회가 있습니다.

4. Facebook 또는 Gmail 모바일 인터페이스에서 아이디어를 얻을 수 있습니다. Google Reader's 모바일 인터페이스도 좋지만 마크까지는 아닙니다.

5. 얼마나 많은 사람들이 저에게 동의하는지 모르겠습니다. AJAX을 낮게 유지하십시오. 페이지가 고도로 조정되면 대부분의 휴대 전화는 많은 부하를 처리 할 수 ​​없습니다. 모바일이 아니라 컴퓨터가 기억하십시오. 그것은 약간의 제한이 있습니다. 아마 최고급 전화기로 렌더링 할 수 있지만 사용자 기반을 강력하게 유지하려면 사용을 최소화하십시오.

---

컨텐츠로드 : 페이지가 바로로드 많은 시간을 소요한다면, 아마도 사용자가이를 사용하여 귀찮게하지 않습니다. 그들은 자신의 일을 성취 할 수있는 다른 대안/서비스를 사용하는 것을 선호합니다.

CSS : 가능한 한 CSS의 사용을 줄이십시오. 위의 여러 번 말한 것처럼 이미지보다 색상을 많이 사용하십시오. 플로트를 사용하여 페이지가 화면에 제대로 표시되도록해야합니다.원하는 경우 작은 글꼴을 사용할 수 있지만주의하십시오. 특정 수준 이하로 떨어지지 마십시오. 그것은 특정 아이폰이 비록, 당신은 또한 아이폰 웹 콘텐츠를 설계에 사과 문서를 확인하실 수 있습니다

http://www.alistapart.com/articles/putyourcontentinmypocket/

:

Answer 3

목록이 외에도 조건부 모바일 장치에 대해 서로 다른 스타일 시트를 사용하는 방법에 대한 좋은 기사를 가지고 그것은 일반적으로 모바일 장치에 관한 것이다 :

http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1

호환성의 가장 큰 금액을 얻기 위하여