웹 사이트의 모바일 버전을 만드는 방법

웹 사이트의 모바일 버전을 갖는 것은 요즘 필수이며 모바일 장치에서 웹 프로젝트에 액세스 할 수있는 유일한 확실한 방법입니다. 그래서,만약 당신이 바로 웹 사이트를 시작 하려고,당신은 그것을 성공 하기 위해이 문제를 계정에 바인딩됩니다. 이미 웹 사이트를 가지고 그것을 모바일 친화적 만들기 위해 그것을 업데이트 할? 아래에 제공된 정보는 또한 당신에게 유용 할 것입니다.

오늘 모바일 웹 사이트를 시작하는 방법에는 여러 가지가 있습니다. 가장 적합한 솔루션의 선택은 웹 사이트 유형,연령 및 특성,자신의 웹 디자인 목표,기술 및 요구 사항과 같은 여러 요소에 따라 다릅니다. 가장 널리 퍼진 솔루션은 다음과 같습니다:

• 사용자가 데스크톱 및 모바일 장치에서 동일한 웹 사이트(특수 웹 사이트 관련 규칙에 따라 다르게 표시됨)를 방문할 때 응답형 디자인 생성;
• 모바일 전용 방식을 기반으로 별도의 모바일 웹 사이트 버전,일관되게 작동하고 심지어 다른 도메인/하위 도메인에서 호스팅 할 수있는 두 개의 인터페이스가있는 경우;
• 본격적인 모바일 앱은 특정 플랫폼 용으로 개발 된 사전 설계된 아키텍처를 갖춘 독립 실행 형 제품이거나 하나의 웹 사이트에만 적용 할 수있는 별도의 미리보기 도구(웹 브라우저와 같은)일 수 있습니다.

이러한 옵션은 모바일 웹 사이트 제작에 적합합니다. 가장 적합한 솔루션을 선택하는 것은 소유자에게 달려 있습니다. 이제 모바일 프로젝트 개발의 가장 널리 퍼진(그리고 가장 편리한)방법을 살펴 보겠습니다.

웹 사이트의 모바일 버전을 만드는 방법(웹 사이트 빌더)

아직 웹 사이트가없는 경우,그것은 반응 디자인 지원과 함께 제공 및/또는 별도의 통합 모바일 편집기가있는 서비스를 선택하는 것이 합리적이다. 웹 사이트 빌더는 이러한 플랫폼이 대부분 모바일 친화적 인 웹 사이트 개발을 위해 만들어 지므로 처음에는 기본적으로 모든 블록,위젯 및 인터페이스 요소가 반응하게되므로 이러한 목적에 가장 적합합니다. 그 결과,그들과 함께 내장 된 프로젝트는 별도의 모바일 버전을 만들 필요없이 데스크톱 및 모바일 화면에 큰 표시합니다. 의 윅스 웹 사이트 빌더의 사용을 통해이 옵션을 검토 할 수 있습니다.윅스 데스크톱 편집기

윅스는 블로그,포트폴리오,방문 페이지,비즈니스 웹 사이트 또는 웹 스토어와 같은 모든 유형의 웹 프로젝트를 시작/관리 할 수있는 세계적으로 인기있는 올인원 웹 사이트 빌더입니다. 모든 광범위한 갤러리에서 사용할 수있는 템플릿뿐만 아니라 사용자가 자동으로 모바일 브라우징에 맞게 처음부터 만드는 웹 페이지(지금까지 여기에 550 이상이있다).

여기에 데스크톱 및 모바일 웹 사이트 버전을 별도로 설정할 수 있지만 아직 태블릿 미리보기 옵션이 없습니다. 여기서 할 수있는 일은 선택한 블록과 인터페이스 요소를 숨기고 여기에 고유 한 배경을 수정/설정하는 것입니다. 무엇보다,윅스는 다음과 같은 특정 모바일 관련 기능을 가지고 있습니다:

• 빠른 실행 패널 표시(전화 통화 버튼,소셜 네트워크/메신저 링크 등을 추가 할 수 있습니다. 여기);
• “위로”버튼;
• 시작 화면(감정적 인 인사를 표시하거나 실제로 웹 사이트에 액세스하기 전에 브랜드/상표를 도입 할 수있는 애니메이션 로딩 화면의 일종);
• 크롬 브라우저 패널에 대한 사용자 정의 색 구성표;
• 모바일 장치를위한 자동화 된 콘텐츠 및 웹 페이지 레이아웃 최적화 서비스(이것은 경험이없는 디자이너가 만든 웹 페이지에 매우 편리한 옵션입니다).

