반응형 디자인을 무료로 테스트하는 방법 JavaScript 스크립트를 사용한 반응형 레이아웃 반응형 디자인 테스트
안녕하세요, 블로그 독자 여러분. 적응형 디자인이 러시아 인터넷에서 점점 더 인기를 얻고 있다는 것은 놀라운 일이 아닙니다. 물론 레이아웃 디자이너는 이를 연구해야 합니다. 점점 더 많은 사람들이 모바일 장치를 사용하고 있기 때문에 반응형 디자인이 곧 거의 모든 웹사이트에 적용될 것이기 때문입니다.
그리고 그것이 있는 사이트는 그것이 없는 것보다 그러한 장치에서 읽기가 훨씬 더 편리하다고 말하고 싶습니다.
오늘 저는 웹사이트의 적응성을 확인할 수 있는 매우 유용하고 멋진 서비스 5가지를 소개하고 싶습니다.
자, 가자.
웹사이트의 적응성을 확인할 수 있는 5가지 서비스. www.responsibledesigntest.net사이트 확인을 위한 좋은 서비스입니다. 태블릿과 휴대폰 모두에 다양한 화면 해상도가 있습니다.
mattkersley.comMatt Kersley가 제공하는 간단한 웹사이트 확인 서비스입니다. 널리 사용되는 모든 모바일 장치 해상도도 사용할 수 있습니다.
모든 사이트를 확인할 수 있는 매우 멋진 서비스입니다. 디자인도 좋고 기능성도 너무 맘에 들었어요.
매우 아름답고 기능적인 서비스. 사이트가 TV에서 어떻게 보이는지 확인하는 것도 가능합니다 :-)
저자의 말: "이 브라우저의 크기를 조정하지 마세요. 곧 지워질 것입니다!" 이 말을 얼마나 자주 듣나요? 글쎄요, 그렇게 자주는 아닐 수도 있지만 반응형 웹사이트를 개발한다면 제가 무슨 말을 하는지 아실 겁니다. DOM이나 CSS를 편집할 때마다 브라우저 가장자리를 앞뒤로 드래그하면서 변경 사항을 테스트하게 됩니다. 그리고 부정확성을 찾고 있습니다.
일반적으로 이러한 노력의 대부분은 다양한 장치의 화면 크기를 모방하려는 시도입니다.
엔터프라이즈 개발을 수행하는 경우 테스트할 회사에서 제공한 장치가 많이 있을 것입니다. 제가 일하는 곳에는 아이패드, 아이폰, 한두 대의 다른 태블릿, 노트북, 데스크탑이 있습니다. 그런 여유가 없다면 손에 있는 것을 사용해야 합니다.
집에는 두 대의 다른 노트북이 있습니다. 안드로이드 기기: Kindle 및 Nexus 7. 저는 프리랜스 개발을 테스트하기 위해 이 장치를 사용하지만 이것이 완전한 선택이 아니라는 것은 분명합니다. 별말씀을요 iOS 기기, 저는 얼리 어답터로 간주되지만 새 휴대폰/태블릿/태블릿이 판매되자마자 모든 새 휴대폰/태블릿을 구입할 계획은 없습니다.
그렇다면 개발자는 어떻게 해야 할까요? 다행히 다양한 장치의 화면 크기를 시뮬레이션하는 브라우저 기반 도구가 점점 늘어나고 있습니다. 물론 다양한 도구에는 다양한 기능 세트와 다양한 수준의 효율성이 제공됩니다. 여기서는 그 중 일부를 살펴보겠습니다.
테스트 목적으로 저는 제가 만든 최초의 진정한 반응형 웹사이트인 PajamasOnYourFeet.com을 사용했습니다. 이는 EGrappler의 개발자 커뮤니티에 매우 관대하고 무료로 제공되는 Brownie HTML5 템플릿을 기반으로 합니다.
나는 반응하고 있는가?나는 반응하고 있는가? – 귀하의 사이트가 4개의 서로 다른 장치에 어떻게 표시되는지에 대한 완전히 쉽고 즉각적인 미리보기입니다. 4개 모두 iOS이며 개발자는 웹사이트에서 자신의 선택을 설명합니다. 컨트롤이나 선택 항목은 제공되지 않으며 매우 간단하고 우아한 디스플레이만 제공됩니다. 뷰 창 크기:
데스크탑 - 1600 x 992px, 배율에 따라 감소(0.3181)
노트북 - 1280 x 802px, 크기 감소(0.277)
태블릿 - 768 x 1024px, 배율에 따라 감소(0.219)
모바일 - 320 x 480px, 배율에 따라 감소(0.219)
개발자의 말을 인용하자면: “이것은 테스트 도구가 아니며 실제 장치에서 이 작업을 수행하는 것이 매우 중요합니다. 하지만 이는 빠른 스크린샷을 찍고 고객 회의에서 의미하는 바를 "드릴다운"할 수 있는 시각적 기회를 제공하는 도구입니다."
deviceponsive는 Am I Responsive 사이트와 유사합니까? 귀하의 사이트를 간단하고 깔끔하게 표시하지만 장치에 관해서는 컨트롤이나 사용 가능한 옵션이 없습니다. 이 모든 것이 하나의 긴 페이지에 동시에 표시됩니다. 여기에는 흥미로운 속성이 있습니다. 배경색을 편집하고 자신의 로고를 삽입하여 헤더를 수정한 다음 "인쇄"할 수 있습니다. 이런 방식으로 고객에게 스크린샷을 보여줄 때 사이트를 브랜드화할 수 있습니다. 이 사이트에서 시뮬레이션된 장치 및 화면 크기:
맥북 - 1280x800
iPad(세로) - 768 x 1024
iPad(가로 모드) - 1024 x 768
Kindle(세로) - 600 x 1024
Kindle(가로 모드) - 1024 x 600
iPhone(세로 방향) - 320 x 480
iPhone(가로 모드) - 480 x 320
갤럭시(세로) - 240 x 320
갤럭시(가로) - 320 x 240
대부분의 유사한 도구와 마찬가지로 스크롤 막대는 소형 장치에 나타납니다. 실제 장치에는 표시되지 않지만 비터치 장치에서 테스트 보기를 스크롤하려면 몇 가지 양보가 필요합니다.
deviceponsive와 마찬가지로 반응형 테스트는 사이트를 여러 장치에 표시하지만 한 페이지에 한꺼번에 표시하는 대신 페이지 상단의 간단한 메뉴에서 표시할 장치를 선택합니다. 중간 크기의 노트북에서 이 사이트를 탐색하면서 페이지를 축소하면 테스트 중인 장치의 창 안에서 전체 사이트를 볼 수 있어 효과가 좋다는 것을 알았습니다.
대형 모니터를 통해 13개의 서로 다른 보기 창이 제공됩니다. 데스크톱 컴퓨터소위 "Crappy Android"(솔직히 말하면 " 안드로이드가 더 좋아"(더 좋은 안드로이드).
이번에도 Firefox는 이 사이트에서 약간의 실수를 했습니다. 스크린샷에서 녹색 헤더와 흰색 배경의 콘텐츠 영역 사이에 이미지 슬라이더가 나타나야 하는 곳에 파란색 막대만 있음을 확인하세요.
이전 두 개와 매우 유사하며 Response.A를 설정하는 유일한 차이점은 한 장치에서 다음 장치로의 디스플레이의 부드러운 애니메이션과 사이트의 실제 영역이 뷰포트에서 떨어지는 것을 보여주는 반투명 오버레이입니다. .
여기에서 사용할 수 있는 유일한 장치 옵션은 자동 옵션으로, 브라우저 창을 채우고 사이트에 갔을 때 볼 수 있는 것과 같은 사이트를 표시합니다. 데스크톱; 태블릿(가로 방향); 태블릿(세로 방향); 스마트폰(가로 방향) 및 스마트폰(세로 방향)의 경우 픽셀 크기가 제공되지 않습니다.
다시 한 번, 여러 가지 기능과 옵션이 Screenqueries를 다른 사이트와 차별화합니다. 세로 및 가로 모드를 전환하기 위한 별도의 요소를 갖춘 14개의 휴대폰과 12개의 태블릿 장치가 있습니다. 이는 번호가 매겨진 픽셀 그리드에 표시되며 크기는 테스트 디스플레이의 오른쪽 하단에 표시됩니다. 디스플레이 가장자리를 드래그할 수 있으므로 사용자 정의 크기를 테스트할 수 있습니다. 테스트 영역 위로 드래그하거나 클릭하면 배경이 회색으로 바뀌어 덜 어수선해 보입니다.
흥미로운 기능이 사이트 - 여러 기기에는 이 기기에 할당된 Chrome 브라우저에 사이트를 표시하는 'True View' 옵션이 있습니다. 불행하게도 저는 이미 이것에 익숙합니다. Firefox는 테스트 사이트의 이미지 슬라이더를 표시할 수 없습니다. 걱정하지 마세요. 저는 브라우저에 관해서는 Firefox를 정말 선호하지만 다행히도 옵션이 있습니다.
Screenfly는 실제로 유용성 요소를 증가시킵니다. 10인치 노트북부터 24인치 데스크탑까지 태블릿보다 큰 9개의 장치, 5개의 태블릿, 9개의 스마트폰, 3개의 TV 크기 및 사용자 정의 화면 크기 옵션을 제공합니다. 선택한 모든 옵션은 메뉴의 별도 컨트롤을 사용하여 세로 또는 가로 방향으로 회전할 수 있습니다. 스크롤 허용 여부를 선택하고 버튼을 한 번만 클릭하면 공유 가능한 링크를 생성할 수 있습니다.
이 사이트는 픽셀 크기 정보를 제공하는 방식으로 적극적으로 유용합니다. 메뉴의 각 장치에는 이름과 픽셀 크기가 표시되고, 브라우저 창의 크기는 창의 오른쪽 상단 근처에 표시되며, 선택한 옵션의 크기는 디스플레이 아래 바닥글에 표시됩니다. 테스트 중인 사이트의 URL입니다. 이 작은 기능을 사용하면 스크린샷을 더 쉽게 문서화하고 고객과 정보를 공유할 수 있습니다.
위의 모든 사항은 이미 이상적인 도구로 만들었지만 Screenfly 개발자는 이를 단순히 최고 수준으로 만들 수 있는 기회를 찾아 프록시 서버 속성을 제공했습니다. 웹사이트 인용: “Screenfly는 귀하가 웹사이트를 보는 동안 프록시 서버를 사용하여 장치를 가장할 수 있습니다. 프록시는 선택한 장치의 사용자 에이전트 문자열을 시뮬레이션하지만 해당 장치의 동작은 시뮬레이션하지 않습니다." 여기에서 다루는 다른 모든 도구는 CSS만을 다루고 있습니다. Screenfly는 사용자 에이전트 문자열을 기반으로 테스트할 수 있는 유일한 제품입니다.
이런 식으로 기존 사이트로 만든 사이트를 테스트한 결과 모바일 버전, 결과가 매우 좋았다고 말할 수 있습니다. 모든 것이 예상한 대로 정확하게 표시되었으며 기능을 테스트할 수 있었습니다. 사용자 에이전트 문자열을 테스트하는 것은 전통적이라고 말할 수 있지만 이 사이트는 오래 전에 만들어졌고 프록시 속성은 실제로 매우 유용한 추가 기능임이 밝혀졌습니다.
따라서 반응형 웹사이트를 테스트하는 데 사용할 수 있는 리소스가 많이 있다는 것을 알 수 있습니다. 고유한 속성이 다릅니다. 귀하가 사용하는 사이트는 귀하의 개인 취향과 요구 사항에 따라 다르며, 나는 귀하가 해당 사이트를 탐색하고 실험해 보도록 권장합니다. 우리 개발자들이 진정으로 더 많은 것을 가질수록 유용한 도구, 더욱 좋습니다.
온라인 상점은 모바일 장치에 최적화되어야 합니다. 이 문제는 사이트가 모든 플랫폼에서 올바르게 표시될 수 있도록 하는 적응형 디자인을 사용하여 해결됩니다. 그러나 반응형 디자인을 구현하는 데는 표준적인 함정이 따릅니다. 온라인 쇼핑 사이트에서 일반적으로 발생하는 가장 일반적인 8가지 문제를 나열해 보겠습니다.
방문자 행동 분석 무시모바일 부문에 대한 진입이 성급해짐에 따라 소매업체는 방문자 행동에 대한 진지한 분석을 수행하지 않고 웹사이트를 디자인해야 합니다. 방문자 행동 분석은 준비의 가장 중요한 단계로, 가장 인기 있는 모바일 장치를 식별하고 이에 맞춰 사이트를 먼저 최적화할 수 있습니다. 분석은 가장 "인기 있는" 사용자 작업(예: 제품 이미지 확대)을 결정하는 데 도움이 됩니다. 모바일 방문자의 전환율 등을 보여줍니다. 이 데이터는 사용자 행동 선호도에 대한 통찰력을 제공하고 모바일 청중의 기대를 충족하는 데 도움이 됩니다. 분석 모바일 트래픽결과를 체계적이고 일관되게 실행하여 고객의 요구에 맞게 사이트를 마무리하고 최적화하는 것이 필요합니다.
데스크탑 스토어 디자인일반적으로 온라인 상점의 데스크톱 버전은 모바일 화면에 맞게 재설계되지만, 모바일 장치의 작은 화면을 데스크톱에 맞게 확장하는 것이 더 논리적입니다. 소매업체는 데스크톱용으로 설계된 웹사이트를 스마트폰 크기로 만드는 데 따른 기술적인 문제를 인식하지 못하는 경우가 많습니다. 
시작 디자인 모바일 화면, 모바일 사용자 경험에 중점을 둡니다. 결과적으로 데스크톱과 모바일 두 채널 모두에 맞게 디자인하는 것이 더 쉬워질 것입니다.
온라인 상점의 모바일 레이아웃 테스트는 출시의 필수 단계이지만 많은 소유자는 이를 무시하고 테스트하지 않고 출시하는 경우가 많습니다. 이로 인해 모바일 사이트의 라이브 버전에서는 구매 및 주문 과정에서도 오류가 나타날 수 있습니다.
적응형 디자인의 단점은 온라인 상점의 사전 테스트를 통해 쉽게 식별되지만 많은 판매자는 이에 대한 리소스를 갖고 있지 않습니다. 돈 손실 위험을 줄이려면 Chrome, IE, Firefox, Safari 등 기본 브라우저에서 사이트 주변의 주요 사용자 경로를 테스트하세요. 운영체제– Windows, Mac OS, Android, IOS 인기 모바일 장치. 변경할 때마다 테스트하세요. BrowserStack 또는 Viewport Resizer와 같은 서비스를 사용하면 테스트 시간을 몇 시간으로 줄일 수 있습니다.
모바일 화면을 위한 작은 요소스마트폰 화면에 더 많은 공간을 확보하기 위해 온라인 상점 주인은 "행동 촉구" 버튼의 크기를 줄입니다. 사용자가 구매 버튼을 클릭하기 위해 확대/축소하도록 강요하지 말고 작은 요소를 너무 가까이 배치하지 마십시오. 그렇지 않으면 사용자가 더 편리한 사이트로 이동하게 됩니다. 큰 탐색 요소와 클릭 유도 버튼 크기를 갖춘 인터페이스를 디자인하세요.
느린 페이지 로딩 속도모바일 사용자는 빠른 사이트와 최소 로딩 시간을 좋아합니다. 당신의 구성 요소를 평가 모바일 페이지– 그림, 버튼, 텍스트, 스크립트 – 모바일 장치에 최적화되어야 합니다. Google은 SERP에서 페이지 로드 시간을 고려하여 모바일 사이트의 순위를 매기고 상위에 우선순위를 부여하므로 "가벼운" 사이트가 추가로 심각한 이점을 얻을 수 있습니다.
콘텐츠를 여러 탭으로 분리합니다. 예를 들어 제품 페이지에는 기본 이미지, 설명, 가격 및 '구매' 버튼만 포함될 수 있습니다. 고객 리뷰와 동영상을 별도의 탭에 배치하여 페이지 주요 부분의 "가중치"를 줄일 수 있습니다. 콘텐츠 외에도 로딩 속도에 영향을 미치는 다른 요소(CSS 파일, 이미지, 스크립트)를 최적화하고 필요한 데이터만 보냅니다. 리소스 파일의 크기와 로딩 시간을 줄이는 도구(Uglify 또는 JSCompress)가 도움이 될 것입니다.
모바일 사용자를 위한 콘텐츠 자르기개발자는 모바일 장치에서의 로딩 속도를 높이기 위해 일부 콘텐츠를 숨기는 경우가 많습니다. 그러나 페이지 크기가 실제로 줄어들지 않고 콘텐츠가 사용자에게 표시되지 않는 경우가 많습니다. 매장에서는 페이지를 동적으로 생성하여 모바일 방문자의 페이지 크기와 로딩 시간을 줄일 수 있어야 합니다. 또한 모바일 사용자에게 더 적은 콘텐츠를 제공하는 것은 좋지 않으며 소비자 경험에 부정적인 영향을 미칩니다. 일반적으로 구매 과정에서 그들은 다른 장치, 온라인 쇼핑객의 약 90%가 이렇게 합니다. 반응형 디자인 방법으로 제한하는 것은 큰 실수입니다.
하나의 해상도로만 이미지를 지원합니다.반응형 디자인을 갖춘 좋은 웹사이트는 기기 유형에 따라 이미지 해상도를 자동으로 변경하며, 이미지가 많으면 로딩 시간이 늘어납니다. 이미지 크기를 자동으로 조정하는 방법에는 여러 가지가 있습니다. 특정 장치. "유연한" 이미지(유동 이미지)는 이미지를 포함하는 요소의 너비에 따라 이미지를 압축하거나 늘릴 수 있는 CSS 기반 방법이거나 각 이미지에 필요한 크기의 이미지를 로드할 수 있는 HTML5 요소입니다. 장치 유형.
'무응답' 이메일사이트 자체에서는 모든 것이 괜찮지만 반응형 디자인은 데스크톱과 모바일 장치에서 잘 작동합니다. 그러나 이메일은 응답하지 않으며 모바일 사용자는 주문 세부 정보를 확인하거나 완료된 구매 항목을 확인하기 위해 끝없는 추천 제품 목록을 스크롤하는 데 어려움을 겪어야 합니다. 
이메일은 주요 고객 접점이므로 반응형 이메일 디자인을 모바일 전략에 통합하세요. 편지와 뉴스레터를 디자인하고 테스트하세요. 편지 템플릿은 "가벼워야" 하며 중요한 정보만 포함해야 합니다.
웹 기술이 발전함에 따라 웹 개발에 대한 요구 사항도 증가하고 있습니다. 웹 개발자, 레이아웃 디자이너 또는 오늘날 프런트엔드 개발자라고 불리는 사람들은 가장 큰 압박감을 느낍니다.
이 기사에서는 적응형 레이아웃에 대해 조금 이야기하겠습니다. 이 "트릭"은 현재 매우 비싸기 때문입니다. 적응형 레이아웃의 경우, 모든 수준의 레이아웃 디자이너는 그것이 얼마나 어려운지 이해하기 때문에 고객이나 프로젝트 관리자를 온화하게 분노로 바라보고 있습니다.
많은 사람들이 적응형 레이아웃과 유연한 레이아웃을 혼동하기 시작합니다. 이는 초보 레이아웃 디자이너가 흔히 저지르는 실수입니다. 당신이 묻는 차이점은 무엇입니까?
먼저 명확하게 말할 수 있도록 모든 점을 표시하고 어떤 유형의 레이아웃이 있는지 살펴 보겠습니다.
레이아웃에는 4가지 유형이 있습니다.
모든 유형을 더 자세히 고려해 봅시다.
1. 고정 레이아웃
블록의 너비는 변경되지 않습니다. 저해상도 모니터에서는 가로 스크롤 막대가 나타납니다.
#temnyi, #svetlyi (너비: 440px; )
2. 고무 레이아웃
블록의 너비는 브라우저 창의 크기에 따라 변경됩니다. 최대값과 최소값을 취할 수 있습니다(max-width 속성). 하지만 화면이 작아질수록 50%에서 100%까지 50%를 만들 수는 없습니다.
#temnyi, #svetlyi (너비: 50%; )
3. 적응형 레이아웃
@media 또는 스크립트를 사용하여 구현됩니다. 알려진 특정 장치(320, 768, 1024 등)에 맞게 맞춤화되었습니다. 지정된 수준 중 하나에 도달한 후 갑자기 변화가 발생합니다. 확실히 적합합니다
#temnyi, #svetlyi ( 너비: 430px; ) @media (최대 너비: 1220px) ( #temnyi, #svetlyi ( 너비: 380px; ) ) @media (최대 너비: 1120px) ( #temnyi, #svetlyi ( 너비 : 325px; ) ) @media (최대 너비: 680px) ( #temnyi, #svetlyi ( 너비: 200px; ) )
4. 반응형 레이아웃
이는 유동적 레이아웃과 적응형 레이아웃의 조합입니다. 구현하기가 가장 어렵습니다. 그러나 결과는 가장 수용 가능합니다. 사이트가 모든 장치에 적응할 것이라고 말하는 것이 안전합니다.
#temnyi, #svetlyi ( 너비: 50%; ) @media (최대 너비: 1006px) ( #temnyi, #svetlyi ( 너비: 100%; ) )
그래서 우리는 웹사이트 레이아웃의 4가지 유형에 대해 이야기했습니다. 이제 기적의 적응형 레이아웃 스크립트를 사용할 시간이 왔습니다. 아무것도 설명할 필요가 없기를 바랍니다. 스크립트는 매우 간단합니다. 변경하면 일부 블록이 어딘가에 섞여 있을 뿐이라고 말하는 것뿐입니다. 물론 이것은 CSS 스타일을 통해서도 가능하지만 모든 방법을 알아야 합니다. 때로는 어떤 곳에서는 작동하지 않는 곳도 있고 딱 맞는 곳도 있습니다.
적응형 레이아웃 스크립트:
/* 코드에서 편리하게 사용할 수 있도록 모노제스트 클래스를 넣을 수 있는 변수를 만들어 보겠습니다. 즉, 여기서는 각 샘플 이전이 아닌 한 번만 감지하면 끝입니다! 이것은 유용한 기능입니다. */ var my = ( window: $(window) ); /*실제로는 함수 그 자체*/ $(window).resize(function () ( /*창의 너비를 결정하여 width 변수에 넣는 변수*/ var width = my.window.width( ); /*창 변환 조건, 즉 창 너비가 특정 크기에 도달했을 때 실행되는 조건 */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
그게 다야. 궁금하신 점은 댓글로 작성하시고,
