반응 형 디자인이 잘못된 경우 (및 해결 방법)

반응 형 디자인을 사용하는 대부분의 웹 사이트에서는이를 잘못 사용하여 문제가 발생합니다. 반응 형 디자인에 대한 일반적인 접근 방식은 게으른 접근 방식이며, 이러한 접근 방식을 취하면 일부 반응 형 사이트는 완벽하게 작동하지만 대부분은 그렇지 않습니다. 완벽하게 작동하는 사람들에게는 아마도 운이 좋을 것입니다.

반응 형 디자인의 개념은 간단하지만 매우 단순하기 때문에 사람들이 실수를 너무 쉽게 만들 수 있습니다. 다년간의 경험을 가진 디자이너는 데스크톱 용 디자인에 익숙해 졌으므로 일반적으로 데스크톱 레이아웃을 기반으로 디자인을 계획합니다.

데스크톱 레이아웃은 일반적으로 여러 열로되어 있고 일반적으로 많은 양의 공백이 포함되며 더 나은 단어를 원하기 때문에 모든 것이 "큰"크기이기 때문에 태블릿 레이아웃 및 모바일 레이아웃과 다릅니다. 반응 형 디자인 기술을 사용하는 경우이 다중 열 레이아웃은 단일 열로 나뉩니다.

이것이 모바일 장치에서 볼 때 반응 형 디자인이 실제로 수행하는 모든 작업이라면 문제가있을 수 있습니다. 문제의 정도는 당신의 태도에 달려 있지만 좋은 디자이너는 좋은 UX에 관심이 있습니다. 그들은 나쁜 UX에 더 많은 관심을 가지고 있습니다. 사이트에 나쁜 UX가 있고 좋은 디자이너가되고 싶다면 수정해야합니다.

다중 열 레이아웃을 단일 열로 축소 할 때 발생하는이 문제는 비례 적으로 작동하지 않는다는 것입니다. 무언가를 수평으로 축소해야하고 다른 변경을하지 않으면 분명히 수직으로 확장 될 것입니다.

짧은 지방 유리의 물을 크고 얇은 유리에 붓고 물은 키가 큰 얇은 유리 모양을 취하고 물의 양은 정확히 동일하게 유지됩니다. 디자이너가 이해해야하는 것은 웹 사이트에서 변화 할 양이 필요하다는 것입니다. 일반적으로 모양을 변경하고 내용을 유지하는 것은 좋은 생각이 아닙니다. 정확하게 똑같다. 뭔가 줄게있어.

실제로 디자이너라는 칭호를 얻은 사람은 이것이 해결해야 할 문제를 나타내고 디자이너가 실제로하는 일은 문제에 대한 해결책을 찾는 것임을 이해할 것입니다. 따라서 사용자 경험을 실망스러운 스크롤 페스트로 바꾸지 않고 사이트의 핵심 콘텐츠를 제공하는 가장 좋은 방법을 찾는 것이 완벽한 작업입니다. 다음은 데스크톱 디자인을 모바일 디자인으로 나눌 때 고려해야 할 몇 가지 사항입니다.

1. "모바일 우선"은 멍청하다

미안하지만 그렇습니다. 모두가이 문제를 이해하고 있지만 개념적으로는별로 도움이되지 않습니다. 진정으로 "모바일 우선"을 디자인하면 완전히 단일 열 레이아웃을 고수하지 않는 한 데스크톱 디자인으로 다시 확장하는 것은 악몽이 될 것이기 때문입니다. 쪽으로.

가장 좋은 방법은 최소 11 개 (최대 XNUMX 개)의 서로 다른 레이아웃을 물리적으로 디자인하는 것입니다. 고려할 수있는 최소 항목은 다음과 같습니다.

  • 바탕 화면
  • 랜드 스케이프 모바일
  • 세로 모바일

좀 더 철저하고 싶다면 다음 사항도 고려해야합니다.

  • 가로 태블릿
  • 세로 태블릿

그리고 당신이 절대적으로 완전하려면 전체 목록은 다음과 같습니다

  • 거대한 데스크탑
  • 일반 데스크탑
  • 큰 조경 정제
  • 큰 인물 태블릿
  • 작은 가로 태블릿
  • 작은 인물 태블릿
  • 대형 조경 모바일
  • 큰 인물 사진 모바일
  • 작은 조경 모바일
  • 작은 인물 사진 모바일
  • 작은 / 착용 가능

다양한 가능성을 가지고있는 게으른 "일률적"접근 방식이 왜 그렇게 유혹적인지 ​​분명하지만,이를 망칠 수있는 방법이 너무나도 많은 것도 분명합니다.

2. 펼쳐지는 페이지 바닥 글 길들이기

데스크탑 디자인에는 내부 링크가 많은 거대한 페이지 바닥 글 중 하나가 포함되어 있습니까? 좋습니다. 아마도 데스크톱에서 매우 편리 할 것입니다. 모바일에서는 우스꽝스러워 보이며 단순한 터치 그 이상입니다. 각 장치 중단 점에 대해 완전히 다른 페이지 바닥 글을 디자인 할 수 있습니다. 모달 대화 상자에서 바닥 글 링크를 사용할 수 있도록하면 모두가 이깁니다.

3. 모호한 장치에서 약간의 문제를 받아들입니다.

특정 장치가 흔하지 않은 경우 해당 장치에서 볼 때만 나타나는 디자인에 몇 가지 단점이 있으면 그렇게 나쁘지 않습니다. 인기있는 기기 일수록 기기에 나타나는 모든 단점을 없애기 위해 더 많은 노력을 기울여야합니다.

