응답성이 뛰어난 웹 설계

Responsive web design
"응답형 설계"는 여기서 수정됩니다.컴퓨터 지원 설계 접근방식은 응답형 컴퓨터 지원 설계를 참조하십시오.
응답성과 혼동하지 마십시오.
반응성 피부(타임리스)가 있는 Wikipedia의 스크린샷입니다.
모바일에서 동일한 스킨(Timeless)입니다. 요소가 이동하기 쉽게 정렬되는 방법에 유의하십시오.
콘텐츠는 물과 같아서 RWD의 원리를 잘 보여주는 말이다.
데스크톱 컴퓨터, 태블릿 PC, 스마트폰 등 다양한 디바이스의 화면 크기에 웹 페이지의 다양한 요소가 어떻게 적응하는지를 보여주는 예
캐스케이드 스타일 시트
개념
철학
도구들
비교

응답성 웹 디자인(RWD) 또는 응답성 디자인은 웹 페이지가 최소 디스플레이 크기에서 최대 디스플레이 크기까지 다양한 디바이스 및 창 또는 화면 크기로 잘 표시되도록 하는 것을 목적으로 [1][2][3][4]하는 웹 디자인 접근법입니다.

응답성이 뛰어난 디자인은 유동성 비율 기반의 그리드,[5][6] 유연한 [7][8][9]이미지, CSS3 미디어 쿼리 등의 기술을 사용하여 [3][10][11]웹 페이지 레이아웃을 보기 환경에[1] 맞게 조정합니다.@media규칙에는 다음과 [12]같은 방법이 있습니다.

  • 유체 그리드 개념에서는 페이지 요소의 크기를 픽셀이나 [6]포인트와 같은 절대 단위가 아닌 백분율 같은 상대 단위로 해야 합니다.
  • 또, 플렉시블 화상은 상대 단위로 사이즈를 설정해, 포함되는 [7]요소 밖에 표시되지 않게 한다.
  • 미디어 쿼리를 사용하면 렌더링 서페이스의 폭(브라우저 윈도 폭 또는 물리 디스플레이 크기) 등 사이트가 표시되는 디바이스의 특성에 따라 페이지가 다른 CSS 스타일 규칙을 사용할 수 있습니다.
  • 응답형 레이아웃은 데스크톱, 노트북, 태블릿, 휴대폰 등 모든 장치 화면 크기를 자동으로 조정하고 조정합니다.

모바일 기기 사용자가 [13][14]웹 사이트 방문자의 대부분을 차지함에 따라 응답성이 뛰어난 웹 디자인이 더욱 중요해졌다.예를 들어, 2015년 구글은 모바일 기기를 [15]통해 검색할 때 모바일 친화적인 사이트의 페이지 순위를 올리기 시작했다.

응답성이 뛰어난 웹 디자인은 사용자 인터페이스의 [16]가소성의 한 예입니다.

관련 개념

모바일 최초, 눈에 띄지 않는 JavaScript 및 점진적인 확장 기능

다음 항목도 참조하십시오.눈에 띄지 않는 JavaScript 및 프로그레시브 확장 기능

모바일 우선 설계와 점진적 강화는 [17]RWD보다 앞선 관련 개념이다.기본 휴대폰 브라우저는 JavaScript나 미디어 쿼리를 이해하지 못하기 때문에 권장되는 방법은 복잡하고 이미지 부담이 큰 사이트를 휴대폰에서 [18][19][20][21]작동시키기 위해 정상적인 성능 저하에 의존하지 말고 기본 웹 사이트를 만들고 스마트폰과 개인용 컴퓨터를 위해 이를 강화하는 것이었습니다.

과제 및 기타 접근법

Luke Wroblewski는 RWD 및 모바일 설계 과제를 요약하고 멀티 디바이스 레이아웃 [22][23][24]패턴 카탈로그를 만들었습니다.그는 단순한 HWD 접근법에 비해 디바이스 익스피리언스 또는 RES(서버측 컴포넌트를 사용한 응답성 웹 설계) 접근법이 모바일 [25][26][27]기기에 더 적합한 사용자 경험을 제공할 수 있다고 제안했습니다.Sass와 같은 스타일시트 언어의 서버 측 CSS 생성기 구현은 이러한 접근법의 일부가 될 수 있습니다.구글은 [28]다른 접근법보다 스마트폰 웹사이트의 반응성 있는 디자인을 추천했다.

