사이트가 적절하게 반응하도록 이미지 및 텍스트 길이를 테스트합니다.
웹 사이트를 디자인하고 해당 사이트의 콘텐츠가 어떻게 표시 될지 계획을 세울 때 우리는 이상적인 상황을 염두에두고 종종 그렇게합니다. 헤드 라인과 텍스트 영역은 특정 길이를 갖는 것으로 상상되며 텍스트와 함께 제공되는 이미지는 전반적인 디자인에서 의도 한대로 작동 할 수 있도록 치수로 표시되도록 설계되었습니다. 이러한 요소가 응답 성있는 웹 사이트 빌드의 일부로 다소 유동적 일지라도 (그래야합니다.) 얼마나 유연한 지에 대한 제한이 있습니다.
CMS (콘텐츠 관리 시스템)에 웹 사이트를 배포하고 클라이언트가 해당 사이트를 관리하고 시간이 지남에 따라 새로운 콘텐츠를 추가 할 수있게 허용 한 경우 사용자가 설계 한 제한이 절대적으로 테스트에 적용됩니다. 고객이 꿈꾸어 본 적이없는 웹 사이트를 변경하는 방법을 찾을 것이라는 사실에 신뢰하십시오. 디자인 프로세스에서 작업 한 이상적인 상황을 제대로 설명하지 못했다면 해당 사이트의 레이아웃이 심각한 위험에 처할 수 있습니다. 따라서 사이트를 시작하기 전에 모든 웹 사이트 콘텐츠 및 사이트 레이아웃의 측면을 스트레스 테스트하는 것이 특히 중요합니다. 이 작업을 수행하는 방법에 대한 몇 가지 팁이 있습니다.
이미지 크기 테스트
의심 할 여지없이 사람들이 웹 사이트의 레이아웃을 깨는 가장 일반적인 방법은 부적절한 크기의 이미지를 추가하는 것입니다 (사이트의 전반적인 성능에 부정적인 영향을 미치고 다운로드 속도가 느려지는 방식이기도합니다). 여기에는 너무 큰 이미지뿐만 아니라 웹 사이트에서 의도 한대로 작업하기에는 너무 작은 이미지가 포함됩니다.
CSS를 사용하여 레이아웃에서 이러한 이미지의 크기를 강제하더라도 사이트의 원래 사양과 크게 다를 수있는 이미지가 문제를 일으킬 수 있습니다. 이미지의 크기가 정확하지 않은 경우 CSS에서 적절한 너비와 높이를 사용하여 해당 이미지를 표시 할 수 있지만 이미지 자체와 가로 세로 비율이 왜곡 될 수 있습니다. 너무 작 으면 이미지가 떨어져서 품질이 떨어 지므로 사이트의 모양에 부정적인 영향을 미칩니다. 크기가 너무 커서 CSS로 작아 진 이미지는보기 좋게 보이고 품질은 유지되지만 파일 크기는 사용 방법에 따라 너무 비쌉니다.
웹 사이트 작업을 테스트 할 때 의도 한 범위를 벗어나는 이미지를 추가해야합니다. 부정확 한 종횡비에 따라 이미지의 크기를 조정하고 CSS 클립 속성과 같은 것을 사용하여 필요에 따라 이미지를 자르면 이러한 문제를 해결하는 CSS 및 반응 형 이미지 기술을 추가하십시오.
다른 미디어 테스트
이미지 외에도 사이트의 동영상과 같은 다른 미디어를 테스트하고 다양한 크기 및 가로 세로 비율 값을 사용하여 레이아웃에서 이러한 요소가 어떻게 나타나는지 확인하십시오. 다시 한 번 귀하의 사이트가 반응하는 특성과 다른 장치 및 화면 크기에서 작동하는 방식을 고려하십시오.
텍스트 표제 테스트
이미지 이후에는 웹 이외의 전문가가 관리하는 라이브 웹 사이트에서 가장 많은 문제를 일으키는 다음 웹 사이트 영역이 텍스트 제목입니다. 이들은 종종 페이지의 내용이나 해당 페이지의 섹션을 시작할 짧은 줄의 텍스트입니다. "텍스트 제목 테스팅"을 읽는이 단락 위에있는 텍스트가 이에 대한 예입니다.
다음과 같은 표제를 수용하도록 사이트를 설계 한 경우 :
"텍스트 제목 테스트"
하지만 고객은 CMS를 사용하여 다음과 같은 제목이있는 기사를 추가합니다.
"다양한 크기 요구 사항과 사용자 요구 사항을 가진 다양한 웹 페이지에서 텍스트 제목 테스트"
그런 다음 레이아웃이 모든 추가 텍스트를 깨끗하게 처리하지 못할 수도 있습니다. 마찬가지로 초기에 디자인 한 크기를 벗어나는 항목을 추가하여 이미지와 미디어를 스트레스 테스트해야하므로 텍스트 표제를 사용하여 텍스트와 같이 매우 긴 선을 효과적으로 표시 할 수있는 유연성을 확보해야합니다. 위의 하나.
텍스트 길이 테스트
텍스트 제목을 유지 하면서 페이지의 주요 내용에 대해 다른 텍스트 길이를 테스트 할 수도 있습니다. 여기에는 매우 길고 짧은 텍스트가 포함됩니다. 실제로 많은 페이지 레이아웃을 망칠 수 있습니다.
일반적으로 웹 페이지는 포함하고있는 텍스트의 높이를 수용하기 위해 크기가 커지기 때문에 많은 텍스트가있는 페이지는 일반적으로 필요한만큼 높이가 조정됩니다. 페이지의 높이를 제한하지 않는 한 (페이지를 유연하게 만들지 말아야 할), 여분의 텍스트가 문제가되지 않습니다. 텍스트가 너무 적 으면 또 다른 문제입니다. 많은 디자이너가 설계 프로세스에서 테스트하는 것을 잊어 버리는 것입니다.
텍스트가 너무 작 으면 페이지가 불완전하거나 파손될 수 있으므로 페이지 콘텐츠를 축소하여 해당 인스턴스에서 일어나는 일을 확인하고 해당 상황을 처리하기 위해 사이트의 CSS를 적절하게 조정하십시오.
테스트 페이지 확대 / 축소
시력 문제가있는 사람들은 웹 브라우저의 Page Zoom 기능을 사용하여 웹 페이지의 크기를 늘릴 수 있습니다. 누군가가 상당 부분을 확대하면 레이아웃이 무너질 수 있습니다. 이것이 미디어 쿼리 뿐만 아니라 웹 사이트 글꼴 크기의 측정 단위로 EM을 사용하려는 이유 중 하나입니다. EM은 상대적으로 측정 단위이기 때문에 (브라우저의 기본 텍스트 크기를 기반으로 함) 유연한 웹 사이트 레이아웃에보다 도움이됩니다.
페이지 확대 / 축소를 위해 웹 사이트를 테스트하고 하나 또는 두 개의 확대 / 축소 수준에서 멈추지 마십시오. 페이지를 의도 한대로 반응하도록 사이트를 여러 단계 위아래로 확대하십시오.
다운로드 속도와 성능을 잊지 마라.
고객의 결정이 레이아웃에 미치는 영향을 테스트 할 때 해당 결정이 사이트 성능에 미치는 영향에도주의를 기울이는 것을 잊지 마십시오. 이러한 클라이언트가 추가 할 이미지와 콘텐츠는 사이트의 다운로드 속도를 저해하고 사이트의 전반적인 유용성을 심각하게 파괴 할 수 있습니다. 이러한 추가 사항의 영향을 계획하고 이러한 영향을 최소화하기 위해 개발 프로세스에 참여하십시오.
웹 사이트가 실적 예산으로 구축되는 경우이 정보를 고객과 공유하고 성능 측정 항목에 대한 웹 페이지를 테스트하는 방법을 보여줍니다. 페이지 크기 및 다운로드 속도에 대해 이러한 설정된 임계 값을 유지하는 중요성을 설명하고 추가 기능이 사이트 전체에 어떤 영향을 미칠 수 있는지 보여줍니다. 시간을내어 현장을 잘 관리하고 잘 보도록하는 방법을 교육하십시오. 훈련 주제에 ...
고객 교육은 필수적입니다.
사이트의 이미지, 텍스트 및 기타 페이지 요소를 테스트하고 극단적 인 인스턴스를 설명하는 스타일을 만드는 것이 중요하지만 이는 클라이언트 교육을 대신 할 수 없습니다. 귀하의 사이트를 방탄하는 것은 귀하의 고객을 효과적으로 관리하고 사이트를 관리하는 방법을 교육하는 시간 외에도해야합니다. 결국, 책임을 이해하고 사이트에서 내리는 결정의 영향을 잘 숙지 한 고객은 해당 사이트를 계속 유지하고 최선을 다하는 노력에 매우 귀중합니다.