Нужно ли сначала программировать сайт для мобильных устройств?

10

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

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

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

ссс
источник
2
Я не уверен, что твой вопрос. Это «Должен ли я сделать мобильный сайт» или «Сначала я должен сделать мобильный сайт»? Первый вариант - «Да, 50% посещений веб-сайтов - мобильные устройства», второй - «решите, я предпочитаю Desktop, а затем реорганизуем контент». Как примечание, этот сайт очень хорошо работает на мобильных устройствах. Я бы предложил свернуть меню - оно занимает весь экран мобильного телефона.
Метасоматоз
@Metasomatism. Вопрос основан на эффективности кода и его загрузке на разных устройствах. Я мог бы попробовать эту ссылку, если она не набирает обороты (не хочу публиковать сообщения дважды). Я изменил навигацию для мобильных устройств, если вы имеете в виду белую навигацию, складывающуюся над контентом, это намерение. :)
ccc
1
Я начал свой последний проект с «мобильным первым» подходом, и я думаю, что буду делать это для каждого следующего проекта, где мобильный сайт желателен. Ограничивая себя, я лучше могу сосредоточиться на самых важных вещах, а не думать о каких-то фантастических вещах вокруг этого. Я также считаю, что легче масштабировать (поскольку у меня мало вещей, которые можно поместить в большую область) по сравнению с уменьшением масштаба (много вещей нужно поместить в небольшую область). Но я думаю, что это может отличаться от человека к человеку.
ROAL
3
Думаю, вам было бы полезно прочитать мой учебник по
адаптивному
1
Во-первых, мобильные технологии направлены на то, чтобы сосредоточиться на самом важном, как в программировании для предоставления ресурсов, так и в дизайне для представления контента. Таким образом, это отличный способ начать разработку адаптивного веб-сайта, потому что вы оказались сведены к минимуму элементов контента и выбора макета и вынуждены расставлять приоритеты.
Контур

Ответы:

24

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

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

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

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


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

PieBie
источник
Я также дальтоник: p ... Это тот цвет, который соответствует стилю, за который я иду. Каждая из 4 страниц будет окрашена по-разному. Если вы думаете, что это плохая идея, дайте мне знать. :)
ccc
Добро пожаловать @MarcusPorter, и спасибо, что приняли мой ответ. Иногда полезно спросить других, что они думают, если у вас есть сомнения;) И, конечно, неплохо придать каждой странице свой цвет. Хотя мне любопытно, как вы
выбираете
3
Какая? Нет. Вы не должны строить два сайта. Это глупо, и с 2005 года это было не лучшим решением. Вы создаете один сайт, который адаптируется к его среде. Это называется отзывчивый веб-дизайн
PieBie
1
Я не имел в виду особенности, я имел в виду оборки, отступы, возможно, даже изображения. Никогда не показывает, конечно. Хорошим примером может служить меню: вы фактически не добавляете меню, когда сайт становится больше, но вы заменяете кнопку полным меню.
PieBie
2
@piebie: На самом деле, сайты с большим содержанием контента снова создают отдельную мобильную инфраструктуру. Проверьте проект AMP, например.
Дэвид Малдер
11

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

Стоит отметить, что «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.

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

Джанго Рейнхардт
источник
2
На самом деле, это только отчасти правильно. Согласно результатам мобильных тестов Тима Кадлека 2012 года по загрузке изображений , только очень старые мобильные браузеры (Android 3.0, Blackberry 6, Safari 4 и т. Д.) Будут загружать оба изображения. Любой другой мобильный браузер будет загружать только соответствующее изображение.
cimmanon
@cimmanon Ты абсолютно прав. Спасибо, что предупредили меня об этом. Я поменял его на пример, который провалил тестирование Кадлеца.
Джанго Рейнхардт
По ссылке правильным способом будет background-imageиндивидуальная настройка на рабочий стол и мобильный телефон.
КГ
4

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

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

