탄력적인 웹 디자인으로 가는 길

디자인은 명확성을 추가합니다. 색상, 타이포그래피, 계층 구조, 대비 및 마음대로 사용할 수 있는 기타 모든 도구를 사용하여 디자이너는 정렬되지 않은 정보를 가져와 사용하기 쉽고 보기 좋은 것으로 바꿀 수 있습니다. 생명 그 자체와 마찬가지로 디자인도 우주의 엔트로피에 맞서 작은 승리를 거둘 수 있으며, 혼돈의 원료로 질서의 주머니를 만들 수 있습니다.

SmashingMag에 대한 추가 정보: 링크

• CSS 상속, 캐스케이드 및 전역 범위: 새로운 오래된 최악의 베스트 프렌드
• 카피워크로 UI 디자인 기술 향상
• 의미적 가치 추구

켈스의 서(Book of Kells)는 1200년 전에 만들어진 아름다운 삽화가 있는 원고입니다. 예술 작품이라고 부르고 싶지만 디자인 작품입니다. 이 책의 목적은 메시지를 전달하는 것입니다. 기독교 종교의 복음서. 일러스트레이션과 서예를 사용하여 그 메시지가 매력적인 맥락에서 전달되어 보는 것을 즐겁게 만듭니다.

디자인은 제약 내에서 작동합니다. 켈스의 서(Book of Kells)를 만든 콜롬바누스 수도사들은 송아지 가죽으로 만든 소재인 모조 피지에 4개의 잉크로 작업했습니다. 재료는 단순하지만 명확하게 정의되었습니다. cenobitic 디자이너들은 잉크의 색조, 모조피의 무게, 그리고 결정적으로 각 페이지의 크기를 알고 있었습니다.

지문과 혁명

재료와 공정은 지난 천년 정도 동안 변화하고 발전해 왔습니다. 구텐베르크의 활자 발명은 생산의 혁명이었습니다. Kells의 책의 두 번째 사본을 만드는 데 첫 번째 사본을 만드는 데 걸리는 시간만큼 오래 걸렸지만 구텐베르크 성경의 여러 사본은 훨씬 적은 노동력으로 생산할 수 있었습니다. 그럼에도 불구하고 드롭 캡 및 기둥과 같은 많은 디자인 패턴은 조명 원고에서 계승되었습니다. 기본 디자인 프로세스는 동일하게 유지되었습니다. 페이지의 너비와 높이를 알고 있는 디자이너는 만족스러운 요소 배열을 만들었습니다.

프린트 디자이너의 기술은 20세기 스위스 스타일의 등장과 함께 절정에 이르렀습니다. 구조화된 레이아웃과 명확한 타이포그래피는 Josef Muller-Brockmann 및 Jan Tschichold와 같은 디자이너의 작업에서 예시됩니다. 그들은 이전 세기의 디자인을 기반으로 그리드 시스템과 활자체 척도를 공식화했습니다.

페이지 크기의 비율을 알면 디자이너는 최대 효과로 요소를 배치할 수 있습니다. 페이지는 제약 조건이며 그리드 시스템은 페이지에 순서를 부과하는 방법입니다.

당신의 재능을 웹으로 가져오기

1990년대에 웹이 세계를 정복하기 시작했을 때 디자이너들은 종이에서 픽셀로 이동하기 시작했습니다. David Siegel의 Creations Killer Websites 는 적절한 시기에 나왔습니다. 그것의 영리한 TABLE 및 GIF 해킹을 통해 디자이너는 이전에 인쇄된 페이지에 대해 생성한 것과 동일한 종류의 레이아웃을 복제할 수 있었습니다.

이러한 TABLE 레이아웃은 나중에 CSS 레이아웃이 되었지만 근본적인 생각은 동일하게 유지되었습니다. 브라우저 창은 이전 페이지와 마찬가지로 디자이너가 순서를 부과하는 알려진 제약 조건으로 처리되었습니다.

이 접근 방식에는 문제가 있습니다. 종이나 모조피의 비율은 고정되어 있지만 브라우저 창의 크기는 제한이 없습니다. 웹 디자이너가 특정 사람의 브라우저 창 크기를 미리 알 수 있는 방법은 없습니다.