많은 출판사가 반응성 있는 디자인을 구현했지만, RWD 채택의 한 가지 과제는 일부 배너 광고와 비디오가 [29]유동적이지 않다는 것이었습니다.그러나 검색 광고와 (배너) 디스플레이 광고는 데스크톱, 스마트폰 및 기본 모바일 장치의 특정 장치 플랫폼과 다양한 광고 크기 형식을 지원하게 되었습니다.플랫폼마다 [30]랜딩 페이지 URL이 다르거나 [31][23][32]페이지에 다른 애드버타이즈 배리언트를 표시하기 위해 Ajax가 사용되었습니다.CSS 표는 하이브리드 고정 및 유체 배치를 [33]허용했다.

모바일 사이트 검증자 [34]및 모바일 에뮬레이터에서 Adobe Edge [35]Inspect와 같은 동시 테스트 도구에 이르기까지 RWD 설계를 검증하고 테스트하는 방법은 다양합니다.Chrome, Firefox 및 Safari 브라우저와 개발자 도구는 서드파티와 마찬가지로 [36][37]응답성이 뛰어난 설계 뷰포트 크기 조정 도구를 제공합니다.

역사

브라우저 뷰포트 폭에 맞는 레이아웃을 최초로 제공하는 사이트는 2001년 [38]말 위르겐 스팡글과 짐 칼바흐(정보 아키텍처), 켄 올링(디자인), 얀 호프만(인터페이스 개발)으로 구성된 면도기 피쉬 팀이 만든 Audi.com입니다.제한된 브라우저 기능은 Internet Explorer의 경우 레이아웃이 브라우저에서 동적으로 조정될 수 있는 반면 Netscape의 경우 크기가 조정될 때 페이지를 서버에서 다시 로드해야 한다는 것을 의미합니다.

Cameron [39]Adams는 2004년에 데모를 만들었다.2008년까지 레이아웃을 설명하기 위해 "유연성", "액체",[40] "유체" 및 "탄성"과 같은 많은 관련 용어가 사용되었습니다.CSS3 미디어 쿼리는 2008년 말/2009년 [41]초에 황금시간대에 거의 준비되었습니다.Ethan Marcotte는 2010년 5월 A List Apart [1]기사에서 응답성이 뛰어난 웹[42] 디자인이라는 용어를 만들어 유체 그리드/유연한 이미지/미디어 쿼리를 의미한다고 정의했습니다.그는 응답성 웹 디자인이라는 제목의 짧은 2011년 저서에서 반응성 웹 디자인의 이론과 실천에 대해 설명했습니다.응답성이 뛰어난 디자인은 .net 매거진이 선정한 2012년 웹 디자인 트렌드 상위 2위로 선정되었으며, 이는 [43]1위로 점진적인 개선으로 이어졌습니다.

