검색 프로모션 비용과 그 결과는 모바일 장치에 맞게 사이트를 조정하는 방법에 따라 다릅니다.

책갈피로

Ashmanov & Partners의 옵티마이저인 Dmitry Mrachkovsky는 적응형 사이트와 모바일 사이트 중에서 선택하는 방법과 직면하게 될 명확하지 않은 문제에 대해 설명했습니다.

반응형 및 모바일 웹사이트의 이점

스마트폰과 태블릿에 대한 적응 기술이 SEO 측면에서 더 효과적이라는 질문에 명쾌하게 답하기는 어렵습니다. 큰 선수들 사이에서도 나는 어떤 결정에 유리한 이점을 눈치 채지 못했습니다. M.Video, DNS, Wildberries, Aviasales는 적응형 레이아웃을 사용하고 Lamoda, 220 Volt, Ulmart, Yandex.Market은 모바일 사이트를 사용합니다. 그러나 첫 번째와 두 번째가 얻는 이점을 살펴보겠습니다.

사이트 "M.Video"의 적응형 레이아웃 및 사이트 "220 Volt"의 모바일 버전

반응형 레이아웃은 별도의 모바일 버전을 개발하지 않고도 할 수 있습니다. 다음과 같은 장점이 있습니다.

• 표시할 별도의 페이지 구조가 필요하지 않습니다. 모바일 기기. 다음으로 사이트의 데스크톱 버전을 수정하는 것으로 충분합니다. CSS.
• 데스크톱 및 모바일 버전의 경우 단일 URL이 사용됩니다. 따라서 사이트의 콘텐츠가 중복되지 않고 페이지가 서로 경쟁하지 않으며 프로모션 작업이 데스크톱 및 모바일 검색 순위에 영향을 미칩니다.

모바일 버전은 더 비싸고 유연한 솔루션입니다. 메인 사이트에 영향을 주지 않고 편집할 수 있습니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다.

• 코드 수준에서 불필요한 기능을 제거하여 모바일 사이트를 최대한 쉽고 빠르게 로드할 수 있습니다.
• 데스크톱 버전의 사이트에서 사용할 수 없었던 기능을 추가하여 모바일 사용자를 위한 인터페이스를 개선할 수 있습니다.
• 사용자는 원하는 경우 언제든지 모바일 장치에서 사이트의 기본 버전으로 전환할 수 있습니다.

하나 더 기술인 RESS를 언급하고 싶습니다. 장치에 따라 사용자에게 데스크탑 또는 모바일 템플릿을 표시하지만 페이지의 URL은 변경되지 않습니다. RESS는 위에서 설명한 적응형 및 모바일 버전의 장점을 결합합니다. 그러나 또한 두 가지 단점이 있습니다. 복잡하고 비용이 많이 드는 구현과 희귀하고 인기 없는 전화 모델 식별의 오류입니다.

반응형 레이아웃 문제

Adaptive는 경제적이고 편리한 솔루션이지만 검색 프로모션몇 가지 함정이 있습니다.

적응형에 대한 잘못된 해석

일부는 적응형 레이아웃을 잘못 구현하고 한 번에 코드의 한 페이지(데스크톱 및 모바일)에 두 개의 템플릿을 표시합니다. 사용자의 장치에 따라 코드의 원하는 부분은 계속 표시되고 나머지는 display: none 을 사용하여 숨겨집니다. 이렇게 하면 세 가지 문제가 발생합니다.

1. 텍스트, 이미지, H1 및 H6 제목, 이동 경로, 관련 제품 및 추천 제품 등 모든 콘텐츠 요소가 두 번 로드됩니다. 그리고 검색 엔진은 정말 중복을 좋아하지 않습니다.
2. 콘텐츠의 사용하지 않는 부분은 CSS로 숨겨집니다. 이 문제에 대한 검색 엔진의 의견은 모호합니다. Google은 숨겨진 블록의 내용을 무시하고 Yandex는 페이지의 전체 내용을 고려한다고 밝혔습니다. 대부분의 SEO 전문가는 그러한 계획이 제재를 받을 위험이 있다는 데 동의합니다.
3. 코드가 중복되고 사이트 로드가 느려집니다.

이러한 구현은 RESS 기술에 대한 잘못된 접근 방식입니다.

불필요한 요소 숨기기

인터페이스를 만들려면 적응 버전더 편리하게 일부는 기능의 일부를 제거합니다: 산만한 블록, 카탈로그 범주의 큰 텍스트 등. 불필요한 모든 것은 display: none 을 사용하여 숨겨집니다. 그러나 문제는 모든 코드가 페이지를 로드하는 데 사용되며 사이트가 느리다는 것입니다. 또한, 위에서 언급한 바와 같이 검색 엔진은 이러한 콘텐츠에 대해 논란의 여지가 있는 태도를 가지고 있어 제재 대상이 될 위험이 있습니다.

JavaScript의 잘못된 사용

일부는 모바일 장치에서 불필요한 블록을 표시하지 않기 위해 JS를 사용합니다. 그러나 이 방법은 display: none 보다 낫지 않습니다. 데스크톱 버전에서도 검색 엔진이 의도한 콘텐츠를 색인화하지 않을 위험이 있습니다. 검색 엔진은 일반적으로 특히 올바른 인덱싱을 위한 여러 조건이 충족되지 않는 경우 AJAX 콘텐츠를 항상 올바르게 인식하지 못합니다.

사람들이 여전히 반응형 디자인을 사용하는 이유는 무엇입니까?

