고정에 대한 포괄적인 가이드 Responsive 2023년의 디자인 이슈

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

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

의 개념 responsive 디자인은 단순하지만 그 단순함 때문에 사람들이 쉽게 실수를 저지를 수 있습니다. 다년간의 경험을 가진 디자이너가 디자인에 익숙해졌습니다. desktop, and so they’ll usually plan a design based on a desktop 레이아웃.

Desktop layouts differ from tablet layouts and mobile layouts because they’re normally multi-column, normally include huge amounts of white space, and everything is just “big”, for want of a better word. If responsive 디자인 기술이 사용되는 경우 이 다중 열 레이아웃은 단일 열로 분할되어야 합니다.

If that’s all your responsive design actually does when it’s viewed on a mobile device, you may have a problem. How much of a problem depends on your attitude, but good designers care about good UX. They care even more about bad UX. If your site has bad UX and you want to be a good designer, then you need to fix it.

This problem with collapsing a multi-column layout into a single column is that it doesn’t work on a proportional basis. If you have to shrink something horizontally and you don’t make any other changes, it is obviously going to expand vertically.

Pour water from a short fat glass into a tall thin one, and the water takes the shape of the tall thin glass, while the volume of water stays exactly the same. What designers need to understand is that with a website, we do need the volume to change. It’s not normally a good idea to change the shape but keep the content 정확하게 the same. Something’s gotta give.

Somebody who really has earned the title of designer will understand that this represents a problem to be solved, and what designers actually do is find solutions for problems. Therefore it’s the perfect job for you to find the best way to deliver the core content of the site without turning the user experience into a frustrating scroll-fest. Here are a few of the things worth considering when breaking down a desktop 모바일 디자인으로 디자인:

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

Sorry, but it is. Everyone is parroting this, but as a concept it’s not very helpful because if you truly design “mobile first” then it will be nightmarish trying to scale it back up to a desktop 순전히 단일 열 레이아웃을 고수하지 않는 한 디자인하십시오.

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

  • Desktop
  • 랜드 스케이프 모바일
  • 세로 모바일

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

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

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

  • 거대한 Desktop
  • 보통의 Desktop
  • 큰 조경 정제
  • 큰 인물 태블릿
  • 작은 가로 태블릿
  • 작은 인물 태블릿
  • 대형 조경 모바일
  • 큰 인물 사진 모바일
  • 작은 조경 모바일
  • 작은 인물 사진 모바일
  • 작은 / 착용 가능

With so many different possibilities, it’s obvious why a lazy “one-size-fits-all” approach is so tempting, but it’s also obvious why there are so many ways to ruin it.

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

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

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

If a particular device is not common, then it’s not so bad if there are a few quirks in the design that appear only when viewing on that device. The more popular a device is, the more you’ll have to work at getting rid of any quirks that appear on it.

4. You can hide content that doesn’t contribute to the core message

사이트에서 가장 중요한 부분은 핵심 메시지입니다. 예, 일부 사이트에서 가장 중요한 부분은 광고이며 해당 광고를 전달하기 위해서만 존재하지만 핵심 메시지 표시 또는 광고 표시 중에서 선택해야하는 경우 메시지를 선택하십시오. Google은 귀하를 인물이 아닌 grata if you hide core content and then serve up a bunch of ads. It’s because that core content is what Google indexed you based on, and when that content is not shown, Google looks at that as deceptive.

Additionally, things like images that are purely decorative or aesthetic, but which don’t contribute significantly to the core message, are candidates for reduction or hiding altogether.

Some people have proposed that hiding content is “punishing” mobile users, but this is a bit of an absurd notion. The reality is that you’re hiding the content because it’s there to enhance the desktop experience, but doesn’t sufficiently contribute to the core message of the site for it to be necessary

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

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

이것은 웹 디자인에서 나쁜 습관입니다. 레이아웃에 맞게 콘텐츠를 디자인합니다. 레이아웃은 항상 be designed to hold the content. If for some reason the layout can’t hold the content, then the layout should be redesigned, not the content. It’s quite possible to use different backgrounds for different devices. You’re a designer. Use your imagination.

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

The customer is always right, except when that customer is a web design client. Clients rarely know what is best for them, and it’s important to assert yourself as a web designer who knows how to deliver the right result for the client. Otherwise 또 다른 웹사이트를 만들 위험이 있습니다. 질색.

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

This is a complex problem. The collapse order of a site depends on the order in which the divs are stacked. You need to stack your divs in the correct order so that they’ll collapse in the correct order.

One of the problems that comes from drag-n-drop WYSIWYG website builders is that you can’t normally dictate what order the divs get stacked in, and in the very rare instances where you can do that, your hard work gets undone every time you make the smallest edit, and you’ll have to go back in and hack the source code again.

If you don’t control the collapse order, 이 이미지 무엇이 잘못 될 수 있는지 명확하게 설명합니다. 또한 모바일에서 왼쪽 또는 오른쪽에 있던 모든 항목이 위 또는 아래로 이동할 수 있으므로 공간 참조 (예 : "왼쪽 열에서")를 피해야합니다. ...을 더한 if you make the reader think it’s important enough to scroll to see, then they’ll have to scroll back again, and that’s not cool.

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

It’s easy to control font size with CSS and you can set different font sizes and even different font faces (if they’ll look better) for particular sizes of display. You can find the display size with CSS media queries, and then you modify the font size or font face to be at values that would display the content to maximum advantage on the device type you’re targeting.

8. It’s best to use responsive 형상

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

헤더 이미지 제공

보그 단 란 세아

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

코멘트 1 응답

  1. MP 말한다 :

    모바일 우선은 코드 기반에서 "기본" CSS가 모바일용이고 더 넓은 범위에 대한 변경 사항을 빌드한다는 것을 의미합니다. format거기에서 s. 나는 당신의 첫 번째 요점을 정말로 이해하지 못합니다.

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *

평점 *

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.