반응 형 웹 디자인은 얼마나 중요합니까?

최근 반응 형 웹 디자인 사용의 장단점에 대한 다양한 의견을 듣고 소규모 지역을 대상으로하는 소기업이 반응 형 웹 디자인을 구현해야하는지 궁금하십니까?

이것에 관한 몇 가지 하위 질문은 다음과 같습니다.

1. 차원이나 장치에 따라 별도의 코드를 사용하는 대신 반응 형 웹 디자인을 사용하는 것이 더 낫습니까?

2. 잠재적으로 SEO에 영향을 줄 수 있습니까 (긍정적이든 부정적이든)?

3. 이 디자인 방법을 사용하여 비즈니스를 위해 웹 사이트를 최적화 할 때 발생할 수있는 주요 문제는 무엇입니까?

모바일 인터넷 사용은 현재부터 몇 년 안에 데스크톱 사용을 능가 할 것으로 예상 되므로, 어떤 종류의 모바일 최적화도 모든 비즈니스에서 진지하게 고려해야합니다.

여러 가지면에서, 이것은 특히 지역화 된 소규모 비즈니스의 경우에 해당됩니다. 예상대로 충분히 많은 모바일 검색은 주변의 물건을 찾는 데 초점을 맞추는 경향이 있습니다. 상점 찾기, 식당 찾기 등을 생각하십시오.

2012 년 5 월 현재 반응 형 디자인은 스마트 폰을 디자인 할 때 Google에서 권장하는 업계 모범 사례입니다. 주요 이점 중 하나는 하나의 사이트를 운영한다는 것입니다. 즉, 설계, 구축, 유지 관리 및 홍보를위한 하나의 사이트입니다. 효율적입니다.

SEO 관점에서 별도의 모바일 사이트 (예 : egmexample.com)를 호스팅하면 2 개의 개별 사이트를 최적화하고 비즈니스 가치 (PageRank, 기관 등)를 두 위치로 나누어야합니다. 사용자 에이전트 감지를 통해 동일한 URL에 컨텐츠를 제공함으로써이를 피할 수는 있지만, 이는 노력의 중복 (여전히 2 개의 별도 사이트 임)을 다루지 않으며 사용자 에이전트를 보장하는 등보다 기술적 과제를 야기합니다. 검색 엔진은 검색 엔진이 올바른 콘텐츠를 올바른 색인으로 색인화하는 등 최신 상태로 유지됩니다.

대체로 반응 형 디자인은 우아한 솔루션입니다.

다른 질문에 대답하려면 :

1. 위에서 언급했지만 모바일 시장이 얼마나 빨리 발전하는지 고려하십시오. 모바일 솔루션이 유연할수록 유지하는 데 필요한 시간이 줄어 듭니다.

2. 비교 대상에 따라 다르지만 위에서 언급했듯이 다른 두 가지 주요 옵션 중 하나에는 중요한 SEO 과제가 있습니다.

   "클로킹 (cloaking)"문제, 즉 대부분의 구현에서 반응 형 디자인에 내재 된 검색 엔진에서 콘텐츠를 숨기는 문제에 대한 우려가있었습니다. 그러나 이것이 내가 아는 한 주요 검색 엔진에 의해 명시 적으로 답변되지는 않았지만 Google 은이를 "모범 사례"로 간주하여 Google이 콘텐츠를 합법적으로 숨기는 것을 식별 할 수 있음을 나타냅니다. 조작상의 이유로 장치 최적화 및 기타 합법적이지 않은 숨기기의 이유.

3. 주요 과제는 모바일 사용자에게 표시 할 콘텐츠를 결정하는 것입니다. 사이트에 따라 문제가되지는 않지만 많은 경우에 문제가 있습니다. 여기서 중요한 고려 사항은 모바일 방문자가 수행하려는 작업을 이해하는 것입니다. 예를 들어, iPhone 사용자는 빠르고 쉬운 정보 나 거래를 원할 것입니다. iPad에서 같은 사람이 더 여유롭게 탐색하는 데 관심이있을 가능성이 높습니다.

아이디어는 기기에 관계없이 방문자에게 최적의 브라우징 경험을 제공하는 것입니다. 휴대 기기를 사용하는 방문자의 수가 감소하지 않고 증가 할 가능성이 높으므로 해당 경로를 이용하는 것이 좋습니다.

블로그와 CMS에는 저렴한 가격 (저렴한 가격은 아닙니다)의 테마가 있습니다. 즉시 시도해보고 원하는 것을 원하는지 확인할 수 있습니다 (모든 또는 일부 고객 장치로 확인).

