호버는 몇 년 동안 웹 사이트에서 액션을 유발하지 않고 방문자에게 정보를 제공하는 방법으로 사용되었습니다. 스마트 폰과 태블릿이 점차 인터넷을 인수함에 따라 웹 사이트를 디자인 할 때 더 많은 관심을 기울여야합니다. 터치 스크린이 호버를 처리 할 수 없으므로 호버 효과에 대한 대안을 찾아야합니다. 자신의 웹 사이트를 설정하거나 전문 웹 디자이너를 고용 할 리소스가없는 경우이 자습서가 적합합니다.
터치 스크린으로 호버 효과를 관리 할 수 있지만 약간 어색 할 수 있습니다. 완전히 디자인하고 다른 것을 완전히 사용하는 것이 좋습니다. 데스크톱 사이트에서 사용하도록 설정 한 경우 일반적으로 모바일 웹 사이트에 마우스를 올리면 다음과 같은 세 가지 대안이 있습니다.
- 모두 제거하고 기본 조치로 바꾸십시오.
- 호버 효과를 위해 한 번 탭하고 기본 동작을 위해 한 번 더 탭할 수있는 보조 메뉴를 추가하십시오.
- 호버 정보를 자체 페이지에 배치하십시오.
모두 터치 스크린과 데스크톱에서 잘 작동하지만 기존 디자인 내에서 구현하려면 약간의 디자인 조정이 필요합니다. 기술이 있으면 JavaScript 또는 영리한 jQuery 코드로 문제를 해결할 수 있지만 직접 이해하려고한다면 코드 대신 디자인 대안을 사용하는 것이 좋습니다. 호버 효과에 대한 코드 대안을 탐색하려면이 페이지를 방문하십시오.
디자인에서 호버 효과 제거
프리랜서 웹 디자이너를 사용하여 도움을 줄 수 없다면 호버 효과를 완전히 제거하는 것이 좋습니다. 물론 깔끔하게 보이고 유용한 보충 정보를 제공 할 수 있지만 항상 같은 효과를 얻을 수있는 다른 방법이 있습니다.
메뉴 조치를 기본 조치로 유지하고 페이지의 다른 곳에 보충 정보를 포함시킬 수 있습니다. 브레이크 아웃 상자, 팝업을 사용하거나 만들려는 지점 또는 다른 것에 대한 설명자 내용을 늘릴 수 있습니다. jQuery를 구현할 기술이 없다면 이것이 가장 간단한 옵션 일 것입니다.
보조 메뉴 추가
보조 메뉴에는 호버 효과를 시뮬레이션하는 첫 번째 탭이 있습니다. 메뉴에 정보를 포함시키고 동일한 요소 내에 두 번째 메뉴를 표시 할 수 있습니다. 두 번째 메뉴는 데스크탑에서와 같이 실제 선택으로 작동합니다. 첫 번째 프레스는 마우스 호버를 시뮬레이트하고 두 번째 프레스는 기본 동작을 수행하는 사용자를 시뮬레이트합니다.
이것은 호버 효과의 깔끔한 대안이지만 화면 크기에 의해 제한되며 효과에 추가 할 수있는 정보의 양을 제한합니다. 호버 효과는 특성상 제한되지만 처리중인 화면 영역에 따라 모바일에서 더 제한됩니다. 비표준 방식으로 보충 데이터를 실제로 포함하려면 이것이 가능할 수 있습니다.
호버 정보를 자체 페이지에 배치
아마도 더 쉬운 옵션은 텍스트 링크가있는 자체 페이지 내에 풍선 도움말 정보를 포함시키는 것입니다. 이는 메뉴를 단순화하고 탐색을 간단하게 유지합니다. 하이퍼 링크는 여러 기기에서 작동하며 사이트 크기 및 SEO에 대한 추가 페이지가 제공됩니다. 단점은 보충 내용을 적어도 300 단어 정도 늘려야 작동한다는 것입니다.
정보를 충분히주의 깊게 채워서 읽을 수 있고 독자에게 가치를 더하는 한 개인적으로는 이것이 최선의 대안이라고 생각합니다. 보충 데이터에 대한 링크를 어디에 배치할지 결정하는 것은 귀하의 몫이며 디자인에 따라 다르지만 추가 페이지는 클릭 유도 문안을 추가하고 전화 번호, 이메일 주소 및 사용할 수있는 추가 정보를 추가 할 수있는 추가 기회를 제공합니다 판매합니다.
호버와 함께 체재
기본 웹 사이트에서 일종의 호버 효과를 사용하려면 최소한 모바일 사이트 또는 모바일 버전으로 작업해야합니다. 토글 메뉴 대안 또는 JavaScript 솔루션이 있지만 구현하려면 전문가가 필요합니다. 이 페이지에서는 대안을 더 자세히 살펴보고자하는 대안에 대해 설명합니다.
독자적으로 시작하거나 첫 번째 웹 사이트를 구축 할 때 가장 쉬운 함정 중 하나는 잠재 고객이 아닌 자신을위한 것입니다. 확실히 당신이 좋아하는 것을 디자인해야하지만, 유용성을 고려할 때 청중의 우선 순위를 지정해야합니다. 또한 사용할 장치와 웹 사이트를 가장 잘 활용할 수있는 방법을 고려해야합니다.
청중이 어리면 모바일을 사용합니다. 모바일을 사용하는 경우 호버 효과 및 기타 디자인 옵션이 최선의 옵션이 아닙니다.
