반응 형 레이아웃으로 타겟팅 할 장치/브라우저

Question

반응 형 레이아웃 웹 사이트를 개발하기 위해 클라이언트에 대한 자세한 추정치를 작성했습니다 (프로젝트가 수락되었지만 이제는 다른 기능을 설명해야합니다).

내 첫 번째 개발은 아니지만이 계정은 핵심 계정이며 경로는 반드시 포장해야합니다.

레이아웃은 300px 너비에서 1200+ px로 조정되어 사실상 "모든"장치와 브라우저로 적용되지만 그로 인한 저의 약속에 조금 못 미치게됩니다. 데스크톱 웹 사이트를 사용하면 계약서에 지원되는 브라우저가 "FF7, Safari, Chrome, Opera의 최신 버전"이 될 것이라는 점을 쉽게 기록 할 수 있습니다.하지만 반응 형 웹 사이트에 대해 어떻게 작성합니까?

PC, Mac, iPad, iPhone, 2, 3 대의 안드로이드 장치로 테스트 해 보겠습니다.하지만 고객에게 무엇을 말합니까? "웹 사이트가 모든 기기에서 작동 할 것"이라고 쓰지 않으며 작동시킬 기기/브라우저의 조합에 대한 철저한 목록을 제공 할 수도 없습니다. 그리고 나는 "내 삼촌이 자신의 2.2 Android 이전 전화에서 웹 사이트를 보았지만 작동하지 않는다"라고 고집하지 않으려 고합니다. ".

다양한 뷰포트를 시뮬레이트하고 테스트를 수행 할 수있는 데스크톱 도구가 많이 있지만 실제 개체로는 거의 작동하지 않습니다. 또는 개발자가 "계약 적으로"참조 할 수있는 표준이 있습니까? 어떻게 관리하고 고객에 대한 약속은 무엇입니까?

Answer 1

개발을위한 프로그레시브 향상 접근 방식을 사용하십시오. 픽셀을 완벽하게 만들어 모든 웹 브라우저에서 동일하게 작동하도록하는 것은 불가능합니다.

단계별 접근법 (Gold/Silver/Bronze). 테스트를 거치지 않은 브라우저는 IE7, 이전 버전의 블랙 베리, 이전 버전의 내용을 가져옵니다. 새로운 브라우저는 내용과 레이아웃을 좋게 만듭니다 (IE8/9, Firefox < 4). 현대의 브라우저는 전형적인 근사한 웹 사이트를 만듭니다.

적절한 생각으로이를 설정할 수 있습니다. 그것을 아래에서 위로 건설하십시오. 청동에서 금까지. 최소 설치 (색상, 글꼴, 텍스트, div, 레이아웃 없음, nada 만)부터 시작하십시오. 이것이 당신의 청동입니다. 다음으로 실버 레벨 설정을하십시오. 레이아웃을 포함하십시오. 이 레이아웃은 작은 화면을위한 것입니다. 그리고 마침내 우리는 금을 얻을 것입니다. 여기에는 더 큰 화면과 JS에 대한 미디어 쿼리가 포함되어 유용성과 유용성이 향상됩니다.

@media only screen {} 쿼리에서 레이아웃을 래핑하여 레이아웃을 청동과은으로 나눌 수 있습니다. 오래된 브라우저는 그것을 이해하지 못합니다. 콘텐츠는 여전히 해당 브라우저에 나타납니다. Silver와 Gold를 분리하기 위해서는 단순히 min-width 미디어 쿼리에 넣으면됩니다.

또한 클라이언트가 "웹 사이트는 모든 장치에서 작동합니다"라는 정의를 이해하는지 확인하십시오. Opera Mini가 라인 높이를 지원하지 않는다고해서 사이트가 작동하지 않는다는 것을 의미하지는 않습니다. 최적화 대 지원 : :이

Answer 2

