Я прочитал несколько источников, которые утверждают, что первый дизайн для мобильных устройств почти необходим, но я не могу отрицать, что он имеет очевидные преимущества, такие как более быстрое время загрузки для мобильных устройств, которые обычно имеют более медленные скорости загрузки через 3G и 4G.

Но что, если вы создаете небольшой веб-сайт с очень небольшим количеством изображений.

Я хотел бы услышать о других мнениях в этой теме и о том, считают ли люди исключения. Лично я предпочитаю сначала спроектировать / написать код для рабочего стола и оттуда уменьшать. Но действительно ли так важно сначала спроектировать / кодировать для мобильных устройств или конечные результаты не настолько значительны, чтобы беспокоить в определенных ситуациях?

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

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

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

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

sidenote: Красное на синем на вашем сайте очень плохо для дальтоников, пожалуйста, подумайте об этом.

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

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

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

Мобильный сначала в дизайне

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

Мобильник сначала выглядит так:

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

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

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

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

Отсутствие поддержки медиазапросов фактически является первым медиазапросом.

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

Мобильный прежде всего актуален?

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

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

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

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