모바일 화면 용 반응 형 웹 레이아웃 소개, 팁 및 예

이 기사는 "Web Responsive Design 시리즈" - 모든 플랫폼의 사용자를위한 웹 사이트를 만드는 데 도움이되는 도구, 리소스 및 자습서로 구성. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

디자이너들은 이전보다 훨씬 힘들어합니다. 우리는 정지 장치뿐만 아니라 태블릿 및 스마트 폰과 같은 모바일 장치를 설계해야 할뿐만 아니라 여기에서는 다양한 화면 크기 및 해상도에 대해 이야기하고 있으므로 어깨를 쳐야 할 큰 과제입니다. 이것에 비추어, 반응 형 웹 디자인 최고의 솔루션이 될 수 있습니다. 단순한 모바일 템플릿 이상을 제공합니다. 대신 전체 사이트 레이아웃이 가능한 모든 화면 해상도에 맞도록 충분히 유연하게 디자인되었습니다..

이러한 유체 설계 방식을 사용하면 명백한 이점과 단점이 있습니다. 반응 형 웹 디자인이 모바일 장치로보다 원활하게 전환 할 수있는 방법에 대한 아래 예제를 고려하십시오..

반응 형 디자인의 작동 원리

내가 그 단어를 사용할 때 “반응이 빠른” 웹 디자인 측면에서 전체 레이아웃은 사용자의 화면 해상도를 기반으로 응답한다는 것을 의미합니다. 이 시나리오를 생각해보십시오. 하나의 태블릿에서 웹 사이트를 읽은 다음 다른 이유로 다른 기기로 전환하는 경우입니다. 이제 브라우저 창의 크기가 조정됩니다. 반응 형 웹 디자인 레이아웃은 계획과 레이아웃을 특징으로합니다. 유용성의 관점에서 이것은 훌륭한 기술입니다.

반응 형 디자인은 브라우저 또는 장치 화면 크기에 관계없이 동질적인 경험을 창출하는 데 있습니다. 'A List Apart'에서 동적 인 이미지를 포함하는 나의 요점을 설명하기위한 완벽한 예제를 발견했습니다. 폭은 CSS에서 대부분 내부 컨테이너 요소의 백분율을 사용하여 설정됩니다. 더 큰 웹 사이트는 자바 스크립트와 같은 동적 인 콘텐츠가 지원되지 않을 때 제거하는 데에도 잘 반응합니다..

왜 모바일 용 디자인인가??

이동중인 웹 브라우징뿐만 아니라 더 많은 사용자가 모바일로 가고 있다는 것이 분명 해졌다. 태블릿 PC는 사용자가 교실에서 온라인 상태 일 때 상황에 따라 변화하기 시작했습니다. 모바일을위한 설계는 현대 웹 표준의 필수 요건입니다. 유일한 문제는 개발 방식을 선택하고 잠재 고객을 적절하게 타겟팅하는 것입니다..

특정 화면 해상도 코딩을 시작할 때 처리해야 할 스타일 시트가 너무 많습니다. CSS3의 미디어 쿼리를 사용하여 세로 및 가로보기 용 iPhone 관련 레이아웃을 작성할 수 있습니다. 픽셀 밀도를 미리 결정할 수 있으므로 모바일 용 HTML 템플릿을 쉽게 수정할 수 있습니다..

(이미지 출처 : bradfrostweb)

그러나 반응 형 디자인을위한 레이아웃을 코딩하면 모바일 측면이 기본적으로 처리됩니다. 데스크톱 및 모바일 사용자 모두 비슷한 경험을 제공받을 것이므로 외부 CSS 속성에 대해 걱정할 필요가 없습니다. 수행해야 할 유일한 연구는 가능한 가장 작은 디스플레이 화면을 계획하는 것입니다. Google 애널리틱스 트래픽 데이터는이 작업에 매우 유용 할 수 있습니다..

모든 브라우저를 실행하는 모든 단일 장치에서 웹 사이트가 100 % 작동하지 않을 가능성이 높습니다. 그러나 화면의 평균 너비를 기준으로 다수를 타겟팅 할 수 있습니다. 구형 iPhone 모델은 320x480 디스플레이 해상도를 사용하므로 믿기지 않습니다. 너가 그것을 적합 할 수 있으면 240px의 최소한도 폭, 또는 더조차를 위해 나는 쏠텐데..

기본 확대 / 축소 제거

스마트 폰에서 웹을 탐색 할 때마다 화면에 표시되도록 웹 사이트가 어떻게 확장되는지 알 수 있습니다. 대부분의 웹 사이트에는 모바일 대응 물이 없으므로 사용자 편의를위한 것입니다. 따라서 전체 레이아웃이 가장 안전한 방법입니다..

그러나 반응이 빠른 모바일 디자인을 만들면 자동 줌이 레이아웃 요소를 엉망으로 만들 수 있습니다. 특히 레이아웃에서 이미지 및 탐색 컨텐츠가 작거나 너무 크게 나타날 수 있습니다. 문서 헤더에 추가 할 수있는 특별한 메타 태그가 있습니다.이 태그는 대부분의 Android 및 iPhone 기기에서 재설정됩니다..

