모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부]

모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부]

모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부]
СОДЕРЖАНИЕ
02 июня 2020

핵심적으로 WordPress 테마를 구성하는 것은 다소 간단한 작업입니다. WordPress는 매우 친숙한 환경을 제공하며 어떤 목적으로 어떤 PHP 기능을 사용해야하는지 명확하게합니다..


하나. 간단하지만, 쉽지 않다, 특히 테마를 모바일에 최적화하려는 경우.

빠르게로드되고 예측 가능한 방식으로 작동하며 (가장 중요한 것) 다른 장치를 사용하는 사람들이 사용자에게 친숙하고 액세스 할 수있는 고품질 제품으로 끝내고 싶다면 극복해야 할 다양한 고유 문제가 있습니다. 화면 크기.

이 두 부분으로 구성된이 안내서는 10 단계로 프로세스를 안내하며, 모바일 우선 성능 중심의 WordPress 테마를 빌드 할 때주의해야 할 사항을 나열합니다..

2 부에 대해서는 여기를 참조하십시오 : 모바일을 우선으로하는 성능 중심의 워드 프레스 테마 [파트 2]

1. 내용이 우선

많은 디자인 디테일을 보여 주거나 멋진 디자인 요소를 사용하기위한 모바일 공간은 그리 많지 않습니다..

최신 장치는 최대 1136 x 640 픽셀 (iPhone 5s)의 그래픽을 표시 할 수 있지만 화면이 여전히 4 인치에 불과하다는 것을 잊지 마십시오. 이것은 작업 할 부동산이 많지 않습니다..

해야 할 일 :

  • 컨텐츠 프리젠 테이션에 필수적이지 않은 모든 추가 디자인 요소 제거,
  • 모바일 기기의 화면 크기가 다르기 때문에 디자인 캔버스에서 기본 콘텐츠 블록을 최대한 높게 설정해야합니다. "겹" 정확히 올 것이다),
  • 타이포그래피 및 내용을 읽을 수있게 만드는 데 중점을 두십시오 (글꼴 크기는 늘리지 만 한 줄의 텍스트를 너무 짧게 읽을 수 없도록주의하십시오),
  • 명암 대비 – 텍스트와 배경 비교 (특히 햇볕이 잘 드는 곳에서 누군가가 페이지를 읽으려고 시도하는 경우 모바일 장치에 중요 함).

2. 이미지를 최적화

이미지 최적화는 다른 시나리오보다 모바일에서 훨씬 중요합니다. 문제는 누군가가 모바일을 통해 사이트에 액세스하려고 할 때 아마도 3G 연결이 느리다는 것입니다. 따라서이 사실과 상관없이 테마를 사용하면 이미지를 비교적 빠르게로드 할 수 있어야합니다..