적응형 선택은 일반적으로 사이트의 한 버전만 개발하고 여러 URL에 문제가 없다는 두 가지 주요 이점에 의해 결정됩니다.

또한 여러 지역으로의 프로모션을 위한 편리한 솔루션입니다. 우리는 하나의 도메인에 모든 노력을 집중하고 데스크톱 및 모바일 검색에서 결과를 얻습니다. 이렇게 하려면 관심 영역을 Yandex.Directory의 사이트에 연결해야 합니다.

그리고 Google의 경우 검색 엔진이 귀하가 일하는 지역을 이해할 수 있도록 지점 주소가 포함된 페이지를 만듭니다. 적응형 레이아웃 단일 도메인 M.Video를 매우 성공적으로 사용합니다. 이 상점은 제품, 카테고리 및 정보 쿼리에 대한 모바일 및 데스크탑 결과에서 높은 위치를 차지하고 있습니다.

다른 방법으로 갈 수 있습니다. 지역 하위 도메인을 사용하여 페이지의 텍스트 관련성을 높일 수 있습니다. 이 경우 spb.site.ru, samara.site.ru, kazan.site.ru와 같은 서브도메인은 Yandex.Webmaster를 통해 영역을 할당한 후, 지명과 함께 제목과 메타태그를 할당합니다. 또 다른 장점은 지역별 결과를 추적하기 위해 지리적 하위 도메인에 대한 별도의 분석을 쉽게 설정할 수 있다는 것입니다. 이 프로모션 방법은 MediaMarkt에서 실행됩니다.

사이트의 모바일 버전 문제

상대적으로 높은 개발 비용이 모바일 사이트의 유일한 단점은 아닙니다. 다음은 이 기술을 선택할 때 발생할 수 있는 덜 분명한 문제 목록입니다.

더블 프로모션 작업

모바일 사이트는 메인 사이트와 별도로 최적화 및 프로모션이 진행되며, 이는 어댑티브의 경우보다 더 많은 리소스를 필요로 합니다. 최적화는 다음과 같이 시작해야 합니다. 모바일 버전올바르게 인덱싱되었으며 데스크탑과 경쟁하지 않았습니다. 이렇게 하려면 Yandex.Webmaster 및 Search Console에서 연결하고 올바른 rel="alternate" 속성을 설정하고 인덱싱 및 XML 맵 생성을 설정합니다.

콘텐츠의 절대 링크로 인한 혼돈

데스크탑 및 모바일 템플릿 99%의 경우에 하나의 데이터베이스에서 콘텐츠를 다운로드합니다. 사용하는 경우 절대 링크프로토콜과 도메인을 나타내는 데스크탑 사이트의 내부 페이지로 이동하면 모바일 페이지에도 표시됩니다. 링크를 클릭하면 두 가지 시나리오 중 하나가 발생합니다.

• 데스크탑 버전이 있는 경우 사용자 에이전트, 사용자는 페이지의 모바일 버전을 볼 수 있습니다.
• 다른 경우에는 사용자에게 데스크톱 페이지가 표시되고 모바일 버전을 만드는 작업이 헛된 것입니다.

이 경우 사이트의 내부 링크 가중치를 위반할 수 있습니다. 문제를 방지하려면 콘텐츠에서 사용하십시오. 상대 링크. 즉, href 속성에 대해 https://site.ru/page/ 대신 /page/ 를 지정하십시오.

데스크톱 및 모바일 사이트의 콘텐츠 및 구조는 다를 수 있습니다. 따라서 오류를 피하기 위해 검색에서 둘 다의 내용을 인덱싱하는 것이 논리적입니다. 데스크톱 사이트의 콘텐츠가 표준임을 나타내기 위해 모바일 버전에서 Google이 권장합니다. 반면에 검색 엔진은 비표준 페이지의 내용은 고려되지 않는다고 말합니다.

이와 관련하여 Yandex는 모든 것이 명확합니다. 모바일 및 데스크톱 페이지의 콘텐츠를 별도로 색인화합니다. 이렇게 하려면 기본 버전에서 모바일 버전으로 rel="alternate" 속성을 설정하고 장치의 사용자 에이전트를 고려하여 데스크톱 버전에서 모바일 버전으로 301 리디렉션을 설정할 수도 있습니다.

모바일 우선 지수의 불분명한 요구 사항

모바일 우선 색인으로의 전환을 준비하려면 사이트의 모바일 버전을 다음과 같이 선택하는 것이 논리적입니다. 표준 페이지. 사실, 모바일 우선에 관한 권장 사항에는 약간의 모호성이 있습니다. 예를 들어 구글 가이드라인에서는 모바일 버전과 데스크톱 버전의 콘텐츠가 유사해야 한다고 명시하고 있지만 '유사성' 정도는 공개하지 않고 있다.

그러나 데스크톱 검색의 순위에 특정 콘텐츠 블록이 필요한 경우 모바일 버전에서는 불필요하지만 모바일 버전에 우선 순위가 부여되는 경우 어떻게 될까요?

모바일 사이트 색인 생성에 대한 Google 가이드에서 발췌

모바일 우선 색인 구현에 대한 Google 보고서에서 발췌

터보 페이지의 무분별한 사용