는 반응 레이아웃
당신은을 목표로한다 무엇 장치/브라우저를 대상으로 조금 도움이되기를 바랍니다 http://bradfrostweb.com/blog/mobile/support-vs-optimization/

여기 브래드 서리가 그 주제에 쓴 기사입니다 최소 해상도이며 장치 또는 브라우저가 아닙니다. 디자인의 크기를 조정하고 더 이상 편안하게 작동하지 않는 디자인을 살펴본 다음 미디어 쿼리를 사용하여 디자인에 응답하고 적응시켜야합니다.

고객 : 나는 고객에게 개념을 설명하는 방법을 찾고 있다고 생각합니다. 가능한 한 최고의 경험을 제공하는 것입니다. 고객에게 정직해야한다는 사실을 알았고 업계 모범 사례를 따르고 있으며 설계가 시장에 나와있는 대부분의 장치와 브라우저에서 "기능"을 발휘할 것임을 알립니다. 플랫폼에서

호환성 : 여기

내가 사용하려면 추천 광고입니다 때문에 웹 브라우저, 플랫폼 및 장치의 광대 한 숫자로, 웹 사이트 의 사용자 경험을 최적으로 변경 될 수 있습니다 보기 플랫폼. 당신이 설명하고자하는, 또는이 무엇을 의미하는지 설명하도록 요청하는 경우

, 나는 말할 것입니다 :

우리는 (나는) 항상 웹 디자인을위한 업계 표준을 충족하기 위해 최선의 방법을 사용

. 우리는 모든 주요 스트림 플랫폼에서 디자인이 "기능"이되도록 최선을 다합니다. 사용 가능한 많은 웹 액세스 장치가 점점 더 많아지면서 ( ) 디자인이 한 장치에서 다른 장치로 동일하게 보일 것이라고 보장 할 수 없습니다.

또한 새 장치가 항상 만들어져 있어야합니다. 따라서 귀하의 진술을 너무 구체적으로하고 싶지 않거나 다음 iWatch 또는 iFridge를 시장에 출시 할 수 있도록 설계를 개조 할 것입니다.

정말 중요한 내용, 즉 콘텐츠가 표시되는 것을 잊지 마십시오. 텍스트와 이미지의 대부분은 거의 모든 곳에서 작동합니다. 그림자, 둥근 모서리, 비디오 (IE7) 및 미디어 쿼리가 항상 작동하지는 않지만 내용을 가리는 것은 아닙니다.

또한 일부 양식 요소가 브라우저 & 브라우저에서 작동하지 않기 때문에 웹 응용 프로그램이 약간 복잡 할 수 있습니다. (예 : 파일 업로드).

이 정보가 도움이되기를 바랍니다.

저는 계약 변호사가 아니므로 법률 보조원이나 법에 정통한 친구를 통해 추가 조언을 구할 수 있습니다.

Answer 3

매우 명확합니다. 고객이 현대 웹 사이트를 원합니다. 그러나 모든 브라우저가 모든 현대 기능을 지원하지는 않습니다. 고객은 돈을 현명하게 소비하고 시간을 통해 개선되는 사이트를 원합니다. 새 브라우저가 출시되면 곧 늙어 지거나 새로운 버그가 생깁니다. 이러한 이유로 Graded Browser Support는 다음을위한 것입니다. http://jquerymobile.com/gbs/

사이트는 모든 브라우저에서 사용할 수 있습니다. 메인 스트림 브라우저는 향상된 사용자 환경을 제공합니다. 최신 브라우저를 사용하면 최신 멋진 기능을 사용할 수 있습니다.

고객에게 일부 기능이 오래된 브라우저로 작동하도록 사이트를 "해킹"할수록 새 브라우저가 손상 될 확률이 높아집니다. 시간과 돈을 가치가 없습니다.

Answer 4

다음은 반응 형 웹 사이트를 디자인 할 때 수행하는 작업입니다.

