Elementor의 반응형 웹사이트 생성 워크플로

이 기사에서는 Elementor로 구축할 때 모든 장치 유형과 화면 크기에 대해 반응성이 뛰어난 웹 사이트를 만드는 방법에 대해 논의하고 싶었습니다. 이것은 우리의 개별 대행사 워크플로이며 지난 몇 년 동안 운영해 왔습니다.

이것이 귀하의 비즈니스와 디자인에 도움이 될 수 있다고 생각되면 자유롭게 채택하십시오. 우리가 구축하는 대부분의 웹사이트는 단순한 5페이지짜리 기업 방문이 아니라 상당히 복잡합니다. 이러한 단계 중 일부는 복잡한 전자 상거래 상점이나 콘텐츠 웹 사이트를 구축할 때 매우 유용하지만 더 간단한 사이트를 구축할 때는 시간과 비용을 절약하기 위해 생략할 수 있습니다.

모형

반응형 웹 디자인의 첫 번째 단계는 조롱하는 것입니다. Adobe XD를 사용하여 웹사이트 목업을 만들고 모바일 퍼스트 이념으로 디자인합니다. 이것이 의미하는 바는 사이트의 데스크톱 버전에 대해 생각하기 전에 모바일 목업을 만들고 진행한다는 것입니다. 모든 웹사이트 트래픽의 60%가 모바일 브라우저에서 발생합니다. 즉, 데스크톱을 올바르게 만드는 것보다 이것이 더 중요합니다.

약간 구식이지만 변화하는 추세를 보여줍니다.

그런 다음 해당 모형을 가져와 태블릿 크기로 확장한 다음 데스크톱 크기로 확장합니다. 사이트의 데스크탑 버전은 사이트의 모바일 버전과 상당히 다르게 보일 수 있지만 DOM 요소의 수를 줄이고 모든 것을 반응형으로 유지하기 위해 모두 동일한 섹션과 구조를 가지고 있습니다.

모바일 우선 사고 방식을 디자인함으로써 웹사이트의 해당 측면이 첫날부터 완벽함을 보장할 수 있습니다. Adobe XD를 사용하여 우리 에이전시는 서로 쉽게 협업하고 피드백을 위해 모형을 공유하고 디자인하는 동안 개인 휴대폰에서 볼 수도 있습니다.

특히 복잡한 프로젝트를 위한 반응형 웹사이트 디자인의 경우 웹사이트를 정적으로 조롱하는 것이 매우 중요합니다. 사이트 조롱에 대한 기사는 https://isotropic.co/is-making-a-website-mockup-worth-it/에서 읽을 수 있습니다.

목업이 완료되고 사용자 입력 그룹, 클라이언트 및 에이전시 팀에서 테스트했으면 Elementor에서 실제로 만들 차례입니다.

이것이 반응형 웹사이트 제작의 가장 중요한 측면입니다. 바로 실제로 구축하는 것입니다.

Elementor를 사용한 반응형 웹사이트 제작

웹사이트를 구축할 때 먼저 데스크탑 형태의 기본 구조를 정의합니다. 그러나 모바일에서 태블릿, 데스크톱으로 콘텐츠를 채우게 됩니다.

이런 식으로 하면 이 구조가 모든 크기의 화면에서 작동하는지 확인할 수 있고 모바일 우선 정신으로 콘텐츠를 채움으로써 휴대폰에서 처음부터 좋아 보일 것이라는 것을 압니다.

다양한 화면 크기에서 모든 것이 잘 보이도록 Elementor와 함께 제공되는 내장된 "반응형 숨기기" 기능을 사용합니다. 빌더의 고급 설정 탭에 있습니다. 그러나 요소를 숨길 때 주의해야 합니다(이는 그래픽 사용자 인터페이스에서 CSS display:none을 사용하는 것뿐입니다). 모든 요소가 계속 로드되기 때문입니다. 모바일에서 웹페이지의 절반을 숨기면 웹사이트 속도에 심각한 영향을 미칠 수 있으므로 주의해야 하며 가능한 한 간결한 사이트를 만들어야 합니다.

현재 버전의 Elementor는 3개의 반응형 중단점과 함께 제공됩니다. 어떤 상황에서는 이 세 가지 중단점이 고품질 반응형 디자인으로 끝나기에 충분합니다. 그러나 다른 도구로 디자인할 때 최대 6개의 개별 중단점을 사용합니다. Elementor는 이를 즉시 수행할 수 없도록 하므로 CSS 미디어 쿼리를 사용하는 데 어려움을 겪고 있습니다.

참고로 Elementor 개발자가 추가 중단점을 기본 기능으로 추가하도록 투표하세요 .

