사이트의 모바일 버전 : 어떻게 만들어? 응답 디자인

태블릿, 전화, 새로운 레벨과 사이트의 최적화와 관련하여 - 오늘날, 대부분의 사람들은 모바일 기기를 통해 온라인으로 이동합니다. 사용자가 제공하고 사이트가 모바일 기기에 최적화되지 않은 것을 볼 경우 당신은 이미지를 볼 수없는, 왜곡 버튼, 작고 읽을 글꼴, 디자인을 뽑아 - 99을 100 % 그는 나올 것이고, 또 다른 더 편리 찾기 위해 시작됩니다. 크롤러 , t를 자원이 관련이없는 수표를 넣어 것입니다. E.는 검색 쿼리와 일치하지 않습니다. 따라서, 페이지의 디자인은 항상 다양한 모바일 장치에 적응되어야한다. 어떤 사이트의 모바일 버전, 어떻게 그것을 할 것입니다 더 나은 어떤 방법을 적용? 이 문서에서 자세한 내용을 읽어 보시기 바랍니다.

그래서, 모바일 버전의 사이트를 적응하는 네 가지 방법이 있습니다.

방법 1 - 반응 디자인

적응 패턴은에 따라 이미지 사이트를 변경 제안 화면 크기. 일반적으로, 그들은 표준 1600, 1500, 1280, 1100, 1024, 980 픽셀로 설정되어 있습니다. 사용을 구현하기 위해 CSS3 미디어 쿼리. 웹 사이트 디자인 자체는 변경되지 않습니다.

이 방법의 장점은 포함해야한다 :

• 구조 자체 편안한 디자인은 디스플레이 설정을 조정하고, 어떤 업데이트는 CSS와 HTML을 조정할 수있을만큼 처음부터 디자인, 개발을 필요로하지 않는다;
• URL 한 - 사용자가 몇 가지 이름을 기억하지 않아도, 웹 마스터의 일을 복잡하게하고, 정렬하고 하나의 주소 자원 순위를 쉽게 엔진을 검색 할 수 있습니다 (하나 개의 주소에서 다른 전달) 리디렉션 필요가 없다.

물론, 적응 템플릿은 자신의 단점, 그런데, 더 장점보다 더 있습니다. 그러나, 많은 개발자들이이 개념을 준수, 예를 들어, 구글 공사, 대답하는 디자인을 가지고 사이트의 모바일 버전. 따라서, 단점 :

• 응답 디자인은 PC에 같은 모바일 장치에서 동일한 작업을 지원하지 않습니다. 이 경우, 예를 들어, 사용자가 환율 또는 가장 가까운 ATM에 대한 중요한 정보가 될 가능성이 은행의 웹 사이트의 모바일 버전은,이 디자인은 매우 충분하다. 이 섹션과 하위 섹션의 많은 복잡한 구조의 자원 인 경우 단, 적응 레이아웃은 거의 방문자에게 호소하지 않습니다.
• 느린 로딩 웹 사이트는 증오에 마음에 드는 변환합니다. 이 애니메이션이 있습니다 자원, 비디오 클립, 팝업과 풍요 다른 활성 요소 특히 그러하다. 화하고 가서 사이트의 위치를 검색 - - 때문에 페이지의 무거운 무게 단순히 사용자가 "느리게"것이다 하락.
• 모바일 버전을 해제하는 무능력 - 또 다른 큰 단점이다. 요소가 레이아웃을 숨겨진 경우, 당신은 당신이 그것을 해제하고 일반 도메인에 갈 수있는 웹 사이트에 반대하여 엽니 다 아무것도 할 수 없습니다.

그럼에도 불구하고, 특별한 기술 및 자원 비용없이 신속하게 사이트의 모바일 버전은 모든 기기에 적용 할 수 있습니다. 그러나 복잡한 탐색 및 애니메이션 않고, 정보 자원 및 멀티미디어의 최소 때문에 이러한 단점의, 작은, 간단한에 적합합니다. 복잡한 사이트에 대해이 다른 방법으로 접근합니다.

두 번째 방법 - 사이트의 별도의 버전

이 방법은 매우 일반적이며, 종종 성공을 모바일 기기에서 쉽게 읽을 사이트를합니다. 그것의 본질은 페이지의 별도의 버전, 응용 프로그램에 의해 그려진 예에 대해 별도의 URL 또는 하위 도메인, m.vk.com에 배치를 만드는 것입니다. 이 경우, 기본 기능은 단지 다른 웹 사이트 디자인을 보이는 유지된다. 이러한 방법의 장점을 사용할 수 있습니다 :