1. 특별한 이유가있는 한 항상 하나의 코드베이스에 집중하십시오. "웹 앱"과 같은 전문화 된 웹 사이트를 제공하고 싶을 수도 있습니다.

2. SEO : 아니요. 반응이없는 레이아웃만큼 좋고 나쁨

3. 처음에는 좀 더 계획을 세워야합니다. 가장 작은 장치에 어떤 내용을 표시해야합니까? 내용의 순서는 어떻게됩니까? 그런 것들. 또는 : 지원되는 모든 크기에서 내 콘텐츠가 좋아 보입니까? 브라우저 크기의 이미지뿐만 아니라 실제 크기의 이미지를 제공하기 위해 각 크기에 맞게 이미지의 크기를 최적화 할 수도 있습니다. CMS가이를 지원하지 않으면 더 많은 작업입니다.

외부 소스의 광고를 포함하려는 경우 지정된 형식이 함께 작동하는지 확인해야합니다.

편집하다:

과거 웹 분석 데이터 (예 : Google 웹 로그 분석)를 사용할 수있는 경우 모바일 사용자와 비 모바일 사용자 수를 쉽게 찾고 사용 된 장치 (실제 하드웨어까지)를 식별하고 화면 해상도를 볼 수 있음을 추가하겠습니다. ( "실제로 그들은 내 페이지를 보거나 일부만 스크롤해야합니까?").

두 번째 편집 :

이 글에 따르면 "모바일 웹 사이트 대 반응 형 디자인 : 귀사에 적합한 솔루션은 무엇입니까?" Google 웹 로그 분석 블로그에서 반응 형 디자인을 염두에두고 설계된 사이트에는 다음과 같은 장점이 있습니다.

• 손쉬운 업데이트
• 검색 엔진에 최적화
• 전환 및 리디렉션 코드 추가

별도의 모바일 사이트의 장점 :

• 모바일 사용자 요구에 맞게 설계
• 빠른 사이트 생성
• 훌륭한 DIY 옵션

공식 Google 웹 마스터 중앙 블로그에있는 "응답 성 디자인 – 미디어 쿼리의 힘 활용" 기사는 "응답 성 디자인"이 실제로 어떻게 구현되는지에 대한 좋은 소개를 제공합니다.

Google 개발자의 "모바일 최적화 웹 사이트 구축" 상태 :

"Google은 웹 마스터가 반응 형 웹 디자인을 사용하는 업계 모범 사례, 즉 모든 기기에 동일한 HTML을 제공 할 것을 권장합니다 ...]

및 그 중요성이 : 나는 '반응 형 디자인 "(RD)는 버즈 - 용어입니다 (과장, 내가 바로 거기 RD이 요소 100 % 나 폭을 넣어 경우) 첫 번째 인식하는 것이 중요하다고 생각 나타날 것이보다 더 중요 실제로 다른 모든 조건부와 마찬가지로 조건부입니다.

RD를 구현해야합니까?

이에 대한 답을 얻으려면 몇 가지 정의를 명시해야합니다.

1. 타겟 고객은 누구입니까
2. 어떤 종류의 잠재 고객이 타겟입니까
3. 웹 사이트의 목적은 무엇입니까
4. 웹 사이트에 액세스 할 수있는 곳 (대부분의 경우)
5. 기타

이것은 마케팅 분석과 매우 유사합니다. 적절한 청중에게 적합한 매체를 제공하는 것입니다. 아마도 청중은 대부분 컴퓨터 앞에 앉아 있거나 최신 iPhone과 함께 이동하는 등일 것입니다. 둘 다합니까, 물론 RD가 중심입니다.

차원이나 장치에 따라 별도의 코드를 사용하는 대신 반응 형 웹 디자인을 사용하는 것이 더 낫습니까?

UI의 복잡성 및 사용 방법에 따라 다릅니다. 대부분의 경우 일반적인 디스플레이는 다양한 디스플레이에 대해 서로 다른 CSS 세트를 사용하여 렌더링 할 수 있습니다. 그러나 더 복잡하거나 정교한 UI에는 다른 접근 방식이 필요할 수 있으므로 사용되는 장치 (예 : Google지도, 멀티 터치 인터페이스)에 따라 다른 페이지 구조 및 전략을 제시하는 것이 좋습니다.

SEO에 긍정적 인 영향을 줄 수 있습니까?

SEO는 디자인보다 콘텐츠 에 관한 것입니다. Google은 가중치 디자인은 있지만 디자인 / 레이아웃인지는 알고 있지만 일반적으로 콘텐츠의 품질이 높으면 실제 디자인보다 가중치가 높습니다.

