1. 파트별 유의사항
1.1. 공통
1.1.1. 인쇄
1.1.1.1. 코드예제
1.2. 기획
1.2.1. 컨텐츠에 구조를 선형화
1.2.2. 화면설계서에서 제목영역의 확실한 구분
1.3. 디자인
1.3.1. 웹폰트 사용 유무
1.3.2. 홈아이콘(터치 아이콘)
1.4. 퍼블리싱
1.4.1. 인코딩/캐릭터셋
1.4.2. HTML5
1.4.3. 콘텐츠에 대한 분리는 개발팀과 협의하여 HTML에서는 CSS로 숨김처리하고 개발팀에서는 분기처리한다.
1.4.4. CSS파일에 들어가는 배경이미지에 주소가 개발작업시 주소가 수시로 바뀔 경우 CSS에 들어가는 배경 이미지 폴더만 CSS파일과 같은 경로에 위치시킨다.
1.5. 개발
1.5.1. Simple-RESS(서버타입 샘플예제)
2. 분기방식
2.1. user-agent
2.2. ddr
2.3. media-queries
2.3.1. Media Query Image Download Test
2.4. mobile os
3. 업무협의
3.1. 분기대상선정
3.1.1. 분기할 규칙을 정의
3.1.2. PC
3.1.3. Tablet
3.1.4. Smart Phone
3.2. 해상도 기준 선정(break point)
3.2.1. ~600px
3.2.2. ~1024px~
3.2.3. 1025px~
3.3. 브라우저 지원
3.3.1. IE8이하, IE9이상
3.3.2. Chrome
3.3.3. Safari
3.3.4. Firefox
3.3.5. Opera
3.4. 테스트기기
3.4.1. 1.선정기준
3.4.1.1. 가장 많이 판매된 기기
3.4.1.2. 전체 트래픽 점유율
3.4.1.3. 자사 사이트에 많이 접속하는것을 분석툴을 활용하여 통계치를 분석.
3.4.2. 2.선정기준
3.4.2.1. OS(iOS, Android OS)
3.4.2.2. OS Version
3.4.2.3. 해상도/화면크기
3.5. 스크립트
3.5.1. 퍼블리싱용
3.5.2. 개발용
4. 작업환경
4.1. 무선환경 구축(WiFi)
4.2. HTML 가이드
4.2.1. 현황판
4.2.1.1. 모바일화면 체크
4.2.2. UI 가이드
4.2.2.1. 개발가이드
4.3. 브라우저 세팅
4.3.1. 크롬
4.3.1.1. Site to Phone
4.3.1.2. goo.gl URL Shortener
4.3.1.3. User-Agent Switcher for Chrome
5. 접근방식에 대한 제안
5.1. 공통
5.2. PC Web, Mobile Web (모바일 사이트는 따로 제작)
5.3. PC Web/Smart Pad, Smart Phone (구조는 동일하되 pc.css와 mobile.css는 분리)
5.3.1. 완전분리
5.3.1.1. pc.css
5.3.1.2. mobile.css
5.3.2. 부분분리(CSS3 구현가능한 브라우저)
5.3.2.1. common.css
5.3.2.2. ie8이하.css(Conditional comments)
5.3.2.3. css3.css
5.3.2.3.1. pc.css
5.3.2.3.2. mobile.css
5.4. PC Web, Smart Pad, Smart Phone (반응형 웹, 각기 다른 해상도에 대응)
5.4.1. ie8이하.css
5.4.1.1. 해상도에 대응하지 않음(Conditional comments)
5.4.2. presentation.css
5.4.2.1. 공통영역
5.4.3. layout.css
5.4.3.1. 해상도 기준 선정에 의한 분리
6. 프로세스 진행
6.1. 1. 컨텐츠 프로토타입
6.2. 2. 화면설계서 템플릿(사이트을 분석 패턴화)
6.2.1. 보스턴 글로브 디자인 프로토타입
6.3. 3. UI Design Pattern
6.4. 4. 퍼블리싱 가이드
6.4.1. 현황판
6.4.1.1. QR Code
6.4.2. HTML 가이드
6.4.2.1. 가이드
6.4.2.1.1. 개발참고
6.4.2.1.2. HTML
6.4.2.1.3. CSS
6.4.2.1.4. 네이밍
6.4.2.1.5. 디렉토리
6.4.2.2. 패턴/컴포넌트
6.4.2.2.1. 공통
6.4.2.2.2. 메뉴별
6.4.2.2.3. 표/입력폼
6.4.2.2.4. 버튼
6.4.2.3. 이미지
7. 3가지 제작 방식
7.1. 멀티 스크린을 위한 제작 방식 제안
7.2. PC Web, Mobile Web
7.3. PC Web/Smart Pad, Smart Phone
7.4. PC Web, Smart Pad, Smart Phone
8. Workflow
8.1. flexible grids
8.2. flexible images and media and
8.3. media queries.
9. 모바일OS별 버그 리포트
9.1. Android
9.1.1. 2.2버전이하에서의 png24 뭉게짐 현상
9.1.2. 레이어팝업
9.2. iOS
9.2.1. orientation change zoom bug
9.3. 주의사항
10. 반응형 웹의 혜택
10.1. 웹 접근성
10.2. 상호 호환성
11. 모바일화면에서의 구현 이슈사항
11.1. Image
11.1.1. 이미지 분기처리
11.1.1.1. 디바이스로 분기
11.1.1.2. DPI로 구분
11.1.1.2.1. HDPI(x1.5)
11.1.1.2.2. XHDPI(x2.0)
11.1.2. 아이콘 폰트
11.1.2.1. 예제
11.1.2.1.1. Icon Font Sets
11.2. popup
11.2.1. 새창팝업
11.2.2. 레이어팝업
11.3. font
11.3.1. 웹폰트
11.3.1.1. 종류
11.3.1.1.1. 나눔체
11.3.1.1.2. 노토산스
11.3.1.1.3. 스포카 한 산스
11.3.1.2. 포맷
11.3.1.2.1. eot
11.3.1.2.2. woff
11.3.1.2.3. woff2
11.3.1.2.4. ttf
11.3.1.2.5. svg
11.3.1.3. 기타
11.3.1.3.1. 글꼴설정
11.3.1.4. 주의사항
11.3.1.4.1. 라이센스
11.3.1.4.2. Performance
11.3.2. 이미지폰트
11.3.2.1. alt값을 가져오는 방식은 개발팀과 협의후 진행
11.3.2.1.1. 단점
11.3.3. 이미지 폰트는 사용하면 안되는 이유
11.3.3.1. 다양한 해상도에 대응(고해상도)
11.3.3.2. 언어 번역
11.3.3.3. 웹 접근성(이중 관리의 대상)
11.3.3.4. 유동적인 그리드(line break)
11.3.3.5. 불필요한 데이터의 전송(페이지의 경량화)
11.4. menu
11.4.1. GNB
11.4.1.1. 예제
11.4.1.1.1. 반응형 네비게이션 패턴
11.4.1.1.2. Stack Menu(포개지는 메뉴)
11.4.1.1.3. 모바일에 최적화된 responsive menu 만들기
11.4.1.1.4. A Responsive Off-Canvas Menu
11.4.1.1.5. Responsive Multi-Level Menu
11.4.1.2. New node
11.4.2. Tab Menu
11.5. file
11.5.1. 다운로드/업로드
11.5.2. 파일종류
11.5.2.1. PDF
11.6. data table
11.6.1. 예제활용
11.6.1.1. canvas-based chart
11.6.1.2. thumbnail image that links to the data
11.6.1.3. selectively displaying data
11.6.1.4. Mobile First Responsive Faux Table
11.6.1.5. responsive calendar demo
11.6.1.6. horizontal scrolling
11.6.1.7. FooTable – 작은 화면에 테이블을 효과적으로 표시해주는 jQuery plugin
11.6.1.8. Responsive scrollable tables
11.7. video/audio
11.7.1. 코덱종류
11.7.1.1. Audio
11.7.1.1.1. mp3
11.7.1.1.2. ogg
11.7.1.2. Video
11.7.1.2.1. mp4
11.7.1.2.2. ogg
11.7.1.2.3. webm
11.7.2. 문제점
11.7.2.1. 다양한 코덱
11.7.2.2. 스트리밍
11.7.2.3. DRM
11.7.3. 제시방안
11.7.3.1. 코덱을 직접 변환
11.7.3.1.1. HTML5용 동영상 인코딩의 비법
11.7.3.2. 동영상 변환 솔루션
11.7.3.3. 유튜브를 활용
11.8. etc
11.8.1. 특수문자
11.8.2. 인코딩/캐릭터셋
11.8.2.1. UTF-8권장
11.8.3. 프레임셋/아이프레임
11.8.3.1. 프레임셋은 비권장
11.8.3.2. 아이프레임
11.8.3.2.1. 예제
11.8.4. 문단
11.8.4.1. 예제
11.8.4.1.1. line breaks
11.8.5. Retina
11.8.5.1. mo pixels mo problems
11.8.6. 터치 디바이스
11.9. Component
11.9.1. 갤러리
11.9.2. 슬라이드
11.9.2.1. 예제
11.9.2.1.1. Responsive Slider
11.10. DPI
11.10.1. 컨텐츠 이미지
11.10.2. 배경 이미지
12. 참고문헌
12.1. 사이트
12.1.1. ress-responsive-design-server-side-components
12.1.2. ress-responsive-design-server-side-components-2
12.1.3. 반응형 웹 디자인 작업을 위한 10가지 유용한 도구
12.1.4. Content Prototyping In Responsive Web Design: Related Resources
12.1.5. How To Set Up A Print Style Sheet
12.1.6. web font gallery
12.1.7. Fluid grids, orientation & resolution independence
12.1.8. HTML5 Video Player
12.1.9. responsive-design-techniques
12.2. 도서
12.2.1. responsive web design
12.2.2. mobile first
12.2.3. adaptive web design
13. 반응형 웹의 현실적인 문제점 분석 및 논의해야할 사항
13.1. 과연? 내부역량으로 진행이 가능한것인가에 대한 논의
13.2. 각 파트별 모바일(특성)에 대한 지식은 수행되고 있는가?
13.3. 반응형 웹이 생산성이 있는가?
13.4. 클라이언트에 어떤 이익이 있는가?
13.5. 유지보수 측면에서의 장/단점
13.5.1. 장점
13.5.2. 단점
13.6. 데스크탑인 먼저인가 모바일이 먼저인가?
13.7. 모든 브라우저에 대응해야하는가?
13.7.1. IE8 이하 버전
13.7.1.1. 유동적인 레이아웃을 위해 스크립트를 사용해야하나?(성능이슈)
13.7.1.2. 동일한 디자인을 표현해야 하다보니 태그의 중첩을 피할 수 없게되서 용량이 늘어나게 된다. (용량문제)