모바일 친화적 사이트

모바일 웹 사이트를 구현하는 방법에는 3가지가 있다고해요~

1. 사용자 기기 (데스크톱, 태블릿, 모바일, 비시각적 브라우저)와 상관없이 동일한 URL에 동일한 HTML 코드를 게재하지만 화면 크기에 따라 다르게 렌더링(응답)하는 방법.
미디어 쿼리를 이용하여 반응형 사이트 구현 하는 것이 이 항목에 해당하지 않을까요? +_+

2. 기기와 관계없이 동일한 URL을 사용하지만 서버가 사용자의 브라우저에 대해 알고 있는 정보를 기준으로 기기 유형에 따라 서로 다른 버전의 HTML을 생성하는 방법.

3. 사용자의 기기를 감지한 다음 HTTP 리디렉션을 사용하여 적절한 페이지로 리다이렉션하는 방법.

저의 페이지를 가지고 친화성 테스트를 해보았어요!!

완벽하네요 하핫!! >_<

웹 퍼블리싱 할 때 도움 되는 사이트!!

웹 퍼블리싱 할 때 도움되는 사이트 알려드릴게요~
저는 디바이스별 화면 테스트 사이트를 자주 이용해요!!
요즘엔 웹사이트도 반응형으로 많이 제작되기도 하고 모바일 화면 퍼블리싱할때도 필요한 부분이라서 그런지 해당 사이트를 자주 사용하게 되더라구요!

만약 장소가 인터넷이 막힌곳이라면..ㅜㅜ

그냥 개발자모드로 전환 시킨 후, Device toolbar를 눌러서 확인하죠.
이 경우에 간혹 디바이스를 제대로 선택했지만 실 모바일 화면이랑 다른 경우가 있어요!
저는 화웨이 폰 맞추다가…. 그랬죠.. ㅜㅜ
진짜 화나서 울뻔했어요!!

그래서 그때 user-agent까지 동일하게 적용시켰더니 모니터 화면에서 보이는거랑
디바이스 화면이 동일하게 나오더라구요
그 당시 느꼈던 그 희열을.. 아직 잊을 수 없네요! ㅋㅋ

***** 링크를 걸어두었으니~ 들어가보세요! *****

※ 화면 해상도 시뮬레이션
http://ko.infobyip.com/testwebsiteresolution.php

※ 디바이스별 화면 테스트
http://troy.labs.daum.net

※ 화면 사이즈별 테스트
http://design.google.com/resizer

※ 크로스브라우징 테스트
https://app.crossbrowsertesting.com

※ 구글 Device Metrics
https://design.google.com/devices

※ iOSRES
http://iosres.com

※ SCREEN SIZES
http://screensiz.es/phone