콘텐츠
반응 형 웹 디자인은 매우 간단하게 들립니다. 레이아웃에 유연한 그리드를 선택하고 유연한 미디어 (이미지, 비디오, iframe)를 사용하고 미디어 쿼리를 적용하여 이러한 측정을 업데이트하여 모든 뷰포트에서 콘텐츠를 가장 잘 정렬합니다. 실제로 우리는 그것이 그렇게 쉽지 않다는 것을 배웠습니다. 모든 프로젝트에서 발생하는 작은 문제로 인해 우리는 머리를 긁적이며 때로는 책상에 손톱 참호를 조각하기도합니다.
Responsive Design Weekly 뉴스 레터를 큐레이팅하기 시작한 이후로 웹 커뮤니티의 많은 회원들과 이야기하고 그들의 경험을들을 수있을만큼 운이 좋았습니다. 커뮤니티가 진정으로 무엇을 배우고 싶어하는지 정확히 알고 싶었 기 때문에 독자들에게 설문 조사를했습니다. 다음은 상위 결과입니다.
- 반응 형 이미지
- 성능 향상
- 반응 형 타이포그래피
- JavaScript의 미디어 쿼리
- 점진적 향상
- 형세
이러한 주제를 염두에두고 업계 리더들에게 그들의 생각을 묻는 일련의 팟 캐스트를 실행했습니다. 그들의 응답에서 한 가지 요점은 만장일치로 흥미롭고 고급 기술에 대해 걱정하기 시작하기 직전에 기본을 얻는 데 집중했습니다. 모든 것을 기본으로 되 돌리면 모든 사람을위한 강력한 인터페이스를 구축 할 수 있으며 기기 또는 사용자의 상황이 허용 할 때 여러 기능을 적용 할 수 있습니다.
"그러니까 ...이 고급 기술은 어떻습니까?" 저는 Stephen Hay가 다음과 같이 말했을 때이를 가장 잘 요약했다고 생각합니다. '궁극적 인 RWD 기술은 고급 RWD 기술을 사용하지 않고 시작하는 것입니다. 구조화 된 콘텐츠로 시작하여 자신 만의 방식을 구축하세요. 디자인이 깨지고 내용이 그것을 지시 할 때만 중단 점을 추가하십시오.
이 기사에서는 기본부터 시작하여 상황에 따라 복잡성을 추가하여 이러한 고급 기술을 구축 할 것입니다. 시작하자.
반응 형 이미지
유체 매체는 Ethan Marcotte가 처음 정의했을 때 RWD의 핵심 부분이었습니다. 너비 : 100 %; , 최대 너비 : 100 %; 오늘날에도 여전히 작동하지만 반응 형 이미지 환경은 훨씬 더 복잡해졌습니다. 화면 크기, 픽셀 밀도 및 지원할 장치의 수가 증가함에 따라 더 많은 제어가 필요합니다.
세 가지 주요 관심사는 반응 형 이미지 커뮤니티 그룹 (RICG)에서 정의했습니다.
- 유선으로 전송하는 이미지의 킬로바이트 크기
- 높은 DPI 장치로 보내는 이미지의 물리적 크기
- 뷰포트의 특정 크기에 대한 아트 디렉션의 형태로 이미지 자르기
Indiegogo의 도움을 받아 Yoav Weiss는 Blink 구현 (Google의 WebKit 포크)에 대한 대부분의 작업을 수행했으며,이 글을 읽으면 Chrome과 Firefox로 제공됩니다. Safari 8은 srcset을 제공하지만 sizes 속성은 야간 빌드에만 있으며 picture>는 아직 구현되지 않았습니다.
웹 개발 프로세스에 새로운 것이 도착하면 시작하기가 어려울 수 있습니다. 예제를 단계별로 살펴 보겠습니다.
img!-그림을 지원하지 않는 모든 브라우저에 대한 대체 이미지 선언-> src = "horse-350.webp"!-srcset에 모든 이미지 크기를 선언합니다. w 설명자를 사용하여 이미지 너비를 포함하여 각 이미지의 너비를 브라우저에 알립니다.-> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "!-크기는 브라우저에 사이트 레이아웃을 알려줍니다. 여기서 우리는 64ems 이상의 뷰포트에 대해 뷰포트의 70 %를 차지할 이미지를 사용합니다-> sizes = "(min-width : 64em) 70vw,!-뷰포트가 그렇지 않은 경우 big, 그런 다음 37.5ems 이상의 뷰포트에 대해 뷰포트의 95 %를 차지하는 이미지-> (최소 너비 : 37.5em) 95vw,!-를 사용하고 뷰포트가 그보다 작 으면 다음을 사용합니다. 뷰포트의 100 %를 차지하는 이미지-> 100vw "!-항상 대체 텍스트가 있습니다 .--> alt ="A horse "/>
성능 관점에서 크기 속성에 최소 너비를 사용하는지 최대 너비를 사용하는지는 중요하지 않지만 소스 순서는 중요합니다. 브라우저는 항상 첫 번째로 일치하는 크기를 사용합니다.
또한 디자인에 대해 직접 정의 할 크기 속성을 하드 코딩하고 있음을 기억하십시오. 이로 인해 문제가 발생할 수 있습니다. 예를 들어 사이트를 다시 디자인하는 경우 모든 img> 또는 picture>를 다시 방문하여 크기를 다시 정의해야합니다. CMS를 사용하는 경우 빌드 프로세스의 일부로이 문제를 해결할 수 있습니다.
WordPress에는 이미 도움이되는 플러그인이 있습니다. WP 표준 이미지 품종에 srcset을 정의하고 중앙 위치에서 크기를 선언 할 수 있습니다. 페이지가 데이터베이스에서 생성되면 img>의 모든 언급을 교체하고 그림 마크 업으로 바꿉니다.
기본
- 정말로 이미지를 포함해야하는지 생각해보십시오. 이미지 핵심 콘텐츠입니까, 아니면 장식입니까? 이미지가 하나 적 으면로드 시간이 빨라집니다.
- ImageOptim을 사용하여 포함해야하는 이미지 최적화
- 서버 또는 .htaccess 파일의 이미지에 대한 만료 헤더를 설정합니다 ( '성능'아래의 세부 정보 참조).
- PictureFill은 그림에 대한 폴리 필 지원을 제공합니다.
많은
- jQuery의 Lazy Load 플러그인을 사용하여 이미지를 지연로드합니다.
- 기능 감지를 위해 HTMLImageElement.Sizes 및 HTMLPictureElement를 사용하십시오.
- Github에있는 고급 PictureFill WP 플러그인을 사용하면 사용자 지정 이미지 너비 및 크기 값을 정의 할 수 있습니다.
공연
페이지에서 가장 빠르게인지 된 성능을 얻으려면 서버의 첫 번째 응답 내에서 페이지의 상단 부분을 렌더링하는 데 필요한 모든 HTML 및 CSS가 필요합니다. 이 매직 넘버는 14kb이며 첫 번째 왕복 시간 (RTT) 내 최대 혼잡 창 크기를 기반으로합니다.
Guardian의 프론트 엔드 기술 책임자 인 Patrick Hamann과 그의 팀은 프론트 엔드와 백엔드 기술을 혼합하여 1000ms 장벽을 허 물었습니다. Guardian의 접근 방식은 필요한 콘텐츠 인 기사가 가능한 한 빨리 14kb 매직 넘버 내에서 사용자에게 전달되도록하는 것입니다.
프로세스를 살펴 보겠습니다.
- 사용자가 뉴스 기사로 연결되는 Google 링크를 클릭합니다.
- 기사에 대한 단일 차단 요청이 데이터베이스로 전송됩니다. 관련 기사 나 의견이 요청되지 않습니다.
- HTML은 Critical CSS를 포함하여로드됩니다.
- 머리에>
- '겨자 자르기'프로세스가 수행되고 사용자의 기기 기능을 기반으로하는 모든 조건부 요소가로드됩니다.
- 기사 자체와 관련되거나 지원하는 모든 콘텐츠 (관련 기사 이미지, 기사 댓글 등)는 제자리에 지연로드됩니다.
이와 같이 중요한 렌더링 경로를 최적화하면 head> 길이가 222 줄입니다. 그러나 사용자가 보게 된 중요한 콘텐츠는 gzip으로 압축했을 때 여전히 14kb 초기 페이로드 내에 있습니다. 1000ms 렌더링 장벽을 깨는 데 도움이되는 것은 바로이 프로세스입니다.
조건부 및 지연로드
조건부로드는 기기 기능에 따라 사용자 환경을 개선합니다. Modernizr와 같은 도구를 사용하면 이러한 기능을 테스트 할 수 있지만 브라우저에서 지원을 제공한다고해서 항상 완전한 지원을 의미하는 것은 아닙니다.
한 가지 기술은 사용자가 해당 기능을 사용하려는 의도를 보일 때까지로드를 보류하는 것입니다. 이것은 조건부로 간주됩니다. 사용자가 아이콘 위로 마우스를 가져 가거나 아이콘을 터치 할 때까지 소셜 아이콘에서로드를 보류 할 수 있습니다. 또는 사용자가 전용 매핑 애플리케이션에 연결하는 것을 선호 할 가능성이있는 더 작은 뷰포트에서 iframe Google지도를로드하지 않을 수 있습니다. 또 다른 방법은 '겨자 자르기'입니다. 자세한 내용은 위의 상자를 참조하세요.
지연로드는 기사, 댓글 또는 기타 관련 기사의 일부인 이미지와 같이 페이지에 항상로드하려는 항목으로 정의되지만 사용자가 콘텐츠를 사용하기 위해 거기에있을 필요는 없습니다.
기본
- 파일에 대해 gzipping을 활성화하고 모든 정적 콘텐츠에 대해 만료 헤더를 설정합니다 (netm.ag/expire-260).
- Lazy Load jQuery 플러그인을 사용하십시오. 뷰포트에 접근 할 때 또는 일정 시간 후에 이미지를로드합니다.
많은
- Fastly 또는 CloudFlare를 설정하십시오. CDN (콘텐츠 전송 네트워크)은 자체 서버보다 빠르게 사용자에게 정적 콘텐츠를 제공하고 일부 무료 계층이 있습니다.
- 병렬 http 요청과 같은 http2 기능을 활용하기 위해 http2 사용 브라우저에 대해 SPDY를 사용하도록 설정
- Social Count는 소셜 아이콘의 조건부로드를 허용합니다.
- Static Maps API를 사용하면 이미지에 대한 대화 형 Google지도를 전환 할 수 있습니다. netm.ag/static-260에서 Brad Frost의 예를 살펴보십시오.
- Ajax Include Pattern은 이전 데이터, 이후 데이터 또는 데이터 교체 속성에서 콘텐츠 스 니펫을로드합니다.
반응 형 타이포그래피
타이포그래피는 콘텐츠를 이해하기 쉽게 만드는 것입니다. 반응 형 타이포그래피는이를 확장하여 다양한 장치와 뷰포트에서 가독성을 보장합니다. 조던 무어는 그 유형이 그가 생각하지 않는 한 가지라고 인정합니다. 필요한 경우 이미지를 한두 개 떨어 뜨리 되 훌륭한 유형인지 확인하십시오.
Stephen Hay는 각 브라우저 또는 장치 제조업체가 특정 해상도 또는 장치에 대해 합리적으로 읽을 수있는 기본값을 설정하기 때문에 HTML 글꼴 크기를 100 %로 설정할 것을 제안합니다 (읽기 : 그대로 두십시오). 대부분의 데스크톱 브라우저에서 이것은 16px입니다.
반면에 Moore는 REM 단위와 HTML 글꼴 크기를 사용하여 특정 콘텐츠 요소에 대한 최소 글꼴 크기를 설정합니다. 예를 들어 기사의 바이 라인을 항상 14px로 설정하려면 HTML 요소의 기본 글꼴 크기로 설정하고 .byline {font-size : 1rem;}을 설정합니다. body : font-size : 뷰포트에 맞게 크기를 조정할 때 .by-line 스타일에 영향을주지 않습니다.
읽기 줄 길이도 중요합니다. 45 ~ 65자를 목표로합니다. 콘텐츠를 확인하는 데 사용할 수있는 북마크가 있습니다. 디자인에서 여러 언어를 지원하는 경우 줄 길이도 다를 수 있습니다. Moore는 문제를 해결하기 위해 : lang (de) 기사 {max-width : 30em}을 사용할 것을 제안합니다.
수직 리듬을 유지하려면 내용 블록에 대한 margin-bottom, ul>, ol>, blockquote>, table>, blockquote> 등을 줄 높이와 동일하게 설정하십시오. 이미지 도입으로 리듬이 중단 된 경우 Baseline.js 또는 BaselineAlign.js를 추가하여 수정할 수 있습니다.
기본
- 글꼴을 100 % 본문에 기반
- 상대적 em 단위로 작업
- 여백을 줄 높이로 설정하여 디자인에서 수직 리듬을 유지하십시오.
많은
- Enhance.js 또는 지연된 글꼴로드로 글꼴로드 성능 향상
- 의미 제목에 Sass @includes를 사용합니다.
- 종종 h2 마크 업이 필요한 사이드 바 위젯에서 h5 스타일을 사용해야합니다. Bearded의 Typographic Mixins를 사용하여 크기를 제어하고 아래 코드로 의미를 유지합니다.
.sidebar h2 {@include heading-5}
JavaScript의 미디어 쿼리
미디어 쿼리를 통해 다양한 뷰포트에서 레이아웃을 제어 할 수 있었기 때문에,이를 JavaScript 실행에도 연결할 수있는 방법을 찾고있었습니다. 특정 뷰포트 너비, 높이 및 방향에서 JavaScript를 실행하는 몇 가지 방법이 있으며 일부 똑똑한 사람들은 Enquire.js 및 Simple State Manager와 같은 사용하기 쉬운 기본 JS 플러그인을 작성했습니다. matchMedia를 사용하여 직접 만들 수도 있습니다. 그러나 CSS 및 JavaScript에서 미디어 쿼리를 복제해야하는 문제가 있습니다.
Aaron Gustafson은 CSS와 JS에서 미디어 쿼리를 관리하고 일치시킬 필요가 없음을 의미하는 깔끔한 트릭을 가지고 있습니다. 아이디어는 원래 Jeremy Keith에서 나 왔으며이 예제에서는 Gustafson이이를 완전히 구현했습니다.
getActiveMQ (netm.ag/media-260)를 사용하여 body 요소 끝에 div # getActiveMQ-watcher를 삽입하고 숨 깁니다. 그런 다음 CSS 내에서 # getActiveMQ-watcher {font-family : break-0;}를 첫 번째 미디어 쿼리 인 font-family : break-1;로 설정합니다. 두 번째, font-family : break-2; 세 번째 등등.
스크립트는 watchResize () (netm.ag/resize-260)를 사용하여 뷰포트의 크기가 변경되었는지 확인한 다음 활성 글꼴 모음을 다시 읽습니다. 이제이를 사용하여 뷰포트가 허용 할 때 탭 인터페이스를 dl>에 추가하거나, 라이트 박스의 동작을 변경하거나, 데이터 테이블의 레이아웃을 업데이트하는 것과 같은 JS 향상을 연결할 수 있습니다. netm.ag/active-260에서 getActiveMQ Codepen을 확인하십시오.
기본
- 다른 뷰포트에 대한 JavaScript는 잊어 버리십시오. 사용자가 모든 뷰포트에서 액세스 할 수있는 방식으로 콘텐츠 및 웹 사이트 기능을 제공합니다. JavaScript가 필요하지 않습니다.
많은
- Breakup을 미리 정의 된 미디어 쿼리 목록으로 사용하고 getActiveMQ-watcher에 대한 글꼴 패밀리 목록 생성을 자동화하여 Gustafson의 방법을 확장합니다.
점진적 향상
점진적 향상에 대한 일반적인 오해는 사람들이 "이 새로운 기능을 사용할 수 없습니다."라고 생각하지만 실제로는 그 반대입니다. 점진적 개선은 하나의 브라우저에서만 지원되거나 전혀 지원되지 않는 기능을 제공 할 수 있으며 시간이 지남에 따라 새 버전이 출시됨에 따라 사람들이 더 나은 경험을 얻을 수 있음을 의미합니다.
웹 사이트의 핵심 기능을 살펴보면이를 HTML로 제공하고 서버 측에서 모든 처리를 수행하도록 할 수 있습니다. 결제, 양식, 좋아요, 공유, 이메일, 대시 보드 – 모두 가능합니다. 기본 작업이 구축되면 그 위에 멋진 기술을 쌓을 수 있습니다. 왜냐하면 우리는 넘어지는 것을 잡을 수있는 안전망이 있기 때문입니다. 여기서 논의한 대부분의 고급 접근 방식은 점진적 향상을 기반으로합니다.
형세
유연한 레이아웃은 간단하지만 다양한 접근 방식이 있습니다. : nth-child () 선택기를 사용하여 마크 업이 적은 간단한 그리드 레이아웃을 만듭니다.
/ * 그리드에 대한 모바일 첫 번째 너비 선언 * / .grid-1-4 {float : left; 너비 : 100 %; } / * 뷰포트가 37.5em 이상이면 그리드를 요소 당 50 %로 설정합니다. * / @media (min-width : 37.5em) {.grid-1-4 {width : 50 %; } / * 첫 번째 요소 이후에 두 번째 요소마다 부동 소수점을 지 웁니다. 이것은 그리드의 3, 5, 7, 9 ...를 목표로합니다. * / .grid-1-4 : nth-of-type (2n + 1) {clear : left; }} @media (최소 너비 : 64em) {.grid-1-4 {너비 : 25 %; } / * 이전 지우기 제거 * / .grid-1-4 : nth-of-type (2n + 1) {clear : none; } / * 첫 번째 이후 4 번째 요소마다 float를 지 웁니다. 이것은 그리드에서 5 번째, 9 번째 ...를 목표로합니다. * / .grid-1-4 : nth-of-type (4n + 1) {clear : left; }}
레이아웃에 위치 및 플로팅을 사용하지 않아도됩니다. 그들은 지금까지 우리에게 잘 봉사했지만 레이아웃에 대한 사용은 필수 해킹이었습니다. 이제 모든 레이아웃 문제를 해결하는 데 도움이 될 두 명의 새로운 어린이 인 Flexbox와 Grid가 있습니다.
Flexbox는 개별 모듈에 적합하며 각 모듈 내에서 콘텐츠의 레이아웃을 제어합니다. Flexbox를 사용하여 더 쉽게 얻을 수있는 레이아웃이 있으며 이는 반응 형 사이트에서 더욱 그렇습니다. 이에 대한 자세한 내용은 Flexbox 또는 Flexbox Polyfill에 대한 CSS Tricks의 가이드를 참조하십시오.
CSS 그리드 레이아웃
그리드는 매크로 수준 레이아웃에 더 적합합니다. 그리드 레이아웃 모듈은 CSS 내에서 레이아웃을 설명하는 좋은 방법을 제공합니다. 아직 초안 단계에 있지만 Rachel Andrew의 CSS 그리드 레이아웃에 대한이 기사를 추천합니다.
드디어
다음은 반응 형 연습을 확장하기위한 몇 가지 팁입니다. 새로운 반응 형 작업에 접근 할 때 한 걸음 물러서서 기본 사항을 올바르게 파악했는지 확인하십시오. 콘텐츠, HTML 및 레이어 개선 된 경험으로 시작하면 디자인을 어디로 가져갈 수 있는지에 대한 제한이 없습니다.
이 기사는 원래 260 호에 게재되었습니다. 넷 매거진.
