메모장/모바일 썸네일형 리스트형 모바일 웹 design을 위한 Guide line[펌] 모바일 웹은 점점 급증해 가고 있다. 인터넷과 Web이 PC의 전유물이라는 사람들의 생각은 점점 없어져 가고 있는게 사실이다. 작년, 한해동안 미국에서만 6천3백만명이 넘는 사람이 모바일을 통해 웹에 접속하였다. 이는 2013년이 되면 전 세계적으로 17억명이 될것이라는 예견도 있다. 영국에서의 예만 보더라도 그 사실은 극명해 진다. 20%의 모바일폰 사용자들이 그 모바일 폰으로 인터넷을 즐기고 있다는 조사 결과도 나오고 있다.(Source : http://www.3g.co.uk/PR/Feb2007/4267.htm) 이게 불과 몇년 사이에 벌어진 일이다. 그래서 모바일 웹의 Design을 위한 Guide line의 필요는 절실했다. 그리고, 이곳 저곳에서 모바일 웹을 위한 정보들을 쏟아내기 시작했다. 모.. 모바일 웹디자인을 위한 테크닉,추천 사례 최근 아이폰이 출시되면서 이 영향으로 모바일 디바이스를 통한 인터넷 접속률의 폭발적인 증가를 보였습니다. 국내의 경우 또한 이런 아이폰과 같은 스마폰의 영향으로 모바일 웹 환경의 변화가 가속화되고 있습니다. 특히 작년 한 해 미국의 모바일 디바이스를 통한 인터넷 접속자 수가 6300만 이상을 넘어섰다는 통계가 있었습니다. 이 얘기는 결국 머지 않아 몇 년안에 지금의 PC 웹 인프라 못지 않게 모바일 웹에서도 대중화된 인프라가 형성 될 것이라는 예측은 너무나 자연스러운 일이 아닐 수 없습니다. 상황이 이렇다보니 웹디자인 및 개발에 중요성이 PC웹 뿐만이 아니라 모바일웹로 넘어가고 있습니다. 그럼에도 불구하고 국내에는 아직 모바일 웹에 대한 실무적인 정보들이 많이 부족하다는 사실이 아쉬울 뿐입니다. 오늘 포.. 모바일 웹디자인 팁(tip) Mobile Web Design: Tips and Best Practices http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html 모바일 웹 디자인 : 팁과 모범 사례 원문 하드웨어와 소프트웨어의 기능에 친숙해지기 간단하게 하기 유효한 마크업 사용하기 원래 사이트를 방문하는 옵션 제공하기 별도의 모바일 테마를 사용하기 한 방향으로만 스크롤하기 팝업이나 새창 쓰지 않기 이미지 사용 최소화 하기 네비게이션 최적화하기 플래시나 자바스크립트에 의존하지 않기 가능한한 원래 사이트의 많은 컨텐츠를 포함시키기 리다이렉트 링크가 잘 동작하는지 확인하기 Effective Design for Multiple Screen Sizes http:.. 모바일 웹사이트 제작시 기울기 변화를 감지하는 이벤트 가로보기 모드와 세로보기 모드에서 다른 UI를 제공하려는 경우 window.onorientationchange = function() { alert(window.orientation); } 모바일 웹사이트 제작시 폰트 고정하기 모바일 폰은 가로나 세로로 볼때 폰트 고정합니다.(rotate) body,form,th,td,p { font-family : Verdana, Helvetica, Sans-Serif; font-size:12px; font-weight:normal; color:#000000; margin:0; padding:0; -webkit-text-size-adjust:none; } -webkit-text-size-adjust 의 사용방법 1. -webkit-text-size-adjust:auto; 2. -webkit-text-size-adjust:none; 3. -webkit-text-size-adjust:120%; 꼭 head.sub.php 설정에서 viewport 설정 의 "maximum-scale" 에 대한 설정.. 모바일 웹사이트 제작시 iPhone용 웹어플리케이션을 만들때 유용한 팁 홈스크린 아이콘 지정하기 페이지 루트에 apple-touch-icon.png 라는 이름의 아이콘 이미지를 넣어놓으면 이 페이지를 홈스크린으로 만들때 아이콘으로 사용하게 됩니다. 이 때 시각효과는 자동으로 적용이 되는데 만일 자동으로 시각효과가 적용되지않게 하려면 apple-touch-icon-precomposed.png 라는 파일을 위의 파일 대신 넣어놓으시면 됩니다. 만일 아이콘의 이름을 다르게 하거나 경로를 바꾸고 싶다면 아래와 같이 link 태그를 이용할 수도 있습니다. icon의 사이즈는 iPhone의 경우 57X57 픽셀이며 iPad는 72X72 픽셀입니다. 로딩 이미지 넣기 홈 스크린에서 실행시에 페이지가 로딩될동안 어플리케이션 처럼 로딩 이미지를 보여줄 수 있습니다. 아래와 같은 link 태.. 아이폰에서 웹상에 업로드된 MP4 동영상파일 스트리밍 재생하기 - video 태그 사용법 - - video 태그 사용 예시 - 모바일에서 사용하는 기본 메타태그 캐쉬 사용을 없애고 모바일 사이즈에 맞도록 랜더링 합니다. width : 넓이 – device-width | N px (200~10000 px, default 980 px) height : 높이 – device-height | N px (223~10000 px) initial-scale : 초기 확대/축소 배율 minimum-scale : 최소 축소 배율 – N (0~10, default 0.25) maximum-scale : 최대 확대 배율 – N (0~10, default 1.6) user-scalable : 확대/축소 가능 여부 – yes | no (default yes) 모바일 웹사이트 링크 방식 뒤로가기 device:back url송신 device:goto-URI 앞으로 device:reload 톱페이지 device:home 북마크열기 device:home/bookmark 북마크추가 device:home/bookmark?URI=http://URI/&title=타이틀 모바일 웹사이트에서 사용가능한 이미지 확장자 docomo - mova : gif (일부에서는 jpeg가능) - foma : gif/jpeg au - hdml : png/bmp (일부에서는 jpeg가능) - wap2.0 : png/gif/jpeg/bmp softbank - c : png/jpeg - p : png/jpeg/mmg - w,3gc : png/gif/jpeg/mmg 이렇듯 3사에서 사용하는 이미지 확장자가 다르나 95% 이상 지원하는 확장자는 jpeg이므로 모바일과 연동해서 쇼핑몰등은 jpg이미지를 사용해야 합니다. 모바일 사이트 제작시 고려할 10개 조항 1. 도코모, KDDI, 소프트뱅크등 최저 3 종류의 캐리어별로 페이지를 준비하지 않으면 안된다. 2. 쿠키는 기본적으로 사용 불가. 3. 테이블 태그를 사용할 수 없다. 4. 파라미터의 문자수가 제한되고 있다. 5. 메일 매거진을 일정량 이상 보내면, 캐리어의 블록을 받아 전달할 수 없게 된다. 6. 1 페이지에 표시할 수 있는 용량이 단말에 따라서 다르다. 7. 리디렉트는 연속 2회까지 한다. 8. uid, sid, pid3개는 파라미터명으로서 이용해서는 안된다. 9. SSL(HTTPS)의 페이지에서는 UID를 취득할 수 없다. 10. 캐리어에 의해서, 단말 식별 번호의 취득 방법이 다르다. 모바일 웹사이트에서 사용 가능한 태그 html head title body meta ***** blink marquee font blockquote p pre ***** dl dt dd ol ul li ***** div center ***** img br hr **** a ***** form input select option textarea 모바일 각 기기별 웹사이트 사이즈 갤럭시탭 : 1024 x 600 안드로이드폰, 아이폰, 아이팟 : 320 x 480 아이패드 : 1024 x 768 아이폰4는 960x640 모바일 웹사이트 제작시 필히 고려해야 사항 몇가지 모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다. 1. 스마트폰에서 브라우징 시켰을경우 양손터치를 통해 화면의 크기가 변경되지 않아야한다. - 일반 사이트들은 그 크기가 pc(모니터 크기) 에 맞춰 제작되었기때문에 상대적으로 작은 스마트폰디스플레이로는 감당하기 힘듭니다. 대부분 양손으로 페이지를 확대하여 사용하고 그럴때마다 늘어나는 스크롤바에 짜증에 대비하여야합니다. 이점은 meta태그로 간단히 해결됩니다. 위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다. meta의 viewport는 각 디바이스에 출력할 화면 size, dpi, s.. 이전 1 2 다음
