반응 형 웹 디자인 : 모든 장치에서 동일한 양의 데이터를 다운로드합니까?

점점 더 많은 모바일 사용자와 태블릿 사용자를 수용하기 위해 워드 프레스에서 내 블로그와 웹 사이트를 다시 디자인하고 싶습니다.

또한 반응 형 디자인에 대해 듣고 있습니다. 반응 형 웹 디자인이 모바일 장치뿐만 아니라 컴퓨터 화면에서도 같은 양의 데이터를 다운로드하는지 알고 싶습니다.

또한 많은 대형 마케팅 회사가 반응 형 웹 디자인에 투자하지 않았으며 여전히 모바일에 최적화 된 별도의 웹 사이트를 찾고 있습니다. 반응 형 웹 디자인 또는 모바일에 최적화 된 별도의 웹 사이트를 위해 무엇을해야합니까?

ALA 306 에서 Ethan Marcotte가 정의한대로 "반응 형 디자인"이라는 용어는 사용자 화면 크기에 따라 HTML에 다른 스타일 규칙을 적용하는 기술을 나타냅니다. 반응 형 디자인에 대한 자세한 설명은 Mike Bollinger 의 멋진 데크 입니다.

이 모델에서는 화면이 작든 크든 정확히 동일한 HTML을 클라이언트에 보냅니다 . 는 CSS에서 참조 자원 (이미지 차적으로는) 특정 화면 해상도 표시되지 않는 경우, 그들은 수 있습니다 다운로드 할 수 없습니다. 예를 들어 큰 화면 high-res.png의 경우 CSS와 작은 화면에 low-res.png사용할 수 있습니다. 웹 클라이언트는 이미지를 활성 스타일로만 다운로드하도록 선택할 수 있습니다. (현재 둘 다 다운로드하는 하나 이상의 중요한 클라이언트에 대해서는 @DBUK의 의견을 참조하십시오!

이 기술은 귀하의 경우에 적합하거나 별도의 모바일 사이트를 만드는 것이 더 합리적 일 수 있습니다.

장치마다 사용 컨텍스트가 다를 수 있습니다. 휴대 전화는 항상 주머니 안에 있습니다. 식료품 점에서 사용자는 어떻게 사이트를 사용합니까? 전체 사이트를 보내시겠습니까? 아니면 몇 가지 기능 만? 아니면 완전히 다른 기능? 아이 패드를 부담없이 TV로 시청하면서 소파에 있다면 어떨까요?

모바일 장치는 프로세서 속도가 느리고 메모리가 적으며 연결 속도가 느린 경향이 있습니다 (이러한 "진실"은 매년 약해집니다) – 성능상의 이유로 별도의 모바일 사이트를 엄격하게 내보내고 싶을 수 있습니다.

일반적으로 정적, 텍스트 및 컨텐츠 중심 사이트 (예 : 블로그)가 많을수록 기존 HTML 및 반응 형 디자인을 사용할 가능성이 높아집니다. 대화 형, 멀티미디어 및 사용자 중심 사이트 (예 : 상점) 일수록 개별 장치 유형에 대해 별도의 사이트를 조정할 수있는 가능성이 높아집니다.

또한이 시대에 모바일 경험이 사이트 인지 앱 인지에 대한 문제도 있다는 것을 잊지 마십시오 .

반응 형 디자인은 모든 장치에 동일한 멀티미디어 요구 사항이있는 것은 아니기 때문에 모든 장치에 동일한 양의 데이터를 다운로드해서는 안됩니다. 모바일 사이트는 데스크톱 / 노트북 / 태블릿 사이트보다 고화질 이미지를 사용하고 그래픽이 덜 그래픽이어야합니다. 모바일 사이트와 일반 사이트를 결합하려면이 사이트를 고려해야합니다. 그렇지 않으면 사이트가 반응이 좋지 않습니까?

slidedeck peteorpeter 는 Filament Group 의 반응 형 이미지 (Responsive Images) 스크립트 를 언급합니다.이 스크립트 를 사용하면 하나 이상의 버전을 다운로드하지 않고도 JavaScript를 사용하여 적절한 장치에 적합한 크기의 이미지를 제공 할 수 있습니다. 레이아웃 이미지 자산의 경우 일반적으로 다른 화면 해상도에 다른 스타일을 지정하는 미디어 쿼리를 통해 수행됩니다.

많은 회사들이 사이트를 업데이트하는 데 오랜 시간이 걸릴 것이라고 생각합니다. 반응 형 및 모바일 우선 접근 방식은 분명히 현재 유행어입니다.

위의 포스터에서 언급했듯이 휴대 전화 / 저해상도 장치에는 고화질 이미지를 사용해야합니다. 미디어 쿼리는 낮은 해상도를 모두 타겟팅하는 데 도움이됩니다. 그러나 모바일 사파리는 display : none 규칙을 무시하고 데스크탑 버전의 이미지도 다운로드한다고 들었습니다. 또한 반응 형 이미지 경로를 내려 가면 모바일 프로세서에 많은 압력이 가해집니다-1 픽셀 당 3 바이트 ... 일부 아주 해키 - - 추가 컨텐츠를 해결하기 위해 솔루션 다운로드되는 많이 있습니다 https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=en_US#gid=0

반응 형 웹 디자인의 단점에 대한 자세한 내용은 http://www.webdesignshock.com/responsive-design-problems/를 확인 하십시오 . 그 블로그 포스트가 당신을 미치게하지 마십시오. - 책이 외에도 주제에 환상적인 책을 썼다 http://www.abookapart.com/products/responsive-web-design . 전자 책 버전을 잡을 가치가 있습니다.