반응형 디자인 패턴과 원리

한국어판 출간에 앞서
추천의 글
chapter 1 작은 시작
chapter 2 내비게이션
chapter 3 이미지와 동영상
chapter 4 반응형 광고
chapter 5 무한한 그리드 디자인하기
감사의 글
참고 자료
참고 URL
찾아보기

chapter 1 작은 시작
전체 레이아웃만 변하는 것이 아니라 디자인의 개별 컴포넌트도 각각 변한다. 대부분의 반응형 레이아웃이 이렇게 작동한다. 인터페이스는 소형 레이아웃 시스템으로 구성되어 있고, 그 소형 레이아웃 시스템 각각은 내부 콘텐츠의 필요에 따라 어떻게 변하고 이동하고 커져야 하는지 각각 규칙이 있다.

chapter 2 내비게이션
이 사이트는 작은 디스플레이에서 내비게이션을 보여주는 방식으로 보이기/숨기기 토글을 선택했다. 넓은 뷰포트에서도 토글은 계속 살아있지만 주요 기사 카테고리 링크는 더 이상 숨지 않고 모습을 드러낸다. 하지만 이 내비게이션에는 또 다른 기능이 있다. 넓은 화면에서 마스트헤드의 링크를 터치하거나 클릭하면 드롭다운 메뉴가 나타나 해당 카테고리에 속한 콘텐츠를 추가로 보여준다.

chapter 3 이미지와 동영상
그렇다면 이미지의 크기를 조절할 것이 아니라 아예 이미지 파일을 교체해야 할 상황이 올 수도 있다. 각각의 분기점에 최적화된 별도의 파일로 교체해 이미지 컨테이너가 확대 혹은 축소될 때도 이미지가 전하고자 하는 메시지의 선명성이 유지되도록 하는 것이다. 그런 상황에서는 로드하고자 하는 이미지를 완전히 다른 것으로 지정해주어야 한다