디자이너들은 디자인하고 있는 직사각형의 치수를 아는 데 익숙해졌습니다. 웹은 그 제약을 제거했습니다.

고정되지 않으면 부수지 마십시오

미지의 것만큼 무서운 것은 없습니다. 도널드 럼스펠드(Donald Rumsfeld) 전 미국 국방장관의 이 말은 정말 끔찍할 것입니다.

알려진 것이 있습니다. 우리가 알고 있는 것이 있습니다. 우리는 또한 알려지지 않은 것이 있다는 것을 알고 있습니다. 즉, 우리가 모르는 것이 있다는 것을 알고 있습니다. 그러나 알려지지 않은 미지의 것들도 있습니다. 우리가 알지 못하는 것들이 있습니다.

브라우저 창의 비율은 웹에서 알려지지 않은 것으로 알려진 한 가지 예일 뿐입니다. 이 상황을 처리하는 가장 간단한 방법은 레이아웃에 유연한 단위(픽셀 대신 백분율)를 사용하는 것입니다. 대신 디자이너는 브라우저 크기가 알려진 것으로 가장하기로 선택했습니다. 그들은 하나의 특정 창 크기에 대해 고정 너비 레이아웃을 만들었습니다.

웹 초기에는 대부분의 모니터 너비가 640픽셀이었습니다. 웹 디자이너는 너비가 640픽셀인 레이아웃을 만들었습니다. 점점 더 많은 사람들이 800픽셀 너비의 모니터를 사용하기 시작하면서 점점 더 많은 디자이너가 800픽셀 너비 레이아웃을 만들기 시작했습니다. 몇 년 후, 그것은 1024픽셀이 되었습니다. 어느 시점에서 웹 디자이너는 960픽셀이라는 마법의 숫자를 이상적인 너비로 정했습니다.

웹 디자인 커뮤니티가 공유된 합의된 환각에 참여하는 것과 같았습니다. 브라우저 창의 유연한 특성을 인정하는 대신, 그들은 이상적인 것으로 한 세트 너비에 정착하기로 선택했습니다. 비록 그것이 몇 년마다 이상을 바꾸는 것을 의미하더라도 말입니다.

모든 사람이 이 웹 전체 메모에 동의한 것은 아닙니다.

도 또는 도 아님

2000년 온라인 잡지 A List Apart는 A Dao of Web Design 이라는 제목의 기사를 게재했습니다. 그것은 시간의 시험을 놀라울 정도로 잘 견뎠습니다.

이 기사에서 John Allsopp은 새로운 매체가 종종 이전 매체의 비유를 취함으로써 시작된다고 지적합니다. Scott McCloud는 자신의 저서 『만화 이해하기( Understanding Comics )』에서 같은 점을 지적합니다.

각각의 새로운 매체는 이전 매체를 모방함으로써 생명을 시작합니다. 많은 초기 영화는 촬영된 연극과 같았습니다. 초기 텔레비전은 사진이 있는 라디오나 축소된 영화와 같았습니다.

이를 염두에 두고 웹 디자인이 디자이너들이 인쇄 세계에서 친숙했던 종류의 레이아웃을 재창조하려는 시도에서 시작되었다는 것은 놀라운 일이 아닙니다. 존이 말했듯이:

"Killer Web Sites"는 일반적으로 웹의 야생성을 길들여 마치 종이로 만든 것처럼 페이지를 제한하는 웹 사이트입니다. Desktop Publishing for Web.

웹 디자인은 인쇄 디자인에 대한 정보를 제공한 수세기에 걸친 학습의 이점을 얻을 수 있습니다. 스위스 스타일의 전형을 보여주는 Massimo Vignelli는 규율, 적합성, 영원함, 책임감 등을 포함한 무형 자산 목록으로 그의 유명한 Canon을 시작합니다. 이 목록의 모든 항목은 웹용 디자인에 적용할 수 있습니다. Vignelli의 Canon에는 유형의 목록도 포함되어 있습니다. 그 목록은 용지 크기로 시작합니다.

