필자는 모바일 최초 디자인이 거의 필수 인 여러 소스를 읽었으며 일반적으로 3G 및 4G를 통해 다운로드 속도가 느린 모바일의 빠른로드 시간과 같은 명백한 이점이 있음을 부인할 수 없습니다.

그러나 이미지가 거의없는 작은 웹 사이트를 구축하는 경우에는 어떨까요?

이 주제에 대한 다른 의견과 사람들이 예외가 있다고 생각하는지 여부를 듣고 싶습니다. 개인적으로 저는 데스크톱 용으로 설계 / 코드를 작성하고 축소하는 것을 선호합니다. 그러나 모바일을 먼저 디자인 / 코딩하는 것이 중요합니까, 아니면 특정 상황에서 귀찮게 할 최종 결과가 중요하지 않습니까?

순전히 디자인 관점에서, 모바일 버전부터 시작하는 것이 합리적입니다.

디자인 프로세스에서 가장 어려운 부분은 항상 가지 치기이며 추가하지 않는 것입니다. 따라서 화면 공간이 작을수록 디자인에서 중요한 사항, 실제로 표시해야 할 정보에 대해 더 많이 생각해야합니다. 또한 텍스트 및 기타 항목이 더 작기 때문에 내게 필요한 옵션에 대해서도 생각해야합니다.

'가벼운'버전을 디자인 한 후에는 디자인 요소와 같은 추가 항목을 추가하고 부동산을 확보하면서 항목을 확대 할 수 있습니다. @Django가 지적했듯이 디자인에서 기능을 생략해서는 안됩니다.

사이트의 경우 메뉴가 될 수 있습니다. 메뉴 항목을 종료하고 햄버거 아이콘 (표준 절차)으로 교체하기로 결정했습니다. 그러나 메뉴 항목이 페이지에서 가장 중요한 것 중 하나라면 클릭 한 번으로 숨기고 싶지 않을 것입니다.

참고 : 사이트의 파란색에있는 빨간색은 실제로 색맹에 좋지 않습니다. 변경을 고려하십시오.

모바일 우선은 모범 사례입니다 -법이 아니며, 왜 "사용해야"하는지 이해한다면 특정 프로젝트에서 왜 그것을 사용하고 싶지 않은지에 대한 정보에 근거한 결정을 내릴 수 있습니다.

"mobile first"는 design / UX 및 빌드 자체 와 관련 이 있습니다. 모바일 퍼스트 디자인은 사용자의 사이트 속도를 높이 지 않지만 모바일 퍼스트 개발 은 그렇습니다 .

둘 다 봅시다.

최초의 모바일 디자인

모바일 퍼스트 디자인 은 기능과 유용성을 필요한 부분으로 나누는 데 도움이 됩니다. 배후에 대한 생각은 다음과 같습니다. 먼저 데스크톱을 디자인 한 다음 320px 와이드 디스플레이에 제공하는 모든 기능을 넣고 좋은 UX를 유지하고 모바일부터 시작하십시오.

UX가 모바일의 모든 기능으로 인해 어수선하거나 손상되면 사용자가 실제로 모든 기능을 필요로하는지 질문해야합니다. 당신은 그들 중 일부를 제거하고 실제로 경험을 향상시킬 수 있습니까? 그렇다면 왜 가지고 있습니까? 어쩌면 그것들은 필수적이지 않을 수도 있고 아마도 사이트에 없어야 할 수도 있습니다.

이론은 이것이 당신이 당신이 필요 로하는 것에 당신의 기능을 파싱하는데 도움을주고 , 그것을 당신이 아름다운 데스크탑 경험으로 확장 할 수 있다는 것입니다.

개발에서 모바일 최초

모바일 첫 개발 에서는 모바일 버전을 먼저 작성한 다음 더 큰 화면에서 예외를 적용하는 것입니다. 이것이 모바일 사용자에게 더 좋고 더 빠른 이유는 다음과 같습니다. 웹 사이트에 대한 두 개의 이미지가 있습니다. 큰 이미지는 데스크톱 용이고 작은 이미지는 모바일 용입니다. 데스크톱을 먼저 코딩하면 CSS는 다음과 같습니다.

.test2 {
    background-image:url('images/verylargeimage.png');
}

// If on a smaller screen...
@media all and (max-width: 600px) {
    .test2 { 
      background-image:url('images/smallimage.png');
    }
}

즉, 모바일 사용자 large.jpg는 CSS가 전환하기 전에 실제로 다운로드합니다 . 이것은 매우 나쁩니다.

모바일은 먼저 다음과 같습니다.

.test2 {
     background-image:url('images/smallimage.png');
}

// If on a larger screen
@media all and (min-width: 600px) {
    .test2 { 
        background-image:url('images/verylargeimage.png');
    }
}

모바일 사용자는 다운로드하지 않습니다 large.jpg.

전에 이해하지 못했을 경우 좀 더 명확 해 지길 바랍니다.

"모바일 퍼스트"의 기원

반응 형 디자인 과 관련하여 "모바일 우선"이라는 개념은 모바일 장치 용 브라우저가 데스크톱 장치에서 볼 수있는 것보다 성능이 떨어질 때부터 시작됩니다. 그들 중 많은 사람들이 미디어 쿼리를 전혀 지원하지 않았기 때문에 멋진 데스크탑 디자인을 구축하고 좁은 뷰포트에 대한 미디어 쿼리를 사용하여 스타일을 고수한다는 아이디어는 얼굴에 평평하게 떨어졌습니다.