일부는 순위에 영향을 미칠 것으로 예상하면서 무차별적으로 검색 엔진을 혁신합니다. 예를 들어 검색에서 본격적인 모바일 페이지를 대체하지 않는 Yandex 터보 페이지는 사용자 기능의 일부를 포함하고 전환율이 낮습니다. 상업 사이트가 있고 모바일 버전의 품질에 자신이 있다면 기사와 리뷰가 있는 페이지라도 서두르지 말고 "터보"를 구현하십시오.

외부 링크의 영향 줄이기

링크는 순위, 특히 Google 검색에서 여전히 중요합니다. 모바일 하위 도메인이 있으면 일부 사용자는 소셜 네트워크와 포럼에서 이를 참조하기 시작합니다. 그리고 다른 부분은 메인 사이트 주소에 대한 링크를 사용합니다. 결과적으로 링크는 하나의 도메인이 있는 경우보다 모바일 및 데스크톱 검색에서 성능이 떨어집니다.

지역별 프로모션 특징

위에서 우리는 단일 도메인과 지리적 하위 도메인을 사용하여 지역적으로 적응형을 홍보하는 두 가지 방법에 대해 이야기했습니다. 모바일 버전의 경우 다음 옵션을 고려하십시오.

첫 번째 경우에는 기본 도메인과 모바일 하위 도메인 m.site.ru를 승격합니다. 그들 각각은 Yandex.Directory를 통해 지역을 설정해야 합니다. 문제는 때때로 사이트의 모바일 버전을 스스로 제휴사와 연결하는 것이 불가능하다는 것입니다. 기술 지원에 문의해야 하지만 결과가 보장되지는 않습니다. 사이트의 모바일 버전에 대해 별도의 조직을 만들 수 없습니다. 따라서 분기가 많을 경우 바인딩에 시간이 오래 걸릴 수 있습니다.

일반적으로 m.spb.site.ru 또는 spb.m.site.ru와 같은 하위 도메인을 사용하는 옵션은 제외됩니다. 예를 들어 Kholodilnik.ru에서 사용하지만. 그러나 이 경우 모바일 및 데스크톱 버전의 모든 지역 간에 주소 지정을 설정하고, 최신 상태로 유지하고, 변경 사항을 추적하고, 웹마스터를 위한 서비스를 모니터링해야 합니다. 이것은 지불할 가능성이 없는 거대한 작업입니다.

모바일 적합성 점검 제출

모바일 친화성 테스트를 위해 사이트의 최적화된 버전을 Yandex.Webmaster에 제출하지 않으면 모바일 검색 결과에 나타나지 않을 수 있습니다. 문제는 적응에도 적용됩니다. 항상 그런 것은 아니지만 웹마스터의 메시지를 따르는 것이 좋습니다.

사이트의 모바일 버전에 지역 할당에 대한 Yandex 기술 지원과의 커뮤니케이션 단편

모바일 버전을 사용하는 이유는 무엇입니까?

물론 모바일 버전의 주요 장점은 별도의 템플릿을 생성할 수 있는 기능과 높은 다운로드 속도입니다. 또한 기존 사이트에서는 적응형 버전을 구현하는 것보다 별도의 모바일 버전을 만드는 것이 더 쉽습니다.

또한 많은 SEO 전문가들은 적응형 사이트 대신 모바일 사이트를 도입한 후 검색 트래픽이 증가했다고 지적했습니다. 성장의 이유가 순위에 부정적인 영향을 미치는 적응 레이아웃에 오류가 있었기 때문이라는 것을 배제하지는 않지만.

선택할 옵션

웹 사이트를 처음부터 개발 중이거나 소규모 프로젝트가 있는 경우 적응형 레이아웃을 자세히 살펴보십시오. 이것은 보다 경제적이고 빠른 솔루션입니다. 그러나 앞으로 모바일 장치에서 사이트의 일부가 표시되지 않도록 숨길 필요가 없도록 기능을 즉시 계획하는 것이 좋습니다.

사용자 경험을 우선시한다면 모바일 버전을 선택해야 합니다. 데스크탑에 영향을 미치지 않고 변경할 수 있습니다. 사이트가 해당 부문의 데스크톱 문제에서 선두 위치를 차지하는 경우 중요합니다.

RESS 기술을 사용할 수도 있지만 이 경우 Google은 모바일 버전을 선호한다는 점을 기억하세요.

RESS를 사용한 사이트 색인 생성에 대한 Google 가이드에서 발췌

어떤 기술을 선택하든 사이트와 해당 버전이 올바르게 색인화되고 가능한 한 빨리 로드되며 문제 없이 모든 장치에 표시되는지 확인하십시오.

감사합니다 SEO 전문가

현재 기사에서는 사이트의 모바일 버전을 확인하는 방법, 편의성, 가독성 및 올바른 표시에 대해 설명합니다.

모바일에서 보기 편하도록 사이트를 확인하는 것은 다양한 웹 서비스를 이용하여 확인할 수 있습니다. 특히, 이 서비스 Google의 을(를) 사용하면 모바일 레이아웃의 문해력을 적절하게 평가할 수 있습니다.

최근에 Google모바일 레이아웃 요구 사항을 충족하지 않는 사이트는 모바일 장치를 사용하여 수행되는 검색에서 비관적일 것이라고 말했습니다. 이 알고리즘은 이미 작동 중이며 표시하는 데 신경 쓰지 않은 일부 사이트 모바일 플랫폼아, 실제로, 생략되었습니다 검색 결과모바일 기기용.

