웹 디자인에서 점진적 향상을위한 모범 사례

웹 사이트 구축의 기술은 빠르게 변화하는 많은 부분과 매우 복잡합니다. 웹 디자인 공동체의 목표는 복잡성을 줄이다., 과 오류 가능성을 줄이십시오. 창조 과정의 각 단계에서.

점진적 향상 웹 디자인에서 그런 아이디어는 오류를 줄이다. 과 일관된 사용자 경험 제공 칠판에 걸쳐. 그 개념은 그것의 방법으로 그것을 설명하는 자체 위키 백과 페이지를 가지고 있습니다. 완전하게 접근 가능한 콘텐츠, 브라우저에서 지원할 때만 향상된 기능 렌더링.

점진적 향상을 쉽게 이해할 수 있지만 디자인 작업에 직접 적용하기는 쉽지 않습니다. 나는 그 중 일부를 다루고 싶다. 실제 프로젝트에서 점진적 향상을위한 모범 사례 에 디자이너가 자신의 워크 플로우에 대해보다 지속 가능하게 생각하도록 돕는다..

1. 점진적 향상 이해

점진적 향상 이론은 간단한 웹 사이트로 시작하십시오. 모든 브라우저에서 작동하여 모든 방문자가 액세스 할 수 있습니다.. 가능한 경우 기능을 추가하십시오..

이것은 기본적으로 모든 기능을 포함하는 정상적인 저하의 반대이며, 무언가가 작동하지 않을 때 저하됩니다..

프로 그레시브 향상은 전반적인 사용자 경험에서 더 낫습니다. 필요한 요소 만로드합니다.. 모든 웹 브라우저는 텍스트 (일반적으로 이미지)를 지원할 수 있습니다. 어떤 CSS도 없으면이 정보는 개성이 없으며 맛도 없지만 액세스 할 수 있습니다.

이 별표 기사는 점진적 개선이 내용 우선 와 나중에 추가되는 스타일 및 동적 구성 요소. 의미 론적 HTML의 내용은 다른 것보다 먼저 전달되어야합니다..

오늘날 우리가 사용하는 고급 CSS 및 JavaScript는 광범위하게 지원되지만 점진적 향상 원칙을 따르려면 사치로 간주되어야합니다.

점진적 향상의 주요 기능에 대한 일반적인 개요는 다음과 같습니다.

시맨틱 마크 업 모든 콘텐츠
사용자 ' 브라우저 환경 설정 존중받을 필요가있다.
콘텐츠 및 기본 기능이 있어야합니다. 모든 사용자가 사용할 수 있습니다.
눈에 잘 띄지 않는 JavaScript 만로드됩니다. 그것을 지원할 수있는 환경에서

프런트 엔드 개발의 기술적 제약은 주로 브라우저 호환성에 의해 결정됩니다. 점진적 향상을 통해 기본 사항으로 돌아가서 벌거 벗은 뼈 간단한 웹 페이지 보일지도 모른다. 거기에서, 당신은 할 수있다. 고급 기능 계획, CSS3 속성.

그러나 현대 CSS3를 지원하지 않는 브라우저는 어떻습니까? 이것은 내가 사용할 수있는 곳과 같은 사이트가 생겨나는 곳입니다. 어떤 기능을 구현할 가치가 있는지 결정하고 판단을 기반으로해야합니다. 귀하의 웹 사이트의 타겟층에.

2. 스타일 시트에서의 존재감

오늘날 대부분의 브라우저는 필요한 기본 속성을 모두 지원합니다. 그러나 고급 CSS3는 여전히 레거시 사용자에게 문제입니다., 점진적 향상은 솔루션을 제공합니다..

이러한 새로운 기능을 유지하기위한 대체 방법을 찾는 대신 먼저 적절한 레이아웃 구조.

가능한 많은 활성 브라우저에서 작동하는 의미 론적 HTML 및 CSS 마크 업 작성 (IE5 지원과 같은 고대 브라우저에 대한 지원은 필요하지 않음).

예를 들어 두 개의 사이드 바가있는 수레를 사용하는 JSFiddle을 가져 가라..결정된) 및 유체 함량 영역 (.유동체). 모든 CSS를 삭제하고 코드를 다시 실행하면 모든 열이 첫 번째 열, 두 번째 열, 마지막으로 마지막 열에 잘 쌓이게됩니다..

