사용자의 디바이스는 그 크기와 기능이 모두 다릅니다. 그러므로 화면 크기를 고려한 레이아웃을 짜야하고, 브라우저가 지원하는 기능이 어디까지인지 파악하기 위한 자바스크립트를 사용해야 하기도 합니다. 이를 위해 디바이스 크기에 따른 반응형 웹디자인 전략을 잘 세워야 합니다.
가장 작고 기능이 부족한 디바이스를 시작으로 하여 조금씩 성능을 확대해 나가는 점진적인 향상을 꾀하는 것이 좋은 방법입니다. 아래에 4가지 대표적인 디바이스와 그에 따른 웹디자인 전략이 있습니다.
1
피쳐폰과 같은 매우 작은 화면을 가진 디바이스입니다.
- 기본적인 HTML
- 간단한 레이아웃
- 작은 이미지
- 제한된 CSS와 자바스크립트
2
스마트폰과 같이 작은 화면을 가진 디바이스입니다.
- 지원 여부에 따라 최신 HTML5 기능 추가
- 간단한 레이아웃
- 작지만 피쳐폰보다 조금 큰 이미지
- 더 많은 CSS와 자바스크립트
3
태블릿은 중간 크기의 화면을 가지고 있습니다.
- 공간이 더 넓기 때문에 사이드바 같은 콘텐츠도 추가할 수 있음
- 여러 컬럼으로 이루어진 레이아웃
- 더 큰 이미지
4
데스크톱이나 TV는 매우 큰 화면을 가집니다.
- 와이드스크린 레이아웃 추가
- 더 큰 이미지
- TV의 경우, 3미터 거리에 앉아서 리모컨을 사용하는 사람들에게 맞는 내비게이션