4. 핵심 메시지에 기여하지 않는 콘텐츠를 숨길 수 있습니다

사이트에서 가장 중요한 부분은 핵심 메시지입니다. 예, 일부 사이트에서 가장 중요한 부분은 광고이며 해당 광고를 전달하기 위해서만 존재하지만 핵심 메시지 표시 또는 광고 표시 중에서 선택해야하는 경우 메시지를 선택하십시오. Google은 귀하를 인물이 아닌 grata 핵심 콘텐츠를 숨긴 다음 여러 광고를 게재하면 핵심 콘텐츠는 Google에서 사용자의 색인을 생성 한 것이기 때문이며 해당 콘텐츠가 표시되지 않으면 Google은이를 사기성으로 간주합니다.

또한 순수하게 장식 적이거나 미학적이지만 핵심 메시지에 크게 영향을 미치지 않는 이미지와 같은 것은 축소하거나 숨길 수있는 후보입니다.

일부 사람들은 콘텐츠를 숨기는 것이 모바일 사용자를 "처벌"한다고 제안했지만 이것은 약간 어리석은 개념입니다. 현실은 데스크톱 경험을 향상시키기 위해 존재하기 때문에 콘텐츠를 숨기고 있지만 사이트의 핵심 메시지에 충분히 기여하지 못하기 때문입니다.

5. 대체 배경을 사용할 수 있습니다

최근에 사이트 소유자가 특정 배경에 대해 비용을 지불하고 모든 콘텐츠가 해당 배경에 맞게 조정되기를 바라는 어리석은 임무를 받았습니다. 글 머리 기호 항목은 매우 정확한 문자 수 여야하고 총 줄 수는 정확해야합니다.

이것은 웹 디자인에서 나쁜 습관입니다. 레이아웃에 맞게 콘텐츠를 디자인합니다. 레이아웃은 항상 콘텐츠를 보관하도록 설계되었습니다. 어떤 이유로 레이아웃에 콘텐츠를 담을 수없는 경우 콘텐츠가 아닌 레이아웃을 다시 디자인해야합니다. 기기마다 다른 배경을 사용하는 것이 가능합니다. 당신은 디자이너입니다. 상상력을 발휘 해봐.

콘텐츠는 웹 사이트의 생명체이며 레이아웃의 제약에 따라 콘텐츠를 수정하거나 제한하는 것은 사이트 소유자의 분명한 아마추어 표시이며 처음에는 레이아웃이 잘못 설계되었다는 신호입니다. 장소. 당신이 묵인한다면 그 클라이언트는 문제가 될 것이기 때문에 당신의 원칙을 지키십시오.

고객이 웹 디자인 클라이언트 인 경우를 제외하고 고객은 항상 옳습니다. 클라이언트는 자신에게 가장 적합한 것이 무엇인지 거의 알지 못하며 클라이언트에게 올바른 결과를 제공하는 방법을 아는 웹 디자이너로서 자신을 주장하는 것이 중요합니다. 그렇지 않으면 다른 웹 사이트를 만들 위험이 있습니다. 질색.

6. 축소 순서를 수동으로 제어합니다 (또는 컨텐츠 내에서 공간 참조를 피하십시오)

이것은 복잡한 문제입니다. 사이트의 축소 순서는 div가 쌓이는 순서에 따라 다릅니다. div가 올바른 순서로 축소되도록 올바른 순서로 쌓아야합니다.

드래그 앤 드롭 WYSIWYG 웹 사이트 빌더에서 발생하는 문제 중 하나는 일반적으로 div가 쌓이는 순서를 지시 할 수 없으며 매우 드물게 수행 할 수있는 경우에는 매번 힘든 일이 끝납니다. 최소한의 편집 만하면 소스 코드를 다시 해킹해야합니다.

축소 순서를 제어하지 않으면 이 이미지 무엇이 잘못 될 수 있는지 명확하게 설명합니다. 또한 모바일에서 왼쪽 또는 오른쪽에 있던 모든 항목이 위 또는 아래로 이동할 수 있으므로 공간 참조 (예 : "왼쪽 열에서")를 피해야합니다. ...을 더한 독자가 스크롤하여 보는 것이 중요하다고 생각하면 다시 스크롤해야하며 시원하지 않습니다.

7. 레이아웃마다 다른 글꼴 크기가 필요할 수 있습니다.

CSS를 사용하여 글꼴 크기를 쉽게 제어 할 수 있으며 특정 크기의 디스플레이에 대해 다른 글꼴 크기와 다른 글꼴 모양 (더 좋아 보일 경우)을 설정할 수도 있습니다. CSS 미디어 쿼리를 사용하여 표시 크기를 찾은 다음, 대상 장치 유형에서 최대한의 이점을 얻을 수 있도록 콘텐츠를 표시하는 값으로 글꼴 크기 또는 글꼴을 수정합니다.

8. 반응 형 이미지를 사용하는 것이 가장 좋습니다

모든 이미지는 가능할 때마다 반응해야합니다. 이로 인해 이미지가 너무 많이 축소되면 이미지의 세부 사항이 손실 될 수 있습니다. 이 문제에 대한 해결책은 이미지를 클릭 가능하게 만들어 사용자가 콘텐츠와는 별도로 이미지의 확대 된 버전을 볼 수 있도록하는 것입니다. 이를 수행하는 일반적인 방법은 모달 대화 상자를 사용하는 것입니다.

헤더 이미지 제공

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.