표준 치수 사이트 : 기능, 요구 사항 및 권장 사항

웹 사이트의 기술 개발 - 매우다면적인 과정. 기능 및 외부 시스 - 그럼에도 모든 단계는 두 가지 주요 구성 요소로 분할 될 수있다. 또는, 매체 웹 마스터 각각 구걸 엔드 및 프런트 엔드에있다. 종종, 웹 개발 스튜디오에서 자신의 웹 사이트를 구입 한 사람들은 순진하게도 단지 기능에 초점을 맞출 필요가 있다고 생각, 그것은 옳은 결정됩니다. 그러나 이것은 일반적으로 베타 테스트의 단계에서 사업의 창업을 위해, 매우, 매우 드문 경우에 해당됩니다. 그래픽 디자인 및 사용자 인터페이스의 나머지는 단순히 웹 개발 표준을 준수하고 편안하게 할 의무가있다.

인터페이스 디자이너 또는 디자이너에 직면의 첫 번째 초석 - 사이트 레이아웃의 폭이다. 결국, 그녀를 위해 인터페이스를 그릴 필요가있다. 직관적으로 두 가지 방법이있다 - 하나는 인기있는 화면 해상도의 각각에 대해 별도의 레이아웃을 만들기 위해, 또는 당신은 모든 맵에 대한 사이트의 한 버전을 만들 수 있습니다. 두 옵션 모두 잘못 될 수 있지만 먼저 첫번째 일 것이다.

만약 당신이 필요합니다 사이트에 대한 픽셀의 표준 폭

적응 레이아웃 질량 현상의 개발에 앞서 다양한 픽셀 수천 개의 사이트를 개발하고있다. 이 수치는 하나의 단순한 이유로 선택되었다 - 사이트가 모든 화면에 배치되었다. 그리고 거기에 어떤 논리이지만,의는 사람이 여전히 바탕 화면에 적어도 HD 모니터 있다고 가정하자. 이 경우, 레이아웃은 모든 것이 하나 개의 더미에 성형되는 화면의 중앙에 작은 스트립 것, 그리고 거대한 비 공간의 측면에 있습니다. 이제 사람이 폭 800 픽셀의 화면을 가진 태블릿에서 웹 사이트에 와서 설정에서 선택되어 있는지 가정하자 "웹 사이트를 전체 버전을 표시합니다." 단순히 화면에 맞지 않을이 경우, 귀하의 웹 사이트는 또한 잘못 표시됩니다.

이러한 고려에서, 우리는 레이아웃에 대한 고정 폭, 우리가 맞지 않는 것으로 결론을 내릴 수 있으며 다른 방법을 찾고 싶어요. 의 각 화면 폭에 대해 별도의 레이아웃의 아이디어를 분석해 보겠습니다.

모든 경우에 대한 레이아웃

모든 화면이 시장에서 사용 가능한 크기에 대한 레이아웃을 생성하는 전략으로 선택한 경우, 다음 사이트는 인터넷에서 가장 독특한 것입니다. 결국, 오늘은 각 옵션에 대한 정확한 설정을 만들기 위해 장치의 전체 범위를 커버하기 위해 단순히 불가능하다. 당신이 가장 인기있는 모니터 해상도와 화면 장치에 초점을 맞출 경우에, 아이디어는 좋다. 그것의 유일한 단점 - 금융 비용. 디자이너 인터페이스 디자이너와 코더가 동일한 작업을 수행하는 데 5 ~ 6 배에 강제 될 때 결국,이 프로젝트는 원래 예산 가격 심어 불균형 비용을 것입니다.

하나 개의 제품을 판매하고 잘 할해야하는 - 따라서 다른 화면에 대한 버전의 풍부가 그 목적 사이트-odnostranichniki는 것을 제외 될 수 있습니다 자랑합니다. 당신이 그 착륙 중 하나가 아닌 경우 음, 다중 사이트, 그것은 더 추론하기 위하여 서있다.

사이트의 가장 인기있는 크기

