Познавательный холивар: "Адаптивный дизайн и способы реализации"

[ArtemPitov]

Доброго времени суток господа!

 

Вот тут мне в голову пришла идее - долой адаптивный дизайн "аля адаптивная сетка", да здравствует мобильная версия! Что скажете ?

 

Есть два пути реализации, первый (мне не очень) - чекаем девайс и редиректим на моб версию , второй - оптимальный, так званый RESS, ​суть его заключается в подмене и загрузки контента исходя от девайса

 

Пример стырян из хабра, не относится к ОП

$DS = DIRECTORY_SEPARATOR;
require_once( dirname(__FILE__) . $DS . 'libraries' . $DS . 'browser.php');
$device = BBrowser::detectDevice();
if($device == DEVICE_TYPE_MPHONE){
	$tmpl = 'template.m.php';
}
else if($device == DEVICE_TYPE_TABLET){
	$tmpl = 'template.t.php';}
else{
	$tmpl = 'template.php';
}
include( dirname(__FILE__) . $DS . 'templates' . $DS . $tmpl);

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

 

Что скажете, как такой вариант, кто за, то против ?

 

[chukcha]

Нет ничего нового под луной

Это было интересно года три назад, когда моб инет был тонким.

[ArtemPitov]

Нет ничего нового под луной

Это было интересно года три назад, когда моб инет был тонким.

Это не аргумент, смысл грузить все подряд ?

[deim]

Если это внедрять из коробки в ocstore, то упремся в вопросы совместимости со всем подряд

Если это внедрять каким-то боком частично, то упремся в вопросы совместимости как минимум с шаблонами

Честно говоря я тоже давно размышляю над чем-то подобным, но есть куча "но"

 

Почему это нужно:

 - довольно часто просят отображать filterpro в мобильных версиях сверху прямо над списком товаров

 - для всех (на мой взгляд) очевидно, что кучу инфы из боковых колонок мы всегда на мобилках убираем

 - и было бы здорово иметь возможность настроить эту лабуду из админки

 - фотки на мобилки можно было бы грузить мелкие, экономя трафик

 

Вот актуальные вопросы:

 - сколько мобильных разрешений вы собираетесь поддерживать?

 - как именно?

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

 - что делать с совместимостью модулей?

 - как быть с шаблонами?

 

Это так, бегло, за две-три минуты в голову пришло

Змінено 25 грудня 2016 користувачем deim

[ArtemPitov]

@deim, это не относится к сборкам, так чисто для себя и форумчан, тут есть над чем подумать) 

[Dotrox]

Это не аргумент, смысл грузить все подряд ?

А что такое мобильное устройство? Айпад про, где экран 12 дюймов - мобильное устройство? А телевизор на Андроиде, где от 32" и до, вроде, сейчас 80" максимум на рынке?

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

 

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

 

 

Кстати, "холивар" - это holy war. Так что там л должна быть, а то получается какая-то хоррор вар :)

Змінено 25 грудня 2016 користувачем Dotrox

[deim]

@deim, это не относится к сборкам, так чисто для себя и форумчан, тут есть над чем подумать) 

Ну вот я как бы и озвучил сразу вопросы

Буду рад услышать конструктивные ответы и постараюсь предложить свои

[ArtemPitov]

 

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

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

 

 

 

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

ага, и отдавать трафика целую тучу в пустую ? 

 

 

Кстати, "холивар" - это holy war. Так что там л должна быть, а то получается какая-то хоррор вар  :)

 

Кстати, спасибо  ;)

[Yoda]

Шо я имею вам сказать.

 

Увапервых. Гугля рекомендует делать адаптивную версию а не подомен.

Увавтарых ковыряние двух контейнеров для выдачи контента - сложнее чем одного.

Утретих, нынешние браузеры в смартах по полной поддерживают все js приблуды, а 3g 4g коннект, как выше сказал Чучхэ, давно сравняли по толщине мобайл и декстоп.

 

Такшта решение малость из ******* отстоя 80х...

 

Ну и на сладкое

Лебедев раз

и Лебедев два.

 

Такшта Mobile First - ваше все!

[deim]

Лебедев раз устарел. Откройте сайт эппл.

Лебедев два это скорее "бутстрап захватил мир". Все сайты стали одинаковы. В чем-то это хорошо, в чем-то не очень

[snastik]

Лебедев раз устарел. Откройте сайт эппл.

Лебедев два это скорее "бутстрап захватил мир". Все сайты стали одинаковы. В чем-то это хорошо, в чем-то не очень

 

Лебедев два, сам пишет что лебедев раз устарел. Но внятно аргументирует почему.

Большая половина крупных проектов и бутстрап, рядом ничего общего не имеют. Так как 4 колоночная верстка и 12 6 4 3  Откровенная гадость.

