고정 너비 웹사이트를 모바일 친화적으로 만들기

2020년 5월 22일 최종 업데이트

모바일 친화적 구축. 그래픽 디자이너이자 웹 개발자로서 가장 큰 걱정거리가 Internet Explorer에서 CSS 기능을 만드는 것이었습니다. IE는 여전히 뒷전의 골칫거리일 뿐만 아니라 이제 우리는 수많은 화면 크기와 운영 체제에 대해 걱정해야 합니다.

모바일이 데스크톱 브라우징을 추월할 때가 올 것입니다. 모바일이 일상 생활에서 매우 중요해지면서 웹 디자이너가 즉각적인 결과를 필요로 할 때가 있습니다. 정적 웹사이트를 모바일 친화적인 WordPress 테마로 변환할 시간이 없는 디자이너나 프로그래머라면 희망이 있습니다. 모바일 장치에서 모든 콘텐츠를 볼 때 약간의 CSS 및 HTML 최적화를 통해 이를 수행할 수 있습니다.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

comScore에 따르면 전 세계적으로 모바일 장치가 온라인에서 보내는 시간의 절반 이상을 차지합니다.

모바일 친화적인 웹사이트 또는 반응형 웹사이트에는 웹사이트의 너비를 뷰어의 장치에 맞게 자동으로 구성할 수 있는 기능이 있습니다. 반응형 디자인에서 가로 스크롤 막대는 절대 금물입니다. 휴대기기에서 현재 웹사이트를 보고 휴대전화나 태블릿 하단에 스크롤 막대가 표시되는 경우 웹사이트(또는 사이트의 요소)가 모바일 친화적이지 않을 가능성이 있습니다. 이러한 수평 스크롤 막대는 사용자 경험을 망치고 뒤로 버튼을 클릭할 가능성이 높습니다. 사람들은 장치에서 세로로 스크롤하는 데 너무 익숙해서 사용자가 콘텐츠를 보기 위해 세로 및 가로로 스크롤해야 하는 경우 불편함을 느끼고 사이트를 떠납니다.

이 시점부터 모든 것을 포함합니다. 디자인 웹 사이트에는 모든 것에 대한 CSS 클래스와 ID가 있으며 모든 것을 의미합니다.

머리글 및 메뉴 div에서 바닥글의 <p> 태그까지. 화면 너비에 따라 이러한 모든 항목의 크기를 조정하고 싶을 것입니다. CSS를 통해 요소를 타겟팅할 수 있으면 이동, 크기 조정 및 크기 조정이 훨씬 쉽습니다.

CSS 미디어 쿼리는 생각보다 사용하기 쉽습니다.

미디어 쿼리가 처음 주목받았을 때 나는 그것이 CSS의 한 형태가 아니라 프로그래밍 언어의 일부라고 생각했습니다. 나는 그것이 진정 무엇인지 알았을 때 안도감에 압도되었고, 그 이후로 모든 웹 프로젝트에서 그것을 사용하고 있습니다.

미디어 쿼리는 기본적으로 CSS 규칙입니다. 화면이 이 너비이면 이 CSS를 이 요소에만 적용하십시오. 아래를 살펴보세요.

따라서 위의 코드는 단순히 사용자의 화면 너비가 100px에서 699px 사이이면 몸의 배경색을 파란색으로 변경하라는 것입니다. 여기에서 사이트의 모든 div와 범위에 레이블을 지정하는 것이 중요합니다. 적절한 태그를 지정하면 다양한 화면 너비에 대해 이러한 요소를 더 쉽게 조작할 수 있습니다.

Css-tricks.com은 빠른 참조를 위해 많은 모바일 너비를 나열합니다.

CSS 코드 샘플

/* ———– HTC 하나 ———– */
/* 세로 및 가로 */

@미디어 화면

및 (기기 너비: 360px)

및 (장치 높이: 640px)