이 디자인 방법을 사용하여 비즈니스를 위해 웹 사이트를 최적화 할 때 발생할 수있는 주요 문제는 무엇입니까?

잘못된 사용자를 위해 디자인했습니다. 목표를 분석하고 가능한 경우 최신 기술 데이터를 제공하십시오 (예 : 플랫폼 등에 대한 정보를 제공하는 방문자 로그).

새로운 기술은 항상 위험합니다. Facebook의 HTML5 문제 이 시점에서 완전히 성숙하지는 않았으며 IE6와 유사한 다양한 문제를 표준 문제와 비교합니다.

최대한 간단하게 유지하십시오. 멋진 웹 페이지는 사용자가 실제로 페이지를 사용해야 할 때까지 매우 중요한 시간입니다. 클릭 할 때마다 페이드가 완료 될 때까지 1/2 초 동안 기다려야하는 경우, 사용자는 오히려 빨리 손실됩니다. 그런 것들.

나는 다른 답변을 훑어 보았습니다. 중복 된 경우 용서하십시오 ...이 시점에서 매일 8 시간 이상 반응 형 디자인을하고 있습니다 ... 내 고객은 모바일 사용자가 '독특한'을 갖기를 원하기 때문에 그것을 원합니다. Google에서 선호하는 방법으로 자랑스럽고 효율적으로 제공되기 때문에 내 고용주가 원합니다. (그리고 SEO에서 가장 잘 작동하는 방법으로 Google에서 자랑하는 경우)

차원이나 장치에 따라 별도의 코드를 사용하는 대신 반응 형 웹 디자인을 사용하는 것이 더 낫습니까?

나는 그것이 더 좋다고 말할 것입니다. 대부분의 코드는 동일한 코드이므로 iPhone 앱, droid 앱, iPad 앱, 킨들 앱을 작성하는 것보다 작업량이 적습니다.

잠재적으로 SEO에 영향을 줄 수 있습니까 (긍정적이든 부정적이든)?

디자인 포인트에서 나는 중립적이라고 생각합니다. 그러나 통계적으로 볼 때 반응 형 디자인이 실제로 잘 수행되고 있습니다. 고객은 고객을 좋아하고 고객은 사용하기를 좋아합니다.

이 디자인 방법을 사용하여 비즈니스를 위해 웹 사이트를 최적화 할 때 발생할 수있는 주요 문제는 무엇입니까?

처음에는하기가 약간 어렵습니다. 미디어 쿼리에 대한 조사가 필요하고 테스트 할 모바일 장치가 있어야합니다. 데스크톱에서 창의 크기를 조정하는 것은 가깝지만 모바일 장치에서 인터넷을 렌더링하는 방법은 때때로 예상과 다릅니다. 예를 들어, 나는 헤더에 대해 bg 반복을 사용하고 데스크탑에서 전체 볼 수있는 영역에 걸쳐있는 반응 형 사이트를 디자인했습니다. 그러나 iOS에서는 어떤 이유로 짧아집니다 ...

반응 형 디자인을 배우고 시도하는 것이 좋습니다. 이 사이트에서 점프 시작을 확인하십시오 : http://html5boilerplate.com

제목에있는 질문에 대답하기 위해 : 중요하고 그것을 알고 그것을 디자인하는 방법을 알고, 그것을 사용하지 않기로 결정한 경우, 그것을 사용하지 않기로 결정한 경우, 클라이언트가 설정 될 때 그 자세를 방어 할 준비가되어 있어야합니다 이 디자인을 가지고 있습니다. 내 경험상 고객과 고객 모두 반응 형 디자인을 좋아합니다. 행복한 고객과 행복한 고객은 내가 추구해야 할 이유가 충분합니다. :)

반응 형 웹 디자인은 매우 중요합니다. 새로운 사이트를 만드는 경우 사이트를 반응 형으로 만들어야합니다. 이미 트래픽의 50 %가 휴대 기기 및 태블릿에서 발생하며 이것이 증가 할뿐만 아니라 인터넷 사용의 명백한 지배적 인 형태가 될 것입니다.

소규모 지역을 대상으로하는 소규모 비즈니스의 경우 훨씬 더 중요합니다. SEO는 새로운 소규모 비즈니스에서는 매우 어려울 것이지만 제품이 좋으면 사람들이하는 일을 얼마나 많이 공유 할 수 있는지 극대화 할 수 있습니다.

