28 апреля 2015 в 9:29
Всех приветствую!
Есть сайт, тема MAYO (mobile-friendly). Пошел траф.
Появилась необходимость повысить удобство пользователей на моем сайте.
На ПК - проблем нет, все смотрится отлично.
На планшетах среднего размера (шириной от 750-800) также.
На мобильных устройствах мой сайт смотрится не очень...
Почему?
1) три тизера в ряд при сужении экрана выглядят не красиво.
2) в полной ноде бывают галереи (jQuery Gallery, который не меняется при изменении расширения), т.е. на ПК смотрятся хорошо, а на моб. - нет.
Вопрос: можно ли сделать так, чтобы одна и та же полная нода (что доступна по одному URL) - в разных темах отображалась по-разному???
Возможным решением я рассматриваю следующее:
1) Для ПК и планшетов - будет тема MAYO.
2) Для мобильных устройств я установлю модули Browscap и Mobile Switch, которые автоматически переключают пользователя на другую тему (для моб.версии).
Но протестировав последнее я вижу, что остается проблема с галереями... Надо чтобы одна нода с галерей на ПК смотрелась полностью, как есть в исходном виде. А на мобильниках эта же нода - отображалась как картинки в ряд - сверху вниз чтобы листал пользователь и смотрел картинки.
Комментарии
Лучше сразу использовать responsive/adaptive тему + flex slider для галерей.
А так,можно попробовать Mobile switch какой нибудь.
Спасибо, но Вы видимо не читали тему мою.
Во-первых, у меня итак стоит responsive theme MAYO, which is already mobile-friendly.
Во-вторых, Вы сами использовали FlexSlider? Во FlexSlider-е высота картинок разная, хотя в стилях и указываешь масштабирование и обрезка, все же не работает.
В-третьих, про Mobile Switch я также писала, функции его знаю, он просто переключает пользователя на ту или иную тему при обнаружении моб.версии браузера (и/или маленького разрешения экрана).
Тут однозначно по верстке надо разряд иметь.
"1) три тизера в ряд при сужении экрана выглядят не красиво."
Вы их не таблицей, а блоками в строчку выводите. И для блоков float:left задайте.
"2) в полной ноде бывают галереи "
Либо другой галлерейный модуль, либо задайте примерно так:
.big-slide img {
width: 100%;
}
.small-slide img {
width: 33%;
}
}
Вторую тему использовать не стоит: MAYO - уже адаптивная.
То есть Вы предлагаете сделать три блока по одному тизеру
(у меня 1 блок с 3 тизерами), и поставить их в ряд в CSS?За код спасибо, но jQuery Gallery не реагирует на правки CSS, непонятно почему.
А вторую тему мне просто необходимо использовать, хоть MAYO и responsive, но там еще есть мелкие нюансы... Хочу МАКСИМУМ удобства обеспечить пользователям.
Так вы в любом случае будете править мелкие нюансы. Что в MAYO что в другой.
Сайт показывайте.
Нет.
Я решила так:
Использовать две темы (для ПК и для моб.) + Browscap + Mobile Switch.
Остается разобраться лишь с галереями...
Flexslider подошел. Он и изначально был неплохим вариантом, но в нем не работают масштабирование и обрезка... Хоть новые стили изображений создавай, хоть flexslider-овские подправляй...
imagecache actions ?
Пробую прямо сейчас. О результатах отпишусь.
Проблема с FlexSlider решена. Все картинки имеют одинаковую высоту, т.е. масштабирование и обрезка сработали.
Теперь другой вопрос появился.
При наведении на галерею обе стрелочки (вперед,назад) сдвигаются влево.
То есть в неподвижном состоянии они (переключатели картинок) как бы в правильном положении, а при наведении обе сдвигаются... Неприятно смотреть.
В CSS position:fixed не помогает...