[chukcha]

И чем предложение ТС отличается от AMP?

 

А вот напрмиер

 

Зачем нужно дедектить устройство?

 

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

 

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

А так.. тянуть либу mobile detect, чтобы работать на устаревших базе девайсов?

 

Но опять же, вот есть у меня вертикальное и горизонтальное размешение, и при горизонтальном положении  мне "красиво" получится три товара в строке, а не один

 

И.. все равно media..

 

так что..
Универсальность fw, позволяет это делать быстро

 

Кастомные (media) стили также хороши, но при условии кастомизации  самого проекта - что есть редкость, а особенно в адаптации модулей

[Yoda]

И чем предложение ТС отличается от AMP?

 

А вот напрмиер

 

Зачем нужно дедектить устройство?

 

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

 

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

А так.. тянуть либу mobile detect, чтобы работать на устаревших базе девайсов?

 

Но опять же, вот есть у меня вертикальное и горизонтальное размешение, и при горизонтальном положении  мне "красиво" получится три товара в строке, а не один

 

И.. все равно media..

 

так что..

Универсальность fw, позволяет это делать быстро

 

Кастомные (media) стили также хороши, но при условии кастомизации  самого проекта - что есть редкость, а особенно в адаптации модулей

 

Детектить устройства, нужно. Но не для того чтоб раздавать разный контент. Для этого действительно  @media с головой.  А вот изменять обработку событий, без детекта именно типа устройства (touch) не получится. 

А всякие свайпы, дабл тапы могут быть очень полезными в некоторых случаях.

[florapraktik]

Детектить устройства, нужно. Но не для того чтоб раздавать разный контент. Для этого действительно  @media с головой.  

Я извиняюсь.

Если я решил, что часть контента будет лишним на устройствах с размером экрана меньше, чем 768px (например), то как будет лучше убрать "лишний" контент?

Я понимаю, что применив дисплей: ноне; или вилдт = 0; я его уберу с экрана. 

Но браузер его (лишний контент, который скрываем = текст и фото) получит, так? Просто не покажет? Т.е. в объёме трафика и в скорости загрузке выигрыша не будет?

Змінено 25 грудня 2016 користувачем florapraktik

[Yoda]

Я извиняюсь.

Если я решил, что часть контента будет лишним на устройствах с размером экрана меньше, чем 768px (например), то как будет лучше убрать "лишний" контент?

Я понимаю, что применив дисплей: ноне; или вилдт = 0; я его уберу с экрана. 

Но браузер его (лишний контент, который скрываем = текст и фото) получит, так? Просто не покажет? Т.е. в объёме трафика и в скорости загрузке выигрыша не будет?

 

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

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

Если вы паритесь касательно того что в display:none никто не мешает использовать LazyLoad.

 

И еще есть интересный момент, для mobile и для desktop полезноотдавать разного размера изображения. Но реализация через чур громоздка в силу нескольких моментов. Во первых надо пережать сразу изображения в кеш в несколько размеров, во вторых в верстке или отказаться от <img> и выводить изображения через css {background-img} формируя для каждого товара в списке свой айди и после этого генерируя уникальный контейнер с @media стилями под разные разрешения. Либо используя <img>, возвращаемся к lazy и грузим файлы через js, в зависимости от разрешения.

[florapraktik]

объем данных, которые вы сэкономите сократив пару десятков строк HTML, с включенным сжатием - это чистой воды экономия на спичках. 

Если заморачиваться на подобном уровне оптимизацией, то имеет смысл написать свой микрофреймворк адаптивных элементов, либо иные @media стили.

Наверное, понял. Можно замарачиваться чисто внешним видом и не париться за объём страницы, ибо "мобильный интернет стал толстым"?

 

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

Речь об этом?

[Yoda]

Наверное, понял. Можно замарачиваться чисто внешним видом и не париться за объём страницы, ибо "мобильный интернет стал толстым"?

 

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

Речь об этом?

 

Смысл мобильной версии в изменении структуры отображения элементов, средствами css  и возможно изменение реакции элементов на события взаимодействия с элементами управления. 

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

[florapraktik]

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

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

 

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

Лично у меня, телефон только вкл. выкл. на нём интернета вообще нет никакого. И мне абсолютно не понятно, зачем девушка 25 лет покупает в интернете туфли, используя при этом айфон? У неё ноутбук сломался? Или ей так припекло, что она хочет сделать это прямо сейчас и не в состоянии подождать до вечера (когда попадёт домой, где есть нормальный десктоп)? Ибо нереально сделать магазин с шириной экрана 6 см таким же красивым и удобным, как с шириной 40 см.

Что это за шопинг такой? Это не удовольствие. Это мазахизм.

 

Не, я понимаю соцсети, инфосайты... но шопинг???

Змінено 25 грудня 2016 користувачем florapraktik