이것은 뷰포트 메타 태그 이는 콘텐츠 내에 맞춤 변수를 설정합니다. Apple은 특별히 iOS의 웹 사이트를 대상으로하고 있지만, 살펴 봐야 할 다른 메타 태그에 관한 문서 페이지가 있습니다. 그만큼 초기 규모 값은 웹 사이트를 100 % 완전 줌으로 기본 설정하므로 중요합니다..

마지막 값 사용자 확장 성 이 확대 / 축소 기능을 모두 제거하므로 사용자가 레이아웃의 크기를 조정할 수 없습니다. 그러면 전체 장치 너비에 따라 디자인이 한 크기로 고정됩니다. 줌 기능을 비활성화하더라도 모든 장치에서 세로에서 가로로 전환 할 때 반응이 좋은 디자인이 적용됩니다! 그러나 반응이 빠른 디자인을 잠그고 일반적인 확장 옵션을 제거하는 것이 좋습니다..

동적 이미지 크기 조정

이미지는 실제로 모든 웹 사이트의 또 다른 중요한 측면입니다. 모바일 사용자는 동영상을 스트리밍하려고하지 않을 수 있지만 사진은 완전히 다른 이야기입니다. 이것들은 박스 모델을 벗어나는 레이아웃에있어서 가장 큰 범인이기도합니다..

img 최대 너비 : 100 %;

CSS의 표준 규칙은 모든 이미지에 최대 너비 속성을 적용하는 것입니다. 그들은 항상 100 %로 설정되므로 왜곡되지 않습니다. 사용자가 처리 할 수있는 것보다 브라우저 창 크기를 줄이면 축소 된 너비가 100 %로 자동 조정됩니다. 문제는 Internet Explorer가이 속성을 이해할 수 없기 때문에 IE 스타일 시트를 함께 사용해야한다는 것입니다. 너비 : 100 %;.

JavaScript 또는 jQuery 플러그인을 사용하면 유연한 이미지를 만들 수도 있습니다. 믿을 수 없을만큼 반응이 빠른 이미지 컨텐츠를 구축 할 시간을 가진 정말로 현명한 개발자가 있습니다. 이 스레드는 스택 오버플로에서 IE6 / 7 버그를 해결하기 위해 이상하고도 편리한 접근 방식을 사용하는 많은 기능 중 하나입니다..

개인적으로 자연스런 CSS 이미지 크기 조정을 고집하는 것이 좋습니다. JavaScript가 활성화 된 모바일 브라우저에서 웹 사이트를 실행하는 경우 CSS를 지원할 가능성이 가장 높습니다. 정말로 깊이 파고 싶다면 Adaptive Designs의 24 가지 기사 이미지를 확인하십시오.

감동적인 디자인

웹 개발자는 모바일 사용자가 BlackBerry와 같은 키패드 전화를 사용하지 않는다는 사실을 잊어 버릴 수 있습니다. 오늘날 대부분의 스마트 폰은 터치 스크린 인터페이스를 사용하여 마우스 및 키보드 설정과 다른 시나리오를 렌더링합니다.

따라서 모바일 요소에서 대체 솔루션을 고려해야합니다. 드롭 다운 메뉴는 오른쪽에 단일 메뉴로 표시 될 때 더 잘 작동합니다. 대부분의 사용자는 왼쪽보다 쉽게 오른쪽에있는 링크를 탭할 수 있지만 두 열 중 하나는 공간을 줄이기 위해 작동합니다. 여백 들여 쓰기를 사용하면 jQuery 코드가 필요없이 링크 계층을 쉽게 식별 할 수 있습니다..

또한 이러한 탐색 링크의 크기를 늘리는 것이 좋습니다. 모바일 사용자는 데스크톱이나 랩톱 컴퓨터에서 제공되는 대형 화면의 고급 스러움을 누리지 못합니다. 텍스트를 크고, 선명하게, 탭할 수 있고, 모든 비용으로 읽을 수 있어야합니다. 사용자가 세로보기와 가로보기 사이를 전환하면 크기를 조정할 수도 있습니다. 모바일 웹을 탐색 할 때 상당히 자주 반복됩니다..

사용자 정의 CSS 레이아웃

일반적으로 레이아웃을 조정하고 자연스러운 콘텐츠 품질 저하를 허용하는 것이 가장 좋습니다. 사이드 바 및 컨텐트 영역이있는 경우, 너비 또는 백분율로 설정해야합니다. 브라우저 창의 크기가 조정되는 모든 항목입니다. 당신이 최소 너비 이것은 결국 레이아웃의 일부를 깨뜨릴 것입니다. 이제 사이드 바 콘텐츠가 페이지 콘텐츠 위에 표시됩니다..

(이미지 출처 : Pepperson)

