Полезное
Гоа - общая информация

Подготовка к поездке в Гоа


Путь в Гоа и обратно

Транспорт в Гоа и Индии

Жилье в Гоа

Жизнь в Гоа

Разное

О сайте / контакты

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

Просмотров темы: 3131

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
: 25 Март 2015, 00:17:12
В прошедшие пару-тройку дней занимался оптимизацией отображения этого сайта на экранах мобильных устройств, в особенности телефонов (благодаря принуждению Корпорации Добра, рассылающей письма счастья))
Еще не все доделано, но основная часть уже выполнена.

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

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


Оффлайн oleg79

  • goa origin
  • Сообщений: 424
  • Респектов: 138
  • Россия
Ответ #1 : 25 Март 2015, 09:23:27
у меня на телефоне с 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 раз.)

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
Ответ #2 : 25 Март 2015, 10:43:32
oleg79, благодарю за инфо!
Да, действительно, есть такое. Посмотрю, как можно поправить.
Делал с тем расчетом, что на телефонах основное состояние блока слева будет свернутое - при меньших разрешениях в масштабе 1:1 в любом случае не умещается (и гугл считает сайт не оптимизированным для мобильных). По умолчанию, если ширина экрана меньше 600, то сайт автоматически открывается со свернутым блоком. И если нужно, он открывается по нажатию на кнопку, и в дальнейшем, его состояние берется из кукис.
В общем, попробую сделать, чтобы при развернутом блоке шапка и футер тоже растягивались на всю ширину.

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
Ответ #3 : 25 Март 2015, 21:51:27
oleg79, попробовал на телефоне, потыкал отладчик в гугл-хроме в режиме эмуляции различных мобильных гаджетов, и мне подумалось вот что.

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

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

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

Оффлайн oleg79

  • goa origin
  • Сообщений: 424
  • Респектов: 138
  • Россия
Ответ #4 : 25 Март 2015, 22:23:20
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 раз.)

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
Ответ #5 : 25 Март 2015, 22:55:50
зачем так? федь прописывается 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 когда нужно. Подумаю.

тут надо садиться и тестить, отлаживать не один час.
Чем и занимаюсь потихоньку:))
« Отредактировано: 25 Март 2015, 23:06:07 от Roman »

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
Ответ #6 : 25 Март 2015, 23:46:52
Единственное, что в этом случае неплохо было убирать <meta name="viewport" content="width=device-width, initial-scale=1.0">, чтобы страница в размер экрана вписывалась (в уменьшенном масштабе), когда бар развернут. Но не знаю, как это корректнее сделать. Может, проверять ширину+кукис, и зафигачивать эту строчку через document.write когда нужно. Подумаю.
Хм.. оказалось, достаточно просто убрать параметр масштаба initial-scale=1.0, оставив только <meta name="viewport" content="width=device-width">, и тогда оно работает автоматически. И при этом, гугл по прежнему поздравляет "Отлично! Страница оптимизирована для мобильных устройств.")) Это хорошо)

Оффлайн oleg79

  • goa origin
  • Сообщений: 424
  • Респектов: 138
  • Россия
Ответ #7 : 26 Март 2015, 09:37:12
Roman, теперь основной контент отображается хорошо.

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

Оффлайн nicko

  • goa origin
  • Сообщений: 337
  • Респектов: 67
  • Север Гоа
Ответ #8 : 26 Март 2015, 11:35:27

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

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

Оффлайн Roman

  • (~'~)
  • Сообщений: 22907
  • Респектов: 2320
  • Москва
Ответ #9 : 27 Март 2015, 13:27:02
nicko, воссоздать такое отображение не получилось, поэтому не знаю, в чем причина.


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

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

0 Пользователей и 1 Гость просматривают эту тему.

Cсылка для форумов:

Ссылка html:
Метки: [смотреть все] | популярные:
авиабилеты (53) Анджуна (10) Арамболь (12) безопасность (21) бюджет (9) Вагатор (9) виза (32) водительские права (9) вопросы новичков (21) впечатления (60) выбор места (44) где купить (16) гестхаусы (96) гоатранс (20) Дели (22) деньги (19) дети (11) достопримечательности (40) еда (28) ехать или не ехать (11) животные (9) жилье (117) здоровье (19) индийцы (17) Индия (46) инструкция (18) история (11) климат (19) культура (11) маркеты (20) медицина (11) Морджим (8) мото (26) музыка (20) Мумбаи (22) отчет (62) Палолем (14) пати (34) пляжи (51) погода (22) поезда (22) полиция (15) природа (13) путешествия (43) работа (13) развод (13) рассказ (84) русские (9) такси (15) торговля (14) транспорт (55) форты (11) фото (79) хиппи (13) цены (30) чартеры (22) что взять (17) что посмотреть (55) язык (8)

Путеводитель Гоа