웹은 인쇄되지 않습니다. 너비와 높이와 같은 알려진 용지 제약 조건은 존재하지 않습니다. 웹은 미리 설정된 치수에 구속되지 않습니다. John Allsopp의 A Dao Of Web Design 은 실무자들이 이것을 인정할 것을 촉구했습니다.

디자이너가 인쇄 매체에서 알고 종종 웹 매체에서 원하는 제어는 단순히 인쇄된 페이지의 제한 기능입니다. 웹에는 동일한 제약 조건이 없다는 사실을 수용하고 이러한 유연성을 위해 설계해야 합니다.

이 무기에 대한 요구는 무시되었습니다. 디자이너는 모든 사람의 브라우저가 동일한 너비를 갖는 Matrix와 같은 합의된 환각에 머물렀습니다. 이해가 됩니다. 안심할 수 있는 허구를 믿을 때 큰 위안을 얻을 수 있습니다. 특히 그것이 통제의 환상을 줄 때 그렇습니다.

웹 디자이너가 고정 너비 레이아웃의 편안함에 집착하는 또 다른 이유가 있습니다. 무역의 도구는 웹 디자인에 대한 종이와 같은 접근 방식을 장려했습니다.

도구의 배

항상 자신의 도구를 탓하는 가난한 장인입니다. 그러나 모든 장인은 도구 선택에 영향을 받습니다. Marshall McLuhan의 동료인 John Culkin이 말했듯이 "우리는 도구를 형성하고 그 후에 도구가 우리를 형성합니다."

웹 디자인 분야가 등장했을 때 웹에서 레이아웃을 시각화하기 위해 특별히 제작된 소프트웨어는 없었습니다. 대신 디자이너는 기존 도구를 선택했습니다.

Adobe Photoshop은 원래 이미지 조작을 위한 것이었습니다. 사진 수정, 필터 적용, 레이어 합성 등. 90년대 중반까지 그래픽 디자이너에게 없어서는 안될 도구가 되었습니다. 동일한 디자이너가 웹용 디자인을 시작했을 때 이미 익숙한 소프트웨어를 계속 사용했습니다.

Photoshop을 사용한 적이 있다면 "파일" 메뉴에서 "새로 만들기"를 선택하면 어떻게 되는지 알 수 있습니다. 작업하려는 캔버스의 고정 치수를 입력하라는 메시지가 표시됩니다. 단일 픽셀을 추가하기 전에 유연하지 않은 웹에 대한 합의된 환상을 강화하는 기본적인 디자인 결정이 내려졌습니다.

Photoshop만으로는 고정 너비 사고를 비난할 수 없습니다. 결국, 그것은 웹 페이지를 디자인하기 위한 것이 아닙니다. 결국 웹 페이지를 만드는 특정 목표를 가진 소프트웨어가 출시되었습니다. Macromedia의 Dreamweaver는 웹 디자인 도구의 초기 예였습니다. 불행히도 WYSIWYG : What You See Is What You Get의 아이디어에 따라 운영되었습니다.

Dreamweaver로 디자인할 때 보이는 그대로 얻는 것이 사실이지만 웹에서는 여러분 이 보는 것이 다른 사람도 얻을 수 있다는 보장이 없습니다. 다시 한 번, 웹 디자이너는 매체의 고유한 불확실성에 직면하기보다는 통제의 환상을 받아들이도록 권장되었습니다.

Photoshop, Dreamweaver와 같은 도구에 내재된 편견을 극복할 수는 있지만 쉽지 않습니다. 우리는 도구를 우리가 통제할 수 있다고 생각하고 우리 의지대로 도구를 구부릴 수 있지만 사실은 모든 소프트웨어는 독단적인 소프트웨어라는 것입니다. 미래학자 Jamais Cascio가 말했듯이 "소프트웨어는 모든 기술과 마찬가지로 본질적으로 정치적입니다."

코드는 필연적으로 작성자의 선택, 편견 및 욕구를 반영합니다.

그렇다면 디자이너들이 도구의 입자로 작업하는 웹사이트를 제작하여 이러한 도구에 적용된 가정, 즉 World Wide Web의 알려진 미지의 것을 제어하고 길들이는 능력에 대한 가정을 반영한 웹사이트를 제작한 것은 놀라운 일이 아닙니다.