cimmanon
источник
«Это не имеет большого значения» - конечно, это имеет значение. И вот о чем этот вопрос должен быть. Кодирование / программирование, как правило, здесь не по теме, поэтому не очень актуально (это, конечно, актуально, но не должно быть главным)
Cai
1
Можете ли вы определить разницу между адаптивным дизайном, в котором мобильный макет был разработан до макета рабочего стола? Фраза «сначала мобильный» происходит от кодирующего аспекта адаптивного дизайна. Неважно, какой макет спроектирован в первую очередь, если оба будут выполнены.
cimmanon
Другие уже говорили об этом в ответах. Создание настольного веб-сайта с полным набором функций и необходимостью убирать вещи из-за того, что они не подходят или работают на мобильных устройствах, не так просто, и вам часто приходится сталкиваться с неловкими неуместными элементами / функциями. Проектирование для мобильных устройств, а затем добавление функций для настольных компьютеров очень просто. Это так просто. Но это действительно имеет значение. Может быть, не для человека, кодирующего сайт, но для дизайнера.
Цай
Вы не ответили на мой вопрос: можете ли вы сказать, какой из них был сделан первым? Тот факт, что многие люди плохо разбираются в макетах рабочего стола и создают много мусора на своих страницах, не имеет никакого отношения к тому, какой макет должен быть спроектирован в первую очередь. И то, и другое должно быть сделано, поэтому то, что нужно сделать первым, будет зависеть больше от индивидуальных предпочтений / способностей дизайнера.
Цимманон
Все, что я говорю, это то, что это влияет на процесс проектирования. Возьмите 2 сценария: 1. Вы разрабатываете адаптивный сайт, принимая во внимание мобильные и настольные системы и все, что находится между ними на протяжении всего процесса. Отлично. 2. Вы разрабатываете сайт только для настольных компьютеров, вплоть до окончательного утверждения, и ваш клиент говорит: «О, мне нужно, чтобы он тоже работал на мобильных устройствах ...», и он по-прежнему хочет функции x, y и z, которые не будут работать на мобильным, но вы не приняли это во внимание, когда проектировали для настольного компьютера ... Какой сценарий проще?
Цай
2

Я протестировал ваш сайт www.cosmosdesign.co.nz на экранах разных размеров, и он прекрасно работает на всех экранах. Относительно вашего вопроса о дизайне мобильных мобильных устройств, я хотел бы сказать, что ваш подход к проектированию должен учитывать вашу целевую аудиторию наряду со многими другими факторами, такими как изображения, контент и т. Д. Если ваша целевая аудитория будет использовать этот сайт в основном на настольных компьютерах / ноутбуках, то вы можете Конечно, продолжайте свой подход, но если это веб-сайт, который будет в основном просматриваться на телефонах и вкладках, то вам нужно подумать о своей стратегии.

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

wazza
источник
Вы делаете хорошее замечание относительно целевой аудитории. Поскольку моей целевой аудиторией являются малые предприятия и т. Д. Я думаю, моя демографическая группа будет просматривать мой сайт с настольными компьютерами. Я кратко опробовал бутстрап некоторое время назад, и, похоже, это не для меня, хотя спасибо за предложение.
ccc
Да, я знаю, что фреймворки, такие как Bootstrap, увеличивают код и усилия, но это, безусловно, стоит усилий, если вам нужна помощь, не стесняйтесь спрашивать меня.
wazza
Я чувствую, что я все еще учусь CSS, я боролся с этой одной страницей. Я обязательно попробую это снова на одном из моих клиентов в будущем.
ccc
Так что, если вы уверены в своей целевой аудитории, вы можете очень хорошо перейти на этот подход, но я хотел бы предупредить вас, что иногда трудно (если вы не используете Framework) уменьшать масштаб изображения для небольших экранов позже, когда у вас много контента и функциональные возможности на вашем сайте. Всего наилучшего.
wazza
Да, ты прав. Кроме того, PieBie дал несколько полезных советов на эту тему, если вы хотите почитать.
ccc
-2

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

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

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

Мэтью
источник
Иногда функции преднамеренно оставляют для мобильных устройств, потому что они не в состоянии справиться с его интенсивностью
Зак Сауцер
конечно, если это проблема, это проблема. Но это почти никогда не проблема, потому что современные телефоны сейчас довольно мощные компьютеры.
Матфея
На многих сайтах действительно случается так, что мне нужно выбрать настольную версию, потому что мобильная версия даже не сортирует элементы в списке, либо скрывает вкладку обсуждения, либо не работает некоторая удобная фильтрация. Это действительно больше похоже на «сначала делай десктоп, а потом - быстро, быстро, вчерашний график заканчивается»
портируй
Если у вас действительно тяжелый сайт, то есть до того момента, когда он становится веб-приложением, вам лучше все равно портировать его на приложение, а не пытаться втиснуть все на мобильный сайт. Например, Facebook разделил свой настольный сайт на два приложения: Facebook и Messenger.
PieBie
Хотя Facebook довольно неплохо сделал все доступным только в мобильном веб-приложении - вы можете отправлять туда сообщения без Messenger.
Матфея