윅스는 또한 당신이 전문 비즈니스 도구에 대한 액세스를 포함하는 구독을 얻을 경우,웹 사이트를 관리 할 수있는 모바일 앱이 있습니다.

다른 씨엠에스와 마찬가지로,워드프레스는 웹사이트에 접속하는 데 사용되는 장치에 주의를 기울이지 않습니다. 이 플랫폼은 기본 설정에 지정된 설계 변형을 제공합니다.

워드 프레스는 여전히 모바일 장치에 적응할 수있는 관리 패널의 디자인(이 웹 사이트는 방문자뿐만 아니라,편집,설정 및 모바일 장치에서 콘텐츠를 채울 수있을 것입니다 소유자뿐만 아니라 편리 할 것이라는 점을 의미한다)그 중 하나이기 때문에 여기에 웹 개발자의 서비스를 강조하는 것이 합리적이다. 또한 스마트폰용 애플리케이션도 있습니다.WordPress.com 플랫폼도 마찬가지다.

결과적으로 모바일 웹 사이트 버전은 99%의 경우 템플릿 자체의 장점으로 입증되었습니다. 유일한 예외는 사용자를 별도의 모바일 테마(예:화면 해상도 또는 장치 모델 기준)로 리디렉션 할 수있는 특수 플러그인 또는 스크립트입니다.

처음부터 워드 프레스와 모바일 웹 사이트 버전을 만드는 방법

당신은 단지 웹 사이트를 시작하려는 경우,문제는 급성 아니다–당신은 바로 템플릿을 선택해야합니다. 이 테마를 즐길 희망. 선택한 디자인이 선언 된 기능을 절대적으로 준수하는지 확인해야합니다. 같은 다른 플랫폼에 관한 것입니다.숲 또는 템플릿 괴물.로드 속도 및 높은 페이지 속도 통찰력 매개 변수가 실제로 중요하다면,예를 들어 네브 테마와 같은 프로필 테스트에서 최대 100 점을 보장하는 특수 템플릿이 있습니다. 그러나 스마트 폰 화면에 적응할 수없는 디자인은 요즘 널리 퍼져 있지 않습니다.

워드프레스 템플릿을 반응형 템플릿으로 대체하는 방법

이미 오랜 기간 동안 웹 사이트를 소유하고 있고 그 템플릿이 초기에 대규모 화면 형식과 일치하도록 만들어진 구식이라면 오래된 웹 사이트 디자인을 새 것으로 대체 할 수있는 가능성을 고려해야합니다. 이러한 접근 방식에는 다음과 같은 몇 가지 장점이 있습니다:

• 데스크톱 및 모바일 웹 사이트 버전은 동일한 스타일을 갖습니다;
• 을 관리할 필요가 두 인터페이스 유형을 제거 될 것입니다;
• 없을 쓰는 복잡한 기능과 알고리즘을 정의하는 화면 해상도 및 장치의 유형을 사용하여 리디렉션 그/그녀의 별도의 디자인;
• 상업적인 테마가 자주 오는 기술 지원하고,따라서,당신은 당신을 얻을 수있을 것입니다 질문에 대한 답변을 제공하고 새로운 테마보다 더하지 않습니다.

단점도 여기에 있습니다. 템플릿에는 종종 분석,카운터,광고 블록 등의 서면 코드가 함께 제공됩니다. 그들 중 일부는 별도의 재료 유형을 도입하기 때문에 이러한 모든 요소를 새 템플릿으로 전송할 필요가 있습니다. 모든 잠재적인 실수는 검색 엔진 결과에 부정적인 영향을 미칠 수 있습니다. 당신은 일반 사용자가있는 경우,그들은 아이디어를 좋아하지 않을 수 있습니다 심지어 귀하의 웹 사이트를 방문 거부 할 수 있습니다. 따라서 가능한 모든 뉘앙스를 고려하기 위해 다가오는 디자인 스위치를 철저히 분석 할 필요가 있습니다.

오래된 템플릿을 반응형으로 만드는 방법

오래된 템플릿을 반응형으로 만드는 아이디어는 처음처럼 복잡하지 않습니다. 그런데 너가 벽감 특기 또는 적어도 웹 디자인 기초를 결여되면,그것은 진짜로 그것을 해보는 이해되지 않는다. 어쨌든,항상 그와 함께 당신을 도울 웹 디자이너를 고용 하는 가능성이 있다.