현실 바이트

21세기의 첫 10년 중반까지 웹 디자인 분야는 다음과 같은 여러 가정에 의해 뒷받침되었습니다.

• 모든 사람들이 960픽셀 너비의 레이아웃을 볼 수 있을 만큼 충분히 큰 화면으로 탐색하고 있었습니다.
• 모든 사람이 광대역 인터넷에 액세스할 수 있으므로 웹 페이지에 있는 이미지의 수와 파일 크기를 최적화해야 할 필요성이 줄어듭니다.
• 모든 사람들이 최신 플러그인이 설치된 최신 웹 브라우저를 사용하고 있었습니다.

소수의 웹 디자이너는 여전히 유동적인 레이아웃을 요구했습니다. 나는 그들의 숫자에 나를 포함시켰다. 우리는 "끝이 가까웠다"라고 적힌 샌드위치 판을 들고 길모퉁이에서 운명의 예언자가 된 것과 거의 같은 방식으로 용인되었습니다. 이는 불편하지만 해가 되지 않는 주의를 산만하게 하는 것입니다.

Photoshop이 웹에 가장 적합한 도구가 아닐 수 있으며 CSS 와 HTML 을 사용하여 브라우저에서 직접 디자인하는 것을 고려할 수 있다고 제안하는 디자이너도 있었습니다. 그 접근 방식은 너무 제한적이라는 비판을 받았습니다. 우리가 보았듯이 Photoshop에는 고유한 제약 조건이 있지만 디자이너는 이러한 제약을 도구 사용에 너무 익숙해서 더 이상 단점을 인식하지 못했습니다.

Photoshop 구성 요소를 디자인하고 브라우저에서 디자인하는 것의 장점에 대한 이러한 논쟁은 웹 디자인 세계를 영원히 뒤흔들 사건이 아니었다면 대부분 학술적으로 남아 있었을 것입니다.

모바일 내부에 갇혀

아이팟. 전화기. 그리고 인터넷 커뮤니케이터. 아이팟. 전화 ... 받고 있습니까? 이들은 세 개의 개별 장치가 아닙니다. 이것은 하나의 장치입니다. 그리고 우리는 그것을 iPhone이라고 부릅니다.

스티브 잡스는 2007년 이 단어로 월드 와이드 웹을 검색하는 데 사용할 수 있는 모바일 장치를 공개했습니다.

웹 지원 모바일 장치는 iPhone 이전에 존재했지만 WML 이라는 특수한 모바일 친화적인 파일 형식을 표시하는 데 주로 제한되었습니다. HTML 을 렌더링할 수 있는 장치는 거의 없습니다. iPhone과 경쟁 제품이 등장하면서 휴대용 장치는 웹에서 일류 시민이 될 수 있는 최신 웹 브라우저와 함께 출시되었습니다. 이것은 웹 디자인 분야를 혼란에 빠뜨렸습니다.

전체 산업의 기초를 형성했던 가정이 이제 의문을 제기하고 있습니다.

• 사람들이 넓은 데스크탑 화면을 사용하는지 좁은 핸드헬드 화면을 사용하는지 어떻게 알 수 있습니까?
• 사람들이 집에서 고속 광대역 연결로 검색하는지 아니면 느린 모바일 네트워크로 검색하는지 어떻게 알 수 있습니까?
• 장치가 특정 기술이나 플러그인을 지원하는지 어떻게 알 수 있습니까?

모바일 장치의 부상은 웹 디자이너에게 알려지지 않은 것으로 가득 찬 유연한 매체로서의 웹의 진정한 본질을 마주하게 되었습니다.

이 새로 노출된 현실에 대한 초기 반응은 세분화와 관련되었습니다. 기존의 데스크톱에 최적화된 웹사이트를 재고하기 보다는 모바일 장치를 별도의 사일로로 분류할 수 있다면 어떨까요? 이 모바일 빈민가는 종종 "실제" 사이트인 m.example.com 또는 mobile.example.com의 별도 하위 도메인에 있었습니다.