운 좋게도 우리는 이렇게 개발하는 것이 더 빠르기 때문에 수많은 사용자 정의 CSS를 사용합니다. 그러나 CSS에 익숙하지 않거나 사용하기 싫다면 프로젝트에 사용자 지정 중단점을 추가할 수 있는 플러그인 모음이 있습니다. 과거에 우리는 Piotnet 애드온(이전에 링크된 기사에서 이야기함)을 특별히 사용했는데, 그 이유는 엄청난 타사 요소가 있고 도구가 사용자 정의 중단점 유틸리티와 함께 ​​제공되기 때문입니다.

그러나 모바일 중단점을 추가하기 위해 다른 Piotnet 라이선스를 구입하지 않을 것입니다. CSS 미디어 쿼리는 이를 수행하는 더 빠르고 저렴한 방법입니다.

반응형 디자인과 관련하여 사용할 수 있는 또 다른 도구는 CSSHero입니다. CSSHero를 사용하면 멋진 그래픽 사용자 인터페이스를 사용하여 기본적으로 수많은 사용자 정의 CSS를 생성할 수 있습니다. 우리는 과거에 이것을 사용했고 우리의 작업 흐름에 상당히 도움이 되었습니다. 여기에서 우리의 생각을 읽을 수 있습니다.

특정 콘텐츠 요소를 추가할 때 모든 반응형 디자인 모범 사례를 따르려고 노력합니다.

예를 들어 VH, VW 또는 백분율을 사용하여 특정 요소의 크기를 조정합니다. 픽셀 크기는 고유한 화면 크기에서 웹사이트의 반응형 측면에 부정적인 영향을 줄 수 있으므로 가능한 한 픽셀 크기를 피하려고 합니다.

가능하다면 가장 반응이 빠른 SVG를 사이트의 아이콘과 기본 그래픽에 사용하려고 합니다. 이미지는 폭파되면 열화되고 SVG는 그렇지 않습니다(대부분의 이미지보다 훨씬 작아 로딩 시간이 훨씬 빨라짐).

우리는 모든 유형학적 요소에 REM을 사용하는 것을 정말 좋아합니다. REM은 기본 HTML 텍스트 값만 사용하고 사이트를 확장하거나 축소합니다. 예를 들어, 대부분의 브라우저에서 일반적인 기본 글꼴 크기는 16픽셀이므로 하나의 REM은 16픽셀과 같습니다.

물론 이러한 글꼴 크기는 특히 데스크톱과 모바일을 비교할 때 브라우저마다 다릅니다. 여러 화면 크기에서 볼 수 있고 읽을 수 있는 반응형 텍스트 크기를 얻을 수 있기 때문에 우리에게는 매우 좋습니다.

Google에는 반응형 디자인 모범 사례에 대한 수많은 기사가 있으므로 관심이 있는 경우 검색하면 됩니다. 핵심은 방문자를 염두에 두고 모바일에서 단순하게 유지하며 요소가 데스크톱과 모바일 장치 간에 연속적으로 유지되도록 하는 것입니다.

비율 및 REM과 같은 상대적 측정을 사용하여 요소가 화면 크기 요구 사항을 충족하도록 적절하게 확장 및 축소되도록 하십시오.

모바일 속도 최적화

웹사이트의 일반 버전을 만든 후에는 속도를 최적화할 때입니다. Elementor 웹사이트를 더 빠르게 로드하는 방법에 대한 수많은 기사와 리소스가 있지만 모바일 브라우징과 관련하여 확실히 집중해야 할 몇 가지 사항이 있습니다.

모바일 장치는 전력이 적고 인터넷 속도가 느립니다. 즉, 이러한 유형의 사이트는 일반적으로 데스크톱 웹 사이트보다 로드 속도가 훨씬 느립니다. 이것은 알려진 사실이지만 가능한 한 완화해야 하는 것입니다. 그렇지 않으면 방문자가 귀하의 웹사이트를 방문하지 않을 것입니다. 인간의 주의 집중 시간은 6초에 불과하며 사이트는 2초 안에 로드되어야 합니다.

모바일 속도를 위해 Elementor를 최적화할 때 가장 중요한 두 가지는 글꼴과 이미지입니다.

글꼴을 사용할 때 글꼴은 항상 미리 로드되고 .woff .woff2 파일 형식을 사용해야 합니다. 이것은 대부분의 모바일 브라우저와의 호환성을 보장하며 이러한 파일 형식은 작고 빠르게 로드됩니다. Elementor 웹사이트에서 모든 글꼴을 적절하게 최적화하기 위해 로컬에서 호스팅하거나 WP Rocket을 사용하여 빠르게 사전 로드합니다.

이미지는 일반적으로 모바일 웹사이트의 로딩 속도에 가장 큰 부정적인 영향을 미칩니다. 적절하게 최적화되고 WebP와 같은 차세대 형식으로 제공되는지 확인해야 합니다. 이것은 실제로 수동으로 할 수 있는 일이 아니지만 다행스럽게도 이미지를 자동으로 최적화하고 변환하는 데 전념하는 수많은 서비스가 있습니다.

