콘텐츠
요즘 모두가 반응 형 웹 디자인에 대해 이야기하고있는 것 같습니다. 각기 다른 기능과 기능을 가진 웹 지원 장치의 수가 계속 증가함에 따라 더 이상 고정 너비 웹 사이트를 구축하는 것이 현명하지 않습니다.
사실은 결코 그렇지 않았습니다. 그러나 지금까지는 화면 해상도, 대역폭 또는 입력 방법과 관련하여 많은 가정을하는 경험을 디자인하는 것이 모범 사례로 간주되었습니다. 960 픽셀 너비의 웹 사이트를 친구의 작은 화면 넷북에서만 볼 수 있도록 디자인 한 적이 있다면 (예, 여기에서 고통스러운 경험을 통해 글을 쓰고 있습니다) 이것이 특히 영리하지 않은 접근 방식이 아닌 이유를 이해할 수있을 것입니다. 이제 스마트 폰과 태블릿이 섞여서 기존의 방법이 더 이상 목적에 맞지 않음이 분명합니다.
고맙게도 CSS 미디어 쿼리의 출현과 웹이 그 자체로 매체라는 사실에 대한 인식이 커짐에 따라 플랫폼의 보편성이 약점이 아니라 강점이라는 점을 받아들이고 플랫폼의 진정한 본질을 받아들이 기 시작했습니다.
앞으로 5 일 동안이 사실을 인식하는 기술을 안내해 드리겠습니다. 반응 형 웹 디자인. Ethan Marcotte가 개발 한 이것은 유동적 인 레이아웃, 유연한 이미지 및 미디어 쿼리를 결합하여 발생하는 모든 환경에 우아하게 적응하는 사이트를 구축하는 데 도움이됩니다.
간단한 미디어 갤러리를 만드는 방법을 보여 주면서이 접근 방식을 보여 드리겠습니다. 제 예에서는 최근 미국을 횡단 한 여행을 문서화하기 위해 작은 웹 사이트를 만들겠습니다.하지만 필요에 맞게 코드와 디자인을 자유롭게 맞춤 설정할 수 있습니다.
미지의 것을위한 디자인
이 튜토리얼의 대부분은 반응 형 디자인의 개발 측면을 중심으로합니다. 그러나 코드를 조사하기 전에 무한 레이아웃을 가질 수있는 웹 사이트를 어떻게 디자인 할 수 있을지 잠시 생각해 보겠습니다.
이제 인터페이스를 디자인 할 수 있다는 점에서 운이 좋습니다. 과 그들을 현실로 만드는 프런트 엔드 코드를 개발하십시오. 물론 이것은 고유 한 기술은 아닙니다. 자신을 위해 일한다면 아마 똑같을 것입니다. 하지만 유동적 인 디자인을 제작할 때 콘텐츠가 어떻게 적응하고 리플 로우되는지 이해하는 것은 확실히 유리합니다.
또한 내 역할이 더 전문화 된 더 큰 팀의 일원으로 일합니다. 이러한 환경에서 비주얼 디자이너는 와이어 프레임을 매력적이고 매력적인 (사인 오프, 픽셀 완벽한) 구성 요소로 변환하는 데 전적으로 집중할 수 있습니다. 개발자가 별도로 배치되어 이러한 레이아웃을 간결하고 효율적인 마크 업 및 CSS로 변환하는 것은 드문 일이 아닙니다.
그러나 이러한 선형적이고 분리 된 워크 플로는 디자인이 서로 다른 환경에 어떻게 적응하는지 평가하기 시작하면 빠르게 무너집니다. 새로운 도구 나 기술만큼 더 협력적이고 민첩한 작업 방식도 고려해야합니다. 반응 형 웹 사이트를 디자인 할 때 발생하는 가장 까다로운 문제는 대화, 실험 및 반복을 통해 간단히 해결할 수 있습니다.
디자인에 대한 실용적인 접근 방식
그렇다고 디자이너가 특정 장치의 범위 밖에서 디자인이 어떻게 작동 할 수 있는지에 대해 생각할 여지가 없다는 것은 아닙니다.
Clearleft에서는 데스크톱 관점에서 시각적 디자인을 시작합니다. 우리는 중요한 디자인 언어와 시각적 미학을 정의하는 것으로 시작하며, 종종 핵심 콘텐츠를 중심으로 초기 탐색을 기반으로합니다. 예를 들어 음식 사이트를 디자인하는 경우 레시피 페이지로 시작합니다. 뉴스 사이트, 스토리 페이지.
이 페이지는 사이트의 중요한 페이지 일뿐만 아니라 인쇄 팔레트를 구축하기에 충분한 구조화 된 콘텐츠가 포함되어있을 것입니다. 또한 레이아웃이 어떻게 적용될 수 있는지에 대해 생각할 것입니다.이 단계에서 우리 마음 속에있는 경우에도 마찬가지입니다.
디자인 스트레스 테스트에 유용한 한 가지 방법은 이러한 페이지를 더 좁은 (~ 320px 너비) 화면에 맞게 조정하는 것입니다. 이 너비에서 작동하려면 디자인의 일부 측면을 재고해야한다는 사실을 알게 될 것입니다. 여기 예시들이 있습니다 :
- 타이포그래피 : 큰 제목은 더 넓은 레이아웃에서 잘 작동 할 수 있지만 작은 화면에서는 많은 수직 공간을 차지할 수 있으므로 추가 스크롤이 필요합니다. 줄 길이가 변경되면 줄 높이 및 기타 인쇄 처리도 고려해야합니다.
- 연결: 디자인이 터치 스크린 장치에서 어떻게 작동합니까? 아직이를 감지 할 수있는 쉬운 방법은 없지만 (디자인의 모든 측면에서 터치를 고려해야 함) 더 좁은 화면을 디자인하면 링크 및 기타 상호 작용 요소의 대상 영역에 대해 생각할 수 있습니다. . iOS 가이드 라인은 최소 44 픽셀 / 포인트 정사각형을 권장하며, 이는 목표로 삼기에 좋은 수치입니다.
- 항해: 특히 사이트에 섹션이 많고 계층 구조가 깊은 경우 반응 형 디자인에서 가장 어색한 구성 요소가 될 것입니다. Brad Frost는 현재 고려중인 탐색에 대한 몇 가지 다른 접근 방식에 대한 요약을 작성했습니다.
- 불필요한 콘텐츠 : 일부 콘텐츠가 필요하지 않습니까? 다른 콘텐츠는 특정 시나리오에서만 표시하면 되나요? 사용자가 어떤 기기를 사용하는지에 따라 콘텐츠 숨기기를 옹호하지는 않지만, 조건부로드 (이번 주 후반에 살펴볼 예정)와 같은 기술은 필요할 때만 보완 콘텐츠를로드하는 작은 페이지를 제공하는 데 도움이 될 수 있습니다.
두 개의 대조되는 레이아웃을 디자인하면 디자인이 적응할 것이라는 생각을 강화하는 동시에 잠재적 인 문제를 조기에 해결할 수 있습니다. 작업량이 두 배로 늘어난 것처럼 들리지만 모든 페이지를 픽셀 단위의 정밀도로 디자인하는 것은 아닙니다. 대신 확장 가능한 디자인 언어를 구축하는 데 초점을 맞추고 있습니다. 하나는 코드에서 구현하기 시작할 때 진화 할 것이고 하나는 개별 모듈과 구성 요소를 기반으로하는 것입니다.
레이아웃에 구애받지 않음
당연히, 역사적으로 웹을 인쇄처럼 취급 해 온 산업의 경우 고정 너비 레이아웃이 우리가 생산하는 많은 결과물에 스며 들었습니다. 적응 가능한 매체를위한 디자인을 시작할 때 매체의 유동성을 인정하면서 문제를 해결하고 아이디어를 전달할 수있는 새로운 접근 방식이 고려되고 있습니다. 내가 좋아하는 몇 가지가 있습니다.
- 페이지 설명 다이어그램 : 와이어 프레임은 종종 레이아웃 (따라서 특정 유형의 장치를 가정)을 암시 할 수 있지만 페이지 설명 다이어그램은 이러한 가정을 제거하고 대신 우선 순위 측면에서 문서에 정렬 된 개별 구성 요소를 설명합니다.
- 스타일 타일 : 고객과 디자인 아이디어를 전달할 때 우리는 '웹 사이트 그림'을 제시 할 수 있습니다. 주의하지 않으면 클라이언트는 다른 장치에서도 디자인이 어떻게 보이는지 보여주는 개념을 보도록 요청할 것입니다. 이로 인해 여러 장치에 대해 여러 페이지를 생성하는 지속 불가능한 상황에 처할 수 있습니다. Samantha Warren은이 문제에 대해 생각하고 스타일 타일을 내놓았습니다. 무드 보드 (모호하지 않음)와 완전히 실현 된 컴포지션 (정확하지 않음) 사이에 있으며 타이포그래피, 버튼 스타일 및 마스트 헤드 처리를 전달하는 데 도움이됩니다. 또한 고객과의보다 성숙한 수준의 토론을 장려합니다.
- Mobilify 디자인 게임 : 이 연습은 공동 디자인 워크숍에서 정말 잘 작동 할 수 있습니다. 이 연습에서는 모든 사람이 특정 페이지에 나타날 수있는 요소를 Post-it에 기록합니다. 그런 다음 휴대 전화에서 선형화 된 것처럼 보이는 것처럼 중요도에 따라 벽에 붙어 있습니다. 그 결과 토론은 몇 가지 놀라운 결론을 도출 할 수 있습니다. 예를 들어 탐색이 페이지에서 가장 중요한 구성 요소가 아니라는 것을 알 수 있습니다. 페이지 상단의 건너 뛰기 링크가 바닥 글의 내비게이션으로 연결되는 디자인으로 이어질 수 있습니다.
물론 우리가 이미 사용하고있는 도구를위한 여지가 있지만 광범위한 용어로 웹 사이트를 디자인 할 때는 레이아웃이 더 이상 알려지지 않았다는 점을 명심해야합니다.
점진적으로 코딩
고맙게도 우리가 작업중인 예제의 시각적 디자인에 대해 걱정할 필요가 없습니다. 대신 우리는 디자인을 완전히 반응하는 웹 사이트에 코딩하는 데 집중할 수 있습니다.
시작하기 전에 한 가지 더. 우리가 작업하는 매체의 창립 원칙 인 보편성을 기억하는 것이 중요합니다. 이는 오늘날의 웹 지원 장치를 구축 할뿐만 아니라 어제 및 미래의 장치와의 호환성을 보장한다는 것을 의미합니다. John Allsopp은 자신의 게시물 The Next 6 Billion에서이 원칙이 중요한 이유를 설명했습니다.
"다음 60 억 명은 전원 및 네트워크에 대한 액세스가 간헐적 일 수있는 인도 시골, 아프리카, 중국의 어린이입니다. 수마트라에있는 10 년 된 Wintel 상자에 사는 사람입니다. 수백 개의 다른 언어를 사용하는 사람들입니다. 쓰기 시스템. 가족 중 처음으로 읽고 쓸 수있는 사람은 세계적으로 20 %가 읽거나 쓸 수없는 사람입니다.’
웹 표준, 접근성, 눈에 잘 띄지 않는 자바 스크립트 등 우리의 직업에 영향을 미치는 다양한 방식 (더 나은 단어를 원하는 경우)을 살펴봄으로써 웹에 대한 이해를 추적 할 수 있습니다. 모두 동일한 주제 인 점진적 향상이라는 변형입니다. 반응 형 웹 디자인도 마찬가지입니다. 구축하려면 진실로 반응 형 웹 사이트는 이전 버전과 호환 될뿐만 아니라 미래에도 친숙한 사이트를 구축하는 것입니다.
마크 업에 뛰어 들기
좋습니다. 서문은 충분합니다. 이제 텍스트 편집기를 열 차례입니다.우리의 디자이너는 데스크톱 지향 디자인을 제공했으며 더 좁은 뷰포트에서도 어떻게 나타날 수 있는지에 대한 예를 제공 할만큼 친절했습니다.
별도로 코딩하고 싶을 수 있지만 다른 접근 방식을 제안하겠습니다. 디자인을 구성하는 별도의 구성 요소 또는 패턴을 단일 페이지에 배치하여 패턴 포트폴리오를 만들 수 있습니다. 이를 통해 페이지 레이아웃의 범위 밖에서 구성 요소를 개발할 수 있으며 나중에 회귀 테스트를 위해 참조 할 내용을 얻을 수 있습니다. 몇 가지 다른 장치에서 초기 마크 업을 살펴 보겠습니다.
마크 업 패턴 포트폴리오보기
음, 저주받을 것입니다. 이미 반응 형 웹 사이트가 있습니다! 우리의 콘텐츠는 멋진 새 iPad 또는 버려진 피처 폰과 같은 각 장치의 범위에 맞게 조정됩니다. Lynx와 같은 텍스트 전용 브라우저에서도 작동합니다.
보편성의 기본 원칙 덕분에 웹은 기본적으로 반응. 훌륭하지만 지금부터 코드에 대해 수행하는 모든 작업이 기본 적응성을 손상시킬 수 있음을 의미합니다.
내일: 주의 깊게 살펴보고 반응 형 디자인의 첫 번째 측면 인 타이포그래피와 유동 격자를 적용하기 시작할 것입니다.