이러한 세분화된 접근 방식은 "모바일에서 경험하는 웹"이라는 보다 정확한 용어 대신 "모바일 웹"이라는 용어를 사용함으로써 강화되었습니다. 이전의 합의된 환상의 전통에서 웹 디자이너는 모바일과 데스크톱을 별개의 장치 클래스가 아니라 완전히 별개의 웹사이트로 생각했습니다.

어떤 장치가 어떤 하위 도메인으로 전송되었는지 확인하려면 계속해서 확장되는 알려진 브라우저 목록과 비교하여 브라우저의 사용자 에이전트 문자열을 확인해야 합니다. 최신 정보를 유지하기 위한 Red Queen의 레이스였습니다. 오류가 발생하기 쉬울 뿐만 아니라 상당히 임의적이었습니다. 예전에는 iPhone을 모바일 기기로 분류하는 것이 쉬웠지만 시간이 지나면서 그 구분이 어려워졌습니다. iPad와 같은 태블릿이 도입되면서 모바일 URL 로 리디렉션되어야 하는 기기가 더 이상 명확하지 않았습니다. 아마도 "태블릿 웹"과 같은 새로운 용어와 함께 t.example.com 또는 tablet.example.com에 대한 새 하위 도메인이 호출되었을 것입니다. 그러나 " TV 웹" 또는 "인터넷 가능 냉장고 웹"은 어떻습니까?

우리는 하나 다

다른 장치에 대해 다른 사이트를 만드는 관행은 확장되지 않았습니다. 그것은 또한 One Web이라는 오랜 이상에 반대되는 실행을 했습니다.

One Web은 사용자가 사용하는 장치에 관계없이 사용자가 합리적인 범위 내에서 동일한 정보와 서비스를 사용할 수 있도록 하는 것을 의미합니다.

그러나 이것이 작은 화면 장치가 더 큰 차원을 위해 설계된 페이지 레이아웃을 제공해야 함을 의미하지는 않습니다.

그러나 정확히 동일한 정보가 모든 장치에서 정확히 동일한 표현으로 제공된다는 의미는 아닙니다.

웹 디자이너가 One Web의 정신을 충실히 유지하려면 장치에 관계없이 모든 사람에게 동일한 URL 에서 동일한 핵심 콘텐츠를 제공해야 했습니다. 동시에 사용 가능한 화면 공간에 따라 다른 레이아웃을 만들 수 있어야 했습니다.

웹 디자인에 대한 획일적인 접근 방식이라는 공유된 환상이 사라지기 시작했습니다. 그것은 웹의 끊임없이 변화하는 유동적 특성을 수용하는 것으로 점차 대체되었습니다.

긍정적 인 반응

2010년 4월 Ethan Marcotte는 웹사이트를 만드는 사람들을 위한 모임인 시애틀의 An Event Apart에서 무대에 섰습니다. 그는 건축 세계의 흥미로운 학파에 대해 이야기했습니다. 반응형 디자인, 즉 건물을 사용하는 사람들의 요구에 따라 건물이 변경되고 적응할 수 있다는 아이디어입니다. 그는 이것이 웹사이트 제작에 접근하는 방법이 될 수 있다고 설명했습니다.

한 달 후 그는 반응형 웹 디자인 이라는 기사에서 이 아이디어를 확장했습니다. 그것은 10년 전에 John Allsopp의 A Dao Of Web Design 을 출판했던 동일한 웹사이트인 A List Apart에 출판되었습니다. Ethan의 기사는 John의 초기 집회 외침과 같은 정신을 공유했습니다. 실제로 Ethan은 A Dao Of Web Design 을 참조하여 기사를 시작합니다.

두 기사 모두 웹 디자이너에게 One Web의 아이디어를 수용할 것을 촉구했습니다. 그러나 A Dao Of Web Design 은 WYSIWYG 도구에 익숙한 디자이너들에 의해 크게 거부된 반면, Responsive Web Design 은 모바일 문제를 해결하기 위해 필사적인 디자이너의 청중을 발견했습니다.

인접 가능

작가 Steven Johnson은 발명과 혁신의 역사를 기록했습니다. 그의 책 Where Good Ideas Come From 에서 그는 "인접 가능성"이라는 아이디어를 탐구합니다.

