Оптимизация oGoa.ru для мобильных устройств

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

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

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

у меня на телефоне с 1920*1080 перекос хедера и футера

 Screenshot_2015-03-25-09-20-48.png (380.42 кБ. 1080x1920 - просмотрено 18 раз.)

 Screenshot_2015-03-25-09-21-02.png (620.55 кБ. 1080x1920 - просмотрено 13 раз.)

oleg79, благодарю за инфо!
Да, действительно, есть такое. Посмотрю, как можно поправить.
Делал с тем расчетом, что на телефонах основное состояние блока слева будет свернутое - при меньших разрешениях в масштабе 1:1 в любом случае не умещается (и гугл считает сайт не оптимизированным для мобильных). По умолчанию, если ширина экрана меньше 600, то сайт автоматически открывается со свернутым блоком. И если нужно, он открывается по нажатию на кнопку, и в дальнейшем, его состояние берется из кукис.
В общем, попробую сделать, чтобы при развернутом блоке шапка и футер тоже растягивались на всю ширину.

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

С одной стороны, можно попробовать запихать все блоки в один контейнер, чтобы, если распирает центральный блок из-за появления левого блока, то распирало бы одновременно и шапку с футером. Но с другой стороны, ведь это происходит из-за того, что контент максимально подстраивается под видимую область. То есть, когда имеет место вид как скриншоте выше, то масштаб уже, очевидно, не 1:1, а уменьшенный. И на большинстве маленьких телефонных экранов получится так, что те кнопки меню в этом уменьшенном масштабе нажимать будет не очень удобно - слишком мелко. А если их приблизить обратно к масштабу 1:1, то было бы как раз удобнее (на мой вкус), чтобы они все были на одном экране, а не разбросаны вдоль.

То есть да, визуально выглядит не очень красиво, но в плане юзабилити, наверное, лучше так и оставить. Так как в масштабе 1:1 левый блок вместе с остальным контентом все равно на один экран не умещаются по ширине.

Кстати, тут ведь еще фишка с браузерами мобильных телефонов. Несмотря на разрешение 1920*1080, и соответственно, ширину 1080, стили, тем не менее, берутся для ширины менее 600, судя по скриншотам. То есть, там используется не реальное разрешение дисплея, а некое эмулированное, уменьшенное. Предположу, 960х540.

Roman

если распирает центральный блок из-за появления левого блока, то распирало бы одновременно и шапку с футером.

зачем так? федь прописывается css для левого блока с фиксированной шириной, а правая часть с основным контентом 100% от оставшегося. тогда появление-исчезание левого блока не будет влиять на шапку, изменения в ширине будут происходить только в контентной части. в шапке кнопки меню сделать для вывода на мобильных в два ряда - сейчас в три и в разнобой. я не знаю, есть ли у данной cms возможность управлять выводом того или иного блока в зависимости от устройства - если есть, то подвал вообще можно свести к минимуму на мобильных устройствах.

посмотрел исходный код - сверстано для меня странно. шапка, контент и подвал все отдельными блоками и не имеют одного общего - который по идее должен быть wrapper - а здесь это шапка. у wrapper в самом шаблоне прописано style="width: 100%", а в css   max-width: 2300px; - когда для второго значения лучше задать общий для всего блок, нежели это прописывать к шапке, контенту и подвалу.


сейчас шапка и подвал выводятся в ограниченной ширине, меньше чем контентная часть - причину пока не понял.

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

тут надо садиться и тестить, отлаживать не один час.

вот так открывается по умолчанию:

 Screenshot_2015-03-25-22-06-20.png (554.11 кБ. 1080x1920 - просмотрено 13 раз.)

зачем так? федь прописывается css для левого блока с фиксированной шириной, а правая часть с основным контентом 100% от оставшегося. тогда появление-исчезание левого блока не будет влиять на шапку, изменения в ширине будут происходить только в контентной части.

Оно сейчас там так и сделано - левый блок фиксированно 200, а правая часть - 100%. Независимо от шапки. Просто если контент не вмещается в 1 экран ширины, то шапка остается на месте выглядит криво, если уменьшить масштаб. на мой взгляд, наверное, лучше так и оставить.

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

