반응형 웹 디자인이라는 용어는 2010년 Ethan Marcotte에 의해 이야기되기 시작했으며, 사용자 환경에 상관없이 최적의 사용자 환경을 제공하기 위해 사용자 기기에 응답하는 웹사이트를 디자인하는 프로세스를 말한다. 반응형 웹 디자인의 핵심원리에는 유연한 그리드(Fluid Grid), 유연한 미디어(Responsive Media), 미디어 쿼리(Mediq Queries), 뷰포트(Viewport) 메타요소 등이 있다.
유연한 그리드는 고정 그리드와 유사하게 작동한다. 하지만 유연한 그리드는 고정 그리드와 달리 유연한 그리드는 사용자 기기의 화면 크기에 따라 최적화(변경) 되며, 픽셀(px)이 아닌, 퍼센트(%) 또는 em, rem 같은 상대 측정 단위가 사용된다.
오늘날 많은 웹사이트는 많은 이미지와 비디오를 포함하는 미디어 파일을 사용 하므로 이러한 유형의 콘텐츠가 다른 화면 크기에 최적화되어 제공되어야 한다. 일반적으로 CSS 스타일시트에 이미지 크기를 픽셀로 디자인(설계) 하지만, 픽셀 단위를 사용하는 것은 반응형 디자인에 적합하지 않다. 보다 적합한 디자인을 위해 반응형 웹 디자인에서는 미디어 유형에 max-width 속성을 적용해야 한다. 미디어 파일이 컨테이너를 넘쳐나는 것을 막기위해 max-width 속성을 100%로 설정해야 한다.
CSS3 Media Queries를 사용하면 반응형 디자인을 보다 구체적으로 세분화하고 특정 화면 크기에 따라 적절하게 조정할 수 있다. 미디어 쿼리를 사용하여 화면 크기를 결정하고 CSS 스타일을 반영한다.
모바일/데스크탑 기기 자체에서 웹사이트 초기 너비(width)를 결정할 수 없기에 미디어 쿼리의 조건이 맞지 않을 경우 기본적으로 뷰포트 메타 요소에 적용된 코드가 작동하게 된다. 뷰포트 메타 요소에 설정한 기기 너비(width), 초기 배율(initial-scale) 등을 설정해 기기의 화면에 최적화 할 수 있다.
반응형 웹 디자인을 적용하는 가장 중요한 이유는 방문객에게 보다 나은 사용자 경험을 제공하고 웹사이트 사용성을 향상 시키는데 있다. 사용하는 기기에 최적화된 UI를 제공함에 따라 사용자는 콘텐츠에 집중할 수 있어 더욱 오랜 시간 사이트에 머물 수 있다. 물론 모바일과 데스크톱 환경은 다르기에 이를 고려하여 디자인 하지 않으면 오히려 독이 될 수 있지만, 각 환경에 따른 사용자의 행동 패턴과 인터페이스의 차이를 분석하여 적합한 UI를 제공한다면 분명 사용자 경험과 사용성은 크게 향상될 수 있다.
통계에 따르면 전 세계 웹 트래픽의 절반 이상이 모바일 기기에서 비롯된 것으로 나타났다. 즉, 반응형을 적용한 웹사이트는 모바일 기기 사용자에게 아무런 제약 없이 접근 가능한 환경을 제공할 수 있어 기회 창출이 커진다. 웹 사이트를 방문했을 때 작은 화면에서도 멋지게 보이고 작동한다면, 굳이 데스크톱으로 옮겨 서비스를 이용하지 않아도 되므로 비즈니스 관점에서 모바일 기기의 리드 및 고객 증가를 볼 수 있다.
반응형 웹디자인 제작 시, 필히 고려해야 할 포인트는 빠른 로딩 속도이다. 유연한 그리드와 미디어 덕분에 반응형 웹사이트는 기존의 정적 웹사이트 보다 로딩 시간을 향상 시킬 수 있다. 단, 무조건 반응형 웹사이트 속도가 정적 웹사이트 보다 빠른 것이 아니라 속도 향상을 꾀할 수 있는 전문가의 손길이 필요하다.
웹사이트에서 보다 많은 시간을 보내면 방문자가 구독자 또는 구매자로 전환 할 가능성이 높아진다. 조사에 따르면 스마트폰 기기의 평균 전환율은 데스크톱 전환율 보다 최대 64% 높다. 이것은 다양한 화면 크기 대응, 빠른 로딩 속도, 사용하기 쉬운 웹사이트를 통해 서비스 했을 때 사용자 경험이 향상된 결과이다.