팽창하는 생물권의 타임라인의 매 순간에는 아직 열 수 없는 문이 있습니다. 인간 문화에서 우리는 획기적인 아이디어를 타임라인의 갑작스러운 가속으로 생각하는 것을 좋아합니다. 천재가 50년을 뛰어 넘어 현재 순간에 갇힌 보통 사람의 마음으로는 도저히 생각해낼 수 없는 것을 발명하는 것입니다. 그러나 진실은 기술적(그리고 과학적) 발전이 인접 가능성에서 거의 벗어나지 않는다는 것입니다. 문화 발전의 역사는 거의 예외 없이 한 문이 다른 문으로 이어져 한 번에 한 방씩 궁전을 탐험하는 이야기입니다.

이것이 중세 프랑스에서 전자레인지가 발명될 수 없었던 이유입니다. 그러한 도약을 하기 위해서는 제조, 에너지, 이론 등의 선행 단계가 너무 많이 필요합니다. 페이스북은 월드 와이드 웹 없이는 존재할 수 없으며 인터넷 없이는 존재할 수 없으며 컴퓨터 없이는 존재할 수 없습니다. 각 단계는 아래에 누적된 레이어에 따라 다릅니다.

Ethan이 반응형 웹 디자인(Responsive Web Design)이라는 용어를 만들 무렵에는 많은 기술 발전이 이루어졌습니다. 이 주제에 대한 Ethan의 후속 책 서문에서 다음과 같이 썼습니다.

유동 격자, 유연한 이미지 및 미디어 쿼리와 같은 기술은 이미 존재했습니다. 그러나 Ethan은 이러한 기술을 단일 배너로 통합함으로써 웹 디자인에 대한 우리의 생각을 바꿨습니다.

1. 유체 그리드. 픽셀 대신 백분율을 사용하는 옵션은 TABLE 레이아웃 시대부터 우리와 함께했습니다.
2. 유연한 이미지. Richard Rutter가 수행한 연구에 따르면 브라우저가 이미지 크기 조정에 점점 더 능숙해지고 있습니다. 이미지의 고유 치수가 제한 요소일 필요는 없습니다.
3. 미디어 쿼리. CSS 의 오류 처리 모델 덕분에 브라우저는 시간이 지남에 따라 기능을 추가해 왔습니다. 이러한 기능 중 하나는 브라우저 창의 크기와 같은 특정 매개변수에 따라 스타일을 정의하는 기능인 CSS 미디어 쿼리였습니다.

레이어가 제자리에 있었습니다. 모바일의 끊임없는 부상으로 인한 변화에 대한 열망도 있었습니다. 이들을 하나로 묶을 수 있는 슬로건이 필요했다. 이것이 Ethan이 Responsive Web Design을 통해 우리에게 제공한 것입니다.

사고방식 바꾸기

반응형 디자인의 첫 번째 실험은 기존 데스크톱 중심 웹사이트를 개조하는 것이었습니다. 픽셀을 백분율로 변환하고 미디어 쿼리를 추가하여 작은 화면에서 그리드 레이아웃을 제거했습니다. 그러나 이러한 반응적 접근 방식은 기반을 구축할 확고한 기반을 제공하지 못했습니다. 다행스럽게도 다른 슬로건은 보다 탄력적인 접근 방식을 요약할 수 있었습니다.

Luke Wroblewski는 모바일 장치의 출현에 대한 응답으로 Mobile First라는 용어를 만들었습니다.

화면 공간의 80%를 잃으면 집중해야 합니다. 화면에 표시되는 내용이 고객과 비즈니스에 가장 중요한 기능 집합인지 확인해야 합니다. 인터페이스 파편이나 의심스러운 가치의 콘텐츠를 위한 공간이 없습니다. 가장 중요한 것이 무엇인지 알아야 합니다.

콘텐츠의 우선 순위를 지정하고 작은 화면의 제한된 공간 내에서 작동하도록 할 수 있다면 더 큰 화면 크기에 맞게 구축할 수 있는 강력하고 탄력적인 디자인을 만들 수 있습니다.

Stephanie와 Bryan Rieger는 모바일 우선 반응형 디자인 접근 방식을 요약했습니다.