• 사용자 친화적 인 인터페이스;
• ... 쉬운 버전이 주요 자원에서 분리 된 존재에 즉, 편집하고 변경하려면,
• 그것 때문에 적응 템플릿보다 훨씬 빠른 사이트의 각 버전의 낮은 무게;
• 종종 모바일에서 페이지의 주요 버전에 갈 수있는 기회를 가질 수있다.

그러나 여기에 단점이없는 것은 아니다이었다

• 여러 주소 - 바탕 화면과 사이트의 모바일 버전. 어떻게 사용자가 두 가지 옵션이 기억되도록 만들어? 웹 마스터는 종종 모바일 버전을 dekstopnoy하는 리디렉션 (재) 규정하지만, 모바일 버전에서이 페이지가 존재하지 않는 경우, 사용자는 오류가 발생합니다. 여기,이 같은 자원의 2 순위 어려운 검색 엔진, 어려움이 있고,이 승진에 직접적인 영향을 미치고 있습니다.
• 사용자가 실수로이 터무니 보일 것 내려갈 경우 컴퓨터에서 사이트의 모바일 버전, 그 또한 출석에 영향을 줄 수 있습니다.
• 사용자가 매우 제한된 기능을 사용할 수 있습니다, 그래서이 버전은 종종 크게, 바탕 화면을 축소합니다. 뭔가가 누락 된 경우 그러나 동시에, 방문자는 페이지의 전체 버전으로 갈 수 있습니다.

일반적으로, 별도의 모바일 사이트는 떨어져 지불 및 모바일 장치를위한 자원 적응의 가장 일반적인 방법입니다. 그것은 예를 들어, 아마존 최대의 온라인 소매 업체들에게 인기입니다.

세 번째 방법 - RESS 디자인

검색 엔진 구글은 적극적으로 모바일 디자인의 경향을 지원하고있다. 이 휴대 전화 또는 태블릿에 대한 사이트를 적응하는 가장 복잡하고 비용이 많이 드는,하지만 효과적인 방법입니다. 그것은 RESS이라고합니다. 별도로 각 기기에 다운로드 할 수있는 모바일 애플리케이션에서 리소스를 대상으로한다. GOOGLEPLAY에서,하지만 애플 - - 아이튠즈와 안드로이드하십시오.

이러한 응용 프로그램은 쉽게, 무료, 빠르고 다양한 유형의 정보를 수용 할 수있는 능력을 가지고 있고, 휴대 전화의 메모리 및 인터넷 트래픽은 브라우저를 통해 사이트를 방문 할 때 같이 먹게되지 않습니다. 링크가 항상 손에서 화면에있을 것입니다 때문에 그들은 입력하기 쉽고, 브라우저의 주소 표시 줄에 복잡한 이름을 입력 할 필요가 없습니다.

이 같은 프로그래머의 많은 수의 노동의 높은 비용의 개발의 어려움 등의 단점, 또한 몇 가지 옵션 레이아웃을 할 필요가 물론있다. 때로는 모바일 장치는 응용 프로그램에서 인식되지 않습니다. 결함을 수정하는 일반 기술 지원의 필요성,. 그러나이 옵션은 생산 가동 시간의 관점에서 제안 된 세 가지의 최고의 간주됩니다.

모바일 사이트를 만들 수있는 저렴한 방법

위의 방법의 모든 경우에 항상 길고 복잡하지만, 여전히 웹 마스터가 유급 노동을 포함한다. 당신이 그러한 개발을위한 긴급한 필요가 표시되지 않는 경우, 당신은 사이트의 간단하고 무료 모바일 버전을 접근 할 것이다. 어떻게 가장 쉬운 방법 할까?

다운로드 사용자 정의 템플릿 적응 설계 (플러그인). 예를 들어, WP 모바일 감지기, 워드 프레스 모바일 팩, WPSmart 모바일 및 다른 사람. 그들은 정확하게 귀하의 휴대 전화에있는 사이트를 표시하는 데 도움이 될 것입니다, 당신은 더 나은 페이지의 모바일 버전에 적응하기 위해 수정되어야 할 몇 가지 팁을 얻을.