Mashable은 2013년을 응답형 웹 디자인의 [44]해라고 칭했습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b c Marcotte, Ethan (May 25, 2010). "Responsive Web design". A List Apart.
  2. ^ "Ethan Marcotte's 20 favourite responsive sites". .net magazine. October 11, 2011.
  3. ^ a b Gillenwater, Zoe Mickley (December 15, 2010). Examples of flexible layouts with CSS3 media queries. Stunning CSS3. p. 320. ISBN 978-0-321-722133.
  4. ^ Schade, Amy (May 4, 2014). "Responsive Web Design (RWD) and User Experience". Nielsen Norman Group. Retrieved October 19, 2017.
  5. ^ "Core concepts of Responsive Web design". September 8, 2014.
  6. ^ a b Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  7. ^ a b Marcotte, Ethan (June 7, 2011). "Fluid images". A List Apart.
  8. ^ Hannemann, Anselm (September 7, 2012). "The road to responsive images". net Magazine.
  9. ^ Jacobs, Denise (April 24, 2012). "50 fantastic tools for responsive web design". .net Magazine.
  10. ^ Gillenwater, Zoe Mickley (October 21, 2011). "Crafting quality media queries".
  11. ^ "Responsive design—harnessing the power of media queries". Google Webmaster Central. April 30, 2012.
  12. ^ "@media rule". w3.org. W3C.
  13. ^ "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper". Cisco. January 30, 2015. Retrieved August 4, 2015.
  14. ^ "Mobile share of U.S. organic search engine visits 2021". Statista. Retrieved October 29, 2021.
  15. ^ "Official Google Webmaster Central Blog: Rolling out the mobile-friendly update". Official Google Webmaster Central Blog. Retrieved August 4, 2015.
  16. ^ Thevenin, D.; Coutaz, J. (2002). "Plasticity of User Interfaces: Framework and Research Agenda". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press. Edinburgh. pp. 110–117.
  17. ^ "What is Responsive Web Design". July 23, 2012.
  18. ^ Wroblewski, Luke (November 3, 2009). "Mobile First".
  19. ^ Firtman, Maximiliano (July 30, 2011). Programming the Mobile Web. pp. 512. ISBN 978-0-596-80778-8.
  20. ^ "Graceful degradation versus progressive enhancement". February 3, 2009. Archived from the original on November 13, 2014.
  21. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. p. 456. ISBN 978-0-321-65888-3. Retrieved March 1, 2010.
  22. ^ Wroblewski, Luke (May 17, 2011). "Mobilism: jQuery Mobile".
  23. ^ a b Wroblewski, Luke (February 6, 2012). "Rolling Up Our Responsive Sleeves".
  24. ^ Wroblewski, Luke (March 14, 2012). "Multi-Device Layout Patterns".
  25. ^ Wroblewski, Luke (February 29, 2012). "Responsive Design ... or RESS".
  26. ^ Wroblewski, Luke (September 12, 2011). "RESS: Responsive Design + Server Side Components".
  27. ^ Andersen, Anders (May 9, 2012). "Getting Started with RESS".
  28. ^ "Building Smartphone-Optimized Websites".
  29. ^ Snyder, Matthew; Koren, Etai (April 30, 2012). "The state of responsive advertising: the publishers' perspective". .net Magazine.
  30. ^ "Google Partners Help". google.com. Retrieved May 21, 2015.
  31. ^ "Server-Side Device Detection: History, Benefits And How-To". Smashing magazine. September 24, 2012.
  32. ^ JavaScript 및 응답형 웹 디자인 Google 개발자
  33. ^ "The Role of Table Layouts in Responsive Web Design". Web Design Tuts+. Retrieved May 21, 2015.
  34. ^ Young, James (August 13, 2012). "Top responsive web design problems... testing". .net Magazine.
  35. ^ Rinaldi, Brian (September 26, 2012). "Browser testing... with Adobe Edge Inspect".
  36. ^ "Responsive Design View". Mozilla Developer Network. Retrieved May 21, 2015.
  37. ^ Malte Wassermann. "Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar". maltewassermann.com. Retrieved May 21, 2015.
  38. ^ Kalbach, Jim(2012년 7월 22일).「최초 응답형 설계 Web 사이트: 아우디(2002년경)[self-published source?]
  39. ^ Adams, Cameron (September 21, 2004). "Resolution dependent layout: Varying layout according to browser width". The Man in Blue.
  40. ^ "G146: Using liquid layout". w3.org. Retrieved May 21, 2015.
  41. ^ "Media Queries". w3.org. Retrieved May 21, 2015.
  42. ^ "OutSeller Group - Organize, Optimize, Maximize". outseller.net. Retrieved May 21, 2015.
  43. ^ Grannell, Craig (January 9, 2012). "15 top web design and development trends for 2012". .net Magazine. Archived from the original on September 11, 2013. Retrieved October 29, 2021.
  44. ^ Cashmore, Pete (December 11, 2012). "Why 2013 Is the Year of Responsive Web Design".