26 ноября 2014 в 11:17
Добрый день.
Уважаемые знатоки, поделитесь своим опытом и знаниями в моём вопросе. Если я что - то не так называю поправьте пожалуйста.
Сейчас развита адаптивная вёрстка, т.е сайт имеет сетку и блоки, которые исходя из ширины экрана выстраиваются в нужном порядке и подстраиваются по ширине.
Есть же другой вариант отображения сайтов, это когда заходишь с мобильного устройства сайт отображается в таком масштабе что бы весь шаблон влезал на экран, но шаблон естественно уменьшается в размерах, как это называется правильно не знаю, я называю мобильный дизайн.
Вопрос: Как Вы считаете какой вариант предпочтительней и удобнее для пользователей? Лично для меня первый, но может у кого-нибудь есть аналитика по данному вопросу, плюсы и минусы каждого.
И второе, подскажите может кто знает как делать мобильный дизайн? Смысл я понимаю, через media запрос для каждого прописывается отображение, если у кого-нибудь есть мануалка киньте пожалуйста.
Большое спасибо за помощь.
Комментарии
Twitter Bootstrap или Foundation
Читать курить и пользовать
Ставьте адаптивную тему их на орге полно и не парьтесь. + Приложение браузера ФаирФокс - ФаирБаг там есть функция там есть возможность смотреть на сайт с разных экранов, что бы понимать как будет, и все Ок!
это никакой не "мобильный дизайн", это просто браузер мобильного устройства выполняет масштабирование страницы, Все элементы (шрифт, картинки, кнопки и т.д.) просто пропорционально уменьшаются, чтобы страница по ширине уместилась на экране мобилы. Это будет происходить с каждой веб-страницей, если не описывать медиа-запросы и не запрещать это явно, т.е. ничего особого делать не нужно. Ну а для пользователя это вырождается в эффект просмотра сайта "под лупой", когда он вынужден постоянно увеличивать масштаб, чтобы попасть пальцем в элемент навигации, или прочитать надпись, или заполнить форму, и уменьшать масштаб, чтобы сориентироваться на странице. Дрочня в общем, я щитаю.
Попробуйте тему Omega 4, есть чувачёк один, низкий ему поклон за видосы, всё очень разжевал.
вот начало http://www.youtube.com/watch?v=2CM177ldAy8&list=PLLnpHn493BHH5nnK2dKE_42...
Всем огромное спасибо, с мнением последнего автора полностью согласен, огромный минус когда надо постоянно масштаб менять что бы клацать по сайту.
Вот кстати интересный момент: самый простой способ сделать адаптивную вёрстку - через @media определять правила для разной ширины экрана. Но ведь сейчас появилось уже немало смартфонов с full HD разрешением экрана и со временем их будет только больше. Выходит в таком раскладе юзер увидит на 6-дюймовом экране версию для мониторов и ему всё равно придётся клацать масштаб. Как с этим быть?
честно, никогда об этом не думал, спасибо
вот нашёл, прочитал, поумнел, но этож ещё больше гемора получается!
http://www.smashingmagazine.com/2013/03/21/responsive-web-design-with-ph...
Вообще, дорогое это удовольствие - хорошая адаптивная вёрстка.
О, спасибо за ссылку! Добавил в закладки. Я правильно понял, что кроме хрома, пока никакие браузеры resolution-запросы не обрабатывают корректно? Вообще как-то очень мало инфы по этому поводу в интернете. С одной стороны, учесть в уже существующей адаптивной вёрстке плотность пикселей можно всего лишь редактированием пары строк в цсс. А с другой стороны - это же голову можно сломать, пытаясь посчитать нужные значения для пар "пиксели - разрешение" О_о
Народ поясните мне - чего вы все выдумываете велосипед. Есть же готовые фреймворки, есть же темы для Друпала под них
что ты имеешь в виду? Я юзаю Омегу, но это не отменяет заботу о плотности пикселей на экранах разных устройств, фреймворк же сам не делает заебись.
ну смотрите - вот например у меня телефон nexus 4 с раздельной 1280x768. Я сделал сайт с темой на бутстрапе где прописал правила как и для больших, так и средних и малых экранов. Если идти по вашей логике для моего телефона бутстрап должен был бы показывать верстку как для ПК - расширение то достаточное (ведь если на пк стоит те же параметры, он показыввает ПК версию). Но телефон все равно дает мобильную. Значит творцы бутстрапа как то учли данный момент. Если так - зачем нам то парится?
В том же Foundation кстати учтено даже положение экрана - портретное либо ландшафтное.
А насчет Омеги. ИМХО даная тема для тех кому лень копать и кому хочется обойтись только средствами кликов мышки и выставления настроек в браузере. Беда в тому что ряд моментов которые решают даные модуля или темы, в реале достаточно ряда строчек кода, что существенно снимает нагрузку с сервака. Каждый модуль же жрет память.
Потому как помне проще сделать HTML на бутстрапе, сделать из него под тему и подставить код вывода регионов и все что идет в Head. Но для этого нужно знать чуть больше чем куда тыкнуть в настройках темы и рулесах.
Взаимоисключающие параграфы детектед)))
Как по мне проще создать свою тему с нуля и написать там только тот код, который нужен для данного проекта - это рациональнее, чем перегружать систему избыточными функциями, которые зашиты во всякие мудрёные фреймворки для обеспечения универсальности.
Именно поэтому и стоит вопрос о том, как правильнее сформировать медиа-запросы.
ЗЫ: в инете есть инфа про всякие пиксель-ратио и прочие относительные единицы, но я так и не понял, обрабатывают ли их смартфоны автоматом, либо же их нужно указывать явно.
для вас детектед так как вы никогда наверное не пробовали делать тему сначала на омеге потом на бутстрапе. там есть разница и то существенная. Совсем с 0 писать это избыточно. Нужно иметь базис. Бутстрап как по мне именно этот необходимый базис.
К своему стыду ничего не знаю про бутстрап, и как там настраиваются правила для разных экранов.
ты говоришь о 3-й, а 4-я версия сильно отличается, там мышкой вообще почти ничего не делается.
для меня 3-я омега стала напрягом. Я понял что для ряда вариантов типа - хочу чтоб в мобильной версии первый регион стал вторым, а третий не выводился нужно ставить (как я помню сейчас может ошибаюсь)надо ставить модули, в то время как в бутстрапе все решается несколькими класами для регионов. Засим с 4 незнаком вообще. 3 отбила все желание.