디자이너이자 작가이자 발표자 인 Andy Clarke는 '작은 화면 우선'모바일 상용구 인 320 및 Up의 주요 업데이트를 출시했습니다. 우리는 Clarke (AC)에게 개정판, LESS에 대한 상대적으로 새로운 열정, 그리고 디자이너가 모바일 우선을 고려해야하는 이유에 대해 이야기했습니다.
.net : 모바일 우선으로 전환 할 때 디자이너에게주는 이점은 무엇입니까?
AC : 저에게있어 모바일 또는 콘텐츠 우선 디자인은 모든 웹 디자인이 시작되는 곳입니다.제목, 목록, 단락 및 인용문에 대한 타이포그래피 스타일 등 거의 모든 웹 페이지에서 볼 수있는 요소에 대해 생각해보십시오. 상자, 테이블, 양식 및 단추. 이러한 요소의 모양과 느낌은 화면 크기 나 기기에 따라 변경되지 않을 것입니다. 그리드에서 해당 요소의 배열 만 가능합니다.
그렇기 때문에 디자인 프로세스를 두 단계로 분리하는 것이 합리적입니다. 내가 디자인이라고 부르는 첫 번째는 테두리 스타일, 상자 및 모양과 같은 타이포그래피, 색상 및 질감입니다. 두 번째는 그리드를 하나 또는 여러 개 디자인 한 다음 다른 반응 형 디자인 중단 점을 위해 해당 그리드에 요소를 배열하는 것입니다. 디자인을 시작할 때 저는이 분위기에 집중하고 콘텐츠 / 모바일 우선 디자인의 기준이됩니다. 그때부터 각 중단 점에서 필요할 때만 파일과 스타일을 추가하면 코드가 더 효율적이고 페이지가 더 빨라집니다. 모두가 이깁니다.
.net : 320 이상 업데이트가 필요하다고 생각한 이유는 무엇입니까? 원래 형태로 달성하지 못한 것은 무엇입니까?
AC : 원래 320과 Up을 1 년 전에 썼습니다. 그 당시 우리는 반응 형 웹 디자인과 Simon Collison, Jon Hicks 및 dConstruct 2010을 포함한 유명 사이트와 같은 많은 사이트와 HTML5 Boilerplate와 같은 프레임 워크 및 상용구와 같은 많은 사이트가 데스크톱에서 CSS3 미디어 쿼리를 구성했습니다. 작은 화면보다는 아래로. 제대로하기 위해 320과 Up을 썼습니다.
오늘날 콘텐츠 우선 프레임 워크가 표준입니다. HTML5 Boilerplate와 모바일 사촌은 이제 작은 화면을위한 스타일 시트를 구성합니다. 하지만 Twitter의 Bootstrap과 기타 수많은 프레임 워크에는 유동 격자가 포함되어 있으므로 320과 Up이 여전히 관련성이 있는지 궁금했습니다.
320과 Up은 여전히 많은 사람들, 특히 저에게 매우 관련이 있다는 것을 알게되었습니다. 필자는 작성한 이후로 작업 한 모든 웹 사이트에서이 버전을 사용했으며 새로운 반응 형 웹 디자인 프로젝트를 시작할 때 필요한 파일과 스타일을 포함하도록 성장했습니다. 이제 GitHub에있는 공개 버전은 HTML5 Boilerplate의 최신 파일과 스타일을 포함하고 Bootstrap과의 더 나은 통합을 위해 업데이트해야했습니다. 또한 제가 가장 좋아하는 반응 형 테스트 도구 몇 가지를 포함하고 싶었습니다.
.net : 320 및 Up의 새 버전에서 큰 변화는 무엇입니까?
AC : 거의 모든 것을 단순화했습니다. 블루 문에서 한 번만 사용하고 때로는 전혀 사용하지 않는 파일과 스타일을 제거했습니다. 여기에는 이전 버전의 Internet Explorer에서 CSS3 미디어 쿼리를 활성화하기위한 폴리 필인 Respond.js가 포함됩니다. 요즘 IE7 / 8 사용자에게 항상 그렇듯이 고정 된 중앙 레이아웃을 제공하기 때문입니다.
제 작업에서 저는 HTML5 Boilerplate에서 멀어지고 Bootstrap에 더 가깝게 이동하고 있으며 320 이상은이를 반영합니다. 이것이 320과 Up의 타이포그래피 스타일, 버튼, 상자, 양식 및 표 모두가 Bootstrap과 호환되는 클래스 속성 값을 사용하는 이유입니다.
320과 Up이 Bootstrap이나 Zurb ’s Foundation과 같은 개발 프레임 워크가되는 것을 결코 원하지 않았습니다. 둘 다 훌륭하지만, 그리드 프레임 워크에 대한 저의 널리 알려진 혐오감을 감안할 때, 320 이상에 그리드를 추가 할 방법이 없었습니다. 즉, 동일한 코드를 반복해서 작성하는 것은 광기의 신호이므로 지난 몇 달 동안 'Upstarts'를 작성했습니다.
그것들은 내가 매일 만드는 것에 대한 반응 형 디자인 패턴과 HTML 및 CSS입니다. Upstart는 비 특정 HTML 및 CSS를 사용하여 빌드되며 HTML 예제 페이지와 upstart.less 파일로 구성됩니다. 이번 릴리스에는 2, 3, 4 열 반응 형 모듈과 일부 패널을 포함 시켰으며이를 작성할 때 새로운 Upstarts를 추가 할 것입니다. 저는 다른 사람들이 GitHub에 기여함으로써 동일한 작업을 수행하여 반응 형 웹 디자인을위한 정말 유용한 패턴 라이브러리를 구축 할 수 있기를 바랍니다.
.net : 당신은 정말 늦게까지 더 적게 들어간 것 같습니다 – 디자이너가 배우고 사용하는 것이 왜 중요하다고 생각합니까?
AC : LESS는 제가 CSS를 작성하는 방식을 완전히 바 꾸었습니다. 나는 단순한 개종자가 아닙니다 – 나는 열광자가되었습니다! 내 스타일 시트를 더 모듈화하고 더 잘 정리하는 데 도움이되었습니다. 이렇게하면 잠시 후 프로젝트를 선택하고 더 큰 프로젝트에서 다른 디자이너 및 개발자와 공동 작업 할 때 도움이됩니다.
나는 새로운 320과 Up을 LESS로 만들었습니다. 사람들이 한 곳에서 사이트의 '분위기'스타일을 정의 할 수있는 새로운 변수 파일이 있습니다. 그런 다음 환상적으로 유용한 CSS3 믹스 인을 모아서 타이포그래피, 버튼, 양식 및 기타 LESS 파일을 구성했습니다. CSS를 매우 효율적으로 개발할 수 있습니다. 반응 형 웹 디자인 중단 점에 관해서는 LESS가 한 LESS 파일에서 다른 파일로 스타일 가져 오기를 처리하는 방식이 일반 CSS가 가져 오기를 처리하는 방식보다 낫습니다. 이것이 바로 320 이상의 단일 스타일 시트 버전 만있는 주된 이유입니다.