미디어 쿼리에 대한 지원이없는 것은 실제로 첫 번째 미디어 쿼리입니다.

- 브라이언 리거

모바일이 여전히 관련성이 있습니까?

모바일 장치 용 브라우저가 데스크탑 브라우저를 따라 잡았음에도 불구하고 "모바일 우선"은 여전히 ​​스타일을 작성하는 가장 논리적 인 방법입니다.

"이전 스타일 선언 취소 취소"라는 관점에서 생각하고 싶습니다. 스타일을 작성하고 나중에 재정의하는 대신에 부가적인 접근 방식은 거의 항상 더 컴팩트 한 스타일 시트로 이어질 것입니다. 대부분 / 모든 장치에 적합한 스타일은 미디어 쿼리 외부에서 찾아야하며 특정 뷰포트에만 관련된 스타일은 미디어 쿼리 뒤에 있어야합니다.

"데스크톱 우선"접근 방식을 비교하십시오.

.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}

"모바일 우선"접근 방식 :

@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

결과는 동일하지만 나중에 더 작습니다. Brad Frost의 7 가지 습관의 매우 효과적인 미디어 쿼리 에서 뻔뻔스럽게 복사 된 샘플 스타일 .

"데스크톱 우선"이 다른 방법보다 더 적합한 경우는 거의 없습니다. 가장 눈에 띄는 것은 반응 형 테이블과 같은 일을 할 때입니다. 넓은 뷰포트는 테이블의 기본 스타일을 원하지만 좁은 뷰포트는 내용을 세로로 쌓을 수 있도록 모든 것을 무시합니다.

스타일 시트를 나누지 마십시오

절대로 하지 말아야 할 한 가지는 반응 형 스타일을 개별 CSS 파일로 분할하고 링크 요소에서 media 속성을 사용하는 것입니다. 이것은 UA가 링크 된 모든 스타일 시트를 다운로드하게함으로써 바람직하지 않은 결과를 초래합니다 (즉, 그렇게하기위한 속도 개선은 없습니다).

<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

코드는 먼저 모바일이어야하지만 디자인 접근 방식은 어떻습니까?

나는 그것이 중요하지 않다고 생각합니다. 설계와 관련된 모든 뷰포트에 대한 배치를 수행 해야 합니다 (필요한 작은 중단 점을 고려하면 최소 2 개 또는 5 개가 포함될 수 있습니다). 순서는 결국 중요하지 않습니다. 많은 설계자들이 데스크톱 레이아웃으로 시작해야하는 원칙이없고 모바일 레이아웃에서 시작하는 것이 더 쉽다는 것을 알게됩니다.

데스크탑 레이아웃에서 시작하려면 해당 페이지의 내용을 향상시키지 않는 혼란스러운 모든 공백을 채우려는 유혹을 피해야합니다. 당신은 정말 그 전화를 들고 웃는 여자의 800x600 재고가 필요합니까? 쓸모없는 보풀을 다운로드하기 위해 모바일 사용자에게 추가 비용이 들기 때문에 데스크톱 사용자가 과거를 건너 뛸 수있는 시각적 혼란입니다.

웹 사이트 www.cosmosdesign.co.nz 를 다양한 화면 크기에서 테스트 했으며 모든 화면에서 제대로 작동합니다. 모바일 퍼스트 디자인에 대한 귀하의 질문에 대해서는 귀하의 디자인 방식이 이미지, 컨텐츠 등과 같은 다른 많은 요소와 함께 타겟 고객을 고려해야한다고 말하고 싶습니다. 타겟 고객이이 웹 사이트를 주로 데스크탑 / 노트북에서 사용한다면 전화와 탭에서 주로 볼 수있는 웹 사이트 인 경우 전략에 대해 다시 한 번 생각해야합니다.

Bootstrap을 사용하여 반응 형 웹 사이트를 디자인하는 것도 고려할 수 있으며 (다른 옵션도 많이 사용 가능) 모바일 친화적 인 사이트에 맞게 이미지를 최적화하여로드 시간을 줄일 수도 있습니다.

나에게 모바일을 먼저해야하는 주된 이유는 모바일 사이트가 데스크톱 버전의 모든 기능을 수행하지 않는 상황을 피하기 위해서입니다. 휴대 전화에서 데스크톱 버전을 요청하여 휴대 전화로 할 수는 있지만 모바일 버전에서는 할 수없는 웹 사이트가 많이 있습니다. 그것은 나에게 쓰레기를 버그.

즉, 대부분의 회사와 마찬가지로 모바일 기능을 나중에 사용하지 않는 한 데스크톱 우선은 괜찮습니다.

또한 많은 디자인 프레임 워크가이를 매우 단순하게 만듭니다. 나는 머티리얼 디자인 라이트를 사용하여 상당히 복잡한 데스크탑 우선 앱을 만들었고 모바일 친화적 버전으로 수정했을 때 몇 가지 사항 만 변경해야했습니다. 대부분의 작업은 이미 완료되었습니다.