" 반응 형 웹 사이트 "가 있습니까? 방문자의 기기 와 화면 크기 에 따라 레이아웃이 변경되는 사이트입니다. 반응이 빠른 웹 디자인은 업계 최고의 모범 사례입니다. Google에서 권장 하며 웹에서 수백만 사이트에 있습니다. 그러나 서로 다른 화면 크기에 "적합"하고 진정으로 반응이 좋은 사이트를 갖는 데는 큰 차이가 있습니다.
필자는 일상적으로 회사가 웹 사이트를 재 설계하고 새로운 모바일 친화적 디자인의 장점을 칭찬하는 보도 자료를 내놓는 것을 보았습니다. 내가 그러한 사이트를 방문했을 때, 실제로 자주 발견되는 것은 다른 화면에 맞게 확장되고 변경되는 레이아웃이지만 응답성에 관한 아이디어를 얻는 것입니다. 충분하지 않다. 진정으로 반응하는 웹 사이트는 작거나 큰 화면에 맞게 확장 할 수 있습니다. 이 사이트에서는 다음과 같은 중요한 특징을 발견하게됩니다.
1. 최적화 된 성능
누구도 웹 사이트가로드 될 때까지 기다리는 것을 좋아하지 않으며, 연결이 이상적인 모바일 장치를 사용하는 경우 사이트를 빨리로드해야 할 필요성이 더욱 커집니다.
그렇다면 사이트 실적을 어떻게 최적화합니까? 재 설계의 일부로 새 사이트를 시작하는 경우 해당 프로젝트의 일부로 성과 예산 을 작성 해야합니다. 기존 사이트로 작업하면서 처음부터 시작하지 않는 경우, 첫 번째 단계는 사이트 성능을 테스트하여 현재의 위치를 확인하는 것입니다.
사이트가 성능면에서 어느 정도의 기준에 도달했으면 다운로드 속도를 높이기 위해 필요한 개선 작업을 시작할 수 있습니다. 시작하기 좋은 곳은 사이트의 이미지 일 것입니다. 사이트로드 속도가 느린 경우 이미지가 너무 크면 1 위를 차지하므로 웹 게재를 위해 이미지를 최적화 하면 사이트가 실적 측면에서 크게 도움이 될 수 있습니다.
현실은 향상된 웹 사이트 성능과 빠른 다운로드 속도가 모든 방문자가 누릴 수있는 이점입니다. 어쨌든 아무도 사이트가 "너무 빨리"로드되었다고 불평하지 않았지만 사이트가 너무 오래 걸리면 화면에 반응하여 "적합"할지를 결정하게됩니다.
2. 스마트 콘텐츠 계층 구조
웹 사이트가 대형 화면에 표시되면 상당한 화면 공간을 사용할 수 있기 때문에 다양한 방법으로 콘텐츠를 배치 할 수 있습니다. 중요한 메시지와 이미지, 뉴스 업데이트, 이벤트 정보 및 사이트 탐색을 모두 한 번에 화면에 표시 할 수 있습니다. 이를 통해 방문자는 전체 페이지의 내용을 쉽고 빠르게 스캔하여 중요한 내용을 결정할 수 있습니다.
이 시나리오는 사이트 디자인을 휴대 전화와 같은 소형 화면 장치 용으로 변형하면 매우 크게 바뀝니다. 갑자기 이전에 가지고 있던 화면의 일부만으로 작업하고 있습니다. 즉, 사이트에서 처음 나타날 내용과 앞으로 나오는 내용 등을 결정해야합니다. 모든 내용을 한 번에 볼 수는 없지만 하나 또는 두 가지를 표시 할 수있는 공간 만있을 수 있습니다 (그 중 하나는 탐색 가능성이 높음). 이것은 계층 구조의 결정이 내려져야 함을 의미합니다. 불행히도 무엇이 화면에서 먼저 오는지를 결정하고, 두 번째 등은 페이지 자체가 코딩되는 방식입니다. 응답 성있는 사이트를 구축 할 때 가장 쉽습니다. 먼저 코드의 첫 번째 내용을 화면에 표시 한 다음 코드의 두 번째 항목을 표시하는 등의 작업을 수행 할 수 있습니다. 불행히도, 한 장치에서 가장 중요한 것은 다른 장치에서 중요하지 않을 수 있습니다. 진정으로 반응하는 사이트는 상황에 따라 콘텐츠의 계층 구조가 변경되어야한다는 것을 알고 있으며 어디에 표시되는지에 대해 영리해야합니다.
CSS 그리드 레이아웃, 플렉스 박스 등을 포함한 CSS 레이아웃 기술의 향상은 웹 디자이너와 개발자가 HTML 코드의 콘텐츠 영역의 정확한 순서에 해가되는 것이 아니라 지능적으로 콘텐츠를 배치 할 때 더 많은 옵션을 제공합니다. 이러한 새로운 레이아웃 기술을 활용하면 장치 환경과 사이트 사용자의 요구가 계속 진화함에 따라 더욱 중요해질 것입니다.
3. 장치의 강점과 약점을 고려한 경험
기기 주제에 머무르는 중 - 기기를 누군가가 사이트를 방문하는 데 사용할 수있는 각 기기는 플랫폼에 내재 된 강점과 약점을 모두 가지고 있습니다. 훌륭한 반응 형 사이트는 여러 장치의 기능과 한계를 이해하고 방문자가 그 순간에 사용할 수있는 장치에 가장 적합한 사용자 지정 환경을 만드는 데 사용합니다.
예를 들어 휴대 전화에는 기존 데스크톱 컴퓨터에서는 찾을 수없는 여러 가지 기능이 포함되어 있습니다. GPS는 모바일 중심 기능의 한 예입니다 (예, 데스크톱에서도 일반적인 위치 정보를 얻을 수 있지만 기기 GPS는 훨씬 정확합니다). 귀하의 사이트는 GPS 정보를 사용하여 매우 상세하고 구체적인 단계별 방향 정보 또는 그 순간의 정확한 위치를 기반으로 한 특별 제안을 현명하게 전송할 수 있습니다.
실제로이 주역의 또 다른 예는 사용중인 화면 디스플레이의 종류를 이해하고 해당 디스플레이에 가장 적합한 이미지를 보내는 사이트입니다. 픽셀 밀도가 높은 화면이있는 경우 화면에 고화질 이미지를 보내도록 결정할 수 있습니다. 그러나 동일한 이미지는 덜 유능한 화면에서는 무의미한 것이며 여분의 품질은 손실 될 것이며 추가 파일 크기는 실제 이유없이 다운로드 될 것입니다.
정말 훌륭한 반응 형 사이트는 전체 사용자 경험을 고려하여 화면의 장치 유형이나 크기뿐만 아니라 하드웨어의 다른 중요한 측면을 기반으로 해당 경험을 조정합니다.
4. 컨텍스트가있는 컨텐트
초기 반응 형 웹 디자인은 사이트의 레이아웃이 다른 화면 크기에 반응한다는 아이디어로 인해 이름을 얻었지만 화면 크기 이상으로 반응 할 수 있습니다. 디바이스의 강점과 약점을 사용하는 이전 예제를 기반으로 날짜와 시간과 같은 다른 데이터뿐만 아니라이를 사용하여 웹 사이트 경험을 실제로 사용자 정의 할 수 있습니다.
대규모 무역 박람회 행사를위한 웹 사이트를 상상해보십시오. 반응 형 웹 사이트는 사이트 화면의 레이아웃을 여러 화면으로 확장하도록 변경하지만 날짜를 사용하여 표시 할 내용이 가장 중요한 내용을 결정할 수도 있습니다. 이벤트가 시작되기 전의 시간이라면 등록 정보를 눈에 띄게 표시하고 싶을 것입니다. 그러나 그 순간에 사건이 실제로 일어나고 있다면 등록이 가장 중요한 내용이 아닐 수도 있습니다. 대신, 사용자의 즉각적인 요구와 더 관련이 있기 때문에 하루 일정의 이벤트가 더 중요하다고 결정할 수 있습니다.
한 걸음 더 나아가서는 기기의 GPS를 활용하여 실제로 트레이드 쇼에있는 위치를 파악할 수 있습니다. 자신의 위치를 기반으로 대화식 콘텐츠를 제공하고, 근처 부스 나 세션을 시작할 수 있습니다.
5. 접근성
사이트가 방문자의 요구에 실제로 응답 할 수있는 방법을 찾는 마지막 예는 웹 사이트 접근성 에 대해 생각하는 것입니다. 웹 사이트는 장애가있는 사람들을 포함하여 최대한 많은 사람들이 사용할 수 있어야합니다. 귀하의 웹 사이트는 화면 판독기 또는 기타 보조 소프트웨어를 통해 콘텐츠에 액세스해야하는 사용자가 사용할 수 있어야합니다. 이런 식으로 귀하의 사이트는 장애가있는 방문객과는 다른 경험이 여전히 적절한 것을 보장했기 때문에 귀하의 필요에 응답하고 있습니다.
화면 크기뿐 아니라 가능한 많은 데이터 요소에 응답함으로써 웹 사이트는 "모바일 친화적 인 것"이상의 의미를 가질 수 있습니다. 이는 모든 문구에서 진정으로 반응이 빠른 경험이 될 수 있습니다.