본문 바로가기
블로그/블로그 기초지식

반응형 웹사이트 웹디자인 기초

by Rookie Smart 2013. 12. 16.
반응형

반응형 웹사이트 웹디자인에 대해 몇번 들어보았지만 기초지식이 없어 뭔 소리인지 몰랐습니다.

구글 애드센스 한국팀에서 11월말 멀티스크린 행아웃세션을 진행해 유투브에서 시청했습니다.

반응형 웹사이트 웹디자인에 대한 기초적인 내용을 정리합니다.

 

 

 

 

제 블로그에 방문하는 방문자의 30% 정도가 모바일로 접속합니다.

구글 애드센스를 사용하는 분들은 플랫폼 메뉴에서 확인할 수 있습니다.

현재 티스토리 블로그는 PC에서 보이는 화면과 모바일에서 보이는 화면이 다릅니다.

 

 

 

 

PC화면에서 다양한 기기의 모바일 화면으로 웹사이트의 화면을 볼 수 있습니다.

Chrome 웹스토어에서 Mobile tester로 검색해서 Responsive Web Design Tester를 설치합니다.

크롬 브라우저 우측 상단에서 모바일 기기 종류를 선택합니다.

 

 

 

 

반응형 웹사이트 웹디자인의 사례는 www.lego7205.com 입니다.

모바일 기기로 접속했을때 원래의 사이트 내용이 모바일 화면 크기에 최적화되어 나타납니다.

모바일에서도 동일한 도메인 주소와 리디렉션이 없어 속도가 느려지지 않습니다.

 

 

 

 

웹사이트의 속도 체크 →  http://developers.google.com/speed/pagespeed/insights/

PC와 모바일 속도를 체크할 수 있고 개선점도 알려주는 구글 개발자 사이트입니다.

웹사이트의 속도는 웹사이트 성공의 중요한 요소중의 하나입니다.

 

 

 

 

비지니스 관점에서 반응형 웹디자인의 장점은 별도의 모바일 사이트를 관리할 필요가 없고,

사용자 관점에서 PC와 모바일 이용시 동일한 사이트의 레이아웃을 볼수있어 만족도가 높습니다.

이런 트렌드에 따라 워드프레스 테마들도 반응형 웹을 지원하고 있습니다.

테마가 반응형 웹을 지원하는지 확인하는 방법은 설명에서 'Responsive' 를 확인하는 것입니다. 

 

 

 

 

애드센스 광고도 반응형에 웹사이트에 따라 별도로 구현해야 합니다.

광고코드 생성시 '반응형 광고 단위'를 선택하고 사이트 소스코드에 광고 코드를 붙여넣습니다.

CSS에서 모바일 스크린별로 광고단위 크기를 지정해야 합니다.


반응형

댓글