주요 아이디어는 캐스 케이 딩 스타일 특별히 필요한 화면 해상도에 대 한 추가 됩니다 기반으로 미디어 쿼리를 추가 하는. 지금 예제를 살펴보십시오:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

예를 들어,기본 그리드가 다음과 같이 보이는 경우:

:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

이러한 상자에 대 한 스타일 씨에스 템플릿 파일에 배치 됩니다.:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

우리는 제안 된 화면 해상도 100%로 고정 또는 상대 폭을 교체하는 경우,다음과 같이 그리드는 볼 것이다:

이러한 결과에 도달하려면 스타일 시트에 미디어 쿼리를 추가하는 것으로 충분합니다(아래에 제공된 예는 화면 너비가 1024 픽셀 이하인 모든 장치에 적용 가능).:

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

괄호 안에 제공된 주석은 샘플로만 언급된다는 점을 명심하십시오.

그런 반응적인 디자인 실현으로 어떤 함정이 나타날 수 있습니까? 불행히도,그들 중 많은 사람들이 있습니다:

• 페이지에서 사용할 수있는 키 블록뿐만 아니라 고정 너비를 가질 수 있으므로 전체 웹 페이지 레이아웃이 위반 될 수 있습니다. 또한 이미지,홈페이지/카테고리의 뉴스 블록,저자의 설명 블록 및 기타 요소가 될 수 있습니다. 한 번에 모든 것을 식별하는 것은 불가능합니다. 그들 각각은 즉시 식별로 편집해야합니다.
• 웹 페이지의 볼륨이 느린 인터넷 연결(더 최적화는 이러한 조건에서 가능하지 않을 것이다)와 다운로드 속도에 부정적인 영향을 미칠 것이다,변경되지 않습니다.
• 검색 엔진 권장 사항에 따르면 모바일 장치의 글꼴을 축소하지 않고 쉽게 읽을 수 있어야합니다. 이것은 제목,본문 텍스트,따옴표,목록(번호 매기기 및 번호 매기기)등의 모든 글꼴 크기를 재정의해야 할 필요성을 유발합니다.
• 헤더와 복잡한 메뉴를 완전히 다시 만들어야합니다. 작은 웹 사이트 로고,검색 아이콘(이 옵션이있는 경우)및 프로필 아이콘(인증 시스템이 사용되는 경우)만 남겨 두는 것이 좋습니다. 바탕 화면 메뉴를 숨기고”샌드위치”아이콘(메뉴 아이콘)으로 교체하는 것이 좋습니다. 대부분의 인기 있는 반응형 템플릿은 두 개의 병렬 메뉴로 구현됩니다.
• 메인 박스의 구조가 다른 경우,예를 들어,사이드 바는 왼쪽에 표시되지만 오른쪽에는 표시되지 않지만 모든 위젯이 메인 컨텐츠 앞에 표시되지만 더 낮은 위치에 배치하는 것이 더 논리적입니다.
• 웹 사이트 스타일을 찾고 편집하기가 더 어려울 것입니다.

이것들은 잠재적 인 함정 중 일부에 불과합니다. 따라서 작업을 완료하기 위해 웹 디자인 전문가를 고용하는 것이 좋습니다.

미디어 쿼리의 장점은 언제든지 잘못된 코드를 삭제할 수 있습니다. 이러한 스타일은 기본 웹 사이트에 표시되지 않습니다.

플러그인이 있는 반응형 웹 사이트 버전을 추가하는 방법

일부 플러그인은 자체 확장 세트를 사용하는 반면 다른 플러그인은 전혀 사용하지 않습니다. 워드 프레스는 즉 반응 웹 사이트 생성을위한 가장 놀라운 플러그인과 남녀 공학:

