적응 형 디자인 (반응 형 디자인)

적응 형 디자인

태블릿과 휴대폰을 통해 인터넷에 액세스하는 사용자가 증가하고 있습니다. 이것은 이미 알고 있듯이 컴퓨터에서보기 좋은 웹 페이지를 디자인하는 것만으로는 충분하지 않습니다. 또한 각 모바일 장치에서도 표시되어야합니다. 문제? 화면 크기와 해상도가 다릅니다. 그렇기 때문에 모든 미디어 (유명한 미디어)에 올바르게 적용되는 디자인을 만들기가 어렵습니다. 응답 디자인, 다음으로 번역됨 적응 형 디자인).

다음은 이러한 특성을 가진 디자인을 만들 때 명심해야 할 몇 가지 팁입니다. 주의하세요!

적응 형 디자인을위한 팁

  1. 간단한 템플릿 만들기간단히 말해서 나는 단조로운 것을 의미하지 않습니다. 나는에 대해 이야기하고있다 구조 웹 사이트의 HTML : 명확할수록 좋습니다. 컴퓨터 화면은 세 개의 세로 열에 맞을 수 있습니다. 모바일 화면에서는 하나만 맞출 것입니다. 그것에 대해 생각하고 요소를 재배치하는 방법을 생각하십시오.
  2. 불필요한 모든 것을 제거하십시오페이지로드 속도를 늦추는 jQuery 효과, Flash 애니메이션 및 기타 코드를 피하십시오. 이 유형의 콘텐츠가 적을수록 웹이 더 빨리로드됩니다.
  3. 스타일 정의 각 "크기"에 대한 CSS보고있는 장치를 기반으로 실행되는 tiny.css, small.css 및 big.css (예 :)를 만듭니다. 예를 들면 :

    @import url (tiny.css) (최소 너비 : 300px);

    @import url (small.css) (최소 너비 : 600px);

    @import url (big.css) (최소 너비 : 900px);

  4. 가장 많이 사용되는 해상도320픽셀 / 480픽셀 / 720픽셀 / 768픽셀 / 900픽셀 / 1024픽셀
  5. 템플릿을 유연하게 만들기가능할 때마다 고정 금액 대신 백분율로 작업하십시오. 다음은 참조 등가물입니다. 200px = 15'38 % / 300px = 23'07 % / 800px = 61'5384615384 %
  6. 타이포그래피 그 어느 때보 다 중요합니다. 때로는 장치 화면이 너무 작아서 텍스트 만 볼 수 있습니다. 그렇기 때문에 사이트에서 최고의 글꼴을 매우 신중하게 선택해야 크기가 줄어들 때 가독성을 잃지 않습니다. 또한 웹에 필요한 특성을 부여하는 개성을 가진 다른 글꼴과보다 중립적 인 글꼴을 결합하는 방법을 알아야합니다. 따라서 첫 번째 팁은 사용할 글꼴을 선택하는 데 시간을 소비한다는 것입니다.
  7. 미국 고품질 이미지공간이 줄어들면 이미지도 함께 제공됩니다. 축소해도 품질이 떨어지지 않고 크기를 조정할 때 동일하게 작동하는 항목을 선택합니다. 품질이 좋지 않은 이미지는 웹 사이트를 나쁘게 만듭니다.
  8. 당신의 이미지는 항상 보입니다 완전한CSS에 img (너비 : 100 %;) 코드를 추가하여 사진이 잘리는 것을 방지하세요. 이런 식으로 이미지에 부여 할 높이를 다시 계산하여 너비가 XNUMX % 표시되도록 장치에 지시합니다.
  9. 모두 낮음 동일한 URLwww.mysite.com/mobile과 같은 하위 도메인은 잊어 버리세요. 루트 폴더에있는 동일한 index.html 파일이 모든 장치에서 작동하기 때문입니다 (적응 형 디자인을 올바르게 수행 한 경우). 이점은 이미 알고 있습니다. 하위 도메인이 적을수록 페이지로드가 빨라집니다.
  10. 지원 활용: 상상력을 발휘하십시오. 데스크톱 컴퓨터에서 웹 사이트에 액세스하는 것은 iPad 또는 휴대폰 에서와는 다릅니다. 첫 번째를 사용하면 차분하고 편안한 방식으로 탐색 할 수 있습니다. 후자를 사용하면 유휴 시간에 작업을 수행하고 지루해지면 창을 닫습니다. 이러한 조건을 활용하여 사용자를 즐겁게하고 그들이 당신에게 바칠 몇 분 동안 재미있게 만드십시오. 그가 집에 돌아 오면 더 편안한 방법으로 당신을 다시 방문하기로 결정할 것입니다.
  11. 영감을 얻으십시오 디지털 출판물에서이 조언이 왜 궁금 할 것입니다. 아주 쉽게: 디지털 잡지 (좋음) 지원을 활용하는 방법을 알고 있으며 디자인이 매우 지능적입니다. 그들로부터 영감을 얻고 떠나기 어려운 웹 사이트를 만드십시오.

추가 정보 - 디지털 잡지

출처- 스플리오, 960.gs, 기둥 형


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

3 코멘트, 당신의 것을 남겨주세요

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.

  1.   디닥 리오스

    별로 동의하지 않는 것이 있습니다.
    포인트 5에서 ... 200px = 15,38 % 및 다음 항목이 있기 때문에 ...이 참조 비교는 부모 측정 없이는 수행 될 수 없습니다. 픽셀 당 크기는 백분율과 같은 상대적 측정이 아닙니다!

    너비가있는 이미지를 지정하십시오 : 100 % 잘못되었습니다. 권장 사항이 아니라고 생각합니다. 이미지는 너비와 높이로 이미지를 더 잘 정의하므로 서버가 정보를 처리하는 데 시간이 덜 걸리고 (크기를 계산할 필요가 없음) 페이지로드 속도가 향상됩니다 (적응 형 또는 반응 형 웹 디자인에서 매우 중요한 것). ).

    나는 이미 코 작업이지만 망막 스크린의 이미지를 포함합니다. 반응 형 웹 디자인을 수행하려면 모바일 및 태블릿보기의 높은 %가 이러한 화면을 사용하기 때문에 레티 나 디스플레이에 이미지를 사용해야합니다. 따라서 하프 스로틀에서 그들을 위해 디자인에 노력을 기울일 필요가 없습니다.

    나머지에 좋습니다

    1.    디닥 리오스

      요점 5에서 그들은 당신을 맥락에 놓고 1300, 3 및 200 중 하나 인 300 개의 열이있는 1000px의 총 레이아웃에 대해 알려줍니다.

      백분율로 전달하면 15,38 % ((200 * 100) / 1300) (아래 XNUMX 진수, 국제 시스템 : P)

      그러나 500px 레이아웃에 대해 이야기하고 3 개의 열, 즉 200 개 중 하나, 200 개 중 다른 하나 및 100px 인 경우 백분율이 더 이상 동일하지 않습니다.이 경우 200px = 40 % ((200 * 100) / 500)

      200px = 40 % 및 100px = 10 %입니다.

      내가 언급했듯이 그것들은 당신이 나타내는 참조가 아니라 1300px 레이아웃에 대한 참조 일뿐입니다.

      안부

      1.    루아 루로

        당신은 세상에서 절대적으로 옳습니다! 다시 한 번 감사드립니다.)