일부 개발자는 콘텐츠 항목 (.유동체)가 HTML에서 처음 나타납니다. 이것은 점진적인 향상이 이루어지는 곳이며 대체 CSS 솔루션이 실행 가능해집니다..

HTML의 두 가지 주요 목표는 다음과 같습니다.

충분히 의미 론적이고 유효한 암호
에이 일관된 경험 모두를위한

이러한 목표를 달성하는 가장 직접적인 방법은 아무것도 시작하지 마라. 과 일하다, 대부분의 진보적 인 향상 옹호자들은 그것을 추천 할 것이기 때문에.

CSS가 비활성화되고 활성화 된 상태에서 코드가 잘 보이는 경우 모든 사람에게 합리적인 솔루션을 제공합니다..

고려할만한 가치가 있습니다. 어떤 시점에서 당신은 무언가에 대한지지를 떨어 뜨린다.. Microsoft는 이미 IE6에 대한 주요 지원을 중단했기 때문에 해당 브라우저를 실행하는 사용자는 귀하의 시간 가치가 없을 수도 있습니다.

그러나 여전히 중요한 질문이 하나 있습니다. 브라우저가 내 현대 CSS를 지원하지 않으면 어떻게해야합니까??

당신은 단순히 작동하는 코드 작성 없이 그것, 현대 CSS를 점진적 향상이라고 생각하십시오. 이것은 진보적 인 향상 방법론의 아름다움입니다..

후퇴가 필요하지 않습니다. 왜냐하면 기본적으로 아무 것도 지원되지 않는다고 가정합니다..

점진적 향상 방법은 무언가가 지원되지 않는 경우에도 사이트를 사용할 수있게 만드는 방법입니다. 그러나 지원되는 경우 더 나은.

당신은 고려해야합니다. CSS를 사용하지 않고 콘텐츠를 실제로 전달하는 방법. 예를 들어, Transmit의 웹 사이트에서 CSS를 사용하지 않으면 콘텐츠가 여전히 페이지 아래로 유기적으로 흐릅니다..

그렇습니다.보기 흉하게 들립니다. 그렇습니다. 우리는 20 년의 진보를 잃어 버렸습니다. 그러나 그것은 효과적이다..

3. JavaScript 처리하기

개발 과정에서 발생할 수있는 각 자바 스크립트 문제는 까다 롭고 독특한 것으로 언급 할 가치가 있습니다. 점진적 향상 기능을 갖춘 새 프로젝트를 빌드 할 때는 필요한 모든 JS 기반 기능을 나열하고 어떻게 수행 할 수 있는지 고려해야합니다 JavaScript없이 작동.

이를 위해서는 유효한 솔루션을 찾기 위해 많은 온라인 조사가 필요합니다. Aarax Gustafson은 Ajax를 iframe 내부의 콘텐츠에 대한 메타 새로 고침으로 대체하는 등 다양한 문제에 대한 해결책을 제공하는 훌륭한 블로그 게시물을 작성했습니다..

또한 자바 스크립트 탭을 만들 때 실제 ID 값을 사용하는 앵커 링크 사용. 이렇게하면 JavaScript가 비활성화 되어도 앵커 값으로 탭을 표시하고 액세스 할 수 있습니다. Aaron은 A List Apart에 다른 문제를 어떻게 생각해야하는지에 대한 일반적인 개괄적 인 내용을 다뤘습니다.

다른 예가 있습니다. 콘텐츠를 동적으로로드하는 링크가 있다고 가정 해 보겠습니다. 그만큼 href 모든 값이 preventDefault () 메서드로 JavaScript를 통해로드되기 때문에 값이 비어 있습니다..

그 대신에, href 재산 다른 페이지를 가리킨다. 콘텐츠가 자연스럽게로드 될 수 있지만 방문자는 자바 스크립트가 비활성화되었을 때만 해당 페이지를 보게됩니다..

점진적 향상은 자바 스크립트 이상이지만 자바 스크립트가 중요한 역할을한다는 것은 의심의 여지가 없습니다..

다음과 같은 가정하에 운영하십시오. 모든 것이 비활성화되었습니다., 과 거기에서 규모를 키우다.. 여기에는 컨트롤에서 벗어난 내장 된 위젯과 관련된 문제,