1. Mostly Fluid
심플하기 때문에 가장 많이 사용되는 패턴으로, 큰 화면에서는 더 많이 여유를(가장자리)를 두고, 유연한 Grids와 큰화면에서 작은화면으로 이미지 스케일링, 화면이 작아질 수록 세로로 column들을 쌓는 형태를 취하는 패턴이다.
2. Column Drop
또 다른 인기있는 패턴으로, multi-column layout으로 시작해서 single-column layout과 화면사이즈가 작아짐에 따라 column이 아래로 떨어지는 형태로 끝이난다.
Mostly Fluid pattern과는 달리, 이 레이아웃에서는 요소들의 전체 사이즈를 유지하려는 일관성이 있다. 다양한 화면 크기에 적응하는 대신에 column들을 쌓는 형태에 의존한다.
3. Layout Shifter
이 패턴은 다양한 화면 사이즈에 크로스 적용이 어렵다. 왜냐하면 많은 공수를 요구하기 때문이다. 아마도 이러한 이유로 앞의 두가지 패턴보다는 덜 사용되는 이유일 것이다.
- Food Sense
- Performance Marketing Awards
- Forefathers Group
- The Boston Globe
- Andersson-Wise Architects
4. Tiny Tweaks
완전 간단한 컨텐츠로 구성된 사이트에서는 단지 폰트 사이즈나 이미지 레이아웃만 고려해서 사용하기에는 좋을 것이다.
5. Off Canvas
위에 나열한 것 처럼, 다양한 패턴의 반응형 디자인 레이아웃이 있지만, 몇가지 일반적인 공통점이 있다. 그것들은 모두 작은 화면에서는 세로로 쌓는 형태를 취하고 있다. 아마도 레이아웃을 조정하는데에 있어서 보여지는 화면 공간에만 의존하고 있기 때문이다.
그러나 멀티 스크린에 적용시키는 레이아웃의 방법은 그것 뿐이며, 가장 적합한가?
만약 우리에게 보여지는 한정된 공간에서만 레이아웃을 디자인 하라는 옵션이 있다면 모를까.. 사실은 보여지는 스크린보다 레이아웃 조절을 위한 보여지지 않는 스크린이 항상 존재하고 있다.
위의 그림과 같이, 멀티 디바이스를 위한 Off Canvas 패턴은 보여지지 않은 스크린을 keep contents 또는 네비게이션을 숨기는 용도로 사용하는데 이점이 있다. (사용자 액션에 의해 노출될 수도, 숨겨질 수도 있다)
이 패턴은 몇몇의 모바일 웹사이트 및 어플리케이션에 사용되고 있다.
그런데 주로 네비게이션을 숨기는 용도로 많이 사용되고 있는듯 하네요.(이전 네비게이션 패턴 포스팅)
'프로그래밍 > 반응형 웹 디자인' 카테고리의 다른 글
| 반응형 웹디자인 네비게이션 패턴 (0) | 2013.04.10 |
|---|---|
| Internet Exploer 6~8 버전 브라우저 문제 해결 (0) | 2013.04.10 |
| Responsive Web Design (0) | 2013.04.10 |