이것이 전체 디자인에 어떤 영향을 미치는지 고려하면 외부 스타일 시트를 개발하는 것이 훨씬 쉽습니다. 그러나 레이아웃을 렌더링하기에는 너무 작은 화면 해상도로 실행될 가능성이 큽니다. 이것은 사용자 정의 CSS 속성을 추가하여 페이지의 일부를 제거하거나 내용을 다시 포맷하는 완벽한 시나리오입니다.

추가 콘텐츠 켜기 / 끄기 전환

대형 콘텐츠 블록의 예로는 웹 양식, 동적 메뉴, 이미지 슬라이더 및 기타 유사한 아이디어가 있습니다. 레이아웃이 작아짐에 따라 이러한 요소를 완전히 제거하는 대신 “최소화 된” 콘텐츠 사업부? CSS 또는 JavaScript를 사용하여 편집을 수행 할 수 있지만 궁극적으로 토글 버튼을 만들려면 일부 JS 코드가 필요할 수 있습니다..

이 대안은 홈 페이지를 동적으로 유지하고 풍부한 웹 미디어로 가득 채우는 데 적합합니다. 드롭 다운 탐색을 완전히 제거하거나 페이지 구조를 다시 정렬하는 대신 내용 부분에서 숨길 수 있습니다. 사용자가 귀하의 링크를 표시하려면 토글 버튼을 탭하여 메뉴를 열거 나 닫습니다.

이 형식은 간단하고 직관적이며 터치 스크린 장치에서 쉽게 작업 할 수 있습니다. div 안에는 각 드롭 다운 메뉴를 열 형식으로 나란히 배치 할 수 있습니다. 창 크기가 더 작아지면 자연스럽게 서로 아래로 떨어지고 페이지 높이가 증가합니다. 그러나 전체 메뉴를 축소 할 수있는 옵션은 쉽게 얻을 수 있으며 한 번의 탭으로 이동할 수 있습니다. 이 토글 div는 동적 인 사진 크기 조정과 협력하여 이미지 슬라이더에도 완벽합니다..

미디어 쿼리 사용

모바일 화면이 2 열 또는 3 열 레이아웃을 손상 시키면 서로 쌓인 각 콘텐츠 영역으로 끝날 것입니다. 전체 사이트는 피를 흘리는 것처럼 보일 수 있으며 구분 된 블록 영역이 없으면 매우 혼란 스러울 수 있습니다. 더 나은 아이디어는 각 열에 하단 테두리를 추가하는 것입니다. 휴대 기기에만 외부 스타일 시트를 mobile.css.

이러한 새로운 스타일을 사용하면 콘텐츠가 나누어 진 섹션으로 나뉩니다. 위의 미디어 속성은 가로보기에서 구형 iPhone 장치를 대상으로 특별히 고안되었습니다. 그러나 480 픽셀보다 작은 화면이있는 장치에도 적용됩니다. 이점을 이용하여 어떤 시점에서 레이아웃을 결정할 수 있습니다. “헤어지다”.

기기 방향을 감지하는 데 사용할 수있는 옵션이 몇 가지 더 있습니다. CSS 미디어에 대한 환상적인 가이드는 몇 가지 아이디어를 줄 수 있습니다. 또한 새로운 모바일 프로젝트 320 이상은 모바일 CSS를위한 상용구를 제공합니다. @미디어 스타일. 이것들은 동일한 mobile.css 파일에 직접 포함될 수 있으며 많은 다른 장치에 대한 규칙을 적용 할 수 있습니다.

 / * 스마트 폰 (세로 및 가로) ----------- * / @ 미디어 전용 화면 및 (최소 장치 너비 : 320px) 및 (최대 장치 너비 : 480px) / * 스타일 * / / * 스마트 폰 (가로) ----------- * / @ 미디어 전용 화면 및 (최소 너비 : 321px) / * 스타일 * / / * 스마트 폰 (세로) ---- ------- * / @ 미디어 전용 화면 및 (최대 너비 : 320px) / * 스타일 * / / * iPads (세로 및 가로) ----------- * / @ (최소 장치 너비 : 768px) 및 (최대 장치 너비 : 1024px) / * 스타일 * /

(출처 : Hardboiled CSS3 Media Queries)

유용한 도구

스켈레톤 - 반응이 빠른 모바일 디자인을위한 아름다운 상용구
적응 형에서 완전히 반응 형으로

쇼케이스 : 아름다운 반응 형 디자인

이 팁과 디자인 기법이 모바일 화면뿐만 아니라 웹 브라우징을 사용하는 일반적인 장치에 대한 흥미로운 반응 레이아웃을 구축하도록 권장 할 수 있기를 바랍니다. 창조적 인 주스가 흐르도록 나는 반응 형 모바일 웹 디자인의 작은 쇼케이스를 만들었습니다. 좀 더 독특한 기능을 확인하고 토론 영역의 디자인이나 주제에 대한 의견을 공유하십시오..

달을 어슬렁 거리다