С чисто дизайнерской точки зрения начинать с мобильной версии имеет смысл.

Самая сложная часть процесса проектирования — это всегда сокращение, а не добавление. Таким образом, чем меньшую площадь экрана вы себе позволяете, тем больше вам придется думать о том, что важно в вашем дизайне, какую информацию вам действительно нужно показать. Кроме того, вы заставите себя думать и о доступности, потому что текст и другие элементы будут меньше.

После того, как вы разработали «облегченную» версию, вы можете приступить к добавлению дополнительных элементов, таких как элементы дизайна, и увеличивать их по мере приобретения недвижимости. Как отметил @Django, вы никогда не должны упускать функции из дизайна.

Для вашего сайта примером может быть меню. Вы решили отказаться от пунктов меню и заменить его значком гамбургера, что является стандартной процедурой. Но если пункты меню — одна из самых важных вещей на странице, вы не захотите скрывать их за кликом.

примечание: красный на синем на вашем сайте действительно вреден для дальтоников, рассмотрите возможность его изменения.

Mobile first — это лучшая практика — это не закон, и если вы понимаете, почему вы «должны» его использовать, вы можете принять обоснованное решение о том, почему вы не хотите использовать его в конкретном проекте, и это нормально.

Стоит отметить, что «сначала мобильные» относятся к дизайну/UX и самой сборке. Mobile first дизайн не ускорит ваш сайт для пользователей, но разработка mobile first ускорит его .

Давайте посмотрим на оба.

Мобильный в первую очередь в дизайне

Мобильный дизайн поможет вам сократить ваши функции и удобство использования до того, что вам нужно . Мысль, стоящая за этим, выглядит так: вместо того, чтобы сначала проектировать настольный компьютер, а затем изо всех сил пытаться поместить все функции, которые вы придумали, в дисплей шириной 320 пикселей и поддерживать хороший 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 отключит его. Это очень плохо.

Mobile first выглядит так:

.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.

Я надеюсь, что это поможет сделать вещи немного яснее, если вы не поняли их раньше!

Происхождение «сначала мобильные»

Идея «сначала мобильные» в отношении адаптивного дизайна исходит из того времени, когда браузеры для мобильных устройств были намного менее функциональными, чем браузеры для настольных компьютеров. Многие из них вообще не поддерживали медиа-запросы, поэтому идея создать причудливый дизайн рабочего стола, а затем вставлять стили, используя медиа-запросы для узкого окна просмотра, терпит крах.

Отсутствие поддержки медиа-запросов — это фактически первый медиа-запрос.

- Брайан Ригер

Mobile first все еще актуален?

Несмотря на то, что браузеры для мобильных устройств догнали своих настольных аналогов, «сначала мобильные» по-прежнему остается наиболее логичным способом написания ваших стилей.

Я предпочитаю думать в терминах "избегания отмены предыдущих объявлений стиля". Аддитивный подход, а не написание стилей, а затем их переопределение, почти всегда приводит к более компактной таблице стилей. Стили, подходящие для большинства/всех устройств, должны быть найдены вне медиа-запросов, а стили, относящиеся только к определенному экрану просмотра, должны находиться за медиа-запросом.

Сравните подход «сначала рабочий стол»:

.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%;
    }
}

Результаты те же, но последний более компактный. Примеры стилей беззастенчиво скопированы из «7 навыков высокоэффективных медиа-запросов» Брэда Фроста .

Есть несколько редких исключений, когда «сначала рабочий стол» подходит больше, чем наоборот. Наиболее заметным из них является то, когда вы делаете такие вещи, как адаптивные таблицы. Более широким окнам просмотра потребуются стили по умолчанию для таблиц, но узкие окна просмотра захотят переопределить все это, чтобы содержимое можно было расположить вертикально.

Не разбивайте свои таблицы стилей

Чего вам абсолютно не следует делать , так это разбивать адаптивные стили на отдельные файлы CSS и использовать атрибут media в элементе ссылки. Нежелательным последствием этого является то, что ПА загружает все связанные таблицы стилей (т. е. при этом нет улучшения скорости).

<!-- 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 (также доступно множество других вариантов), а также оптимизировать изображения для мобильных устройств, что также сократит время загрузки.

На мой взгляд, главная причина сделать мобильную версию в первую очередь состоит в том, чтобы избежать ситуации, когда ваш мобильный сайт не делает всего, что делает версия для ПК. Есть множество веб-сайтов, где мне приходится запрашивать настольную версию на моем телефоне, чтобы что-то сделать, потому что, хотя телефон может это сделать, их мобильная версия не может. Это выводит меня из себя.

Тем не менее, я думаю, что настольные компьютеры в первую очередь хороши, если вы не экономите на мобильных функциях, как это делает большинство фирм.

Кроме того, многие фреймворки делают это довольно просто. Я использовал облегченный дизайн материала, чтобы сделать довольно сложное настольное приложение, и мне действительно пришлось изменить только пару вещей, когда я переделал его для мобильной версии — большая часть работы уже была сделана.