할 수있는 구체적인 일 :

  • 지연로드 기능 통합을 고려하십시오. 자체적으로 게으른 로딩은 훌륭합니다 (방문자가 이미지를 스크롤 할 때만 이미지로드). 그러나 문제는 최종 사용자가 최종 사이트 자체에 게으른로드 플러그인을 설치하게 될 수 있다는 것입니다. 이것은 테마에 이미 통합 된 모든 것을 방해 할 수 있습니다. 그러나 위험을 감수하고 싶다면 jQuery와 같은 솔루션을 통해 기능을 구현하는 것이 가장 좋습니다. 게으른로드 플러그인. 워드 프레스 플러그인은이 라이브러리를 사용하는 경향이 있으므로 두 개의 서로 다른 스크립트가 동일한 결과를 얻으려고 할 때 문제가 발생할 가능성을 최소화하고 있습니다. 또한 테마 설정에서 지연로드를 비활성화 할 수 있습니다.
  • 크기와 품질에 맞게 이미지를 최적화하십시오. 이미지는 일반적으로 평균 사이트에 대한 대부분의 대역폭 소비를 설명하므로 테마 작성자는 이미지를 최대한 최적화해야합니다. 이를 위해 두 가지 작업을 수행 할 수 있습니다. (1) 이미지가 필요한 것보다 크기가 크지 않은지 확인하십시오 (# 3 참조) – 여기에 여분의 픽셀이 있고 매우 빠르게 누적 될 수 있습니다. (2) 최적화 같은 도구를 통한 모든 이미지 최적 또는 TinyPNG 주제를 공개하기 전에.
  • 가능하면 아이콘 글꼴을 사용하십시오. 모든 디자인에 아이콘을 포함하는 오래된 학교는 Photoshop에서 아이콘을 작성하고 모든 것을 PNG 또는 GIF로 변환하여 롤아웃하는 것이 었습니다. 그러나 오늘날에는 가장 최적화 된 솔루션이 아닙니다. 다음과 같은 도구로 멋진 글꼴, 수백 가지의 아름답게 디자인 된 글꼴로 디자인을 강화할 수 있으며 동시에 성능을 매우 적절하게 유지할 수 있습니다.

3. 디자인을 Retina-ready로 만듭니다 (DPI가 높은 화면에 최적화)

요즘 거의 모든 새로운 장치에 높은 DPI 디스플레이가 제공됩니다. 이러한 화면은 모든 것을 매우 선명하게 보이게하지만 문제가되는 항목이 높은 DPI 시청에 최적화 된 경우에만 가능합니다. 그렇지 않으면, 사용자는 많은 픽셀 화를 보게 될 것이며 이것은 전반적으로 매력적이지 않을 것입니다.

높은 DPI 최적화를 위해 취할 수있는 두 가지 주요 단축키가 있습니다.

  • 위에서 언급 한 이미지 글꼴을 사용하십시오. 이미지 글꼴이 자동으로 확장되어 모든 장치에서 멋지게 보입니다..
  • 크기가 2 배인 다른 모든 이미지의 대체 버전을 작성하고 높은 DPI 장치를 사용하여 컨텐츠를 볼 때마다 CSS로 교체하십시오.. 여기 가이드가 있습니다 당신이 이것을 할 수있는 방법에.

마지막으로, 테마의 파비콘도 관리해야합니다 (그리고 사용자가이를 변경할 수도 있지만 이는 또 다른 것입니다).

그 당시에는 16 × 16 PNG 이미지가 하나만 있으면 ICO로 변환하면 모든 준비가 완료되었습니다. 지금은 훨씬 더 복잡합니다. 예를 들어, 새로운 Apple 기기는 더 큰 아이콘을 찾은 다음이를 책갈피로 사용하려고 시도합니다..

iOS가 기대하는 파비콘 크기 중 일부는 76×76, 120×120, 152×152입니다. 여기에 Apple.com의 전체 목록.

이 아이콘을 손으로 만들거나 다음과 같은 도구를 사용할 수 있습니다 리얼 파비콘 생성기. 하나의 스타터 이미지 만 있으면되며 다른 모든 버전을 생성하는 기본으로 사용됩니다. 이 외에도 테마에 아이콘을 포함시키기위한 올바른 HTML 코드를 얻을 수 있습니다..

태핑을위한 4. 최적화

우리는 대부분의 모바일 장치가 터치 인터페이스를 지원하거나 완전히 터치 스크린 기반이라는 것을 기억해야합니다. 이것이 의미하는 바는 탭 가능한 모든 요소를 ​​충분히 크게 만들어 사용자가 쉽게 액세스 할 수 있어야한다는 것입니다..

예를 들어, 텍스트 링크는 사용자가 정확하게 탭하기 위해 많은 노력을 기울여야하기 때문에 터치 최적화가 쉽지 않습니다. 테마 인터페이스 용 버튼과 함께 사용하는 것이 더 나은 디자인 선택입니다. 상대적으로 큰 버튼과 터치 면적이 큰 버튼.

명심해야 할 또 다른 사항은 사용자가 대부분의 엄지 손가락으로 탭핑을 수행하므로 메인을 배치하는 것이 좋습니다 "행동을 요구하다" 쉽게 접근 할 수있는 엄지 영역의 버튼. 예를 들어 여기 iPhone에서 어떻게 재생되는지.

5. 테마를 반응 형으로 만드는 것이 중요한 것은 아닙니다

모바일 테마를 디자인 할 때 사람들이 저지르는 가장 일반적인 실수로이 가이드의 첫 부분을 끝내겠습니다. 실수는 반응 형 디자인을 최고의 최종 게임으로 취급합니다.

물론 비표준 장치 및 화면 크기를 처리 할 때 테마를 반응 형으로 만드는 것은 큰 이점이지만 마법 같은 솔루션과는 거리가 멀습니다. 디자인이 반응 형이라고해서 모바일에서 성능이 우수하다는 의미는 아닙니다. 예를 들어 이미지 최적화 문제를 해결하지 못하거나 버튼을 정확하게 누르기가 어렵다는 사실 등.

그렇습니다. 테마를 반응 형으로 만들려면 가능한 한 최선을 다해야합니다. 동시에이 안내서에서 진행중인 다른 요소를 최대한 활용하여 모바일 친화적 인 디자인을 극대화하십시오..

두 번째 부분을 조정하여 나머지 목록을 가져 오십시오 (우리는 UX 디자인, 탐색, JS를 사용하여로드 시간을 최적화하고 덜 알려진 WordPress 기능을 활용하여 그리고 더). 그동안, 모바일을 설계 할 때 가장 큰 과제는 무엇입니까?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    [초보자를위한 워드 프레스 코스] Udemy vs Lynda vs Treehouse vs Skillshare כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    WordPress의 기계 학습 : AI를 사용하여 콘텐츠의 감정적 영향을 분석하는 방법 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    2020 년에 웹 사이트를 안전하게 유지하기위한 25 가지 간단한 워드 프레스 보안 요령 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    Adblock
    detector