[snastik]

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

 

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

Лично у меня, телефон только вкл. выкл. на нём интернета вообще нет никакого. И мне абсолютно не понятно, зачем девушка 25 лет покупает в интернете туфли, используя при этом айфон? У неё ноутбук сломался? Или ей так припекло, что она хочет сделать это прямо сейчас и не в состоянии подождать до вечера (когда попадёт домой, где есть нормальный десктоп)? Ибо нереально сделать магазин с шириной экрана 6 см таким же удобным, как с шириной 40 см.

Что это за шопинг такой?

Не, я понимаю соц сети, инфосайты... но шопинг???

 

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

Мало того если на***** "подарили" айфон,  то это очень платежеспобосная прослойка.

[florapraktik]

Должен вас наверное разочаровать

:-)  Ну, нет. Что касается лично меня, то девочки с подаренным айфоном бесконечно далеки от моей целевой аудитории.

 

Но. Вы очень опытный в е-коммерц человек. И Вы хотите сказать, что покупатели с мобильных мучаются со своими 5см экранами потому что у них просто нет компьютера?

 

- Чувак, не мачайся ты с мобильного! Вечером зайдёшь с нормального девайса!

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

 

Вот так обстоят дела, на самом деле?

[snastik]

:-)  Ну, нет. Что касается лично меня, то девочки с подаренным айфоном бесконечно далеки от моей целевой аудитории.

 

Но. Вы очень опытный в е-коммерц человек. И Вы хотите сказать, что покупатели с мобильных мучаются со своими 5см экранами потому что у них просто нет компьютера?

 

- Чувак, не мачайся ты с мобильного! Вечером зайдёшь с нормального девайса!

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

 

Вот так обстоят дела, на самом деле?

Я вам больше расскажу, я на али покупаю все с мобильного, потому что в приложении дешевле.

А девочки делают ровно как вы описали, мало того, мой сосед, недавно узнал что интернет - это не только вконтакт, и там еще есть сайты.

[florapraktik]

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

 

Но если бы я делал сайт для тех, кто реально покупает с телефона потому что у них вообще нет доступа к компьютеру никогда... я бы, наверное, делал совсем другой сайт. Это уже не вопрос @media. Это должна быть другая философия, кмк.

Змінено 25 грудня 2016 користувачем florapraktik

[snastik]

https://habrahabr.ru/post/269419/

 

 

У вас правда есть время, бюлжет или скилл реализовать подобное?

[Dotrox]

выходит 2а адаптивных шаблона - один заточен под моб устройства, а второй под остальное

То есть, в результате мы всё равно пришли к адаптивным шаблонам, но двум. 

Ну, а теперь опять вопрос про телевизоры: в плане браузера - это мобильное устройство, но показывать там мобильную версию бессмысленно, как и десктопную (без мышки с нею будет сложно). Правильный вариант - это смасштабированная планшетная версия, то есть, под большой экран, но управление без мышки. Ну, а планшетная версия для семидюймового планшета и сорокадюймового телевизора тоже не может быть одинаковой.

 

Мне кажется, здравый смысл подсказывает, что вместо зоопарка версий в попытке подстроиться под все устройства, правильный вариант - одна адаптивная (отзывчивая) версия, которая покроет все варианты.

 

 

отдавать трафика целую тучу в пустую

Далеко не целую тучу! В идеале, во всех версиях контент должен быть одинаков, а отличаться только форма его подачи. То есть, по-нормальному разница между мобильной версией и адаптивной может быть только в том, что в мобильной чуть меньше стилей и вёрстки. Ну, и в результате, допустим, получиться сэкономить "аж" пару сотен несжатых (а сжытых в разы меньше) килобайт, да и то при первом заходе, потому что потом стили закешируются. Стоит ли это того?

 

 

Вы хотите сказать, что покупатели с мобильных мучаются со своими 5см экранами потому что у них просто нет компьютера?

Люди не хотят тратить время специально садясь за десктоп ради того, что можно сделать со смартфона/планшета. И в то же время, чем им заняться сидя в метро или лёжа на диване (ну, кроме Энгри бёрдс)?

Дело не в отсутствии десктопа, а в необходимости использования интернета в условиях, где десктоп невозможен.

 

А отсутствие десктопа - это уже последствие того, что некоторые замечают, что и без десктопа можно прекрасно обходиться. Но сначала они начинают обходиться без него, а потом от него отказываются, а не наоборот.

[sitecreator]

мой сосед, недавно узнал что интернет - это не только вконтакт, и там еще есть сайты.

 

Какие необычные люди бывают, однако.

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

Или что делают в таком случае девочки с айфонами?

 

Меня иногда посещают мысли, что для некоторых сама жизнь (а не какой-то интернет) - это и есть "вконтакт".