반응형웹디자인 25개 사이트 분석RESPONSIVE WEB DESIGN

이승제

http://www.webactually.co.kr/

Media query 방식 (CSS 로 수정 )

장점 : 브라우저의 움직임에 따라 완벽 대응한다 .( 크롬의 경우 )

단점 : 소스 별로 수정해야 하는 문제점이 생김소스가 너무 길다 .IE 에서도 되는 소스도 첨가 하였지만 엄청난 느림현상으로 인해 닫게 만들어 버린다 . ( 스크립트 )

http://www.smashingmagazine.com/

Media query 방식 (CSS 로 수정 )

장점 : 모든 기기에서 완벽한 레이아웃이구현되는 엄청난 레이아웃 효과5 번의 변화로 어떤 기기든 전부 변화가 되지 않나 싶다 .

단점 : 외국 사이트라 그런지 IE 는 완전 버렸음IE6 에서 보면 렉걸린 것 처럼 엄청 버벅거림Css 보면 답답함…… .

http://colly.com/

Media query 및 Adaptive Layout Technique 방식

장점 : 심플한 레이아웃으로 인해 css 양이 짧음수정 하기가 쉬워짐브라우저 별 느림현상이 없음

단점 : ie 버전별로 css 를 부르지만 바뀐 게 없음포트폴리오 용으로 만들면 좋을 꺼 같음

http://iam.beyonce.com/

Jquery API Mansonry 사용http://masonry.desandro.com/

장점 : 애니메이션 효과로 인해 화려한 퍼포먼스가 가능함IE 등 모든 브라우저가 전부 작동함

단점 : 이 반응형으로 인해 Jquery Api 를 불러야 한다는 함정 (무거워지지 않을까 )사이즈 조절이 힘들다는것강제로 css 를 수정 하면 레이아웃이 깨짐 결국 js 로 수정을 해야 함디자인이 한정되어 있음

TEST

http://leeseungje.cafe24.com/masonry/

Jquery Isotope

http://leeseungje.cafe24.com/media_queries.html

Media Query

해본후 소감 Media Query

장점1. HTML 하나로 모든 기기가 소화가 된다 .

2. 각 px 별로 고정 시킬 수 있다 .

단점3. 각 디바이스 별 디자인이 달라서 디자인 시간과 코딩 시간 많이 필요할

것 같다 .

4. 수정할 때 브라우저를 마우스 왔다 갔다 짜증날 것 같다 .

5. CSS3 다 보니 IE 에선 쓸수 없는 현실… . 아직 우리나라에선 무리일 듯…

해본후 소감 jquery Isotope

장점1. 애니메이션 효과 !! 시각으로 확실한 전달이 된다 .

2. Jquery Api 이므로 바로 다운 후 적용할 수 있다 .

3. HTML 및 css 부분 하나로 모든 게 다 수정이 된다 .

4. IE 및 기타 브라우저 모든 게 다 적용 가능

단점5. 디자인의 한계… .. 포플용 으로 딱 좋음 ( 겔러리용 )

6. 일단 Api 를 가져 와서 레이아웃 수정이 힘듬 (js 를 수정 해야 함 )

7. 이미지가 많아 지면 ie 에선 엄청나게 느려지는 현상… .