소셜 미디어를 읽을 때 사람들은 대부분 모바일 장치를 사용합니다. 일반적으로 아침에는 침대에서, 밤에는 침대에서합니다.

휴대 기기에서 사이트를 사용할 수없는 경우 관련 잠재 고객에게 도달 한 공유는 낭비됩니다. 당신은 이것을 원하지 않습니다. 발생하지 않도록하는 것이 중요합니다.

반응 형 또는 별도의 코드 관련 : 반응 형 디자인의 주요 단점은 별도의 코드베이스만큼 빠르지 않다는 것입니다. 이 속도 손실은 다른 지역보다 사이트가 0.2 초 느린 이유에 대해 다른 요소가 사용자의 마음에 들릴 수있는 소규모 지역 비즈니스의 경우 무시할 수있을 것입니다.

반응 형 디자인의 큰 장점은 동일한 코드베이스를 유지한다는 것입니다. 유지 관리 비용, 테스트 비용 및 개발 비용이 절감됩니다.

오늘날 SEO에서 가장 큰 것은 '사이트 품질'입니다. 사이트 품질은 측정하기 어렵지만 일반적으로 Google에서는 이탈률과 사이트의 시간을 사용하여이를 측정합니다. 사이트에서 모바일을 이용하는 경우 트래픽의 50 %가 이탈률이 높고 참여율이 낮은 방문자가 많을 것입니다 (페이지에서 10 초 미만).

이로 인해 Google 처벌의 위험에 처하게됩니다. Google Panda와 새로운 (최근 주) 정확한 일치 도메인 처벌을 살펴보십시오 .이 두 가지 모두 '품질이 낮음'으로 인해 사이트에 불이익을줍니다.

이 방법을 사용하여 비즈니스를 위해 웹 사이트를 최적화 할 때 발생할 수있는 주요 문제는 새로운 유행어이며 모든 사람들이 필요로하기 때문에 믿을 수 없을만큼 쉬운 것에 대해 엄청나게 높은 가격을 청구하는 카우보이가 있다는 것입니다.

예를 들어, 최근에는 상점, 포럼, Q & A 섹션뿐만 아니라 하루 종일 모든 장치에 대해 다양한 기타 페이지, 블로그 등이 완벽하게 반응하는 웹 사이트를 만들었습니다.

수행해야 할 기본 사항은 다음과 같습니다.

1. 바디 패딩 및 여백 조정
2. 대신 왼쪽 또는 오른쪽 메뉴를 드롭 다운 메뉴로 옮기십시오. 상단의 옵션 버튼 아래에 숨길 수도 있습니다.
3. 컨테이너 크기를 조정하고 가능한 경우 너비 100 %를 사용하십시오.
4. 모든 이미지를 너비 100 %로 변경
5. 휴대 전화에 필요하지 않은 항목을 결정하고 (광고?) 제거합니다 (표시 : 없음)

샘플 코드는 다음과 같습니다.

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

스마트 폰에서 '광고 상자'클래스가있는 모든 것을 제거하고 (최대 너비 480px) 본문 여백을 줄입니다.

새 사이트를 만드는 경우 모든 장치에 적합한 깔끔한 클래스와 스타일링으로 깔끔한 디자인을 만들 수 있으므로 훨씬 쉽게 구축 할 수 있습니다.

이게 도움이 되길 바란다!

다른 관점으로 차임하고 싶습니다.

아니요, 필수 또는 권장되지 않습니다. 대상 고객이 누구인지에 따라 다릅니다. 분석 결과를보고 모바일 사용자와 모바일 사용자 중 몇 퍼센트가 데스크톱 사용자에 비해 크게 떨어졌는지 확인하십시오.

내가 사이트를 운영하는 예를 제시하는 것은 반응이 없습니다. 트래픽의 90 %는 데스크톱 사용자로부터 발생하며 이탈률과 이벤트 완료율은 데스크톱, 모바일 및 태블릿에서 거의 동일합니다.

변경 비용이 정당화 될 때까지는 그렇게하는 데 대한 재정적 인센티브가 없습니다. 사용자의 50 %가 모바일에 있거나 다른 내용을 언급하는 것은 모든 사용자가 대상 고객 인 경우에만 해당됩니다. 그렇지 않으면 완전히 무관하고 나쁜 논리를 따라야합니다.

타겟팅중인 모바일 사용자의 비율 만 살펴 봐야합니다. 특히 B2B 응용 프로그램의 경우 대부분의 사람들은 자유 시간에 전화를 보지 않을 것입니다. 데스크톱 컴퓨터에서는 월요일부터 금요일까지 트래픽이 발생합니다.