Оптмизация для мобильных устройств 
Author: Igor R.
Visited 2101,
Followers 2,
Shared 0
Здравствуйте.
Стали приходить от гугла сообщения, что "Сайт не оптимизирован для мобильных устройств. Мы проверили х страниц Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих страницах у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом."
Вопрос: когда появится в программе адаптация для любого мобильного устройства? Без этой возможности программа Х5 теряет актуальность, так как теперь в Гугле сайты будут опускаться на последние позиции((
Posted on the
Здравствуйте, Игорь!
Полностью поддерживаю Вас о крайней необходимости оптимизации сайтов, созданных в программе WebsiteX5 под мобильные устройства.
Время уже давно пришло, Уважаемые разработчики!
Пора что-то делать, если не хотите, чтобы Ваши пользователи не стали искать альтернативу Вашему программному обеспечению у других производителей.
А вот и конкретные рекомендации от Google:
Общая информация
Область просмотра определяет, как веб-страница отображается на мобильном устройстве. Если она не указана, ширина страницы считается равной стандартному значению для ПК, и она уменьшается, чтобы поместиться на экране. Благодаря области просмотра вы можете управлять шириной страницы и ее масштабированием на различных устройствах.
Слева: страница без метатега viewport. Справа: страница с областью просмотра, соответствующей ширине экрана устройства.
Рекомендации
На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания:width=device-width, initial-scale=1.
<meta name=viewport content="width=device-width, initial-scale=1">Дополнительная информацияТермины:
Страницы для настольных ПК на мобильных устройствах
Если на странице не настроена область просмотра, мобильные браузеры для ее отображения используют резервную ширину (от 800 до 1024 пикселей CSS). Масштаб страницы изменяется таким образом, чтобы отобразить ее целиком на экране. Для взаимодействия с ней пользователям приходится увеличивать масштаб.
Метатег viewport
Метатег viewport сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб. Этот тег необходимо добавлять в раздел <head>.
Область просмотра фиксированной ширины
Области просмотра можно присвоить определенную ширину, например width=320 или width=1024. Несмотря на то что делать это не рекомендуется, фиксированная ширина может стать временной мерой для корректного показа страниц с заданными размерами.
Адаптивная область просмотра
Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях. Это позволяет странице пересчитывать положение элементов для корректного показа на разных экранах.
В некоторых операционных системах, например в iOS и Windows Phone, ширина страницы при повороте в горизонтальный режим остается неизменной, и вместо перераспределения контента выполняется масштабирование. Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства. Это позволит использовать всю ширину экрана в горизонтальном состоянии.
Слева: поворот iPhone 5, атрибут width=device-width, ширина в горизонтальной ориентации составляет 320 пикселей.Справа: поворот iPhone 5, атрибут width=device-width, initial-scale=1, ширина в горизонтальной ориентации составляет 568 пикселей.
Для использования адаптивной области просмотра ваши страницы должны быть предназначены для работы с разной шириной. Рекомендации см. в статье Определение размеров контента для области просмотра.
Прочая информация
Избегайте атрибутов minimum-scale, maximum-scale, user-scalable.
Эти атрибуты позволяют установить минимальный и максимальный масштаб или вовсе отключить возможность масштабирования области просмотра. Они отрицательно сказываются на доступности содержания, и их следует избегать.
@viewport
Несмотря на то что метатег viewport широко поддерживается, он не входит в формальный стандарт. Эта функция является частью спецификации CSS Device Adaptation (Адаптация устройства в CSS). Пока эта спецификация не завершена и не применяется повсеместно, авторам следует использовать метатег viewport отдельно и в сочетании со стилями @viewport в целях совместимости.
Hello Igor,
The pages are automatically adapted to fit to mobile screens but if you want to have full control on how it will appear on mobile devices you can also create a copy of the project where then you use a mobile template and you adapt the content to a smaller width so on mobile devices the content will be shown immediatly bigger since it doesn't need to zoom out to show all the page.
If you have any suggestions on how to improve the program please open an "idea" post to suggest it so the developers will take it in consideration for the future releases of the program.
Many thanks!
***** Google Translation:
ПриветИгорь,
Страницыавтоматическиадаптированы длямобильныхэкранов, но есливы хотите иметьполный контроль надкак она будет выглядетьна мобильных устройствахвы также можетесоздатькопию проекта, гдезатемвы используетемобильныйшаблон ивыадаптироватьконтент дляменьшеширинатакна мобильных устройствахсодержимое будет выведенонемедленнобольше, так как нетребуется уменьшить масштаб, чтобыпоказать всестраницы.
Если у вас естькакие-либо предложенияо том, какулучшитьпрограмму, пожалуйста,откройте"идея"постпредложить это, чтобы разработчикипримут егово вниманиедля будущихвыпусков программы.
Большое спасибо!