귀하의 사이트가 데스크톱 플랫폼에 대해 3배 편리한 경우 모바일 레이아웃의 품질을 확인해야 합니다. 그렇지 않으면 트래픽의 인상적인 부분을 잃게 됩니다(검색에서 모바일 플랫폼의 점유율은 매년 빠르게 증가하고 있음). 고객을 잃게 됩니다. 따라서 모바일 장치에 맞게 사이트를 조정하고 모바일 브라우저에서 사이트가 올바르게 표시되는지 확인해야 합니다.

Chrome을 사용하여 모바일 레이아웃 품질 확인

개발자를 위해 Google에는 훌륭한 모바일 시뮬레이션 도구가 있습니다. 이 도구는 구글 브라우저크롬. 액세스하려면 F12브라우저에서(개발자 모드로 전환) 스마트폰 아이콘을 클릭합니다.

이 페이지는 널리 사용되는 모바일 장치, 네트워크 유형(GPRS, 2G, 3G, 4G 등) 중 하나를 선택하고 엄격한 디스플레이 설정을 지정할 수 있는 장치 전환 모드로 변환됩니다. 이를 통해 특정 사이트의 작동을 시뮬레이션할 수 있습니다. 모바일 기기. 사용 가능한 장치에는 다양한 아이패드 버전, 아이 패드 미니, 아이폰, 블랙베리, 구글 넥서스, HTC, LG, 노키아, 삼성 갤럭시및 기타 인기있는 장치.

특정 디바이스를 선택하면 모바일 디바이스에서 사이트를 확인할 수 있습니다. 예를 들어, iPad 3에 "Nubex" 사이트의 메인 페이지를 표시하는 경우:

그리고 삼성 갤럭시 S4:

여기에서는 특정 장치에서 사이트가 표시되는 것을 볼 수 있을 뿐만 아니라 마치 바로 앞에 올바른 가젯이 있는 것처럼 사이트와 완벽하게 작동합니다. 의심할 여지 없이 이 도구는 사이트의 모바일 버전을 개발할 때 꼭 필요하지만 실제 장치에서 사이트가 표시되는 방식은 실제 장치에서 확인해야 합니다. 이는 "네이티브" 브라우저(Safari - iPad/iPhone, IE용)에서 사이트 표시를 확인해야 하는 경우 특히 중요합니다. 윈도우 폰등.).

사이트의 모바일 버전 개발 비용 - 15,000 루블부터

우리 삶에 모바일 장치가 등장하면서 많은 것이 바뀌었습니다. 특히 인터넷에 대한 비상 액세스 가능성이 크게 확대되었습니다. 이제 요약을 검토하기 위해 랩톱이나 개인용 컴퓨터를 가지고 다닐 필요가 없습니다. 최근 소식또는 관심 있는 회사의 웹사이트로 이동합니다. 이를 위해서는 스마트폰만 있으면 충분합니다.

따라서 인터넷의 모바일 사용자가 증가하는 경향이 있으며 이는 웹 사이트, 즉 World Wide Web에서 회사의 표현을 수정해야 함을 의미합니다.

사이트의 모바일 버전은 무엇입니까

대부분의 최신 사이트는 모바일 장치 및 태블릿 화면에 잘못 표시됩니다.사용되는 가젯의 실제 화면은 일반적으로 크기가 작기 때문에 화면에 있는 사이트는 개인용 컴퓨터완벽해 보이지만 스마트폰 화면에서 보기에는 완전히 부적합합니다.

실제로, 모바일 버전 개발생성을 포함하는 별도의 프로젝트입니다. 특별한 디자인, 사용성 개발, 레이아웃 및 콘텐츠 최적화. 디자이너의 주요 임무는 회사의 주요 아이디어를 가능한 한 정확하게 전달하는 동시에 작은 화면에 맞추는 것입니다.

어떤 경우에는 사이트의 내용이 축소되어 가장 중요한 내용만 남습니다. 구조와 기능도 바뀌고 스타일 디자인만 바뀌고 일부 요소와 내용은 그대로 유지됩니다.

사이트의 모바일 버전 비즈니스 문제를 완벽하게 해결할 수 있는 기회입니다.예를 들어 이 버전에서는 PC 사용자가 사용할 수 없는 장치별 기능을 구현할 수 있습니다. 이 모든 것이 모바일 사용자를 위한 사이트의 매력도를 높여 트래픽 증가에 기여합니다.

인터넷 사용자가 개인용 컴퓨터보다 스마트폰을 선호하는 방법

부러워할 정도로 규칙적인 타블로이드는 "인터넷 사용자가 스마트폰으로 대량으로 이동합니다", "러시아 사용자가 모바일 인터넷으로 이동합니다."라는 범주의 헤드라인을 촬영합니다. 말할 필요도 없이 그러한 진술에는 많은 근거가 있습니다.

리서치 회사 미디어스코프에 따르면, 2017년까지 러시아의 모바일 인터넷 사용자는 전체 인구의 54%인 6,600만 명에 이르렀습니다.또한 16%는 모바일 인터넷만 사용합니다.

또한 스마트폰의 인터넷 사용자가 매우 빠르게 증가하고 있는 반면 컴퓨터 웹 서핑은 꾸준히 지지를 잃어가고 있습니다. 당 작년데스크톱 컴퓨터를 사용하여 네트워크에 액세스하는 러시아인의 수는 4% 감소했습니다.

보시다시피 시대는 모바일 인터넷, 귀하의 사이트가 여전히 자격이 없는 경우 편리한 보기모바일 장치에서 이것은 매우 심각한 누락입니다.

모바일 웹사이트가 비즈니스 홍보에 중요한 이유

