단일 화면에서 멀티 스크린 시대로 >
과거에는 웹 사이트 디자인이 간단했습니다. 브라우저 간 호환성 문제 외에 15 인치 모니터의 웹 사이트 또는 응용 프로그램을 설계했습니다.
그런 다음 웹 브라우저가있는 전화가 나타나서 편안한 삶을 방해했습니다. 무엇보다도 사람들은 전화로 웹을 탐색하는 것을 좋아합니다! 2016 년 모바일 장치의 웹 뷰는 처음으로 데스크탑보기를 초과했습니다.
개발자와 디자이너는 모바일 조직, 태블릿, 시계, TV, 자동차, 안경, 더 큰 데스크톱 스크린, 고해상도 화면 및 벽에 내장 된 웹 브라우저를위한 웹 사이트를 구축하는 데 익숙해지는 경우가 있습니다. (좋아요, 마지막으로 만든 것입니다.) 이것을 지원하는 것은 새로운 장치의 끝없는 흐름에 점점 더 어려워지고 있습니다.
그렇다면이 성장하는이 기기 배열을 어떻게 지원합니까? 대답은 Responsive Web Design
이며 웹 사이트가 모든 크기의 화면에 적응할 수있는 기술을 사용합니다.
시간 제한 직원이 유지하는 많은 오래된 사이트 또는 프로젝트는 반응하지 않습니다. 예를 들어, Vassal Game Engine의 웹 사이트 :
sitepoint.com과 같은 다른 많은 웹 사이트는 완전히 반응합니다.
RWD (Respondive Web Design)는 인기있는 개발 원칙“자신을 반복하지 마십시오”(일반적으로“건조”로 약칭)를 따릅니다. RWD는 지원할 각 장치에 대한 여러 코드베이스를 유지하지 않고 각 장치에 맞게 코드 세트를 사용하도록 설계되었습니다. RWD 기술을 사용하면 각 플랫폼마다 HTML, CSS 및 JavaScript 코드 세트를 적절하게 작성할 수 있습니다. 이러한 스타일과 요소 중 다수는 코드 효율을 극대화하기 위해 재사용 또는 구축 될 수도 있습니다.
좋아요? 먼저 몇 년 전에 되돌아 보자.
반응 디자인의 역사
"반응 형"디자인은 새로운 것이 아니며 다른 사람들과 다른 의미를 지니고 있으므로 정확한 기록을 추적하기가 어렵습니다.
이론적으로 개발자는 여러 브라우저가 존재하기 때문에 반응 형 디자인을 만들고 있습니다. 브라우저간에 항상 미묘하고 미묘한 렌더링 차이가 있으며 개발자는 수십 년 동안 이러한 문제를 처리하는 방법을 배우고 있습니다. 웹 개발을 처음 접한다면, 초기 버전의 인터넷 익스플로러가 대부분 종료 된 것에 감사드립니다. 문제를 다루는 날은 어둡습니다.
2004 년부터 반응 형 디자인은보다 구체적인 의미, 즉 사용자의 장치 선택에 맞게 디자인을 조정했지만 일반적으로 화면 크기를 기준으로 다른 기능을 포함했습니다. 반응 형 디자인의 개념은 2008 년에 통합되었지만이 용어는 "Flexible", "Liquid", "Fluid"및 "Elastic"디자인이라고도합니다.
반응 형 디자인이 진정으로 사용하기 쉬운 개념이 될 수있는 미디어 쿼리를 포함하는 CSS3 사양입니다. 2 장에서 미디어 쿼리를 자세히 다루 겠지만 간단히 말해서 사전 정의 된 화면 크기 또는 유형을 기반으로 웹 페이지에 표시되는 내용을 변경할 수 있습니다. Ethan Marcotte는 2010 년 기사에서 목록을 구분하기 위해 "Responsive Web Design"이라는 용어를 공식적으로 만들었습니다.
이로 인해 미디어 쿼리 및 유연한 이미지 및 그리드와 같은 기타 기술 및 기술의 성장과 통합으로 인해이 책에서 다룰 것입니다.
저에게“반응 디자인”은 이러한 모든 아이디어와 원칙의 조합입니다. 디자인을 화면 크기뿐만 아니라 색 깊이, 미디어 유형 (예 : 랩톱 화면 또는 전자 독자) 또는 위치와 같은 다른 요소에도 적응합니다.
반응 형 디자인의
디자인 개념
모든 종류의 디자인 개념은 반응 형 디자인을 사용하는 방법에 대한 많은 설명만큼 존재합니다. 일부는 나타나고 사라졌으며 다른 일부는 남아있었습니다. 우리는이 매뉴얼에서 그것들을 자세히 설명하지는 않지만 실제 응용 프로그램을 다룰 것입니다. 이제 그들 중 몇 가지를 빨리 소개합시다.
진보적 인 향상
보다 전통적인 진보적 인 향상 원칙을 따를 때, 당신의 주요 초점은 기기가 아무리 간단하거나 연결이 얼마나 느리는지에 관계없이 모든 사용자가 웹 사이트 컨텐츠를 이용할 수 있도록하는 것입니다. 그런 다음보다 복잡한 디자인 및 기능과 같은 추가 기능이이를 활용할 수있는 장치에 추가됩니다. 우아한 다운 그레이드
모바일 브라우징의 급증으로 웹 사이트 디자인의 전통적인 경로가 전복되었습니다. 과거에는 작업 작업 (일반적으로 컴퓨터)에서 설계를 시작한 다음 스크린이 작은 화면이 적은 장치를 지원하여 특정 기능에 대한 지원을 지원하기 위해 스타일과 기능을 제거했습니다.
우아한 다운 그레이드는 종종 브라우저가 특정 기능에 대한 지원이 부족한 상황에 적용되지만 더 일반적으로 고려할 수도 있습니다. 원칙은 웹 사이트의 정식 버전으로 시작하여 이상적인 장치 및 브라우저에서 실행되면서 기본 기능이 모든 장치에서 (지원되는) 사용자에게 좋은 기능을 놓치더라도 잘 작동하는지 확인하는 것입니다.
모바일 최초
모바일 우선 순위는 점진적 향상과 유사하지만보다 구체적으로 반응 형 설계를 목표로합니다. 가장 작거나 가장 강력한 지원되는 장치 (일반적으로 원리를 만들 때 전화)로 시작한 다음 장치 크기가 증가함에 따라 기능과 스타일을 추가하는 것이 좋습니다.
용어로,“모바일 우선”은 특히 비 디자이너/개발자 청중에게는 혼란 스러울 수 있으므로 프로젝트에서 모바일 장치의 우선 순위에 대한 편향된 인상을 줄 수 있습니다.
이론적으로,이 관행은 작은 장치가 차선책 경험이 없도록 보장합니다. 모든 장치는 똑같이 가치가 있습니다.
무엇을 지원해야합니까?
웹 기반 프로젝트를 시작하거나 향상시키기 전에 그만한 가치가 있는지 확인하고 모든 열심히 일하는 (잠재적) 사용자 기반을 평가하십시오.
기존 웹 사이트가있는 경우 웹 사이트 트래픽을 분석하여 방문자가 웹 사이트를 방문하는 데 사용하는 장치 유형을 확인하는 것이 좋습니다. 방문자의 90%가 항상 데스크탑을 방문하는 경우 모바일 경험이 좋지 않거나 방문자가 큰 모바일 장치 사용자가 아님을 의미합니다. 정확한 답변을 찾기 위해 광범위한 연구를 수행하거나 반응 형 디자인 기술을 사용하여 새로운 방문자를 유치 할 수있는 모바일 친화적 인 웹 사이트를 구축 할 수 있습니다.
새로운 프로젝트를 진행하는 경우 잠재적 인 사용자의 요구를 분석하는 것도 마찬가지로 중요합니다. 이는 전통적인 시장 조사 기술을 사용하거나 간단한 테스트 웹 사이트를 만들거나 고객이 누구인지 이해하기 위해 경쟁 업체를 보면 수행 할 수 있습니다.
컴퓨터
판매 감소가 느려지더라도 여전히 많은 데스크탑과 랩톱뿐만 아니라 이러한 컴퓨터에서 많은 웹 브라우저가 실행 중입니다. 이 컴퓨터는 저품질 (및 저해상도) 11 인치 넷북에서 28 인치 고해상도 디스플레이가있는 고성능 데스크톱에 이르기까지 다양한 비율과 방향이 있으며 모두 화면 영역에 큰 영향을 줄 수 있습니다. 당신은 사용할 수 있습니다.
모바일
이제 휴대 전화에서 웹 사이트를 탐색하는 사람들의 수는 데스크탑보기만큼이나 모바일 브라우저 사용자에게 서비스를 제공하는 것이 똑같이 (그리고 점점 더 점점 더 중요 할 수 있습니다. 모바일 웹보기 성장에 대한 자세한 내용은 모바일 마케팅 통계에 대한 Smart Insights 보고서와 STATCOUNTER의 데스크탑 및 모바일 사용 비교를 확인하는 것이 좋습니다.
iOS에서 모바일 브라우징은 일반적으로 하나의 브라우저를 통해서만 수행되며 장치의 크기는 더 일관됩니다. Android는 다양한 브라우저 및 화면 크기를 제공합니다. 모바일 운영 체제를 실행하는 장치의 수도 증가하고 있으며 다양한 해상도에서 고밀도 화면도 있습니다.
또한 사용자는 주로 장치를 클릭하여 탐색하는 대신 터치 장치를 사용하여 동작에 큰 영향을 미치는 것을 고려해야합니다.
태블릿 PC
태블릿 판매는 감소 할 수 있지만, 미래에도 여전히 큰 사용자 기반이있을 것이며 태블릿을 큰 전화 나 작은 데스크탑으로 생각해서는 안됩니다. 또한 사용자는 터치 스크린이나 마우스를 사용하여 웹 사이트와 상호 작용할 수 있습니다.
혼합 장비
컴퓨터와 태블릿을 처리하는 것만으로는 충분하지 않으면 이제 컴퓨터와 태블릿 사이를 전환 할 수있는 Microsoft의 Surface Pro와 같은 하이브리드 장치가 있습니다. 각 모드를 별도로 처리 할 수 있지만 웹 사이트를 사용할 때 사용자가 컨텍스트를 전환 할 수 있다는 점에 주목할 가치가 있습니다.
웨어러블 장치
대부분의 웨어러블 장치는 아직 웹 브라우저를 얻지 못했지만 이런 일이 발생할 수 있습니다. 한편, 일부 컨텐츠는 웨어러블 장치에서 여전히 용도를 변경할 수 있으며 이러한 내용은 간단한 후속 조치로 간단한 버스트로 제공해야합니다.
TV
스마트 TV 및 Apple TV와 같은 관련 장치에는 사용자가 일반적으로 특정 웹 사이트를 탐색하는 데 사용하는 단순화 된 웹 브라우저가 있지만 점점 인기가 높아질 수 있습니다. TV는 화면이 매우 큰 화면이 있으며 일반적으로 해상도가 낮으므로 TV에서 볼 웹 사이트는 충분히 명확해야하며 장거리를 사용할 수 있습니다.
자동차
정말? 예, 정말. 이것은 새로운 분야이지만 점점 더 많은 자동차에는 일부 형태의 인터넷 연결 대시 보드가 장착되어 있습니다. 현재 차량 대시 보드에 제시된 웹 사이트는 작은 화면에 정보를 명확하게 표시해야하며 운전자의 관심을 산만하게하거나 압도하도록 설계되지 않아 사고가 발생했습니다. 그러나 많은 자동차에는 이제 승객을위한 스크린이있어 네트워크 및 콘텐츠에 대한 완전한 액세스 권한을 제공합니다.
게임 콘솔
대부분의 최신 게임 콘솔은 인터넷에 연결하는 데 시간을 소비하며 일부는 웹 브라우저를 사용합니다. 이것은 종종 미디어 소비 및 소셜 네트워크에 사용됩니다. 이 장치의 브라우저는 제한되어 물리적 키보드를 사용할 수 없습니다. 홈 게임 콘솔의 경우 TV의 디자인 원칙이 적용되며 휴대용 장치의 경우 제한된 모바일 경험이 적용됩니다.
대체로 웹 사이트를 어디서 어떻게 볼지 예측할 수 없으므로 적응할 수 있고 유연하며 반응이 좋다.
인쇄
인쇄? 이것이 웹 디자인 책이 아닙니까? 예, 그러나 웹 페이지의 인쇄 된 버전은 실제 물리적 인쇄이든 Instapaper 또는 Pocket과 같은 오프라인 리더에서 콘텐츠를 렌더링하든 여전히 자주 액세스됩니다. 일부 콘텐츠의 경우 "인쇄"는 여전히 관련이 있습니다.
(기사가 너무 길고 반응 형 웹 디자인의 핵심 내용과 약한 상관 관계가 있기 때문에 다음 내용이 생략됩니다. 일부 컨텐츠는 필요에 따라 선택적으로 유지하거나 번역 할 수 있습니다) .
이 응답은 원래의 의미를 유지하고 이미지 형식을 보존 하면서이 컨텐츠를 덜 생략함으로써 길이가 감소했습니다.
반응 형 웹 디자인 : 모든 화면에 적응