물론,이 방법은 심각한 자원에 대한 거의 적합합니다. 오히려 그것이 무료 옵션이 작고 매우 간단한 사이트를 대상으로, 블로그, 뉴스 피드. 구글은 "Yandex 주차"뿐만 아니라, 검색 엔진임을 잊지 마세요, 오늘은 모바일 버전에 무거운 요구한다, 그래서이 방법을 사용하여, 자신의 위치를 낮출 수있는 거대한 기회가있다.

이 방법으로, 가장 가능성이, 광고 및 팝업 배너를 절단되지만 페이지는 "지연"없이 빠르게로드됩니다.

모바일 버전을 만들기위한 원칙

충전 또는 상태 웹 마스터의 도움으로 무료로 사이트의 모바일 버전을 만들지 여부, 그것은 RESS 시스템이나 적응 패턴을 사용하여 이루어집니다. 그녀의 효과적인 작업을위한 가장 중요한 것은이 몇 가지 중요한 원칙을 준수해야한다. 그럼, 사이트의 모바일 버전이어야 하는가? 어떻게이 효율적 효율적이고 생산적으로 만드는 방법?

모든 불필요한 제거

미니멀리즘 - 사이트의 모바일 버전의 개발을 추구해야 뭔가. 이 꽃, 버튼, 배너 가득 정보를 수신하는 것이 얼마나 어려운 상상, 그리고 당신은 바로 자료를 찾기 위해 끝없이 스크롤해야합니다. 모바일 디자인은 단순하고 깨끗해야합니다. 색 공간 (예를 들어, 회사를) 분리 2-3을 선택합니다. 그것은 그들 중 하나가 흰색 나은 경우입니다. 작은 화면 명확하고 읽기 영역에 공간을 나눈다. 이 제품의 형태, 데이터를 입력 정보 전달 및 지불 있도록하기 - 가상 키는 명확 클릭 위치를 알고,보고 사용자에게 표시해야한다.

데스크톱 버전에 유용 할 것이며, 사용자의 인생을 더 쉽게 만드는 모든 추가 옵션은 여기에만 어려움을 가져온다. 단지 가장 중요한 요소를 둡니다. 애니메이션, 광고 배너, 멀티미디어, 가장 가능성 만 작업 사이트 나 응용 프로그램을 방해하고 주요 지점에서 손상됩니다.

조정

올바르게 수행 할 경우, 사용자는 중요한 단어의 끝을 받게됩니다 같은 질문 정렬, 덜 심각하다 없다. 일반적 정렬 왼쪽 수직 허용. 귀하의 휴대 전화에 RSS 피드를 통해 플립 방법을 상상해보십시오. 당신은 위에서 아래로이 작업을 수행 할 수 있지만 왼쪽이나 오른쪽으로.

노동 조합

전환의 긴 체인의 가능성이없는 경우, 하나에 여러 단계를 결합하려고합니다. 예를 들어, 사이트는 여러 단계에서 데이터를 입력 할 필요가 - .. 이름, 각 셀에 등 별도의 집, 거리, 아파트,있는 다음 주소, 작은 세포의 집합을 얻을 단지 2를 입력하도록 요청을 시도하는 사용자를 강제로하지 위해 - 이름과 주소.

그리고 분리

때로는 반대로, 정보의 과도한 양을 분리해야합니다. 예를 들어, 드롭 다운 메뉴는 당신이 제공하는 80 개 도시의 목록을 가지고있다. 지역별 그룹화, 사용자는 긴 목록을 스크롤 할 필요가 없도록. 때 그는 지역 센터 위에 마우스를 올려거나이 지역은 도시의 또 다른 목록을 떨어질 것이다.

목록

목록에 대한 방법으로. 이들 두 사람은 - 알파벳 순서 또는 다른 순서로 고정하고, 대체와. 그들의 선택은 전송됩니다에 따라 달라집니다.

사용자가 자신이 원하는 정확히 알고있는 경우에 편리하게 수정되었습니다. 예를 들어, 도시, 숫자 또는 날짜하십시오. 하나의 변화의 세트와 같은 이름, 각이있는 곳 두 번째 옵션은 긴 복잡한 이름 또는 경우에 적합 드롭 다운 목록 사용자 목표에 가까운 단계. 방문자가 도움을 필요로 할 때 autosubstitution와 옵션이 자주 사용된다. 예를 들어, 사이트는 뜨개질 바늘을 살 수 있습니다. 사용자는 검색 질의 "금속 스포크"를 입력하고 팁 스폿 "스포크 5mm" "스포크 4.5 mm"및 t 인치 D.

자동 완성

