아이폰이 어떻게 웹 페이지를 넘기고 펼칠 수 있는지 보았다. 전체 웹 페이지를 한 눈에 보여 주거나 확대하여 관심있는 텍스트를 읽을 수있게 할 수 있습니다. 어떤 의미에서, iPhone은 Safari를 사용하기 때문에 웹 디자이너는 iPhone에서 작동 할 웹 페이지를 만들 때 특별한 작업을해서는 안됩니다.
하지만 실제로 페이지가 제대로 작동되기를 원하십니까? 대부분의 디자이너는 자신의 페이지를 빛나기를 원합니다!
웹 페이지 를 만들 때 누가 그것을 볼 것인지, 어떻게 보게 될지 생각해야합니다. 최상의 사이트 중 일부는 해상도, 색상 옵션 및 사용 가능한 기능을 포함하여 페이지를 볼 수있는 장치의 유형을 고려합니다. 그들은 그것을 파악하기 위해 장치에 의존하지 않습니다.
모바일 장치 용 사이트 구축을위한 일반 지침
- 최대한 많은 장치에서 테스트하십시오. 가장 먼저해야 할 일은 iPhone과 가능한 많은 다른 모바일 장치 또는 에뮬레이터에서 사이트를 보는 것입니다. 에뮬레이터를 모든 테스트에 사용할 수는 있지만 작은 화면의 웹 사이트를 탐색하는 것과 같은 느낌을주지 않으므로 최대한 실제 장치에서 테스트하십시오.
- 페이지를 정상적으로 열화 시키십시오. 플래시를 사용하는 와이드 스크린 브라우저 용으로 페이지를 작성할 수 있지만 쿠키, Ajax, Flash, JavaScript 등의 특수 기능을 처리 할 수없는 작은 모니터에서도 중요한 정보가 표시되는지 확인하십시오. XHTML Basic을 능가하는 것이라면 일부 휴대폰을 능가 할 것입니다. 대부분의 스마트 폰이 모든 것을 처리 할 수 있지만 (물론 iPhone의 플래시는 제외), 다른 모바일 장치로는 불가능합니다.
- 무선 특정 페이지를 만들고 쉽게 찾을 수 있습니다. 휴대 전화 및 무선 고객을위한 특정 페이지를 작성하려는 경우이를 사용할 수 있도록하십시오. 가장 좋은 방법은 문서 맨 위의 무선 페이지에 링크를 놓은 다음 핸드 헬드 미디어 유형을 사용하여 비 핸드 헬드 장치에서 해당 링크를 숨기는 것입니다. 결국 대부분의 사람들은 휴대 전화에서도 홈 페이지를 방문합니다. 무선 페이지에 대한 링크가 없으면 페이지를 사용하기가 너무 어려워서 떠나게됩니다.
스마트 폰용 웹 페이지 레이아웃
스마트 폰 시장을위한 페이지를 작성할 때 가장 먼저 기억해야 할 것은 원하지 않는 경우 변경하지 않아도된다는 것입니다. 사용할 수있는 대부분의 스마트 폰의 가장 큰 장점은 웹 페이지를 표시하기 위해 Webkit 브라우저 (iOS의 Safari 및 Android의 Chrome)를 사용하므로 사파리 또는 Chrome에서 페이지가 정상적으로 보이는 경우 대부분의 스마트 폰에서 잘 보입니다 ). 그러나 브라우징 환경을보다 쾌적하게 만들기 위해 할 수있는 일이 있습니다.
- 화면이 작다는 것을 기억하십시오. 스마트 폰은 모든 열을 작은 창으로 압축하므로 줌없이 읽을 수 없습니다. 대부분의 사용자는 확대 / 축소에 익숙하지만 귀찮은 일이 발생할 수 있습니다. 하나의 긴 텍스트 열은 읽기가 쉽습니다.
- 페이지를 작은 덩어리로 나눕니다. 휴대 전화에서 긴 텍스트 세그먼트를 읽는 것은 어려울 수 있으므로 여러 페이지에 올리면 쉽게 읽을 수 있습니다.
iPhone의 링크 및 탐색
- URL이 짧을수록 좋습니다. 휴대 전화에서 URL을 입력하려고 시도했다면 고통 스럽다는 것을 알 수 있습니다 (많은 문자 메시지를 보내는 데 익숙하지 않은 십대를 제외하고). iPhone에서도 긴 URL을 입력하는 것은 지루합니다. 짧게 지켜라.
- 그러나 긴 링크 텍스트는 탭하기가 더 쉽습니다. 여러 개의 다른 단어가 서로 다른 기사에 링크되어있는 페이지에서 서로 바로 옆에있는 경우 확대 / 축소하지 않고 올바른 단어를 탭하는 것은 매우 어려울 수 있습니다. 많은 사람들이 포기하고 다른 곳으로 갈 것입니다. 3 ~ 5 단어로 된 링크는 1 단어 링크보다 클릭하기가 쉽습니다.
- 네비게이션을 화면 맨 위에 두지 마십시오. 화면 및 링크 화면을 통해 페이지를 탐색하여 원하는 정보를 찾는 것보다 더 짜증나는 일은 없습니다. 휴대 전화 용으로 설계된 웹 페이지를 살펴 본다면 처음 나타나는 내용이 내용과 헤드 라인이라는 것을 알 수 있습니다. 그 다음은 네비게이션입니다.
- 네비게이션을 숨길 까봐 두려워하지 마라. CSS 또는 JavaScript로 탐색 링크를 숨기고 사용자가 스마트 폰 사용자를 위해 페이지를 쉽게 만들 수있는 방법을 묻는 경우에만 해당 링크를 표시하도록합니다.
스마트 폰 이미지 용 팁
- 이미지는 작아야합니다. 예, Android 및 iPhone은 이미지를 확대 / 축소 할 수 있지만 크기가 작을수록 크기와 다운로드 시간이 모두 길어질수록 무선 고객은 더 행복해집니다. 이미지 최적화 는 항상 좋은 생각이지만 휴대 전화 페이지의 경우 중요합니다.
- 이미지를 빨리 다운로드해야합니다. 이미지는 휴대 기기에서 이미지를 볼 때 웹 페이지에서 많은 공간을 차지합니다. 그리고 종종 전체 화면 웹 브라우저에서 볼 때 페이지가 더보기 좋게 보이지만 종종 모바일 장치에서 작동합니다. 또한 스마트 폰 사용자가 셀룰러 네트워크에있을 때 가장 많이 지불하고 싶은 것은 엄청난 이미지 나 탐색 아이콘을 다운로드하는 것입니다.
- 페이지 상단에 큰 이미지를 넣지 마십시오. 탐색과 마찬가지로 페이지 상단에 3-4 화면을 차지하는 이미지를 기다리는 것은 매우 지루할 수 있습니다. 그리고 이것은 웹 페이지에서 매우 일반적입니다. 이것에 대한 유일한 예외는 독자가 사진 갤러리에서 말하면 클릭 할 때 이미지를 얻을 것이라는 것을 알고 있다는 것입니다.
모바일 용으로 설계 할 때 피해야 할 사항
모바일 친화적 인 페이지를 만들 때 피해야 할 몇 가지 사항이 있습니다. 위에서 언급했듯이, 당신이 정말로 당신의 페이지에 이것을 가지고 싶다면, 당신은 할 수 있지만, 그 사이트가 그들없이 작동하는지 확인하십시오.
- 플래시 - 대부분의 휴대 전화는 플래시를 지원하지 않으므로 무선 페이지에 포함시키지 않는 것이 좋습니다.
- 쿠키 - 많은 휴대 전화에는 쿠키 지원이 없습니다. iPhone에는 쿠키가 지원됩니다.
- 프레임 - 브라우저가 지원하는 경우에도 화면의 크기를 고려하십시오. 프레임은 휴대 기기에서 작동하지 않습니다. 읽기가 매우 어렵거나 불가능합니다.
- 테이블 - 모바일 페이지의 레이아웃에 테이블을 사용하지 않습니다. 그리고 일반적으로 테이블을 피하십시오. 모든 핸드폰에서 지원되지는 않지만 (iPhone 및 기타 스마트 폰이 지원하지만) 이상한 결과를 초래할 수 있습니다.
- 중첩 테이블 - 테이블을 사용해야하는 경우 다른 테이블에 중첩하지 않도록하십시오. 데스크톱 브라우저가 지원하기가 어려우며, 기껏해야 페이지 로딩 속도가 느려집니다.
- 절대 값 - 즉, 픽셀, 밀리미터 또는 인치와 같은 절대 크기로 객체의 크기를 정의하지 마십시오. 100px 너비로 정의한 경우 화면의 절반이 될 수있는 모바일 기기에서 너비가 2 배가 될 수 있습니다. 상대 크기 (예 : ems 및 percentage)가 가장 잘 작동합니다.
- 글꼴 - 당신이 액세스하는 데 익숙한 글꼴 을 휴대 전화에서 사용할 수 있다고 가정하지 마십시오.
더 읽기
- PHP를 사용하여 웹 사이트를 모바일 친화적으로 만드는 방법