• 제트 팩-자동 모바일 버전 생성 기능은 2020 년 3 월부터 중단되었습니다;무료 및 유료 버전에서 사용할 수 있으며 확장 프로그램에는 별도의 캐시 구성 플러그인,웹 앱 생성 플러그인,이미지 최적화 플러그인,앰프 생성 플러그인 등과 같은 자체 플러그인 및 테마가 있습니다. 이 응용 프로그램은 당신에게 아름다운 욕실 꾸미기의 갤러리를 보여줍니다.;
• 포스트 모바일 메뉴–모바일 장치에 대한 응답 메뉴(당신이 모바일 장치에 대한 응답 컴팩트 메뉴와 데스크톱 웹 사이트 버전의 부피가 크고 복잡한 메뉴를 교체해야하는 경우는,당신에게 유용 할 것이다);
• 포스트 모바일 감지–플러그인은 처음에 사람이 모바일 장치를 사용하고 참/거짓 값으로 결과를 제공하는 것을 정의합니다. 이를 통해 템플릿 스위치 옵션의 구현 또는 특정 인터페이스 블록의 표시에 적용 할 수 있습니다;
• 포스트 모바일 에디션–플러그인은 모든 기능을 갖춘 웹 응용 프로그램에 워드 프레스 웹 사이트를 변환 할 수 있습니다. 사용자는 스마트 폰/태블릿 데스크톱에 웹 사이트 아이콘을 추가하여 프레임 및 브라우저 탭없이 전체 화면 형식으로 사용할 수 있습니다.
• 모바일 스마트–플러그인은 장치가 모바일 클래스를 참조 한 다음 테마를 모바일 장치와 호환되는 대안으로 전환한다는 것을 식별합니다. 프로 버전은 모바일 메뉴,특수 위젯,플러그인 관리 옵션(별도의 세트가 모바일 장치에 제공 될 수 있음),도메인 스위치(두 개의 독립적 인 웹 사이트 버전의 올바른 작업 구현)등의 통합 지원이 제공됩니다.

웹 개발자는 많은 웹 사이트 소유자가 반응형 템플릿 버전으로 전환하기로 결정했기 때문에 확장이 청구되지 않았는지 확인했습니다. 따라서 이러한 플러그인의 대부분은 상당히 오랜 기간 동안 업데이트되지 않아 현재 버전의 플랫폼과 비 호환성을 초래할 수 있습니다. 유일한 예외는 터치입니다.

각 플러그인 작업은 고유 한 특성을 갖습니다. 그들 중 일부는 기성품 모바일 템플릿을 제공하는 반면 다른 일부는 타사 확장 프로그램을 다운로드하거나 자체 템플릿을 만드는 것이 좋습니다.

하위 도메인/대체 주소에서 모바일 웹 사이트 버전으로 작업하는 것을 선호한다면 여기에 알아야 할 뉘앙스가 있습니다:

• 이들은 검색 엔진에 대 한 다른 웹사이트 그리고 그것은 정말 나쁜 그들의 콘텐츠는 고유 하지 않습니다;
• 검색 엔진”접착제”를 확인 하 고이 같은 웹사이트 이해,모든 링크 속성을 제대로 구성 해야 합니다:
• • 모바일 템플릿에 대한 속성 링크…
• 다른 웹 페이지 버전의 콘텐츠가 다른 경우 클로킹에 대한 제재를받을 위험이 있습니다(콘텐츠 교체 용).2037>

우리는 이미 그 작업을 수행하는 방법을 검토 한–이 미디어 쿼리를 통해 이루어집니다. 가장 적응하기 어려운 레이아웃은 요소의 너비와 위치가 고정 된 레이아웃입니다.

전문 틈새 기술 없이는 아무 것도 작동하지 않습니다. 그것은 처음부터 웹 디자인 프로 권리를 고용하거나 구매 또는 주문,또는 단순히 예를 들어,모비 라이즈 오프라인 웹 사이트 빌더를 사용하여,예를 들어,처음부터 새로운 웹 페이지를 개발할 수있는 또 다른 하나에 디자인을 변경하는 의미가 있습니다. 마지막으로,클라우드 인프라로 이동 및 온라인 웹 사이트 빌더 중 하나를 선택하는 높은 시간이 될 수 있습니다.

모바일 및 데스크톱 또는 하나의 웹 사이트를위한 별도의 사이트:어느 것이 더 낫습니까?

위에서 언급 한 바와 같이,모바일 웹 사이트를 갖는 것은 모든 비즈니스 소유자에 대한 필수입니다. 이것은 웹에 질 사업 발표를 지키고,소통량을 생성하고 탁월한 사용자 경험을 보장하는 확실한 방법 이다. 질문은:그것은 모바일 및 데스크톱 화면에 대한 두 개의 별도의 웹 사이트 버전을 만들거나 장치의 두 가지 유형에 큰 표시됩니다 반응 웹 사이트를 구축하는 의미가 있습니까?

