모바일 장치 용 디자인 살펴보기
첫 번째 아이폰이 출시되었을 때 폭풍에 의해 기술 세계가 등장했습니다. 그 이후로 거의 5 년이되었으며 스마트 폰 시장은 인기를 얻었으며 심지어 마이크로 소프트도 Windows 7 OS 및 파트너와 경쟁하게되었습니다. 요즘 스마트 폰에 이렇게 많은 인터넷 사용자가 있기 때문에 적극적으로 모바일 웹 사이트의 수가 증가 할 것으로 예상하는 것이 일반적입니다.
그러나 모바일 웹 설계는 일반적인 웹 디자인과 완전히 다른 작업입니다. 우리의 웹 사이트는 거대한 화면을 위해 설계되었지만 스마트 폰의 화면 크기는 너무 작아서 성가신 유용성 문제로 이어집니다. 새로운 디자인 표준 및 관행 원활한 사용자 경험을 제공하는보다 나은 모바일 사이트 디자인에 크게 필요합니다..
이 가이드에서는 스마트 폰의 모바일 브라우저를위한 사용자 친화적 인 사이트를 디자인하려고합니다. 나는 당신이 더 나은 모바일 웹 사이트를 디자인 할 수 있도록 모범 사례와 유용한 개발자 도구에 대해 이야기 할 것이므로 점프 후 시작하자.!
강력한 사용자 환경 계획
모바일 웹 사이트를 구축 할 때 항상 사용자를 염두에 두라., 궁극적으로 귀하의 웹 사이트는 사용자가 즐길 수 있도록 설계 및 제작되고 있습니다. 사용자가 모바일 웹 사이트가 데스크톱 환경과 유사하게 동작 할 것으로 기대하는 것은 당연한 일입니다. 사용자에게 친숙한 환경 유지 모바일 사이트를 성공적으로 구축하는 데 주력해야합니다..
사용자를 위해 고려해야 할 많은 유용성 개념이 있습니다. 이러한 고려 사항에는 다음이 포함됩니다. 화면 크기, 인라인 이미지, 하이퍼 링크, 글꼴 크기, 과 페이지 탐색. 우리는 더 나은 사용성을 위해 귀하의 웹 사이트를 개척 할 수 있도록 모바일 사용성 디자인에 대해 작성했습니다. 가이드 외에도, 당신은 항상 새로운 아이디어에 대한 경계를 유지하라. 귀하의 사이트를 개선하기 위해.
강력한 사용자 환경을 계획한다는 것은 사용자가 사용자가 귀하의 웹 사이트와 상호 작용하는 방법을 고려하십시오.. 바탕 화면에서 웹 사이트는 마우스와 키보드로 상호 작용할 수 있지만 스마트 폰에서는 사용자가 두드림, 가볍게 치기, 과 스 와이프 귀하의 사이트를 돌아 다니십시오. 사용자가 할 수있는 방식으로 사이트를 디자인해야 할 수도 있습니다. 이러한 물리적 움직임으로 사이트 정보에 쉽게 액세스하십시오..
짧은 페이지 유지
웹 사이트의 고기와 감자는 페이지 내용. 각 웹 페이지 상당한 양의 유용한 정보를 보유하고있다. 텍스트, 사진 또는 비디오와 같은 사용자를 위해 또한 몇 페이지에 걸쳐 실행되는 뉴스 기사 및 블로그 게시물을 찾을 수 있습니다. 이는 텍스트를 분리하는 데 도움이 될 수 있지만 모바일 장치의 경우에는 권장되지 않습니다. 더 많은 페이지 로딩이 필요합니다. 이는 사용자 측에서 더 많은 대기 시간을 의미합니다..
절대적으로 필요한 경우가 아니라면 추천합니다. 페이지 콘텐츠를 짧게 유지. 당신은 또한 그것으로 보이게하는 것을 고려해야합니다. 글꼴을 훨씬 더 큰 크기로 스타일 지정하기 어쩌면 옆으로 움직이는 이미지. 전체 디스플레이에 콘텐츠를 게시하면 자연스럽게 주목을 받게됩니다. 물론 최적화로 페이지를 훨씬 더 간단하게 스캔 할 수 있습니다. 이것은 또한 왜 단일 열 레이아웃 법안에 완벽하게 부합하다..
대부분의 경우 모바일 브라우저는 데스크톱 브라우저만큼 빨리 웹 페이지를로드하지 않으므로 독자가 귀찮아 질 수 있습니다. 콘텐츠 및 웹 사이트 최적화 고속 컨텐츠 로딩. 당신은 전체 내용을 유지하면서 기사를 줄이십시오., 또는 단순히 불필요한 이미지 제거. 아름다움 대신 단순함에 집중하십시오..
핵심 네비게이션은 방문객이 페이지 간을 이동하고자하는 생명의 은인입니다. 휴대 기기에서는 화면 링크가 더 작아 져서 탭하기가 훨씬 어려워집니다. 이 문제를 해결하기위한 필수 조정은 다음과 같습니다. 내비게이션 링크의 글꼴과 공간을 최대화하십시오., 어쩌면 전체 블록 영역을 차지할 수도 있습니다. 또는 실제 iPhone 응용 프로그램의 탭 표시 줄과 비슷한 탐색 모음 디자인, 위에 전시 된 것과 같습니다..
모바일 CSS 스타일 만들기
이제는 더 나은 가독성과 유용성을 위해 모바일 웹 사이트를 최적화하는 방법을 알게되었으므로 CSS 스타일에 대해 이야기하는 것이 좋습니다. 각 CSS 스타일 시트에는 글꼴, 크기, 위치 지정 및 표시 설정과 관련된 속성이있는 많은 선택기가 포함되어 있습니다. 모바일에 관해서는주의를 기울여야합니다. 블록이 어떻게 자리 잡을 까?.
(이미지 출처 : Smashing Magazine)
시작하는 한 영역은 다음과 같습니다. 사이트의 래퍼 너비를 백분율로 재설정하십시오.. 픽셀을 위치 지정, 선 높이, 글꼴 크기 및 div의 너비 단위로 사용하는 것이 일반적이지만 모바일을 다룰 때는 페이지를 각 장치 간 유체 및 천이. 컨테이너 div를 100 % 너비로 설정하면 콘텐츠가 가장자리를 넘지 않고 세로 / 가로 모드 사이를 쉽게 채우기.
전체 레이아웃을 재구성하려는 사람들 중 한 명이라면 모든 것을 명중하다. 다시 놓기. 또한 단락, 제목 및 탐색 링크는 모두로 설정되어야합니다. 디스플레이 : 블록; 선형 인쇄 스타일 감각을 얻을 수 있습니다.. 레이아웃에서 팽창을 제거하기 위해 여백과 패딩을 다시 배치하십시오.. 표 피하기 장치간에 버그가있는 결과를 내기 쉽기 때문에 가능하다면.
큰 이미지는 또한 장치 간의 번거 로움입니다. 대부분의 웹 사이트 이미지는 480px보다 크게 렌더링되므로 컨테이너를 깨뜨리지 않을 수 있습니다. 첫 번째 옵션은 이미지의 크기를 자연스럽게 조절할 수 있도록 너비를 100 %로 설정하십시오.. 확실히 가능합니다. 귀하의 웹 사이트를위한 다양한 이미지 세트를 만드십시오. 브라우저 에이전트를 기반으로 다르게 렌더링합니다. 그러나 솔직히이 방법은 귀하의 측면에서 더 많은 작업을 추가하기 때문에 시도하십시오. 정말로 필요할 때만 기술을 사용하십시오..
iPhone 용 웹 사이트 디자인
모바일 시장 점유율은 상당히 크고 분열되어 있지만, 애플은 자사의 iDevices를 통해 파이의 큰 부분을 차지하고있다. iPhone과 iPad는 모두 터치 스크린 기능이 내장 된 모바일 인터넷 지원 장치입니다. 그들은 동일한 기본 웹 브라우저 인 Safari와 다른 많은 옵션을 제공합니다..
iPhone 관련 웹 사이트의 경우 화면 크기를 타겟팅해야합니다. 고정 스크린 크기는로 설정됩니다. 이전 iPhone 모델의 경우 320x480 픽셀 과 iPhone 4 및 iPhone 4S의 경우 640x960 픽셀.
iPhone 화면은 공간으로 제한됩니다. 너는 ~해야한다. 필요한만큼 길게 펼쳐지는 한 블록의 콘텐츠. 단일 열에 요소 유지 두통을 유체 레이아웃을 허용 “작성” 세로 모드와 가로 모드 모두. 이를 위해 다른 템플릿을 개발하고 방문자가 iPhone을 사용하는지 확인하는 방법을 찾아야 할 것입니다. 아래의 작은 PHP 스 니펫이 잘 작동해야합니다.
기본적으로 로직은 우리의 글로벌 $ _SERVER HTTP 에이전트의 변수와 단어가 있는지 확인합니다. “아이폰” 나타납니다. 그렇다면 우리는 방문객이 iPhone을 사용하고 있다는 것을 알고 있으며 약간 다른 HTML 또는 완전히 새로운 템플릿 레이아웃을 추가 할 수 있습니다! 이것은 또한 iPhone 관련 스타일 시트 포함, 페이지 제목 변경, 이미지 제거 또는 거의 모든 동적 효과.
새로운 스타일을 제공 할 때 더 쉬운 방법이 있습니다. 앞서 언급했듯이 iPhone의 최대 화면 크기는 960 픽셀입니다. 따라서 새로운 CSS3 미디어 쿼리를 통해 사이트의 주요 스타일 시트에 스타일을 직접 추가 할 수 있습니다. 만 iPhone에 표시. 다음은 간단한 예제 코드입니다.
@media 화면 및 (최대 장치 너비 : 960 픽셀) / * iPhone css * /
이 때문에 작동합니다. CSS는 이제 탐색 에이전트와 해당 속성을 검색 할 수 있습니다.. 최대 화면 너비는 감지 할 수있는 속성 중 하나입니다..
iPhone 장치 용 올인원 모바일 웹 사이트는 설계하기가 너무 어렵지 않습니다. 참조 할 수있는 예제가 너무 많습니다. 즉, CSS iPhone. 바쁘게 공부하다 두려워하지 마라. UI 디자인에 새로운 기술을 실험 해보십시오..
모바일 jQuery 스크립팅
대다수의 프런트 엔드 웹 개발자는 jQuery 라이브러리에 익숙합니다. 코딩 효과, 애니메이션, 드롭 다운 메뉴 및 다양한 브라우저 내장 기능에 대한 환상적인 속기를 제공하며 jQuery Mobile 발표로 더욱 멋지게 나옵니다. 그것은 직접 기술에 뛰어 들지 않는 것이 좋습니다. 어디서나 효과가있는 웹 사이트를로드 할 수 있지만 테스트 목적으로 고급 기능이 매우 잘 작동 할 수 있습니다..
jQuery Mobile은 일반적인 jQuery와는 약간 다릅니다. 전체 환경을 구축 할 수 있기 때문입니다. 파일을 사용하여 작업 할 때는 JavaScript뿐만 아니라 버튼, 링크 및 전환 효과를위한 CSS 스타일을 사용합니다. HTML 코드로 웹 페이지를 작성하고 있지만 jQuery Mobile 팀은 선택적 UI 디자인 기능을 많이 제공함. 이 프레임 워크로는 우리가 할 수있는 일이 많지만 프레임 워크는 아직 베타 버전입니다., 단순한 효과에 집중합시다..
DevGrow 블로그의 작은 자습서에서는 멋진 예제를 제공합니다. 공식 사이트에서는 시범 사용을위한 데모도 제공합니다. 우리는 HTML 속성을 사용하고 있습니다., 데이터 전이 미리 정의 된 값을 사용하여 애니메이션 효과를 추가 할 수 있습니다. 여기에는 슬라이드, 팝, 플립, 페이드 등이 포함됩니다. 작은 DevGrow 예제를 확인하여 이러한 효과를 맛보십시오.
효과와 전환 효과는 매우 깔끔하고 jQuery와 완전히 일치하는 모바일 인터페이스를 구축 할 수 있다는 사실도이 플랫폼의 커다란 진일보이지만 베타 버전의 플랫폼만으로는 전체 모바일 사이트 구축을 권장하지 않습니다. 그들의 도서관, 특히 그것의 사실 서면으로 모든 주요 스마트 폰에서 지원되지 않음 (특히 Windows Phone 7), 시간이 지날수록 확실히 좋아질 것입니다..
궁극적으로이 새로운 모바일 프레임 워크에 익숙해지는 것이 좋습니다. 전에 모든 프로젝트에서 라이브 배포.
유용한 개발자 도구
모바일 개발자는 코딩 및 디자인 리소스를 조사하는 것이 아닙니다. 또한 강력한 모바일 프레임 워크는 말할 것도없고 소프트웨어 툴과 IDE에 대한 수요가 높습니다. 웹 개발은 많은 노력을 필요로하는 어려운 작업이지만 추가 도구를 활용하면 작업을 훨씬 쉽게 할 수 있습니다..
Opera 모바일 에뮬레이터
모바일 웹 사이트의 렌더링 방식을 확인하는 방법을 찾고 계십니까? 인터넷에 접속할 수있는 스마트 폰이 없다면 엄청난 고통이 될 수 있습니다. 또는 업데이트가 서버에 푸시 될 때마다 사이트를 테스트하기 위해 스마트 폰을 사용하고 싶지 않을 수도 있습니다. Opera Mobile Emulator는 모바일 웹 사이트를 테스트하는 환상적인 소프트웨어입니다..
에뮬레이터는 모바일 프로필 20 개 삼성 Galaxy S, HTC Desire, 심지어 Motorola Xoom과 같은 타블렛과 같은 또한 다음을 설정할 수 있습니다. 사용자 정의 해상도 과 픽셀 밀도 집중적 인 테스트 목적으로. 무엇보다도, 구성 작업을 많이 할 필요가 없으며 몇 번의 클릭만으로도 좋은 결과를 얻으실 수 있습니다..
다운로드는 완전히 무료이며 소프트웨어는 Mac OS X 및 Windows 환경에서 모두 실행됩니다. 그들의 개발자들은 적절한 웹 표준을 만들고 모바일 렌더링 엔진을 조정하는 일에 열심입니다. 나는 당신이 길을 따라 도울 수있는 추가 도구를 찾고 있다면 다른 개발 도구를 추천한다..
PhoneGap
견고한 모바일 애플리케이션을 개발하기 위해 HTML5를 기반으로 개발 된 API가 많이 없습니다. 주목할 만하게 모바일 프리는 이러한 유형의 웹 사이트가 부족하여 PhoneGap이 틈새 시장을 잘 채우는 이유입니다. 플랫폼으로 쉽게 6 가지 플랫폼에서 HTML5 기반 앱을 네이티브 애플리케이션으로 구성.
프로세스는 먼저 코드를 압축하고 PhoneGap의 응용 프로그램 프레임 워크를 통해 전달합니다. 거기에서 앱은 Android, iOS, Windows Phone 7 및 BlackBerry를 포함하여 모바일 시장의 상당 부분에 도달 할 수 있습니다..
만약 당신이 조금 혼란스러워하지 마십시오 너무 많이. 그들의 지원 페이지는 프로세스를 깔끔하게 요약하고 유용한 리소스에 대한 링크를 제공합니다. 이미 개발 된 응용 프로그램은 아름다운 도서관 스타일의 포트폴리오로 정리되었습니다. 전체 앱 컬렉션을 확인한 다음 스크린 샷으로 기기별로 정렬 할 수 있습니다..
앱 타나 스튜디오
Aptana 웹 사이트는 개발 도구에 대해 학습 할 수있는 최고의 장소입니다. 최신 스위트 인 Aptana 3.0.3에는 웹 개발, CSS 스타일 및 HTML 태그 중첩을위한 완전히 통합 된 IDE가 있으며 가장 좋은 부분은 Aptana입니다. 비어 있는 다운로드! 그들은 개발자를위한 거대한 편의가되는 3 가지 주요 운영 체제 (Linux 포함) 모두를위한 패키지를 제공합니다.
Aptana를 특별하게 만드는 이유는 작은 웹 애플리케이션을 개발하고 설계를 얼마나 신속하게 테스트 할 수 있는가하는 것입니다. 스튜디오 스위트를 사용하면 Ruby on Rails, PHP, Python 또는 단순히 HTML / CSS를 통해 실행되는 웹 응용 프로그램을 신속하게 개발하고 테스트합니다., 코드 강조 표시 기능이 최근에 새로운 HTML5 및 CSS3 태그 라이브러리 포함. 또한 Git 통합, 기본 제공 터미널, 코드 디버거 및 기타 멋진 기능 중 일부가 함께 제공됩니다.
모바일 GUI 키트 및 아이콘
공짜 물건이없는 웹은 무엇일까? 웹 디자이너에게는 사용자 인터페이스의 중요성이 다른 모든 것보다 우선합니다. 간단한 그래픽 사용자 인터페이스를 사용하기가 어려우며 가장 창의적인 디자이너 만 작업 솔루션을 제안했습니다..
그러나 웹 디자이너가 테스트 할 수있는 무료로 고품질의 리소스가 많이 있습니다. 이러한 GUI 키트는 주로 Adobe Photoshop 또는 Fireworks 용으로 설계되어 요소를 이동하고 플랫 이미지 파일로 내보낼 수 있습니다.
아이콘은 매우 유용한 리소스입니다. 디자이너는 무료 세트를 만들고 그 어느 때보다도 온라인에서 더 자주 제공합니다. 그러한 웹 사이트 중 하나 인 Glyphish는 무료 및 프로 아이콘을 모두 제공합니다. 이러한 디자인은 모바일 템플릿 및 앱 디자인에 사용되는 단일 테마를 기반으로합니다..
템플릿 프로토 타입 템플릿은 웹 사이트 및 응용 프로그램 개발 과정에서 큰 도움이 될 것입니다. 강력한 그래픽 인터페이스가 있고 이러한 웹 키트가 올바른 경로에서 시작될 때까지 코딩을 시작하면 안됩니다..
iOS 5 GUI 키트
iPhone UI 벡터 요소
iPhone 앱 아이콘 키트
와이어 프레임 마그넷 (DIY 키트)
안드로이드 인터페이스 GUI