미디어 쿼리의 부족은 첫 번째 미디어 쿼리입니다.

이러한 맥락에서 Mobile First는 모바일 장치 자체가 아니라 장치에 관계없이 콘텐츠와 작업의 우선 순위를 지정하는 데 중점을 둡니다. 그것은 가정을 억제합니다. 과거에 웹 디자이너는 데스크탑 장치에 대한 근거 없는 가정을 잘못했습니다. 이제 모바일 장치에 대한 가정을 피하는 것도 똑같이 중요했습니다.

웹 디자이너는 더 이상 화면 크기, 대역폭 또는 브라우저 기능에 대해 가정할 수 없습니다. 그들은 진정으로 통제할 수 있는 웹사이트의 한 측면, 즉 콘텐츠만 남게 되었습니다.

웹 디자인의 Dao 를 반영하여 디자이너 Mark Boulton은 이 새로운 접근 방식을 역사적 맥락에 적용했습니다.

웹의 유동성을 수용하십시오. 어떤 환경에 처하더라도 대처할 수 있는 레이아웃과 시스템을 설계하십시오. 그러나 우리가 할 수 있는 유일한 방법은 목에 걸고 있던 사고 방식을 버리는 것입니다. 그들이 우리를 막고 있습니다. 캔버스 안이 아닌 내용 밖으로 디자인을 시작하세요.

이러한 내용 아웃 사고 방식은 켈스의 책까지 거슬러 올라가는 캔버스 인 접근 방식과 근본적으로 다릅니다. 그것은 웹 디자이너들에게 통제의 환상을 포기하고 World Wide Web을 위한 물질적으로 정직한 분야를 만들 것을 요구합니다.

통제를 포기한다고 품질을 포기하는 것은 아닙니다. 정반대. 웹 디자인과 관련된 많은 알려지지 않은 사실을 인정하면서 디자이너는 매체에 맞는 탄력 있고 유연한 방식으로 제작할 수 있습니다.

텍사스의 웹 디자이너 Trent Walton은 처음에는 반응형 디자인을 경계했지만 곧 이것이 고정 너비 Photoshop 목업을 만드는 것보다 더 정직하고 진정한 접근 방식이라는 것을 깨달았습니다.

반응형에 대한 나의 사랑은 모바일에서 본격적인 데스크톱에 이르기까지 그리고 그 중간 어디에서나 내 웹사이트가 당신을 만날 것이라는 아이디어에 중점을 둡니다.

수년 동안 웹 디자인은 디자이너가 지시했습니다. 사용자는 일정 크기의 화면이나 일정 속도의 네트워크 연결에 대한 사이트의 요구를 수용할 수 밖에 없었습니다. 이제 웹 디자인은 디자이너와 사용자 간의 대화가 될 수 있습니다. 이제 웹 디자인은 웹 자체의 기본 원칙을 반영할 수 있습니다.

월드 와이드 웹의 20주년 기념일에 Tim Berners-Lee는 Scientific American에 다음과 같은 기본 원칙을 되풀이하는 기사를 썼습니다.

웹의 유용성과 성장을 뒷받침하는 기본 설계 원칙은 보편성입니다. 웹은 장애가 있는 사람들이 사용할 수 있어야 합니다. 어리석은 트윗에서 학술 논문에 이르기까지 모든 형태의 정보, 문서 또는 데이터 포인트, 모든 품질의 정보와 함께 작동해야 합니다. 그리고 인터넷에 연결할 수 있는 모든 종류의 하드웨어에서 액세스할 수 있어야 합니다. 고정식이든 이동식이든, 작은 화면이든 대형이든 상관없습니다.

참고문헌

1. John Allsopp 의 웹 디자인의 Dao
2. Massimo Vignelli 의 Vignelli Canon
3. Jamais Cascio 의 개방성과 메타버스 특이점
4. Jo Rabin과 Charles McCathieNevile의 One Web
5. Ethan Marcotte의 반응형 웹 디자인
6. Mark Boulton 의 더 풍부한 캔버스
7. 규모에 맞춤 (Trent Walton)
8. 웹 만세: 팀 버너스 리(Tim Berners-Lee)의 지속적인 공개 표준과 중립성 에 대한 요구