두 극단 사이의 타협은 세 가지 또는 네 가지의 레이아웃의 도면이다 화면 크기. 그 중 하나는 모바일 기기의 레이아웃해야합니다. 나머지는 작은 중형 및 대형 바탕 화면에 적응해야합니다. 어떻게 사이트의 폭을 선택? 우리가 우리에게 장치의 다양한 화면 해상도의 인기의 분포뿐만 아니라,이 지표의 변화의 역 동성을 보여주는 월 2017 서비스 통계를 HotLog 제시 아래.

테이블에서 당신이 사용하고자하는 사이트의 크기를 결정하는 방법을 배울 수 있습니다. 또한, 가장 일반적인 형식 오늘은 768 점으로 1366의 화면이라고 결론을 내릴 수있다. 이 화면은 저렴한 비용으로 노트북에 설치되어있는, 그래서 그들의 인기는 당연하다. 다음으로 가장 인기있는 사이트 레이아웃을 만들 따라서, 영화, 게임을위한 황금 표준이고, 풀 HD 모니터입니다. 또한, 우리는 참조 테이블은 이후 모바일 장치 360 × 640 픽셀뿐만 아니라 데스크탑의 다양한 실시 예들 및 이동 화면을 허용한다.

디자인 레이아웃

그래서 통계를 분석 한 후, 우리는 사이트의 최적의 폭이 4 변화를 가지고 결론을 내릴 수있다 :

1. 1366 픽셀의 폭 버전 노트북입니다.
2. 풀 HD 버전.
3. 작은 데스크탑 모니터에 디스플레이 크기 폭 800 개 픽셀 배열.
4. 폭 360 개 픽셀 - 사이트의 모바일 버전.

우리는 당신이 사이트에 대한 생성 된 소스 코드의 크기를 사용할 것을 결정하자. 그러나 이러한 프로젝트는 여전히 비용이 많이 드는 것입니다. 그래서 더 많은 옵션, 고정 폭을 사용하지 않고이 시간을 고려하십시오.

유연한 레이아웃을 확인

거기에서 우리는 화면의 최소 크기를 조정하기 만하면 다른 방법이며, 사이트의 규모는 퍼센트를해야합니다. 이 경우, 메뉴, 버튼 및 로고로 인터페이스 요소는, 화소의 화면 폭의 최소 크기에 초점을 절대적으로 정의 될 수있다. 내용에 블록, 반대로, 화면 영역의 폭 퍼센트 지정에 따라 뻗어됩니다. 이 방법은 디자이너와이 뉘앙스를 이길 수있는 재능에 대한 제약으로 사이트의 크기를 감지하지 허용한다.

무엇 황금 비율은, 어떻게 레이아웃에 웹 페이지를 사용할 수 있나요?

심지어 르네상스 많은 건축가와 예술가는 그의 작품에게 완벽한 모양과 비율을 제공하기 위해 노력했다. 같은 비율의 의미에 대한 질문에 대한 답변을 위해, 그들은 모든 과학의 여왕으로 향했다 - 수학.

이제까지 고대의 일이이 자연 유비쿼터스이기 때문에 우리의 눈은 가장 자연스럽고 우아한로 인식 비율에 의해 발명되었다입니다. 이 비율의 공식의 발견은 피디 아스라는 이름의 재능 그리스어 건축가이었다. 전체적으로 더 큰 비율로 제공 대부분 저에 관한 경우,이 비율이 잘 보이는 것으로 계산된다. 그러나이 경우, 당신은 비대칭 적으로 객체를 나눌. 이 비율은 이후 여전히 세계 문화 역사의 중요성을 과대 평가하지 않는 황금 비율을,라는되었다.

의 웹 디자인으로 돌아 가자

그것은 매우 간단합니다 - 당신은 인간의 눈에 가장 기쁘게 될 것입니다 페이지를 디자인 할 수있는 황금 비율을 사용. 황금 섹션의 공식에 따라 계산 된, 우리는 찾을 수 비이성적 수 1.6180339887이 ...하지만 편의상 1.62의 반올림 값을 사용할 수 있습니다. 이것은 우리의 페이지 블록에 상관없이 사용중인 사이트에 대한 소스 코드를 생성 어떤 크기의 62 %와 전체의 38 %, 수 있어야한다는 것을 의미합니다. 당신은 다음과 같은 방식에 볼 수있는 예 :

새로운 기술의 사용