일반적으로 반응형 웹 사이트를 시작하는 것이 더 효과적이고 실용적인 솔루션입니다. 그것은 다양한 도메인/하위 도메인,주소 및 내부 구조와 두 개의 서로 다른 웹 사이트를 만들 필요가 없습니다. 이러한 사이트는 종종 방문자를 혼동하고 검색 엔진 최적화 최적화,인터넷 마케팅 및 기타 관련 홍보 방법에 올 때 그들은 문제를 트리거 할 수 있습니다. 대신 데스크톱 및 모바일 화면에 똑같이 잘 표시되는 하나의 프로젝트를 얻을 수 있습니다.

웹 사이트 모바일 버전 비용은 얼마입니까?

웹 사이트 모바일 버전의 비용은 일반적으로 당신이 그것을 시작하는 플랫폼에 따라 달라집니다. 당신은 윅스와 같은 온라인 웹 사이트 빌더를 선택하는 경우 시스템이 기본적으로 모바일 준비 웹 사이트를 만들 수 있습니다,그것은 절대적으로 무료로 할 수있다. 그러나,무료 윅스 계획은 당신이 불가능 프로젝트 성능을 최대한 활용 할 것입니다 자신의 도메인 이름을 연결 할 수 없습니다.

지금까지 윅스는 매우 독특하고 다양한 가격 정책을 가지고,당신은 웹 사이트를 시작하는 계획 중 하나를 선택할 수 있습니다. 가장 낫은 기부금을 선택하고 있는 동안,당신이 그것으로 투자하게 준비되어 있는 예산 뿐만 아니라 다만 당신의 웹 디자인 목적,프로젝트 유형 및 전문화를 고려하십시오. 각 윅스 계획은 최종 비용에 영향을 미치는 특수 기능 및 용어의 넓은 범위와 함께 제공됩니다. 가장 저렴한 비즈니스 기본 계획의 가격은$23/월부터 시작하는 동안 가장 저렴한 웹 사이트 구독,당신에게$13/월 비용을 것입니다.

당신은 반응 웹 사이트 생성을 위해 워드 프레스를 사용하는 당신의 마음을 만든 적이 있습니까? 그런 다음 프로젝트의 비용은 결국 당신이 갈 것입니다 플러그인의 가격에 따라 달라집니다. 워드 프레스 확장은 일반적으로 무료 것들로 위치,하지만 당신은 프로 버전으로 업그레이드 한 후 그 기능의 일부는 여전히 사용할 수있게됩니다. 예를 들어,프로의 비용은$79 에서 연간$359 까지 다양합니다. 즉,준비가 만든 응답 템플릿으로 전환하는 것이 합리적인 것 같다 정확히 이유입니다. 이러한 테마는 한 번 구입되며 비용은 약$40-80 입니다. 경우에 당신은 여전히 비용이 개별적으로 프로젝트의 복잡성에 따라 논의 될 것이다 당신을 위해 오래된 테마를 재 설계하는 전문 웹 개발자를 고용하기로 결정.

결론

그것은 어떤 웹 사이트 오늘 타겟 고객과 수요에 머물 수있는 모바일 버전이 있어야 비밀이 없다. 모바일 장치를 사용하여 웹을 탐색하지 않고 필요한 서비스와 제품을 찾는 사람들이 거의 있습니다. 따라서 웹 사이트 모바일 최적화 과정은 결국 선택한 플랫폼에 따라 달라집니다.

당신은 단지 웹 사이트를 시작하려는 경우,그것은 가장 인기있는 온라인 웹 사이트 빌더 중 하나에 우선 순위를 부여하는 것이 합리적이다. 윅스는이 목적을 위해 가장 잘 작동합니다. 당신은 이미 워드 프레스와 같은 웹 사이트에 의해 구동 웹 사이트를 실행하는 경우,그것은 응답 테마로 대체하는 것이 좋습니다. 그러나 모바일 지원을 제공하는 플러그인은 상당히 비쌀 수 있지만 완전한 템플릿 재 설계는 특히 작업에 독립적으로 대처하려는 경우 진정한 도전이 될 것입니다.

어쨌든,그것은 당신의 웹 사이트의 별도의 모바일 버전을 만드는 이해가되지 않습니다. 프로젝트 개발 및 추가 지원과 관련된 문제에 직면하게 될 것입니다. 훨씬 간단하고 합리적인 해결책은 처음부터 모바일 반응 웹 사이트를 만드는 것입니다.