귀하의 사이트는 여전히 모바일 친화적이지 않습니까? 필요한 정보를 즉시 받고 싶은 일반 인터넷 사용자는 이러한 불편함을 견디지 못하고 떠날 가능성이 높습니다. 다음에 무슨 일이 일어 날까? 그것은 즉시 모바일 청중의 이익을 돌본 직접적인 경쟁자의 사이트를 열 것입니다.

대부분의 회사의 경우 사이트의 모바일 버전 가용성 - 오늘날의 추세는 아니지만 시급한 필요, 이는 다음과 같이 표현됩니다.

• 사이트 홍보 효율성. Google 담당자에 따르면 모바일 버전이 없는 사이트는 스마트폰 화면에 맞게 조정된 웹 리소스와 비교하여 우선 순위가 낮습니다. 따라서 오늘날 사이트의 모바일 버전은 더 많은 트래픽을 유치할 수 있는 기회일 뿐만 아니라 인터넷에서 사이트를 성공적으로 홍보하기 위한 전제 조건이기도 합니다.
• 사용자를 위한 편의성.인터넷 사용자의 40%는 관심 있는 사이트에 모바일 버전이 없으면 다른 사이트로 전환할 것이라고 솔직히 인정합니다. 비즈니스 관점에서 보면 엄청난 금액을 놓치고 있습니다. 잠재 고객귀하의 회사 웹사이트가 적합하지 않은 경우 휴대 전화및 정제.
• 찬란한 평판.최신 가제트 화면에 사이트가 잘못 표시되는 것은 인터넷 사용자에게 상당한 단점이 되며 모욕적인 모습을 보장합니다. 반면에 모바일 버전의 존재는 일종의 "업에 플러스"이며 회사의 올바른 이미지를 유지합니다.
• 경쟁 우위.경쟁사 웹사이트에 모바일 버전이 없다는 사실을 알고 계셨습니까? 이 실책을 이용하고 강력한 경쟁 우위를 확보해야 할 때입니다. 즉, 비즈니스 상대의 반응이 없는 사이트를 떠나는 고객을 확보해야 합니다.

모바일 장치로 사이트를 "친구 사귀는" 방법

스마트폰에서 사이트가 올바르게 표시되는 문제를 해결하는 방법에는 두 가지가 있습니다.

1. 원래 버전의 대안으로 존재할 별도의 사이트 버전을 만듭니다.
2. 만들다 적응형 디자인, 모든 화면 크기에 자동으로 조정할 수 있습니다.

회사의 웹사이트가 이미 존재하고 재설계할 의사가 없지만 동시에 모바일 장치에 대한 사이트의 충성도를 높이고 싶다면 주문하는 것이 더 유리합니다. 모바일 버전 개발. 이 경우 스마트폰 소유자에게 유용할 콘텐츠만 저장할 수 있습니다.

사이트가 막 생성되고 인터넷 청중의 관심을 즉시 처리하려면 적응형 디자인을 선호해야 합니다. 기성품 사이트의 경우 적응형 디자인을 생성하면 프로세스의 노동 집약도가 높아져 비용이 높아집니다.

웹 스튜디오 "Aspect"에서 사이트의 모바일 버전: 개발 비용

현재까지 사이트 중 일부만 모바일 장치에서 작동하도록 조정되어 있으므로 여전히 트래픽 점유율을 되찾을 기회가 있습니다. 사이트의 모바일 버전 개발은 Aspect 웹 스튜디오에서 제공합니다.

이 서비스의 비용은 15 000 루블에서. 우리는 기존 사이트를 기반으로 모바일 버전을 만들고 이 작업에 최고의 전문가만 참여합니다.

작업 비용에는 다음이 포함됩니다.

• 새 페이지 프로토타이핑.
• 모바일 디자인 개발.
• 형세.
• 사이트의 모바일 버전을 프로그래밍하고 메인 사이트에 연결합니다.

모바일 버전을 만드는 데 얼마나 걸립니까?

평균적으로 사이트의 모바일 버전 개발에는 10일부터. 특정 용어는 작업량, 즉 사이트의 페이지 수, 페이지에 표시되는 정보 유형에 따라 다릅니다.

스마트폰 화면으로 "전송"해야 하는 페이지 수를 줄임으로써 마감일을 줄일 수 있습니다. 이러한 페이지는 모바일 인터넷 사용자에게 가치가 없는 2차 정보를 제공하는 페이지일 수 있습니다.

웹 스튜디오의 모바일 버전 개발은 어떻습니까?

우리 작업의 알고리즘은 다음과 같이 나타낼 수 있습니다.

1. 모바일 버전 개발을 위한 신청서(전화, 이메일).
2. 관리자와의 프로젝트 회의 및 토론.
3. 작업 범위 평가 및 정확한 서비스 비용 계산.
4. 계약서를 작성하고 서명합니다.
5. 결제 및 작업 시작.
6. 사이트의 모바일 버전 디자인 개발.
7. 디자인 레이아웃 수락 행위의 조정 및 서명.
8. 모바일 버전 레이아웃.
9. 콘텐츠 전송.
10. 프로젝트 납품.

모바일 버전의 필요성을 확신하고 개발을 주문하시겠습니까? Web Studio "Aspect"는 항상 최신 트렌드에 집중하며 귀하의 사이트 "동원"에 대한 전문적인 지원을 제공할 준비가 되어 있습니다.

