bxSlider

컨텐츠 슬라이더 하나 추천해드릴게요!
사람들이 가장 많이 사용하는 슬라이더에요!
물론 그만큼 버그도 종종 발견되는 편이지만 구글링을 통해 어느정도 커버가 가능합니다!

제가 추천해드릴 슬라이더는 bxSlider입니다!
들어보신적 있으세요?

bxslider를 사용해야하는 이유!!
Why should I use this slider?

1. 어떠한 디바이스에서도 적용되는 반응형
2. 다양한 슬라이더모드를 가지고 있다. (Horizontal, vertical, fade)
3. 이미지, 비디오 그리고 그냥 HTML코드 내용까지 슬라이드 가능!
4. touch와 swipe를 지원한다.
(사실 이 부분은 공감 못해요! 전.. 이부분으로 인한 버그로 엄청 고생했답니다!)
5. 다양한 브라우저 지원 (Firefox, Chrome, Safari, iOS, Android, IE7+)

이 외에도 여러 이유가 있으니 사이트를 참고해주세요!

http://bxslider.com/

사이트에 들어가시면 예제와 옵션에 대한 설명이 친절하게 설명되어 있어요!
나중에 공부삼아 번역해서 올려볼게요 🙂

모바일 친화적 사이트

모바일 웹 사이트를 구현하는 방법에는 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