현대 기술 레이아웃 웹 사이트는 이제 인터넷 기술의 새벽보다 더 대담한 아이디어의 구현을 감당할 수 있도록 정확하게, 디자이너 및 디자이너의 아이디어를 전달 할 수 있습니다. 더 이상 사이트의 크기해야하는지 이상의 퍼즐을 많이 필요가 없습니다. 블록과 같은 것들의 출현으로 적응 레이아웃, 내용과 글꼴의 동적 로딩, 웹 사이트 개발에 훨씬 더 많은 즐거움이되었다. 결국, 이러한 기술들은, 비록 적은 제한이 있습니다. 여러분이 알다시피하지만, 제한없이, 더 예술 없을 것이다. 황금 섹션 - 우리는 당신이 설계에 진정으로 창조적 인 접근 방식을 사용하는 것이 좋습니다. 그것으로, 당신은 효율적이고 잘 상관없이 템플릿에 무엇을 요구 크기 나 위치, 작업 공간을 채우지 할 수있을 것입니다.

작업 영역 사이트를 증가하는 방법

기회는 당신이 작은 크기의 레이아웃에있는 모든 인터페이스 요소를 수용 할 수있는 공간이 충분하지 않을 수 있습니다. 이 경우에, 당신은 창조적으로 생각하기 시작, 또는 당신이 전에했던 것보다 훨씬 더 창조적해야합니다.

팝업 메뉴에서 탐색을 숨기고 가능한 사이트의 최대 최대 여유 공간. 이 방법은뿐만 아니라 모바일뿐만 아니라 데스크톱에서 사용하는 논리적이다. 결국, 사용자가 사이트의 제목을 가지고 무엇을보고 모든 시간을 필요로하지 않는다 - 그것은 콘텐츠왔다. 사용자는 존중하고자.

메뉴를 숨길 수있는 좋은 방법의 예는 다음과 레이아웃 (아래 그림)입니다.

상단에 빨간색의 모서리 영역, 당신은 웹 사이트 콘텐츠와 단독 사용자를 떠나, 작은 아이콘으로 숨 깁니다 메뉴를 클릭 십자가를 볼 수 있습니다.

그러나 이것은 선택 사항입니다, 당신은 눈에 항상 탐색을 남길 수 있습니다. 그러나 당신은 아름다운 디자인 요소, 인기있는 사이트의 링크의 단지 목록을 만들 수 있습니다. 링크 텍스트 또는 교체 할뿐만 아니라 직관적 인 아이콘을 사용합니다. 그것은 또한 당신의 장치의 화면 공간을보다 효율적으로 사용하도록 사이트를하실 수 있습니다.

최고의 웹 사이트 - 적응

당신은 모든 당신을 위해 사이트의 레이아웃을 선택해야 할 지 모르겠다면. 개발 비용을 절감하는 동시에 때문에 일부 장치에 대한 빈약 한 레이아웃의 관객을 잃지하기 위해, 반응 형 웹 디자인을 사용합니다.

적응은 동일하게 다른 장치에 보이는 디자인을했다. 이 방법은 사이트에도 스마트 폰에서, 적어도 태블릿에, 심지어 노트북을위한 명확하고 쉽게 할 수 있습니다. 또한이 효과가 스크린 폭의 작업 영역으로의 자동 변화에 의한 기록했다. 사이트에 대한 적응 스타일 시트를 사용하면 가능 올바른 결정을하고있다.

어떻게 귀하의 웹 사이트의 다른 버전의 가용성의 적응 설계를 구별

반응 형 디자인은 데스크탑 상이한 후자의 경우, 사용자가 HTML 코드를 수신되도록 상기 모바일 사이트는 다르다. 이것은 서버의 성능뿐만 아니라, 검색 엔진 최적화를 최적화의 관점에서 단점이다. 또한, 더 어려워 사이트의 다른 버전에 따라 통계를 고려하는 것이된다. 적응 접근 방식은 단점이없는 것입니다.

다른 장치를위한 적응성 때문에 레이아웃 폭 또는 백분율 가능한 공간을 통해 전송 블록 (수직면 대신 바탕 화면에 수평 폰), 또는 다양한 화면을 생성하여 각각의 레이아웃을 실현한다.

당신은 반응 형 디자인에 대한 자세한 내용은 책에서 당신이 할 수있는 개발할 수 있습니다.