Там два ряда кнопок и есть. Изначально они висят на одной строке, один справа, другой слева. А по мере уменьшения ширины экрана, окончания этих рядов переносятся на последующие строки. У меня в телефоне вообще 5 рядов получается. Чтобы и универсально, и одновременно красиво на всех устройствах - сложновато сделать:)
В этой cms ничего по отдельному выводов блоков нет, все прописываю через только через css @media вручную. Да и большинство имеющихся блоков существуют отдельно от cms)

посмотрел исходный код - сверстано для меня странно. шапка, контент и подвал все отдельными блоками и не имеют одного общего - который по идее должен быть wrapper - а здесь это шапка. у wrapper в самом шаблоне прописано style="width: 100%", а в css   max-width: 2300px; - когда для второго значения лучше задать общий для всего блок, нежели это прописывать к шапке, контенту и подвалу.

Да, там у самой темы верстка была так себе, и плюс я еще тот верстальщик))
С wrapper накосячил в свое время. Когда несколько лет назад при переходе на новую версию движка, перепиливал эту тему по полной программе) Сейчас сделал бы по-другому, но заново все исправлять все довольно трудоемко. Да и новая версия этого движка уже в бета-версии, того и глядишь, может через год-другой они все таки рабочую версию выпустят. Тогда весь процесс в любом случае с нуля придется начинать.

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

По умолчанию, если ширина дисплея < 600, то должно открываться со свернутым левым баром. Тестировал у себя, вроде работало. Но далее, как только хоть раз нажата кнопка сворачивания/разворачивания, оно записывается в кукис, и при дальнейших загрузках состояние бара берется уже оттуда, вне зависимости от ширины экрана. Мне показалось так логичнее. Что кому-то удобнее будет при каких-то действиях, чтобы оно открывалось с развернутым баром, даже если маленький экран. Ну а потом, после одного сворачивания, оно опять все время свернуто. Единственное, что в этом случае неплохо было убирать <meta name="viewport" content="width=device-width, initial-scale=1.0">, чтобы страница в размер экрана вписывалась (в уменьшенном масштабе), когда бар развернут. Но не знаю, как это корректнее сделать. Может, проверять ширину+кукис, и зафигачивать эту строчку через document.write когда нужно. Подумаю.

тут надо садиться и тестить, отлаживать не один час.

Чем и занимаюсь потихоньку:))

Единственное, что в этом случае неплохо было убирать <meta name="viewport" content="width=device-width, initial-scale=1.0">, чтобы страница в размер экрана вписывалась (в уменьшенном масштабе), когда бар развернут. Но не знаю, как это корректнее сделать. Может, проверять ширину+кукис, и зафигачивать эту строчку через document.write когда нужно. Подумаю.

Хм.. оказалось, достаточно просто убрать параметр масштаба initial-scale=1.0, оставив только <meta name="viewport" content="width=device-width">, и тогда оно работает автоматически. И при этом, гугл по прежнему поздравляет "Отлично! Страница оптимизирована для мобильных устройств.")) Это хорошо)

Roman, теперь основной контент отображается хорошо.

я сразу не обратил внимание в исходном на мета для мобильных. сам использую именно в таком виде:

Код: [Выделить]

<meta name="viewport" content="width=device-width">
осталось шапку и подвал допилить. по шапке - пусть они рядами, их выровнять по одному краю для однообразия, но один блок флоат лефт, другой райт и в голову пока не приходит как можно подровнять. если мысль появится, отпишу.

 Screenshot_2015-03-26-13-58-27.png (280.58 кБ. 1280x720 - просмотрено 18 раз.)

Снова непонятная пустота.

nicko, воссоздать такое отображение не получилось, поэтому не знаю, в чем причина.


В общем, с самыми главными доработками, вроде как, готово. Осталось уже совсем по мелочи.
Хотя, некоторую неидеальность отображения и выравнивания на некоторых форматах экранов, думаю, придется оставить как есть) Так как исправлять и подгонять можно очень долго - форматов дисплеев много, а эта единственная тема оформления которая одновременно используется для компьютеров и телефонов, изначально не предназначалась для адаптивной верстки. Проще, наверное, с нуля переделать) Поэтому, в первую очередь ориентировался на сохранение функционала максимально, и чтобы пользоваться удобно было.

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