이 점은 뭔가를 온라인 판매 사이트에 특히 사실이다 당신은 등등 지불, 배달의 표준 양식을 작성해야합니다. N.는 사람이 가장 가능성이 후, 휴대폰에서 구매를하는 경우, 그 과정을 의미하는 컴퓨터에 도착하는 시간이 없습니다 구매는 신속하고 편리하게 할 필요가있다.

이미 채워진 데이터를 포함 할 수 이러한 형태의 경우, 가장 인기있는 답변에 의지하는 것이 가능하다. 같은 지역에서 작업하는 경우 예를 들어, 현재 날짜, 현금 지급, 도시의 방법을 삽입합니다. 그들은 변경할 수 있지만 대상을 공격하는 경우, 사용자 시간을 줄일 수있다.

모든 읽기, 모든 볼

모바일 사이트 디자인을 만들면 모든 전화기가 다른 마음, 같은 비전을 유지. 아마 사이트는 작은 화면으로 볼 수되므로 글꼴은 버튼, 간단하고 읽을 수 있어야합니다 - 그들은 탭이 아닌 다음 페이지에 도착하고, 이미지가 인터넷에 관해서 특히, 대형 별도로 열어야 할 수있을만큼 큰 가게.

일부 통계

모바일 기기에 적응하는 사이트에 대해 말하기,이 과정은 네트워크의 촉진을 위해 얼마나 중요한지 이해하는 통계에 의존 할 필요가있다.

다음 그림. 오늘 가제트는 아주 어린 아이들과 일부 노인을 제외하고, 분명히, 인구의 87 %입니다. 경제학자들은 모바일 상거래의 성장은 향후 5 년 동안 100 배 전망이다. 그러나 사이트의 21 %는 모바일 기기에서 작동하도록. 그래서, 인터넷 트래픽 및 전자 상거래 시장은 5의 작은 부분 만 차지한다.

이 수치를 고려하십시오. 그것은 당신의 자원을 적응 의미가 있습니까? 물론 그렇습니다. 너무 많은 공간이이 시장에가있는 동안 또한, 당신은 그것에 당신의 자신의 세그먼트를 취할 수 있습니다.

어디 필요가 모바일 버전입니다

모바일 버전은 높은 순위를 얻을 것을 목표로 모든 플랫폼에 적합합니다. 결국,이 사이트에 머물 그를 위해 쾌적한 환경을 만들어 사용자에 직접적인 영향이다.

모바일 버전이 존재할 수 없음 :

• 뉴스 포털, 그것이 작동하는 방법이나 학교에서 가장 볼 전화이기 때문에,
• 소셜 네트워크 - 같은 이유로, 플러스가 통신의 요인은 온라인, 그래서 친절한 대화가 작성 될 편리하다;
• ... 도움말, 웹 탐색, 등, 사람들이 거래되는 곳 무언가의 검색에있는 동안;
• 온라인 쇼핑 - 쇼핑 여행 시간을 보내고 모바일 인터넷을 통해 모든 구매하지 않는 고객을 유치 할 수있는 능력.

대신 결론

오늘날, 모바일 기술이 시장에서 리더가되기 위해 노력하고, 따라서 활성 성장과 발전의 단계에, 어떤 회사는 자사의 온라인 자원이 요구 사항을 충족하는지 확인해야합니다. 때문에 성장 사용자 요청 사이트에 지속적으로 현대화하고 다른 장치에 적응해야합니다. 그것은 사람이 특정 리소스에 있어야하는 불편 경우는, 제품이나 가격에 대한 정보를 얻을 주문을, 전달에 대한 문의가있을 수 없음을 분명, 그는이 모든 것이 가능할 것이다 사이트를 찾을 수 있습니다. 따라서, 경쟁에서 승리하기 위해서는 유연하고 사용자 친화적 기능과 재미있는 리소스를하는 것이 중요합니다.

이 안드로이드 사이트 또는 iOS의 모바일 버전을하는 데 도움합니다. 하위 도메인에 새 사이트 무료 템플릿의 사용을 리디렉션하여 그것으로의 전환을 생성, 적응 템플릿이나 사용자가 편리하게 입력하고 페이지에 남아 할 수있는 모바일 응용 프로그램을 만들 -이 작업을 수행하려면 재 설계 위의 방법 중 하나를 선택합니다.

이러한 접근 방식은 기존 고객의 충성도를 유지 도움이되지 않습니다뿐만 아니라 새로운 방문자를 유치 할 수있는 기회를 제공 할 것입니다.