사용하는 대부분의 웹사이트 responsive 디자인에서 잘못 사용하여 문제가 발생합니다. 에 대한 일반적인 접근 responsive 디자인은 게으른 것이며, 그러한 접근 방식을 취하면 responsive 사이트는 완벽하게 완벽하게 작동하며 많은 사이트는 작동하지 않습니다. 완벽하게 작동하는 사람들에게는 아마도 운의 문제로 귀결될 것입니다.
의 개념 responsive 디자인은 단순하지만 그 단순함 때문에 사람들이 쉽게 실수를 저지를 수 있습니다. 다년간의 경험을 가진 디자이너가 디자인에 익숙해졌습니다. desktop, 그래서 그들은 일반적으로 다음을 기반으로 디자인을 계획합니다 desktop 레이아웃.
Desktop 레이아웃은 일반적으로 여러 열로 구성되고 일반적으로 많은 양의 공백을 포함하며 더 나은 단어가 필요하지 않은 모든 것이 "크다"는 점에서 태블릿 레이아웃 및 모바일 레이아웃과 다릅니다. 만약에 responsive 디자인 기술이 사용되는 경우 이 다중 열 레이아웃은 단일 열로 분할되어야 합니다.
그게 당신의 전부라면 responsive 디자인은 실제로 모바일 장치에서 볼 때 수행되므로 문제가 있을 수 있습니다. 얼마나 많은 문제가 당신의 태도에 달려있느냐에 달려 있지만, 좋은 디자이너는 좋은 UX에 관심을 갖습니다. 그들은 나쁜 UX에 더욱 신경을 씁니다. 사이트에 나쁜 UX가 있고 좋은 디자이너가 되고 싶다면 이를 수정해야 합니다.
다중 열 레이아웃을 단일 열로 축소 할 때 발생하는이 문제는 비례 적으로 작동하지 않는다는 것입니다. 무언가를 수평으로 축소해야하고 다른 변경을하지 않으면 분명히 수직으로 확장 될 것입니다.
짧은 지방 유리의 물을 크고 얇은 유리에 붓고 물은 키가 큰 얇은 유리 모양을 취하고 물의 양은 정확히 동일하게 유지됩니다. 디자이너가 이해해야하는 것은 웹 사이트에서 변화 할 양이 필요하다는 것입니다. 일반적으로 모양을 변경하고 내용을 유지하는 것은 좋은 생각이 아닙니다. 정확하게 똑같다. 뭔가 줄게있어.
진정으로 디자이너라는 칭호를 얻은 사람은 이것이 해결해야 할 문제이며 디자이너가 실제로 하는 일은 문제에 대한 솔루션을 찾는 것임을 이해할 것입니다. 따라서 사용자 경험을 실망스러운 스크롤 축제로 바꾸지 않고 사이트의 핵심 콘텐츠를 전달하는 가장 좋은 방법을 찾는 것이 완벽한 작업입니다. 다음은 분해할 때 고려할 가치가 있는 몇 가지 사항입니다. desktop 모바일 디자인으로 디자인:
1. "모바일 우선"은 멍청하다
죄송하지만 그렇습니다. 모두가 이것을 앵무새로 생각하고 있지만 개념으로서는 별로 도움이 되지 않습니다. 왜냐하면 진정으로 "모바일 퍼스트"를 디자인한다면 그것을 다시 확장하려고 하는 악몽이 될 것이기 때문입니다. desktop 순전히 단일 열 레이아웃을 고수하지 않는 한 디자인하십시오.
가장 좋은 방법은 최소 11 개 (최대 XNUMX 개)의 서로 다른 레이아웃을 물리적으로 디자인하는 것입니다. 고려할 수있는 최소 항목은 다음과 같습니다.
- Desktop
- 랜드 스케이프 모바일
- 세로 모바일
좀 더 철저하고 싶다면 다음 사항도 고려해야합니다.
- 가로 태블릿
- 세로 태블릿
그리고 당신이 절대적으로 완전하려면 전체 목록은 다음과 같습니다
- 거대한 Desktop
- 보통의 Desktop
- 큰 조경 정제
- 큰 인물 태블릿
- 작은 가로 태블릿
- 작은 인물 태블릿
- 대형 조경 모바일
- 큰 인물 사진 모바일
- 작은 조경 모바일
- 작은 인물 사진 모바일
- 작은 / 착용 가능
다양한 가능성을 가지고있는 게으른 "일률적"접근 방식이 왜 그렇게 유혹적인지 분명하지만,이를 망칠 수있는 방법이 너무나도 많은 것도 분명합니다.
2. 펼쳐지는 페이지 바닥 글 길들이기
desktop 디자인에 내부 링크가 많은 거대한 페이지 바닥글 중 하나가 포함되어 있습니까? 좋습니다. 아마 매우 편리할 것입니다. desktop. 모바일에서는 우스꽝스럽게 보이며 단순히 터치하는 것 이상입니다. 각 장치 중단점에 대해 완전히 다른 페이지 바닥글을 디자인할 수 있습니다. 모달 대화 상자에서 해당 바닥글 링크를 사용할 수 있도록 하면 모두가 승리합니다.
3. 모호한 장치에서 약간의 문제를 받아들입니다.
특정 장치가 흔하지 않은 경우 해당 장치에서 볼 때만 나타나는 디자인에 몇 가지 단점이 있으면 그렇게 나쁘지 않습니다. 인기있는 기기 일수록 기기에 나타나는 모든 단점을 없애기 위해 더 많은 노력을 기울여야합니다.
4. 핵심 메시지에 기여하지 않는 콘텐츠를 숨길 수 있습니다
사이트에서 가장 중요한 부분은 핵심 메시지입니다. 예, 일부 사이트에서 가장 중요한 부분은 광고이며 해당 광고를 전달하기 위해서만 존재하지만 핵심 메시지 표시 또는 광고 표시 중에서 선택해야하는 경우 메시지를 선택하십시오. Google은 귀하를 인물이 아닌 grata 핵심 콘텐츠를 숨긴 다음 여러 광고를 게재하면 핵심 콘텐츠는 Google에서 사용자의 색인을 생성 한 것이기 때문이며 해당 콘텐츠가 표시되지 않으면 Google은이를 사기성으로 간주합니다.
또한 순수하게 장식 적이거나 미학적이지만 핵심 메시지에 크게 영향을 미치지 않는 이미지와 같은 것은 축소하거나 숨길 수있는 후보입니다.
어떤 사람들은 콘텐츠를 숨기는 것이 모바일 사용자를 "처벌"하는 것이라고 제안했지만 이것은 다소 터무니없는 생각입니다. 내용을 숨기고 있는 것이 현실입니다. desktop 경험은 있지만 필요하다고 사이트의 핵심 메시지에 충분히 기여하지 않습니다.
5. 대체 배경을 사용할 수 있습니다
최근에 사이트 소유자가 특정 배경에 대해 비용을 지불하고 모든 콘텐츠가 해당 배경에 맞게 조정되기를 바라는 어리석은 임무를 받았습니다. 글 머리 기호 항목은 매우 정확한 문자 수 여야하고 총 줄 수는 정확해야합니다.
이것은 웹 디자인에서 나쁜 습관입니다. 못 레이아웃에 맞게 콘텐츠를 디자인합니다. 레이아웃은 항상 콘텐츠를 보관하도록 설계되었습니다. 어떤 이유로 레이아웃에 콘텐츠를 담을 수없는 경우 콘텐츠가 아닌 레이아웃을 다시 디자인해야합니다. 기기마다 다른 배경을 사용하는 것이 가능합니다. 당신은 디자이너입니다. 상상력을 발휘 해봐.
콘텐츠는 웹 사이트의 생명체이며 레이아웃의 제약에 따라 콘텐츠를 수정하거나 제한하는 것은 사이트 소유자의 분명한 아마추어 표시이며 처음에는 레이아웃이 잘못 설계되었다는 신호입니다. 장소. 당신이 묵인한다면 그 클라이언트는 문제가 될 것이기 때문에 당신의 원칙을 지키십시오.
그 고객이 웹 디자인 클라이언트인 경우를 제외하고는 고객은 항상 옳습니다. 클라이언트는 자신에게 가장 좋은 것이 무엇인지 거의 알지 못하며 클라이언트에게 올바른 결과를 제공하는 방법을 알고 있는 웹 디자이너로서 자신을 주장하는 것이 중요합니다. 다른wise 또 다른 웹사이트를 만들 위험이 있습니다. 질색.
6. 축소 순서를 수동으로 제어합니다 (또는 컨텐츠 내에서 공간 참조를 피하십시오)
이것은 복잡한 문제입니다. 사이트의 축소 순서는 div가 쌓이는 순서에 따라 다릅니다. div가 올바른 순서로 축소되도록 올바른 순서로 쌓아야합니다.
드래그 앤 드롭 WYSIWYG 웹 사이트 빌더에서 발생하는 문제 중 하나는 일반적으로 div가 쌓이는 순서를 지시 할 수 없으며 매우 드물게 수행 할 수있는 경우에는 매번 힘든 일이 끝납니다. 최소한의 편집 만하면 소스 코드를 다시 해킹해야합니다.
축소 순서를 제어하지 않으면 이 이미지 무엇이 잘못 될 수 있는지 명확하게 설명합니다. 또한 모바일에서 왼쪽 또는 오른쪽에 있던 모든 항목이 위 또는 아래로 이동할 수 있으므로 공간 참조 (예 : "왼쪽 열에서")를 피해야합니다. ...을 더한 독자가 스크롤하여 보는 것이 중요하다고 생각하면 다시 스크롤해야하며 시원하지 않습니다.
7. 레이아웃마다 다른 글꼴 크기가 필요할 수 있습니다.
CSS를 사용하여 글꼴 크기를 쉽게 제어 할 수 있으며 특정 크기의 디스플레이에 대해 다른 글꼴 크기와 다른 글꼴 모양 (더 좋아 보일 경우)을 설정할 수도 있습니다. CSS 미디어 쿼리를 사용하여 표시 크기를 찾은 다음, 대상 장치 유형에서 최대한의 이점을 얻을 수 있도록 콘텐츠를 표시하는 값으로 글꼴 크기 또는 글꼴을 수정합니다.
8. 사용하는 것이 가장 좋습니다. responsive 형상
모든 이미지는 responsive 언제든지 가능할 때. 이로 인해 이미지가 너무 축소되면 이미지의 세부 사항이 손실될 수 있습니다. 이 문제에 대한 해결책은 이미지를 클릭 가능하게 만들어 사용자가 콘텐츠와 별도로 이미지의 확대 버전을 볼 수 있도록 하는 것입니다. 이를 수행하는 일반적인 방법은 모달 대화 상자를 사용하는 것입니다.
헤더 이미지 제공
모바일 우선은 코드 기반에서 "기본" CSS가 모바일용이고 더 넓은 범위에 대한 변경 사항을 빌드한다는 것을 의미합니다. format거기에서 s. 나는 당신의 첫 번째 요점을 정말로 이해하지 못합니다.