모바일 웹사이트에서 이미지를 빠르게 로드할 수 있는 go to 도구를 ShortPixel이라고 합니다. 설치하고 큰 빨간색 최적화 버튼을 클릭하기만 하면 모든 이미지를 압축 및 변환하고 CDN을 통해 제공하여 모바일 Elementor 웹사이트에서 가능한 가장 빠른 로딩 시간을 보장합니다.

사이트 테스트

지금까지 우리는 웹사이트를 구축하고 모바일에서 보기 좋게 보이도록 하고 속도에 최적화했습니다. Elementor용 모바일 개발 워크플로의 마지막 단계는 테스트입니다. 이것은 반응형 웹사이트 프로젝트에서 가장 중요한 부분입니다. 이제 반응형 디자인이 모든 유형의 화면 크기에서 잘 보이는지 테스트해야 하기 때문입니다.

과거에는 화면 크기가 거의 표준화되지 않았습니다. 큰 노트북, 작은 노트북, 태블릿 및 모바일 장치가 있습니다. 이제 거의 모든 랩톱마다 고유한 화면 크기와 가로 세로 비율이 제공되며 모바일 장치는 엄청나게 길고 긴 화면 크기에서 짧고 굵은 화면 크기에 이르기까지 다양합니다. 많은 종류가 있으며 모바일 디자인이 모든 유형의 화면 크기에서 잘 작동하도록 하는 것이 귀하의 임무입니다.

Elementor 웹사이트에서 모바일 반응형 디자인을 테스트하기 위해 여러 도구를 사용합니다.

파이어폭스 개발자 에디션

Firefox 개발자 에디션과 함께 제공되는 개발자 도구는 매우 강력하고 사용하기 쉽습니다. 반응형 디자인의 경우 Firefox 개발자 도구를 사용하여 특정 표시 영역 크기를 에뮬레이트합니다.

이 방법의 주요 문제를 식별하면 특정 요소에 적용되는 CSS를 쉽게 편집할 수 있고 빠른 수정이 가능한지 확인할 수 있습니다.

브라우저 스택

Browserstack은 에이전시 및 엔터프라이즈 사용에 더 적합하며 최대 2000개의 실제 장치와 브라우저 사이에서 개발 사이트를 테스트할 수 있습니다. 실제 장치와 수십 개의 브라우저를 실행하여 기존 장치 또는 브라우저에서 발생할 수 있는 문제를 식별할 수 있습니다. 비용은 월 $29.00이며 무료 평가판도 있습니다. 이와 같은 도구를 사용할 수 있다고 생각되는 특정 프로젝트에서 작업 중이라면 해당 평가판을 살펴보는 것이 좋습니다.

소규모 대행사 또는 프리랜서인 경우 100분 테스트에 대해 월 $12.00의 할인된 가격으로 액세스할 수 있습니다. 마지막으로 Elementor를 사용하는 경우에는 그렇지 않은 오픈 소스 프로젝트가 있는 경우 무료 테스트에 액세스할 수 있습니다.

반응적으로

이 최종 테스트 도구는 최근 도구 상자에 추가되었지만 반응형 Elementor 웹 디자인 워크플로에서 가장 중요한 측면 중 하나입니다. Responsive는 최대 30개의 사전 설정된 장치 화면 크기를 쉽게 미리 보고 브라우저에서 직접 개발 도구를 사용할 수 있는 오픈 소스 프로젝트입니다. 모든 화면 크기, 사용자 정의 가능한 레이아웃 및 수많은 장치 간의 미러링된 상호 작용과 같은 고유하고 고급 기능이 많이 있습니다. 또한 크롬 개발자 도구 콘솔을 얻을 수 있으므로 CSS를 쉽게 편집할 수 있습니다.

이것은 Elementor 웹사이트의 반응형 버전에서 잠재적인 문제를 식별하는 데 사용하는 최종 도구이며 확실히 살펴봐야 합니다. 이 도구는 브라우저 확장 및 독립 실행형 응용 프로그램으로 다운로드됩니다. 브라우저 확장을 클릭하면 응용 프로그램에서 웹 사이트가 열립니다.

결론

마지막으로, 수십 개의 장치, 뷰포트 및 브라우저를 통해 Elementor로 구축된 반응형 디자인을 테스트한 후 마침내 변경 사항을 라이브로 적용할 수 있을 만큼 자신감이 생겼습니다.

이로써 Elementor와 관련하여 반응형 디자인을 위한 워크플로가 완료되었습니다. 이것이 흥미롭다면 자신의 루틴에 자유롭게 적용하십시오. 자신만의 워크플로가 있다면 아래 댓글 섹션에 자유롭게 게시해 주세요. 다른 제작자가 element door를 사용하는 데 도움이 될 수 있습니다.