콘텐츠
저는 웹 사이트와 앱의 미래를 보았고 해상도는 300ppi입니다. 이 글을 쓰는 시점에서 최신 iPhone 및 iPad에만 이러한 Retina 디스플레이가 있지만 컴퓨터 제조업체가 제작할 수있는 한 빨리 출시되고 있습니다.
우리는 72ppi 또는 96ppi 해상도로 구축 한 역사에서 왔기 때문에이 정신 분열증 문제는 앞으로 몇 년 동안 지속될 것입니다. 해결책의 경우 방문자의 해상도에 대해 걱정할 필요없이 적응 형 또는 유연한 이미지를 제공하는 문제를 즉시 생각해 봅시다.
배경 크기 : 100 %;
한 가지 방법은 HTML 요소의 배경에 이미지를 배치하고 배경 크기 : 자동;. 컨테이너 요소가 확장됨에 따라 배경 이미지도 확장됩니다. 이것은 화면의 작은 영역에 적합한 틈새 솔루션에 가깝습니다.
이에 대한 확실한 예는 fittextjs.com 웹 사이트의 화살표에 있으며, 이는 반응 형 레이아웃을위한 텍스트를 디자인하는 데있어 훌륭한 도구이기도합니다.
이 문제는 이미지 무결성에 여전히 존재합니다. 이미지가 의도 한 것보다 훨씬 더 큰 공간으로 확장되면 픽셀 화 및 기타 이미지 아티팩트가 쉽게 표시됩니다.
텍스트로 디자인하기
적응 형 이미지를 만드는 한 가지 방법은 우리가 읽고 쓰는 데 사용하는 일상적인 문자와 숫자를 사용하는 것입니다.
전 세계적으로 정보를 공유 할 수있는 능력은 인터넷이 극복 한 하나의 과제입니다. 또 다른 문제는 여러 국가의 사람들이 텍스트로 서로 소통하는 것입니다. 다른 언어는 다른 문자를 의미하며 ABC 이상을 의미합니다.
이 통신 문제를 해결하려면 다양한 운영 체제 및 응용 프로그램에서 공유하고 지원할 수있는 공통 문자 집합이 필요합니다.
유니 코드가 등장하는 이유입니다. 많은 언어에 대한 문자를 설정하고 전송하는 업계 표준입니다. 그리고 그것은 포함합니다 아이콘.
잘 만들어진 아이콘의 놀라운 점은 의사 소통에 매우 효율적이라는 것입니다. 번역이 필요하지 않습니다. 예를 들어 전화를 나타내는 작은 그림은 수많은 언어 장벽을 허물고 있습니다.
HTML5에서 유니 코드 아이콘을 사용하려면 head 요소에 문자 세트를 설정해야합니다.
meta charset = "utf-8">
그런 다음 body 요소에서 en.wikipedia.org/wiki/Unicode_symbols와 같은 참조 웹 페이지에서 직접 유니 코드를 복사하여 붙여 넣을 수 있습니다.
한 단계 더 나아가려면 인코딩 된 유니 코드 문자로 CSS 콘텐츠 생성을 사용하여 콘텐츠를 개선합니다.
a [href ^ = "mailto :"] : before {content : " 2709"; }
유니 코드 문자는 사용 방법 중 하나이지만 보조 시각적 요소로 사용하는 것이 가장 좋습니다. 스크린 리더 (장애인을 위해 웹 페이지의 내용을 읽는 브라우저)는 아마도 유니 코드 문자를 읽을 수 없을 것입니다.
실제로 일부 화면 판독기는 문자를 물음표로 읽는 것으로 나타났습니다. 따라서 웹 디자이너는 알고 있어야합니다.
아이콘으로 글꼴
유니 코드를 아이콘으로 사용하여 CSS로 모양과 느낌을 설정할 수도 있습니다. 그러나 한 단계 더 나아가 아이콘 만 포함 된 글꼴 (때로는 dingbat 글꼴이라고도 함)에도 동일한 생각을 적용 할 수 있습니다.
유니 코드 아이콘과 dingbats는 모두 텍스트를 통해 설정되므로 텍스트 높이를 ems 또는 백분율로 설정하여 이러한 시각적 도구를 다른 장치로 확장 및 축소 할 수도 있습니다.
dingbat 글꼴 사용의 주요 문제는 여전히 문자를 표현한다는 것입니다. 시각적으로 사람들은 아이콘을 볼 수 있지만 스크린 리더를 사용하는 사이트 방문자는 임의의 문자를 듣게됩니다.
이 문제를 해결하려면 pictos.cc/articles/using-icon-fonts/에 표시된대로 CSS 콘텐츠 생성 및 데이터 속성을 사용하여 문자를 저장합니다.
style> [data-icon] : before {font-family : "icon-font"; content : attr (data-icon);} / style> a href = "http://example.com/cloud/save/" > span data-icon = "C"aria-hidden = "true"> / span> 클라우드에 저장 / a>
이 문제로 인해 화면 판독기가 통과해야하는 추가 장애물이 설정됩니다. 콘텐츠 생성을 구문 분석 할 수있는 경우 문자를 가져 오지 못할 수 있습니다. attr () 값.
이 일련의 난독 화는 이상적인 기술은 아니지만 지금은 작동하는 것으로 보입니다. 이것이 스크린 리더 개발자가 더 나은 도구를 만드는 데 도전이되기를 바랍니다.
확장 가능한 벡터 그래픽
또 다른 방법은 SVG (Scalable Vector Graphics)로 작업하는 것입니다. SVG는 브라우저 지원에서 큰 도약을했습니다. 실제로 모든 최신 브라우저는 기본적으로 인라인 SVG 이미지를 지원합니다.
SVG 그래픽을 만들려면 Adobe Illustrator 또는 Adobe Fireworks와 같은 널리 사용되는 벡터 이미지 도구에서 이미 형식으로 내보낼 수 있습니다.
SVG의 문제는 이미지 형식이 아니라 이전 버전의 IE에서 발생합니다. IE9 버전부터 Microsoft는 SVG를 지원합니다.
이 문제에 대한 몇 가지 해결책이 있습니다. 하나는 브라우저 스니핑 (일종)을 사용하는 것입니다. 이전 버전의 IE에서는 HTML5 Boilerplate에있는 절묘한 조건부 주석 블록에 의존하고 SVG Swap이라는 간단한 jQuery 플러그인을 사용할 수 있습니다 (github.com/teleject/svg-swap 참조). 따라서 이전 버전의 IE가 나타나면 PNG-8 또는 JPEG 또는 GIF 대체 이미지가 대신 사용됩니다.
또 다른 해결책은 기능 감지를 수행하는 것입니다. 이미 사이트에서 Modernizr를 사용하고 있다면 Modernizr를 설정하여 인라인 SVG를 테스트하고 yepnope를 통해 polyfill을 제공하십시오.
시나리오마다 다른 트릭
마지막으로 CSS3를 잊지 말자. mask-image, text-fill-color, text-stroke-color 등과 같은 최첨단 속성을 사용하여 브라우저에서 Photoshop이있는 위치에 도달하여 나머지 페이지와 함께 그래픽을 렌더링하기를 기다립니다. 레이아웃 및 디자인 요소.
이 분야에서 영감을 얻으려면 "In Flux"라는 제목의 블로그 게시물에 대한 Trent Walton의 헤더를 확인하세요.
미래에 대처
이는 래스터 이미지에 대한 필요성을 해결하는 몇 가지 방법이므로 동일한 이미지의 여러 버전이 필요합니다. 브라우저 지원 (일부는 여전히 공급 업체 접두사를 사용하지만)은 뛰어난 시각적 디자인으로 이어지며 더 중요한 것은 여러 장치 해상도로 여러 파일을 저장하는 것입니다.
조만간 나아지지 않을 문제에 대한 반응 형 이미지 솔루션입니다.
Patrick Hoesly의 헤더 그래픽