모바일 장치 붐의 도래와 함께 개발자는 선택에 직면했습니다. 사이트의 모바일 버전을 "완전한" 버전과 함께 그대로 둘 것인지, 아니면 사이트가 반응형이 되어 다양한 화면 크기에 적응해야 할까요?

현재 모바일 버전의 사이트를 구축할 때 3가지 주요 방법으로 구축할 수 있습니다.

• 적응형 디자인;
• 사이트의 별도 모바일 버전
• RESS(반응형 디자인 + 서버 측).

각 방법에는 장단점이 있으므로 자세히 설명하겠습니다.

적응형 디자인

CSS3 미디어 쿼리는 일반적으로 반응형 디자인을 구현하는 데 사용됩니다. 화면 크기에 따라 사용자에게 다른 그림이 표시됩니다.

@media screen 및 (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen 및 (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media 화면 및 (최대 너비: 1024px) ( div.for-example (너비: 980px;) )

반응형 디자인의 이점

• 개발 용이성 -적응형 레이아웃을 사용하면 사이트의 전체 구조가 자동으로 다른 화면 너비에 맞게 조정됩니다. 작동하는 제품을 얻으려면 처음부터 모든 것을 작성할 필요가 없습니다. CSS와 HTML만 조정하면 됩니다. Bootstrap과 같은 프레임워크를 사용할 수 있다는 점을 감안할 때 이러한 개발은 표준 구현으로 그리 어렵지 않습니다. 또한 이러한 제품을 지원하는 것은 비교적 간단한 작업입니다.
• 하나의 URL -불필요한 리디렉션과 사용자가 모바일 버전의 주소를 기억할 필요가 없습니다(접두사 m일지라도). 또한 단일 주소의 존재는 검색 엔진이 작동하는 것이 "더 편리할" 것이기 때문에 사이트 홍보에 긍정적인 영향을 미칠 것입니다.

반응형 디자인의 단점

• 기타 작업 -대규모 사이트의 "모바일" 사용자의 일반적인 작업은 일반적으로 PC 사용자의 작업과 다릅니다. 은행 고객이라면 모바일 버전의 사이트에서 가장 가까운 지점 주소, ATM 등 매우 제한된 범위의 정보에 관심을 가질 것입니다.
  일반적으로 적응형 레이아웃을 사용하는 가장 일반적인 접근 방식은 일반 사이트의 복사본을 만들고 전화기 레이아웃에서 모든 그룹의 요구 사항을 구현하는 것입니다. 타겟 청중. 그러나 사용성을 잊어버릴 수 있습니다. 5%의 방문자에게 필요한 2차 섹션은 대부분의 고객에게 불편을 줄 것입니다.
사이트의 "무게"는 휴대전화 사용자에게 여전히 심각한 장애물입니다. 이는 임베디드 지도, 비디오, 대출 계산기 및 모바일 사이트의 애니메이션 메뉴를 포함하여 데스크톱 사이트의 일반적인 활성 요소 중 일부를 더 가벼운 대안으로 대체해야 함을 의미합니다. 반응형 디자인이 우리에게 그런 능력을 줄 수 있습니까? 널리 사용되는 구현에서는 화면이 작은 사용자가 전체 페이지를 로드해야 일부만 볼 수 있습니다. 예를 들어 기본 레이아웃의 데스크톱 버전의 무게가 200Kb이고 모바일 버전의 무게가 50Kb인 경우 250Kb를 다운로드해야 볼 수 있습니다. 물론 페이지 코드 압축을 사용할 수도 있지만 추가 요청여전히 서버로 이동합니다.
• 절망 -중 하나 부인할 수 없는 이점모바일 버전: 마음에 들지 않으면 끄거나 일반 도메인으로 전환할 수 있습니다. 반응형 디자인 웹사이트는 이 간단하면서도 중요한 선택을 제공하지 않습니다. 사용자 지정 레이아웃이 불편하거나 버그가 있거나 중요한 탐색 요소를 숨기는 경우 그대로 두십시오. 다시 보기 위해 할 수 있는 일은 없습니다. 데스크탑이나 경쟁업체의 웹사이트를 찾으려면 실행해야 합니다. 이 제한을 우회하기 위해 "목발"을 생각해낼 수 있습니다(쿠키를 사용하고 다른 스타일 시트를 포함). 그러나 이 접근 방식은 개발을 복잡하게 만듭니다.

일반적으로 위의 단점에도 불구하고 적응형 디자인으로 모바일 버전을 개발한다는 아이디어는 꽤 유명합니다. 특히, 이 개념은 예를 들어 Google과 같은 거대 기업에서 완전히 지원됩니다.

사이트의 별도 모바일 버전

모바일 사용자가 사이트를 편리하게 사용할 수 있도록 스마트폰/태블릿을 사용하는 사용자에게 특별히 맞춤화된 별도의 버전의 사이트를 만드는 경우가 많습니다. 가장 일반적인 방법은 모바일 사용자를 특수 하위 도메인(m.example.com, mobile.example.com 등)으로 리디렉션하는 것입니다. 아마도 99%의 경우 모바일 버전은 제거된 기본 버전일 것입니다. 개발자에 따르면 모바일 장치 및 태블릿 사용자에게 필요하고 유용할 기능만 있습니다.

모바일 버전의 장점

• 변경 용이성사이트가 사실상 메인 버전과 별도로 존재하기 때문에 모바일 버전은 대부분 중복되고 불필요한 기능을 제공하지 않기 때문에 모바일 버전과 관련된 변경을 하는 것이 훨씬 쉽습니다.
• 사용자 친근성 -모바일 버전은 일반적으로 데스크톱 버전에 비해 크게 단순화되어 사용자가 필요한 정보를 찾기 위해 멀리 갈 필요가 없습니다.
• 신속성 -사이트의 동일한 단순화로 인해 모바일 버전이 더 빨리로드됩니다. 이것은 여전히 ​​GPRS 또는 약한 3G를 사용하는 사용자에게 필수적입니다.
• 선택-대부분의 경우 모바일 버전에서는 사이트의 기본 버전으로 전환할 수 있습니다.

모바일 버전의 단점

• 여러 주소 -
• 사용자 불편 -데스크톱 및 모바일 버전에 대한 다른 주소. 어떤 사람들에게는 이것이 플러스가 될 수 있고 다른 사람들에게는 사이트를 편리하게 보기 위해 주소를 하나 더 기억해야 할 때 매우 성가신 요소가 될 수 있습니다. 검색 엔진에도 문제가 있습니다. 중복 콘텐츠를 피하기 위해 SEO는 rel="alternative" 및 rel="canonical" 메타 태그를 사용해야 합니다. 또한 모바일 사용자의 경우 구글 검색결과의 링크를 클릭하면 데스크톱 버전으로 이동하거나 모바일 버전으로 리디렉션됩니다. 하지만 이 페이지의 모바일 버전이 존재하지 않으면 오류가 발생합니다.
• 제한 사항 -별도의 모바일 사이트를 만드는 것은 일부 콘텐츠와 기능을 제거하는 것을 의미합니다. 또한 전체 정보 그림에 부정적인 영향을 줄 수 있는 두 가지 콘텐츠 집합이 있을 수 있습니다.

일반적으로 모바일 버전의 사이트를 만드는 것은 특히 대규모 프로젝트의 경우 그 자체를 정당화합니다. 예를 들어 Amazon은 특별한 모바일 버전의 사이트를 사용합니다.

해상도

Google 자체는 웹마스터의 반응형 디자인 사용을 지원하지만 제품에서 다른 시스템을 사용합니다. 예를 들어 방문하면 홈페이지다른 사용자 에이전트에서 다른 HTML을 볼 수 있습니다. 다양한 장치. RESS - 반응형 디자인 + 서버 측. "무릎에" 스케치된 구현 예:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "라이브러리" . $DS . "browser.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "템플릿 .php"; ) include(dirname(__FILE__) . $DS . "템플릿" . $DS . $tmpl);

RES의 장점

실제로 이 방법에는 구현에 따라 별도의 모바일 버전과 반응형 사이트 버전 모두의 이점이 포함될 수 있습니다. 새로운 것부터:

• 트래픽 최소화 -불필요한 JavaScript를 HTML에서 제거하여 모바일 장치의 CPU, 메모리 및 캐시를 확보할 수 있습니다. 그것은 또한 특별히 최적화된 html과 css가 될 수 있습니다.
• 타겟팅을 사용할 수 있습니다.예를 들어 Android 기기의 경우 GooglePlay에서, Apple의 경우 iTunes에서 애플리케이션을 다운로드하도록 제안합니다. 각 장치에 대해 레이아웃을 만들 수 있습니다.

단점

• 개발의 어려움이러한 방법은 적절한 서버 구성과 더 많은 프로그래머의 작업이 필요합니다. 또한 몇 가지 다른 레이아웃 옵션을 만들어야 합니다.
• 장치 감지 메커니즘 -불행히도, 우리 시대에도 아직 완전하지 않았습니다. 누군가의 희귀한 전화기가 모바일 장치로 정의되지 않는다는 이야기가 자주 나타납니다.

일반적으로 RESS는 제안된 세 가지 옵션 중 가장 좋지만 개발하는 동안 훨씬 더 많은 노력이 필요합니다.

요약

제 개인적인 의견으로는 모든 사람이 사용해야 하는 이상적인 옵션은 없습니다. 나에게 가장 좋은 옵션은 RESS입니다. 그러나 이것은 구현하는 데 많은 노력이 필요하기 때문에 드문 옵션 중 하나입니다. 일반적으로 사이트의 본질과 방향에 따라 3가지 옵션 모두 장단점이 있습니다.

"소셜 미디어 콘텐츠 마케팅: 구독자의 머리 속으로 들어가 당신의 브랜드와 사랑에 빠지게 하는 방법"이라는 새 책을 출간했습니다.

사이트의 모바일 버전은 특수 레이아웃이 사용되는 기본 사이트의 복제 버전으로 휴대폰 및 태블릿에서 리소스 페이지를 편리하게 보고 탐색할 수 있습니다.

채널에서 더 많은 비디오 - SEMANTICA로 인터넷 마케팅 배우기

휴대폰이 되었다 가장 친한 친구지구상의 대부분의 사람들을 위해. 최신 모바일 가제트가 역할을 거의 완전히 인수했습니다. 데스크탑 컴퓨터인터넷에서 사용자의 행동을 근본적으로 변화시켰습니다. 그것들은 정보의 소스이자 많은 작업을 구현하는 수단입니다. 삶의 역동성은 가장 효율적인 시간 사용을 요구합니다. 이것이 우리가 오랫동안 이동 중에도 공부하고, 구매하고, 예약해 온 이유입니다.

인터넷의 각 프로젝트에는 자체 메인 사이트가 있지만 모바일 장치의 화면 해상도는 컴퓨터 및 랩톱과 다릅니다. 결과적으로 디스플레이가 매우 불편하기 때문에 전화에서 사이트를 사용하는 것은 거의 불가능합니다. 그렇기 때문에 포켓 가제트에서 읽을 수 있는 최적화된 버전의 사이트가 필요했습니다.

사이트의 모바일 버전이 필요한 이유

정보 제공 및 판매 모두 동일한 웹 리소스가 풍부하기 때문에 방문자의 충성도가 부족합니다. 인터넷 사용자는 선택권이 있으므로 방문자가 예를 들어 불편한 리소스 탐색을 발견하면 시간을 낭비하지 않고 사이트를 떠나 경쟁업체로 이동하는 것을 선호합니다. 이러한 상황에서 관리자는 방문자를 유치할 뿐만 아니라 머물도록 동기를 부여하기 위해 가장 편안한 환경을 조성해야 합니다.

대상 고객의 최대 범위와 편안한 조건의 생성 - 이것이 바로 모바일 버전의 사이트입니다.

사이트의 별도 모바일 버전은 오랫동안 사용되어 온 모바일 장치에서 사이트에 대한 편안한 액세스를 구현하는 것입니다. 스마트폰에서는 사이트가 한 열에 표시되므로 모바일 버전의 사이트를 만들기 전에 개발자는 디자인에 대해 신중하게 생각해야 합니다. 동시에 가능한 한 편리하게 리소스와 상호 작용합니다.

작동 방식

방문자에게 어떤 버전을 보여줄지 결정하는 원칙은 사용자가 사이트에 들어갈 때, 자동 감지장치 화면. 화면 너비가 모바일 가젯으로 식별되면 별도의 하위 도메인에 있는 리소스의 모바일 버전으로 리디렉션됩니다. 검색 엔진이 앞으로 이 버전을 별도의 리소스로 취급하지 않도록 하려면 기본 사이트와 동일한 도메인에 하위 도메인을 배치하는 것이 좋습니다. 그렇지 않으면 사이트의 모바일 버전을 홍보하는 것이 비생산적입니다.

사이트를 모바일 버전으로 번역하는 방법

특정 원칙이 있으며 이를 구현하려면 프로그래밍 및 레이아웃 기술이 필요합니다.

몹에서. 버전에서는 데스크톱 버전과의 일반적인 개념을 유지하면서 동시에 별도의 디자인 솔루션과 사용성에 가장 편리한 인터페이스를 개발해야 합니다. 방문자 화면의 리소스 요소는 적절한 간격을 유지하고 손가락으로 가볍게 두드릴 수 있을 만큼 충분히 크게 표시해야 합니다. 그 후 테스트 및 최종 출시가 있습니다.

모바일 버전과 적응형 레이아웃

사이트의 별도 모바일 버전과 병행하여 또 다른 해석 변형인 적응형 디자인이 있습니다.

모바일 버전의 사이트가 적응형 버전과 어떻게 다른지 알아보겠습니다.
반응형 사이트는 별도의 리소스 버전이 아닌 메인 사이트이며, 로그인한 기기의 해상도에 따라 자동으로 조정됩니다.

반응형 레이아웃의 장점은 메인 사이트와 동일한 주소를 가지므로 리디렉션이 필요하지 않다는 점입니다. 그리고 이것은 순위를 매길 때 사이트의 위치를 ​​크게 향상시킵니다. 검색 엔진. 여는 동안에는 완전히 동일한 사이트 내용과 기능이 표시되지만 창 크기에 따라 모양이 조정됩니다. 또한 리소스 최적화 가능성이 있습니다.

그러나 적응형 버전의 개발은 더 많은 시간이 소요되는 프로세스이므로 이벤트의 비용이 많이 드는 부분도 더 커질 것입니다.

반응형 디자인은 방문자의 회전율이 높지 않은 리소스(온라인 상점, 블로그, 명함 및 웹 사이트)와 관련이 있으며 주요 작업은 콘텐츠를 전달하는 것입니다.

모바일 버전의 장점과 단점

모바일 버전에는 더 많은 고속다운로드 및 탐색 용이성. 방문자는 주의를 산만하게 하는 정보를 최소한으로 보기 때문에 방문자가 긍정적인 행동을 할 가능성이 더 높습니다. 또한 별도의 모바일 버전은 데스크톱 버전과 완전히 독립적입니다. 이를 통해 별도로 작업할 수 있습니다.

그러한 개념의 단점은 다음 분야의 특정 어려움을 포함합니다. SEO 프로모션. 동일한 콘텐츠의 배치가 중복으로 인식되기 때문에 사이트 프로모션 프로세스에 미치는 부정적인 영향을 제거하기 위한 별도의 조치가 필요합니다. 모바일 버전은 범용이 아니기 때문에 메인 사이트의 내용 외에 별도의 비용 항목이 필요합니다.

이 버전의 사이트는 이미 메인 사이트에 대한 트래픽이 많지만 재설계 없이 모바일 장치에 대한 충성도를 높이고 싶은 대규모 프로젝트에 적합합니다. 대부분의 경우 다운로드 속도가 중요한 리소스에는 별도의 모바일 버전이 적합합니다. 소셜 네트워크, 메일 서비스, 뉴스 포털.

요약하면 오늘날 모든 인터넷 프로젝트에 대한 합리적인 요구는 모바일 장치에 사이트를 올바르게 표시하는 기능이라고 말할 수 있습니다. 이를 구현하는 방법은 사이트의 목표와 목표, 예산 및 기능에 따라 다릅니다.