CSS Nite in Seoul, Vol.4

#1

페르소나 기법을 통한 LPO 제안 (구글 애널리틱스 http://www.google.co.kr/intl/ko/analytics/) 

웹 분석은 PDCA 사이클이 중요하다 (Plan -> Do -> Check -> Action)

가로폭 size 선정 기준 " 엑세스 분석"을 통해서 화면 해상도와 브라우저 점유뮬 파악(1024,1280)

#2

A/B test 와 SEO 간의 관계 : 사람의 행동을 분석해서 모델화 시킨다.

페이지를 표시할 때마다 Text 또는 배너를 사용자/ 시간별로 변화를 주어 성적이 좋은 것으로 선택한다.

사이트의 문제  -> Usability                                    

                    -> Marketing     -> 방문자 유형             (분석 :방문 키워드, A/B test)

                                          ->적절한 콘텐츠           (분석 :A/B test)

  사례1) 이미지(0.28%) VS  이미지+텍스트(1.43%)

  사례2) 감성적 카피(8.33%)  VS 사실 전달(3.26%)

Soy CMS : CMS를 제작 툴이 아닌 마케팅 툴로 접근

     -> 인간 행동 분석,  고민<테스트,  작은 문구도 영향력이 크다는 전제.

#3

시각 장애인 : 전맹

- 돌기(점자) 시계 사용, 고장이 자주 일어난다 // ISSEY MIYAKE's TO Watch(120만원)

                        저시력(고도근시) 확대기 사용/350만원 

- 고대비, 두거운 바늘, 높은 명도 대비

- 계단: 옆면의 검정 라인과 계단을 명도 대비를 통해서 계단을 높이를 가늠한다. 

다양한 샴푸들 : 촉각 정보 필요(점자, 빗금, 뚜껑모양 표준

: 적용 회사 : Biggrem, innisfree,   Shiseido, DHC,   L'occitane

: JIS 산업 표준

지시사항은 "모양, 크기, 위치, 방향, 색, 소리에 상관없이 인식될 수 있어야 한다.

: 손들어 보세요 VS 박수 쳐주세요

그래서, 모바일 또는 웹

명도대비 : Web 4.5:1   VS    Mobile 3:1

     글짜 크기 별로 그에 맞는 두께를 갖어야 한다.

     input box가 비어있을 경우, 라인 처리하여 그 구분을 인지할 수 있도록 해야한다.

     주요 화면 정보는 자막, 색 , 음성, 요약으로 정의된다.

     페이지 넘버링에서 활성화 표기 방식의 변화 : 컬러 -> 볼드 -> 언더바 ->박스 -> 기호 사용

데이터들은 리더기가 읽는 방향 패턴을 고려하여 

컨텐츠 정보가 세로로 되어있는 묶음의 가로 나열 보다는 

컨텐츠 정보가 가로로 되어있는 묶음의 세로 나열이 적절하다

사용성 또는 접근성 

시각장애인과 비장애인의 소통 역할 수행 : 거의 모근 기능이 일반일과 동일하게 제공

기능 대행 : 카메라-확대기, 

                face time-원격체팅/요청, 

                voice over- 사진을 찍을때 조차 그 상황을 읽어줌  

접근성과 사용성이 아무리 좋아도 유지보수가 안되면 오히려 해를 끼칠 수 있다.

(계속 잘 하다가 잠시 공사중으로 인해 서비스가 중단되거나 지원이 종료되었다는 인식을 갖게되면 그로 인한 회사의 파급력은 매우 크다 - 사례 장차법 준수 카카오톡의 개발이슈)

#4

why we adopt RWD?  - 2012년부터 대기업들이 선호하기 시작했다.

  - 구글 추천 (검색 Seo , Ux)

  - 정보 갱신이 수월, 운영비 감소

  -  관련 사 :  sony, Ms, Ntt, baby-G.jp

        - 페북 하루 고객 : 하루에 700가지의 디바이스로 접근를

                                 접근을 하려면 이상적이어야 하거든요.

   - 사이즈 구분 : mobile 3.5 inch , mini 7 inch,  tablet10 inch

   - 인터넷 익스플로어 6 : 일본(2.6%)  한국(1.4%)

   - 모바일 버전 : ios 5,6  , android 2.3~4.x, win 8

   - 모바일 UI check point

keep 44 X 44 px 보다 크게( 손가락 크기)

css font size : 100%

use real world Metaphors

3-bar line's mean = menu

new UI : Tuqulore.com

텍스트와 배경과의 Contrast 명확히

#5

RWD's Essence 

미디어쿼리의 브레이크 포린트 적용

플렉서블 이미지 : max-width :100%  , height: auto, line-height :0;

HIDMI 시대(벡터 방식) : SVG(로고 및 이미지), Css Visual Effects(간단한 도형 및 버튼), Device and web fonts(텍스트)

mark up

Head - View port

  - format detection : telephone=no, address=no, mail=no 

    and Home icon : 파비콘+ apple touch icon(114x114)

  - Fluid auto(대부분의 box) :for liquidity

  - float : none (mobile layout = learner layout)

  - css3 selects 적극활용 (불필요한 class 수를 줄일 수 있다)

  - 렌드 스케이프 시 글씨 커지는 현상 방지 : -webkit-text-size-adjust:100%

  - click 시, 컬러 바꾸기 : tap-highlight

  - hide Address bar (1픽셀 스크롤링)

  - input type 적극 활용 (search, tel, url, placeholder(더미 텍스트)

  - search input API 음성검색 : x-webkit-speech