Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


ArtemPitov

Recommended Posts

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

 

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

 

Есть два пути реализации, первый (мне не очень) - чекаем девайс и редиректим на моб версию , второй - оптимальный, так званый 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);

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

 

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

 

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

 

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

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

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

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

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

 

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

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

 - как именно?

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

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

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

 

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

Змінено користувачем deim
Надіслати
Поділитися на інших сайтах

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

Надіслати
Поділитися на інших сайтах

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

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

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

 

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

 

 

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

Змінено користувачем Dotrox
  • +1 1
Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах

 

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

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

 

 

 

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

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

 

 

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

 

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

Надіслати
Поділитися на інших сайтах

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

 

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

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

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

 

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

 

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

Лебедев раз

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

 

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

Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах

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

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

 

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

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

Надіслати
Поділитися на інших сайтах

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

Надіслати
Поділитися на інших сайтах

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

так что..

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

 

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

 

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

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

Надіслати
Поділитися на інших сайтах


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

Я извиняюсь.

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

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

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

Змінено користувачем florapraktik
Надіслати
Поділитися на інших сайтах


Я извиняюсь.

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

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

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

 

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

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

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

 

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

Надіслати
Поділитися на інших сайтах


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

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

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

 

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

Речь об этом?

Надіслати
Поділитися на інших сайтах


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

 

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

Речь об этом?

 

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

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

Надіслати
Поділитися на інших сайтах


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

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

 

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

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

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

 

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

Змінено користувачем florapraktik
Надіслати
Поділитися на інших сайтах


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

 

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

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

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

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

 

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

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

Надіслати
Поділитися на інших сайтах

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

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

 

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

 

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

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

 

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

Надіслати
Поділитися на інших сайтах


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

 

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

 

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

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

 

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

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

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

Надіслати
Поділитися на інших сайтах

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

 

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

Змінено користувачем florapraktik
Надіслати
Поділитися на інших сайтах


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

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

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

 

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

 

 

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

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

 

 

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

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

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

 

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

Надіслати
Поділитися на інших сайтах



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

 

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

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

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

 

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.