및 (-webkit-device-pixel-ratio: 3) {

/*****여기에 코드를 입력하세요.*****/

}

Galaxy, HTC 및 Apple 휴대폰에 대한 훨씬 더 많은 미디어 쿼리 코드가 있습니다. 또한 Ipad, Galaxy 및 Nexus 태블릿의 너비가 나열됩니다. 이 코드를 사이트의 CSS 파일에 입력하고 빈 CSS 괄호를 자신의 코드로 채우기만 하면 됩니다! 완료!

귀하의 사이트는 반응형이지만 여전히 제대로 느껴지지 않습니다.

사이트의 일부 요소가 기본 메뉴와 같은 모바일 장치에서 꽤 많은 공간을 차지한다는 것을 알 수 있습니다. 반응형으로 만들 때 메뉴의 <li> 태그에 "float: none"을 적용했을 가능성이 큽니다. 그러나 이제 메뉴는 사이트 상단에서 엄청난 양의 공간을 차지합니다. jQuery 및 CSS 미디어 쿼리를 사용하여 기본 메뉴를 드롭다운 메뉴로 변환해야 합니다. Css-tricks.com은 이 작업을 수행하는 방법도 설명합니다.

데스크탑과 모바일 장치 모두에서 찾을 수 있는 특정 요소를 중요하지 않은 것으로 간주할 수도 있습니다. . CSS를 사용하여 제거할 수 있습니다.

이러한 사이트 조정은 웹 사이트를 정말 길고 설득력 있는 사용자가 많이 스크롤하게 만드는 경향이 있습니다. 여기에서 앵커 텍스트(시각 사용자의 경우) 또는 건너뛰기 링크(스크린 리더의 경우)가 친구가 됩니다.

앵커 텍스트 는 사용자가 스크롤하지 않고도 웹 페이지의 특정 섹션으로 건너뛸 수 있는 클릭 가능한 링크입니다. 모바일 친화적인 사이트를 위한 편리한 방법입니다. 아래 코드는 앵커 텍스트 연결의 예입니다.

<a href="#skip">주 콘텐츠로 건너뛰려면 여기를 클릭하십시오.</a>

<a id=”skip”></a>주요 콘텐츠는 여기에서 시작됩니다.

링크 건너뛰기 는 주로 화면 판독기에 사용되며 장애가 있는 사용자가 메뉴 탐색과 같은 반복적인 웹 콘텐츠를 건너뛰거나 건너뛰어 관심 있는 정보로 바로 이동할 수 있도록 합니다.

건너뛰기 링크에 "display:none"의 CSS 규칙이 있는 경우 화면 판독기 링크는 "액세스 불가능" 상태가 됩니다. 따라서 이 문제를 해결하는 방법은 링크를 화면 밖으로 배치하는 것입니다. 이렇게 하면 스크린 리더가 여전히 링크를 인식하고 새 모바일 사이트를 건너뛸 수 있습니다.

따라서 고정 너비 웹사이트를 모바일 친화적인 웹사이트로 빠르고 쉽게 변환할 수 있습니다. 또한 모든 이미지를 "width: 100%; 높이: 자동." 픽셀 단위로 설정된 너비가 있는 모든 이미지, div 또는 범위는 모바일 장치의 가로 스크롤 막대에 생성되므로 미디어 쿼리를 사용하여 다양한 장치에 대해 백분율 또는 다른 너비로 설정하는 것을 잊지 마십시오.

시간이 조금 걸릴 수 있지만 한 번 배우면 영원히 사용할 수 있습니다. 최신 WordPress 또는 Joomla 반응형 테마 및 템플릿이라도 원하는 방식으로 보이도록 하려면 약간의 수정이 필요하기 때문에 앞으로 하게 될 모든 웹사이트에서 이 방법을 사용하게 될 것입니다. 특히 모바일 기기 시장이 끊임없이 변화하고 있기 때문에 더욱 그렇습니다.

-Izzak Hale, 수석 그래픽 디자이너