오래된 브라우저 나 지원되지 않는 브라우저가 감지되면 웹 사이트는 반응 형으로 만드는 jQuery 요소를 제외하므로 결과는 고정 너비 사이트입니다.

이제 고객에게 무엇을 말합니까?

그냥 솔직 해. 최신 장치를 사용하여 웹 사이트를 응답하게 만들었다 고 말합니다. 오래된 장치의 경우 웹 사이트가 너무 멋지게 보이지 않습니다. 그들에게도 몇 가지 예를 보여주십시오. 일부 대기업은 사용자에게 자신의 브라우저를 알려주는 경고를 표시하기 만하면 브라우저가 구식이되어 웹 사이트가 제대로 작동하지 않습니다. 한 가지 예가 Google입니다.

본질적으로 귀하의 웹 사이트는 모든 장치에서 작동하지만 외관이 현대적인 장치 및 브라우저에서 더 잘 반응합니다.

Answer 5

이러한 경험을 통해 많은 시간을 투자 해 그들이 고객에게 개념을 이해하게하는 핵심 포인트입니다.

1. 크로스 브라우저, 플랫폼 (OS), 화면 해상도 및 장치 화면 크기 란 무엇입니까? 최근 스크린 샷이나 W3C 통계의 링크를 사용하여 지난 2 년 동안의 추세와이 시장의 위치를 ​​보여주는 경향이 있습니다. 그것은 분명히 그들에게 응답 성있는 레이아웃이 필요하다는 것을 확신시킵니다.
2. 추가 정보가 필요한 경우 Adobe Edge Inspect를 사용하여 적어도 2-3 대의 장치에서 twitter 부트 스트랩 및 jquery UI 및 jquery 모바일 사이트를 보여줍니다. 노트북, 태블릿 및 전화는 모두 동일한 네트워크에있을 수 있으며 사이트를 탐색하여 다양한 크기에 어떻게 반응하는지 보여줄 수 있습니다.
3. 나는 IE7, IE6, Chrome 프레임, 안드로이드의 안드로이드 네이티브 브라우저 대 크롬, 아이폰 4 대 iPhone5 브라우저를 위해 시간이 지남에 따라 수집 된 장단점 목록을 가지고있다. 보통 나는 그들이 더 많이 기울어지는 방식을보고, 만약 그 전화가 그들에게 그 시장의 장단점에 대해 알게한다면. 대부분의 경우 그들은 앱이 아니라 반응이 좋은 사이트라는 것을 이해해야합니다.
4. 제안서를 작성할 때 "모든 장치에 적용됩니다"에 넣지 마십시오. 당신은 결코 그것을 할 수 없습니다. 현실적이 되라. 이러한 주장을 서술하기 전에 사용하려는 프레임 워크를 최소한 테스트하기 위해 virtaul 머신 및 시뮬레이터를 작성하십시오. VM이나 Virtual Box를 설정하는 것은 무료이며 Linux와 Eclipse 또는 netbeans를 사용하여 더미 전화 및 태블릿을 실행하고 해당 프레임 워크에서 탐색 할 수 있습니다.
5. 화면 해상도와 화면 크기를 다시 보려면 W3C 통계가 매우 현실적이고 설득력이 있습니다. 그들을 사용하고 파이어 폭스 또는 크롬의 플러그인의 해상도 테스트 종류를 사용하고 당신의 과거 작품이나 프레임 워크의 스크린 샷을 찍어서 수행 할 수있는 일과 수행 할 수없는 일의 한계를 보여줄 수 있습니다.

응답의 대부분은 W3C와 통계를 모두 사용하여 응답 성있는 레이아웃을위한 경로를 설득하는 방법을 추가하고 싶습니다. 현재 사람들을 설득하기 위해 온라인으로 백만 명 이상의 샘플 사이트가 있으며 지난 6 개월 동안 나는 사람들이 1 단계만으로 확신을 갖음을 발견했습니다.