Комментарии 102
Только сейчас понял почему ненавиду адаптивную вёрстку. Я смотрю сайты и 4х устройств. Десктоп, ноутбук, планшет, телефон. И когда ты всё сделал на десктопе и потом тебе быстро надо что-то сделать на мобиле, нифига не понятно где-что. Вообще любое переклюцение — боль.
А ещё очень часто на мобильной версии чего-то важного/нужного нет, а если есть, то не работает. Меняешь user-agent и прям сразу лучше становится. Это в т.ч. про Яндекс.
Бывает и наоборот, в мобильной версии avito есть фильтр по цене, а в десктопной я его в упор не вижу, есть только сортировка, а очень хочется отфильтровать хлам по цене.
Убедительно прошу вебмастеров давать возможность отказа от адаптации при просмотре сайта с мобильного устройства. Я лично знаю не так много сайтов, которые были бы реально удобны и функциональны в мобильной версии, зато знаю массу сайтов, которые отлично работают в полной версии на смартфоне. В связи с этим я крайне неодобрительно отношусь к адаптивной вёрстке, особенно если некоторые хитромудрые разработчики умудряются обойти даже смену юзерагента мобильного браузера и всё равно подсунуть адаптированную версию мне. Нормальные разработчики делают внизу сайта кнопку «Полная версия», и наоборот, «Мобильная версия», если мне вдруг вздумается с компьютера поглядеть на таковую.
Поддержка чистоты кода + комментарии, модульность и мобильный дебагер и все Ваши проблемы решаются за считанные минуты.
Вероятно, вы попадали как раз на отдельные мобильные версии, которые часто отстают по предоставляемым возможностям от настольных, потому что их нередко делают «на сдачу» и «когда будет время».
НЛО прилетело и опубликовало эту надпись здесь
Глядя на первую иллюстрацию в тексте (https://habrastorage.org/files/546/3b7/f92/5463b7f9246a44bbb809eac54cc853b8.png) могу сказать, что самая правая версия (подписанная 400px) — позор, как можно не экономить место на экране юзера!
Под заголовком, где крупные буквы с минимальным интерлиньяжем совсем не радуют глаз (заголовок «не читается», но по высоте занимает полэкрана!) мы видим три явно служебные ссылки, которые (как неожиданно!) занимают остаток экранчика.
В общем, делая версии для каждого размера, надо думать о человеке, а не о мифическом покрытии всех разрешений и не о доходах (это шпилька в сторону «мобилоделателей», которые еще треть страницы на мобильнике баннером занимать умудряются)!
P.S. Лично меня в «мобильных» версиях и адаптивной верстке больше беспокоит, что в них нельзя масштаб менять пальцами — автор свято верит, что он выбрал наилучшие размеры шрифтов, и не оставляет варианта зума-анзума. Лично мне куда приятнее включать (если есть возможность) «десктопный вид» сайтов, и уже с зумом и протяжкой через экран читать — получается куда понятнее, удобнее, да и сайты, привычные с десктопа, быстрее в обращении оказываются, все уже знаешь, где находится.
Под заголовком, где крупные буквы с минимальным интерлиньяжем совсем не радуют глаз (заголовок «не читается», но по высоте занимает полэкрана!) мы видим три явно служебные ссылки, которые (как неожиданно!) занимают остаток экранчика.
В общем, делая версии для каждого размера, надо думать о человеке, а не о мифическом покрытии всех разрешений и не о доходах (это шпилька в сторону «мобилоделателей», которые еще треть страницы на мобильнике баннером занимать умудряются)!
P.S. Лично меня в «мобильных» версиях и адаптивной верстке больше беспокоит, что в них нельзя масштаб менять пальцами — автор свято верит, что он выбрал наилучшие размеры шрифтов, и не оставляет варианта зума-анзума. Лично мне куда приятнее включать (если есть возможность) «десктопный вид» сайтов, и уже с зумом и протяжкой через экран читать — получается куда понятнее, удобнее, да и сайты, привычные с десктопа, быстрее в обращении оказываются, все уже знаешь, где находится.
НЛО прилетело и опубликовало эту надпись здесь
Согласен. Но уж если на ресурсах, которые делают вид, что заботятся о юзерах, такое сплошь и рядом, то на кого равняться? Взгляните на этот пост с мобильного, далеко ходить не будем )
Мобильный гугл хром может делать это из коробки. Нижняя галочка
Это связано со старыми рекомендациями запрещать зум, чтобы нормально получать клики (иначе одиночный тап срабатывает с задержкой), есть и другие способы это починить.
НЛО прилетело и опубликовало эту надпись здесь
Я не web-дизайнер и даже не верстальщик, но, бывает, приходится наваять веб-морду к какой-нибудь тулзе. Расскажите, пожалуйста, почему стоит продолжать использовать px, когда есть гораздо более гибкие vmin, em/rem и %? Мне всегда удавалось обойтись ими, но, как я уже сказал, мои странички далеки от совершенства. Тем не менее, на мой взгляд, использование px — это всегда надежда на то, что пиксели клиента примерно такие же как пиксели разработчика. И если на десктопах это чаще оказывается правдой, то с зоопарком мобильных устройств сказать, сколько займет max-width: 1200px; мне кажется невозможным.
Старые версии IE были главным препятствием в использовании пикселей, поскольку те браузеры не позволяли пользователям нормально менять масштаб страницы. Современные браузеры отлично справляются с масштабированием страницы, свёрстанной в любых единицах размеров.
CSS — это высокоуровневый язык, где мы работаем с логическими пикселями, что гарантирует предсказуемость указываемых размеров на экранах с любой плотностью физических пикселей. Суть хорошо видна на иллюстрации:
Указание размеров интерфейсных элементов в относительных единицах отличается плавным изменением всей вёрстки при любом, даже самом небольшом изменении размеров окна браузера. Использование фиксированных размеров, конечно, вносит свои ограничения, но взамен мы получаем больший контроль над дизайном. Выбор единиц размеров зависит от дизайнерской задумки.
CSS — это высокоуровневый язык, где мы работаем с логическими пикселями, что гарантирует предсказуемость указываемых размеров на экранах с любой плотностью физических пикселей. Суть хорошо видна на иллюстрации:
Указание размеров интерфейсных элементов в относительных единицах отличается плавным изменением всей вёрстки при любом, даже самом небольшом изменении размеров окна браузера. Использование фиксированных размеров, конечно, вносит свои ограничения, но взамен мы получаем больший контроль над дизайном. Выбор единиц размеров зависит от дизайнерской задумки.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
От меньшего экрана к большему (progressive enchancement или mobile-first)
От большего экрана к меньшему (graceful degradation)
Не путайте людей, доверяющих Яндексу и прочим «авторитетам»: progressive enchancement и graceful degradation не имеют никакого отношения к адаптивной верстке.
Дело в том, что эти термины имеют достаточно размытое понятие.
Вы, вероятно, подразумеваете доступность интерфейса в зависимости от технических возможностей браузера. Здесь же речь идёт о наборе интерфейсных возможностей, которые могут быть доступны в зависимости от размеров экрана устройства.
Грубо говоря, на большом экране настольного компьютера может уместиться значительно больше кнопок, нежели в мобильном телефоне.
Вы, вероятно, подразумеваете доступность интерфейса в зависимости от технических возможностей браузера. Здесь же речь идёт о наборе интерфейсных возможностей, которые могут быть доступны в зависимости от размеров экрана устройства.
Грубо говоря, на большом экране настольного компьютера может уместиться значительно больше кнопок, нежели в мобильном телефоне.
Решил проверить: поиск по статьям Хабра (и на других сайтах), статья в вики (https://en.wikipedia.org/wiki/Progressive_enhancement) говорят о том, что у терминов «progressive enchancement» и «graceful degradation» есть вполне четкие определения. Соответственно, использовать их в контексте подходов адаптивной верстки — это запутывать неопытного читателя.
В статье говорятся правильные вещи (хоть и с опозданием на несколько лет), но когда она будет появляться в поисковой выдаче по запросам «progressive enchancement» и «graceful degradation», это будет сбивать с толку. Особенно тех, кто слепо готов верить материалам, размещенным от имени авторитетной компании.
В статье говорятся правильные вещи (хоть и с опозданием на несколько лет), но когда она будет появляться в поисковой выдаче по запросам «progressive enchancement» и «graceful degradation», это будет сбивать с толку. Особенно тех, кто слепо готов верить материалам, размещенным от имени авторитетной компании.
Статистика использования метатега viewport на сайтах из списка Alexa Top 1M
46,7% сайтов используют адаптивную вёрстку. Можно, конечно, опираться на личные предпочтения в процессе принятия решения о переводе сайта на резину, но это уже мейнстрим.
46,7% сайтов используют адаптивную вёрстку. Можно, конечно, опираться на личные предпочтения в процессе принятия решения о переводе сайта на резину, но это уже мейнстрим.
Какая статья… от менеджера или вымученная для поддержания блога. Про lost уже выше сказали, когда профи говорят про бутсрап меня аж передергивает.
Большинство задач адаптивной вёрстки решаются достаточно простыми легковесными техниками, овладение которыми будет ценным навыком для любого разработчика интерфейсов. Несмотря на это, существует большое количество инструментов, привносящих универсальные конструкции для облегчения рутины команды из нескольких разработчиков. Кажется, что упоминание таких инструментов полезно для полноты статьи.
то есть вы дали на линк на устаревший уже jeet, а так bootstrap и говорите что это прогрессивные технологии? А bootstrap для команды так вообще зло.
Ох, я понял. Вы покопались в загашнике и вытащили старую статью, немного оживить блог летом. Особенно доставляет упоминание эмулятора в dev-tools _Chromium_ который уже в стабильной ветке некоторое количество релизов.
Упоминание эмулятора важно для читателей, которые могут не знать о доступном способе проверки вёрстки под произвольные размеры окна браузера.
Действительно, эмуляция существует уже давно и в статье приведён скриншот Яндекс.Браузера, но подразумевается, что аналогичный эмулятор есть во всех браузерах, реализация которых базируется на Chromium. Конечно, аналогичные эмуляторы есть и в других браузерах, например в Firefox.
Действительно, эмуляция существует уже давно и в статье приведён скриншот Яндекс.Браузера, но подразумевается, что аналогичный эмулятор есть во всех браузерах, реализация которых базируется на Chromium. Конечно, аналогичные эмуляторы есть и в других браузерах, например в Firefox.
Почему для команды зло? Альтернативы?
НЛО прилетело и опубликовало эту надпись здесь
Стандартизация, унификация. СУВ (не git-ом единым, есть и другие системы) и команда это конечно хорошо. Но совсем отлично когда к этому добавляется некое соглашение в концепт которого не нужно погружать каждого нового участника. Я уже молчу про варианты разных админок которые даже бэкэндер может набросать на скорую руку.
чем так плох бутстрап для профи?
По моему мнению Bootstrap подходит для двух вещей:
— прототипирование интерфейса;
— создание дизайна без дизайнера. Например, когда программисты делают админки, то вместо стандартных контролов браузера подключают уже оформленные Boostrap'a.
Но если в команде есть дизайнер, верстальщик и это уже конечный продукт, то Boostrap больше враг, чем помощник.
— прототипирование интерфейса;
— создание дизайна без дизайнера. Например, когда программисты делают админки, то вместо стандартных контролов браузера подключают уже оформленные Boostrap'a.
Но если в команде есть дизайнер, верстальщик и это уже конечный продукт, то Boostrap больше враг, чем помощник.
Вы повторили тезис, но не объяснили причины. По каким причинам bootstrap враг? И по каким причинам его нельзя использовать на фронтенде для конечного продукта?
Из-за того, что дизайн уникальные его контролы лишние. Немногие люди делают кастомизацию. Его сетка не всегда полностью нужна. Да и есть сомнения, что вообще нужна. Сколько видел примеров от нее код становится более избыточен.
Плюс сейчас все больше людей, которые думают, что они верстальщики, а на деле они обычные «бутстрапщики». Такой род «специалистов » не знает основы верстки. К примеру, они не знают как сделать сетку самостоятельно.
Плюс сейчас все больше людей, которые думают, что они верстальщики, а на деле они обычные «бутстрапщики». Такой род «специалистов » не знает основы верстки. К примеру, они не знают как сделать сетку самостоятельно.
Правильно я понял аргументы?
- "контролы" (что имеется в виду?), которые предоставляет бутстрап не используются
- сетка, которую предоставляет бутстрап, не используется
- люди, использующие бутстрап слишком много о себе возомнили. Они не смогут написать собственный бутстрап при необходимости.
Какие выводы я могу сделать о специалистах, которые приводят такие аргументы:
- Они не знают инструмент. В частности, страница http://getbootstrap.com/customize/ по каким-то причинам осталась для них скрытой, не смотря на то, что вынесена в основную навигацию на сайте фреймворка.
- Они не понимают выгоды унификации и стандартизации
- Они считают, что процесс важнее результата и склонны изобретать велосипеды
- Несмотря на то, что они считают себя знатоками вёрстки, дао первой буквы в аббревиатуре CSS они не познали
Контролы — это элементы с помощью, которых пользователь может управлять интерфейсом.
Boostrap полезный инструмент для своих задач. Нельзя делать на Bootstrap'е уникальный дизайн, потому что вам придется делать свой skin для него. Если вы используете только сетку, то вы будете вынуждены делать большую вложенность в HTML'е.
Дальше пройдусь по вашему комментарию.
1. Я повторюсь. Не все костамизируют его. Большинство скачивают полную версию.
2. Я может и ошибаюсь, но я понял, что если человек не использует Boostrap, то он не знает основы веб-дизайна? К основам я причисляю и унификацию и стандартизацию
3, 4. Прежде чем делать выводы, вы хотя бы лично со мной пообщайтесь. Может вы правы, а может и нет.
Boostrap полезный инструмент для своих задач. Нельзя делать на Bootstrap'е уникальный дизайн, потому что вам придется делать свой skin для него. Если вы используете только сетку, то вы будете вынуждены делать большую вложенность в HTML'е.
Дальше пройдусь по вашему комментарию.
1. Я повторюсь. Не все костамизируют его. Большинство скачивают полную версию.
2. Я может и ошибаюсь, но я понял, что если человек не использует Boostrap, то он не знает основы веб-дизайна? К основам я причисляю и унификацию и стандартизацию
3, 4. Прежде чем делать выводы, вы хотя бы лично со мной пообщайтесь. Может вы правы, а может и нет.
Boostrap полезный инструмент для своих задач. Нельзя делать на Bootstrap'е уникальный дизайн, потому что вам придется делать свой skin для него. Если вы используете только сетку, то вы будете вынуждены делать большую вложенность в HTML'е.
Это аргумент против бутстрапа? Вы серьёзно? Бутстрап — это фрейм-ворк, скелет, основа. Ваш аргумент звучит так — "бутстрап — враг, потому что он не готовый продукт".
- Я повторюсь. Не все костамизируют его. Большинство скачивают полную версию.
Да, это конечно же, проблема бутстрапа :))
- Я может и ошибаюсь, но я понял, что если человек не использует Boostrap, то он не знает основы веб-дизайна? К основам я причисляю и унификацию и стандартизацию
унификация и стандартизация бывает на разных уровнях. Алфавит тоже унифицирован.
3, 4. Прежде чем делать выводы, вы хотя бы лично со мной пообщайтесь. Может вы правы, а может и нет.
чтобы делать такие выводы не обязательно личное общение. Если человек нацелен на результат, он стремится к нему по кратчайшему допустимому пути и использует наиболее подходящие для этого инструменты. Когда человек говорит, что отвёртка — это зло, потому что при отсутствии отвёртки он не сможет завернуть шуруп руками, я делаю вывод, что человеку вовсе не нужен завёрнутый шуруп, ему хочется демонстрации того, какие сильные у него руки.
Пассаж про отвертку не в кассу. Вы додумываете и передергиваете тезис оппонента.
Он не говорит, что Бутстрап зло. Он говорит, что это инструмент со своей нишей использования. А вне этой ниши он излишний и неоптимальный.
И тут я с ним согласен — начиная с какого-то момента усилия по допиливанию и кастомизации б-па становятся сопоставимыми с написанием CSS с нуля.
Хотя лично по моему мнению — именно контролы б-па это не главное; хочется использовать — ради бога. Больше раздражает сегодняшняя манера везде и всюду совать его сетку.
Он не говорит, что Бутстрап зло. Он говорит, что это инструмент со своей нишей использования. А вне этой ниши он излишний и неоптимальный.
И тут я с ним согласен — начиная с какого-то момента усилия по допиливанию и кастомизации б-па становятся сопоставимыми с написанием CSS с нуля.
Хотя лично по моему мнению — именно контролы б-па это не главное; хочется использовать — ради бога. Больше раздражает сегодняшняя манера везде и всюду совать его сетку.
Но если в команде есть дизайнер, верстальщик и это уже конечный продукт, то Boostrap больше враг, чем помощник.
это не мои слова. Я пытаюсь выяснить чем бутстрам враг. Чем конкретно он излишен и неоптимален? С учётом кастомизации мышкой.
И тут я с ним согласен — начиная с какого-то момента усилия по допиливанию и кастомизации б-па становятся сопоставимыми с написанием CSS с нуля.
а можно поподробнее? Я искреннее пытаюсь получить от собеседников хоть какую-то конкретику, но пока тщетно.
Хотя лично по моему мнению — именно контролы б-па это не главное; хочется использовать — ради бога. Больше раздражает сегодняшняя манера везде и всюду совать его сетку.
чем плоха его сетка? Или это неприязнь к конкретным исполнителям?
Что подробнее? Их сервис кастомизации меняет только цвета, размер шрифта и паддинги. Но если начинаешь лезть в код поглубже (креатив дизайнера не вписывается только в цвета), выясняется, что там внутри одно зависит от другого и не всё так просто можно поменять. Выходит нужно либо проводить рефакторинг внутри б-па (дико бессмысленное занятие, но я однажды это делал :), либо прикручивать что-то сбоку своё (зачем он тогда нужен?). Оба варианта ломают совместимость со сторонними компонентами, обновлениями самого б-па и т.д. Его имеет смысл использовать либо в коробочном виде, либо с лёгеньким скинчиком.
Сетка не то чтобы плоха, но примитивна и годится только для простых по структуре визиток и лендингов.
Если попробовать сверстать что-то наподобие упомянутого в посте Smashing Magazine, или Яндекс.Маркета, да или даже просто мало-мальски нетривиальный корпоративный сайт — там такая сетка как собаке пятая нога.
Сетка не то чтобы плоха, но примитивна и годится только для простых по структуре визиток и лендингов.
Если попробовать сверстать что-то наподобие упомянутого в посте Smashing Magazine, или Яндекс.Маркета, да или даже просто мало-мальски нетривиальный корпоративный сайт — там такая сетка как собаке пятая нога.
Их сервис кастомизации меняет только цвета, размер шрифта и паддинги.
Ну вот я никак не могу понять, что мешает один раз зайти на страницу http://getbootstrap.com/customize/ и посмотреть что же там кастомизируется.
Совершенно не понял про прикручивание сбоку. CSS же. C — cascade.
Сетка не то чтобы плоха, но примитивна и годится только для простых по структуре визиток и лендингов.
Если попробовать сверстать что-то наподобие упомянутого в посте Smashing Magazine, или Яндекс.Маркета, да или даже просто мало-мальски нетривиальный корпоративный сайт — там такая сетка как собаке пятая нога.
Уже теплее :) по крайней мере что-то начинает вырисовываться. Теперь давайте ещё ближе попробуем разобраться. Я ещё не встречал ни разу кейса, где бутстраповская сетка была бы непригодна (с учётом кастомизации мышкой на упомянутой выше странице). Что именно в сетке странице https://market.yandex.ru/ невозможно реализовать стандартными средствами бутстрапа?
Да всё можно реализовать.
Только потом придет дизайнер и скажет — чувак, у меня вот тут отступ X пикселей/процентов, а у тебя Y. И хотя они примерно похожи, но не одинаковы, и я хочу чтобы было в точности X. И чтобы везде было как в макете. Чтобы вот тут поуже, тут пошире, а тут еще шире — потому что так контент требует.
И рассказы про 12 унифицированных колонок его вряд ли удовлетворят (вместо 12, впрочем, можно подставить любое другое число).
Только потом придет дизайнер и скажет — чувак, у меня вот тут отступ X пикселей/процентов, а у тебя Y. И хотя они примерно похожи, но не одинаковы, и я хочу чтобы было в точности X. И чтобы везде было как в макете. Чтобы вот тут поуже, тут пошире, а тут еще шире — потому что так контент требует.
И рассказы про 12 унифицированных колонок его вряд ли удовлетворят (вместо 12, впрочем, можно подставить любое другое число).
(вместо 12, впрочем, можно подставить любое другое число).
вы же утверждали про кастомизацию только паддингов и цветов? ;) ну не суть.
Что касается выдумок дизайнера. Действительно, иногда нужно нарушать сетку. Это реально редкие случаи (есть пример живой? у меня нет), и для них придуманы отрицательные отступы. Дизайнер не бог. И если в его макете всё прыгает, отступы везде разные, выравнивание отсутствует, то, возможно, имеет смысл поработать с другим дизайнером? Ну или рассказать ему про преимущества унификации в дизайне :)
Есть ещё другой вариант. Если отступы не одинаковы — это еще не значит, что они «прыгают». Они могут быть выверены и подчинены вполне четкой системе, которая в свою очередь диктуется контентом, разделением главного и второстепенного и так далее.
Совершенно верно. И какие у вас возникли сложности при выставлении нужных отступов, когда вы использовали бутстрап?
Блин, да любая верстка с неодинаковыми/некратными колонками и gutter-ами между ними. Бутстрап в этом случае бесполезен.
Возможно, не обращал внимания, но очень любопытно: можете показать примеры сайтов с такими сетками? Желательно из популярных
Хорошо. Допустим все можно реализовать. Сетка замечательная. Но основной постулат верстки — это семантика. Как вы думаете, такой код семантичен?
<div class="col-xs-offset-3 col-xs-12 col-md-offset-4 col-md-6 col-lg-offset-1 col-lg-5"></div>
Этот код отлично читается, он написан в соответствии со стандартами бутстрапа, он понятен любому, кто знаком с этим фреймворком, он выполняет свои функции. Не совсем понимаю, что ещё вы от него хотите? Вон люди ниже жаловались на дублирование кода. Такой подход позволяет отчасти (не полностью — согласен) его избежать.
Для собственного развития — могли бы вы дать ссылку на документ, где описан основной постулат вёрстки, а также другие?
Вы просто не умеете его готовить. Bootstrap отлично заворачивается в семантические классы при помощи примесей. Отлично кастомизируется подключением только необходимого. Но это уже повод для отдельной статьи
Кстати, все эти классы являются не более чем примером. За ними стоят less/sass примеси, при помощи которых ваш пример можно представить так:
.some__element {
@include make-xs-column(12);
@include make-md-column(6);
@include make-lg-column(5);
@include make-xs-column-offset(3);
@include make-md-column-offset(4);
@include make-lg-column-offset(1);
}
Тем, что имея перед глазами необходимый дизайн, который обычно сильно отличается от бутстраповского, нужно потратить много времени и сил, чтобы переопределить стили всех кнопочек, инпутов и т.д. А это сводит к нулю рациональность использования фреймворка, потому что гибче и чище будет наваять компоненты с нуля в том дизайне, который нужен.
2016 год. А делать ли мобильную версию?
Но статья нужная, многие пока не услышат прописную истину из уст своего авторитета — не шевельнутся.
Но статья нужная, многие пока не услышат прописную истину из уст своего авторитета — не шевельнутся.
Как по мне так object-fit не стоит пока что использовать. Все же люди пользуются и IE11, и Edge. 5,5% довольно много.
Для edge и ie можно использовать полифил:
https://github.com/anselmh/object-fit
https://github.com/anselmh/object-fit
А чего набросились-то?.. внятный туториал, понятное описание всего с примерами и скринами.
Нормальные ссылки — тот же бутстрап прекрасен для старта и примеров на нем масса.
Ответ из заголовка — нет, не делать мобильную, а делать адаптивную. Все четко и по делу без претензий на секреты для профессионалов
Нормальные ссылки — тот же бутстрап прекрасен для старта и примеров на нем масса.
Ответ из заголовка — нет, не делать мобильную, а делать адаптивную. Все четко и по делу без претензий на секреты для профессионалов
Позволю себе с вами не согласится. Отдельная мобильная версия обычно меньше весит и, как следствие, быстрее загружается. Да, сейчас кругом вай-фай/3-4G и почти безлимитные тарифы, но связь не идеальна. Для e-commerce этот показатель очень важен.
1. а что мешает в адаптивке для мобильных убирать «тяжесть» и не грузить лишнее? Современный веб так устроен, что у вас будет тупить не сколько загрузка контента с сайта, сколько всякие внешние модули типа виджета соц сетей или стриминговое видео. Картинки, кстати, как ни странно, для мобильных с ретина дисплеями нужны более высокого качества, чем на десктоп.
2. оптимизация скорости работы и на десктопах очень и очень актуальна для e-commerce. Погоняйте тот Я.Маркет или Ebay, оцените скорость работы и количество оптимизаций, чтобы оно так работало
2. оптимизация скорости работы и на десктопах очень и очень актуальна для e-commerce. Погоняйте тот Я.Маркет или Ebay, оцените скорость работы и количество оптимизаций, чтобы оно так работало
Интересно почему в статьях про мобильную верстку в подавляющем количестве случаев рассматривается только книжная ориентация экранов телефонов/планшетов и не рассматривается их альбомная ориентация?
В дополнение к полезным ссылкам, можно упомянуть ещё Semantic UI, хороший css фреймворк, с большим количеством JavaScript компонентов.
Что происходит на мобильных устройствах с высокой плотностью пикселей? Их браузеры по другому интерпритируют значение пикселей в CSS?
Мда, а вот мне подсунули супер адаптивную верстку — повтор блоков для разных разрешений. Иначе говоря мне теперь приходится натягивать и делать повторы в коде. Т.е. например не одна кнопка добавить в избранное, а две. Видно их конечно по одной для разных разрешений, а мне вот приходится дважды писать обработчики на js и следить за повторами в коде. Могу сказать это не одна такая кнопка в верстке. Короче полный изврат ((( Но как говорится что досталось.
Логика же не должна зависеть от шаблона.
А как здесь поступать? Это же адаптивный дизайн. Одна верстка. Делить на 2? Делать два одинаковых?
приходится дважды писать обработчики на js и следить за повторами в коде
Имеется сервис по добавлению в избранное. У него есть метод addToFavorite() который можно вставлять хоть в 15 кнопой. Не вижу проблемы.
Я речь веду про цмс на php. Это немного другое. А вы видимо о другом.
Если так то опять же, наверняка есть что-то типа виджетов.
Нет. Да там и разница в подходе в добавить в корзину. Одна кнопка добавить в корзину для нормального дизайна и другая для мобильного. Одна всплывашка с данными для десктопа, другая для остального. И так везде. Причем это всё едино. Т.е. при переходе к мобильной части меняется немного функционал и вид. И это всё едино.
НЛО прилетело и опубликовало эту надпись здесь
Ребята, я что-то не понял посыла статьи:
Так нужна ли мобильная версия? На кого ориентирована эта статья? Решили верстальщикам рассказать про медиа-запросы или продукт-овнерам про флексбоксы?
Кстати, я, как и многие из вас, наверное, зашел собственно на https://imagemoderation.yandexdatafactory.com/ и увидел в ссылке код отслеживания рекламной кампании. Совпадение?
- Заголовок «Нужна ли мобильная версия?»
- Сама статья про адаптивную верстку
- Яндекс же использует именно отдельную мобильную версию (можете зайти на яндекс.ру и проверить)
Так нужна ли мобильная версия? На кого ориентирована эта статья? Решили верстальщикам рассказать про медиа-запросы или продукт-овнерам про флексбоксы?
Кстати, я, как и многие из вас, наверное, зашел собственно на https://imagemoderation.yandexdatafactory.com/ и увидел в ссылке код отслеживания рекламной кампании. Совпадение?
Мне тема статьи интересна, изложение — понравилось, как и комментарии. Автору спасибо.
Одна беда: что-то я не видел ни одного адаптивного сервиса Яндекса, кроме лендинга Data Factory, который вы показали. В чём же состоит опыт Яндекса, заявленный в заголовке? Есть ли что-то в работе, кроме лендингов?
НЛО прилетело и опубликовало эту надпись здесь
Сложно и дорого добавить полную адаптивность «от десктопа до смартфона» в крупные проекты с большой историей.
В таких проектах часто оправданы затраты ресурсов на создание отдельной версии и её поддержку, чем очень-очень много времени на перелопачивание всей кодовой базы существующего проекта для добавления адаптивности.
В больших сервисах часто делают адаптивность «десктоп — планшет» и отдельная версия для тачей.
Также стоит учитывать большое количество экспериментов, которые постоянно проводятся в больших сервисах, там критически важно уметь проводить «быстрые эксперименты» и точно разделять опыт использования сервиса на различных устройствах.
Тем не менее новые сервисы и промо-сайты Яндекса часто адаптивны, например:
— https://yandexdatafactory.com
— https://music.yandex.ru
— https://afisha.yandex.ru
— https://yandex.ru/blog
— https://yandex.ru/mobilization
В таких проектах часто оправданы затраты ресурсов на создание отдельной версии и её поддержку, чем очень-очень много времени на перелопачивание всей кодовой базы существующего проекта для добавления адаптивности.
В больших сервисах часто делают адаптивность «десктоп — планшет» и отдельная версия для тачей.
Также стоит учитывать большое количество экспериментов, которые постоянно проводятся в больших сервисах, там критически важно уметь проводить «быстрые эксперименты» и точно разделять опыт использования сервиса на различных устройствах.
Тем не менее новые сервисы и промо-сайты Яндекса часто адаптивны, например:
— https://yandexdatafactory.com
— https://music.yandex.ru
— https://afisha.yandex.ru
— https://yandex.ru/blog
— https://yandex.ru/mobilization
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
сделал медиа-запросы, а тесты яндекса и гугла ругаются
сыроват автоматический алгоритм проверки
- на мелкий текст. типа <12px моветон, хотя зачем делать, например, текст копирайта в подвале сайте 12 размером?
- на близкое расположение активных элементов в ползунках цен от и до, хотя таскаются только ползунки
сыроват автоматический алгоритм проверки
Замечательная статья, но!
Yandex, где адаптивные / мобильные банеры в рекламной сети?
Приходится подключать google ad и другие рекламные сети.
Yandex, где адаптивные / мобильные банеры в рекламной сети?
Приходится подключать google ad и другие рекламные сети.
Нужен типа «стандарт» — любой сайт имеющий мобильную версию должен иметь в своём меню возможность увеличить(уменьшить) размер шрифта. — Сейчас этого ни у кого нет. И даже при наличии мобильной версии сайта приходится юзать "вид Reader".
Кроме того, нужно чтобы установленные юзером размеры шрифта запоминались в устройстве (cookie ).
В настоящее время даже при наличии мобильной версии сайта, юзаю "вид Reader" — ибо меня не устраивает размер шрифта который придумали (вычислили) разработчики этого сайта для моего мобильного устройства.
Печально это.
Нужен типа «стандарт». Пускай и добровольный. Имхо.
Кроме того, нужно чтобы установленные юзером размеры шрифта запоминались в устройстве (cookie ).
В настоящее время даже при наличии мобильной версии сайта, юзаю "вид Reader" — ибо меня не устраивает размер шрифта который придумали (вычислили) разработчики этого сайта для моего мобильного устройства.
Печально это.
Нужен типа «стандарт». Пускай и добровольный. Имхо.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
sumanai
Супер! Тут главное чтобы быстро было (без дополнительного обмена с сервером) — Чтобы размер шрифта на клиенте устанавливался сразу — может куки в этом плане всё же лучше? — Ведь мы серверу сразу сообщаем какой размер шрифта мне нужен! — Но это детали.
Главное утвердить этот стандарт — иначе всё идёт прахом.
В Local Storage их хранят
Супер! Тут главное чтобы быстро было (без дополнительного обмена с сервером) — Чтобы размер шрифта на клиенте устанавливался сразу — может куки в этом плане всё же лучше? — Ведь мы серверу сразу сообщаем какой размер шрифта мне нужен! — Но это детали.
Главное утвердить этот стандарт — иначе всё идёт прахом.
НЛО прилетело и опубликовало эту надпись здесь
sumanai > Прощай кеширование готовых страниц, прощай CDN, ведь нам нужно установить размер шрифта!
Одно из двух — либо разработчик будет делать так как мне удобно, либо я убиваю все его раскладки и красивости, переходя в режим «вид Reader».
Кроме того, я уже встречай сайты которые позволяют выбирать в своём меню (оно уже стандартно расположено вверху слева или справа) размер шрифта (или размер страницы — грубо говоря — сделайте мне КРУПНЕЕ!) — но это очень и очень редко пока.
Одно из двух — либо разработчик будет делать так как мне удобно, либо я убиваю все его раскладки и красивости, переходя в режим «вид Reader».
Кроме того, я уже встречай сайты которые позволяют выбирать в своём меню (оно уже стандартно расположено вверху слева или справа) размер шрифта (или размер страницы — грубо говоря — сделайте мне КРУПНЕЕ!) — но это очень и очень редко пока.
Как вариант использовать еще и Google AMP )
НЛО прилетело и опубликовало эту надпись здесь
Адаптивная вёрстка — это удобно, как для пользователя, так и для разработчика
1. У многих мобильное устройство побольше 4-го айфона и люди хотят видеть полноценную версию сайта, которая им привычна.
Как минимум должна быть кнопка «Полная версия»
2. Адаптировать сайт для настольного ПК под маленькое разрешение — это какое-то безумие. Кто нить на ПК смотрит сайт в таком виде:
http://joxi.ru/v29QdNNTG53zM2 ??
Если делайте один шаблон — используйте max-device-width итд
3. Даже для среднего сайта, который активно поддерживается, гораздо проще править шаблоны отдельно, нежели, скажем делать что-то для основной версии, а в голове все время держать «а что же там на мобильных».
В мобильной версии многие вещи просто не используются или используются в упрощенном виде. Делая один шаблон, вы обретаете себя на великие муки. Поверьте мученику…
4. Пользователю без разницы сколько шаблонов на сайте. Единственный минус — это дополнительная работа серверного программиста, который должен сам определять какой шаблон выводить
5. Мы забываем зачем нам нужна мобильная версия. Не только для пользователя. Но и для самого устройства, которое не обладает высокой производительностью, высокой скоростью интернета итд. Делая единый шаблон, даже если учесть что все браузеры в полной мере поддерживают все технологии, облегчающие адаптивную верстку (единицы rem, vw, тег picture, технологию flex итд) и полифиллы итд нам не нужны — все равно, в любом случае, как ни крути, ну хоть тресни, верстка получается гораааздо сложнее. Мы как бы пихаем все в один шаблон, кидаем устройству кучу инструкций и говорим — «чувак, выбери сам, что тебе подходит»
Вообще, тема немного не раскрывает смысла, на мой взгляд. Уже давно не стоит вопросов «делать ли мобильную версию» и «адаптировать ли шаблон»
Конечно мобильная версия нужна и конечно нужна адаптация. Вопрос в другом. Сколько шаблонов? Мой общий совет — если у вас есть два макета средней сложности (мобильный и основной) — делайте два шаблона. Адапируйте сколько угодно — но в пределах шаблонов, скажем, основной шаблон, можно делать под 1024, а для 1920 показывать дополнительную колонку итд.
Вообще, получается примерно так: дизайн разный (то есть стили и разметка), логика одна. У меня очень часто само собой получается использовать один js на два шаблона. То есть, к примеру, логично, что js файл, показывающий и проверяющий форму авторизации — запросто может быть один на два шаблона.
Как правило, отличия лишь в типах событий и других мелочах, которые можно запросто предусмотреть в одном скрипте.
Нет, нет, я сам часто пихаю все в один шаблон, но на это тоже есть свои причины. Вообще мне много чего хочется расказать, но как-то неудобно писать комментарий больше статьи )) Если кому интересно — могу написать топик…
И на мой взгляд тема немного устарела, уже пропал восторг от возможнойстей адаптации, уже все попробовали «и так повертеть и так посжимать» и выбрали какой-то оптимальный для себя вариант. Адаптация, безусловно, нужна, но используйте ее там, где она действительно необходима…
Дополню, полетели вопросы. На планшетах показывается полноценная версия сайта с минимальной адаптацией. Даже вивпорт не всегда нужен, и так все само «влезает». Вроде у айпада по умолч вивпорт 1280, если ваша основная версия адаптирована под 1024, лучше выставить свой вивпорт, покрупнее будет. Да и вообще все-таки рекомендую указывать его всегда, ну и масштабирование конечно же не запрещаем. Js по-хорошему, как я уже писал, будет один, скажем есть ноутбуки, поддерживающие touch и это в любом случае должно быть предусмотрено в основной версии, правка css, как правило, сводится к работе над hover стилями, которые на тач устройствах могут только мешать, особенно при кликах…
И вообще — помните, что сначала появились смартфоны, показывающие html-странички, а потом уже специальные странички для смартфонов. То есть если у вас нормально сверстанный сайт, то он будет работать нормально на любом устройстве… Наверное, это самая главная мысль ))
И вообще — помните, что сначала появились смартфоны, показывающие html-странички, а потом уже специальные странички для смартфонов. То есть если у вас нормально сверстанный сайт, то он будет работать нормально на любом устройстве… Наверное, это самая главная мысль ))
Я вот честно говоря не понимаю, что делать с сайтом если в нём есть большой функциональный sidebar. Горизонтально его не разложишь, за экран то же не уберёшь (как бы в меню).
viewport-fit cover не работает в яндекс браузере?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса