Responsive web design

반응형 웹사이트(responsive website)를 결정하는 3가지 특징이 있다.

(두개의 아티클에서 내용을 가져왔다)

 

1. Media queries
Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user’s device. This is superior to simply defining breakpoints in the HTML/CSS, as it’s a more tailored experience for the user.
미디어 쿼리를 통해 개발자는 조건 검사를 사용하여 사용자 장치의 속성을 기반으로 웹 디자인을 변경할 수 있습니다. 이는 사용자에게 보다 맞춤화된 경험이므로 HTML/CSS에서 중단점(breakpoint)을 정의하는 것보다 우수하다.
미디어 쿼리와 중단점은 밀접한 관련이 있으며 둘 다 CSS 스타일 시트에서 정의할 수 있다. 

 

반응형 웹사이트를 디자인할때 대개 다음과 같이 세가지 사이즈를 사용한다. : 320~767 px, 1023~768, 1024 이상

 

미디어 쿼리는 'mobile first' 접근법에서 가장 잘 동작하며, 이는 모바일에서 보여지는 화면을 먼저 정의하고 scale up 해나가는 것이다.

 

세개 또는 그 이상의 breakpoint를 포함하라(3개 이상의 디바이스 고려).

 

2. Fluid grids
When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window. This enables designers to maintain a consistent look and feel across multiple devices. Plus, it saves everyone time and money by allowing designers to update one version of the website versus many.
CSS를 사용하여 유연한 그리드를 만들면 사용자가 21인치 데스크톱 컴퓨터, 13인치 노트북, 9.7인치 태블릿 또는 노트북을 사용하는지 여부에 관계없이 화면 또는 브라우저 창의 크기에 맞게 열이 자동으로 재정렬된다.

Fluid grid system

3. Flexible visuals

Marcotte refers here to using code that prevents rich media files from exceeding the dimensions of their containers, as well as viewports. As the “flexible container resizes itself,” he explains, so does the visual within it.

Marcotte는 리치 미디어 파일이 컨테이너 및 뷰포트의 크기를 초과하지 않도록 방지하는 코드 사용을 언급한다. "유연한 컨테이너가 자체적으로 크기를 조정"함에 따라 그 안의 시각적 요소도 마찬가지라고 그는 설명한다.

이 기능을 통해 팀은 크기나 모양에 관계없이 모든 장치에 적용할 수 있는 시대를 초월한 디자인을 만들 수 있다.

 

크기 조정 가능한 벡터 그래픽을 사용하라(SVGs).

 

 

 

 

[Source]

https://www.invisionapp.com/inside-design/examples-responsive-web-design/

11 Powerful Examples of Responsive Web Design

https://www.interaction-design.org/literature/topics/responsive-design#:~:text=Responsive%20design%20is%20a%20graphic,ensure%20content%20consistency%20across%20devices.

What is Responsive Design?