Социальная сеть для всех живет , нам 11 лет!
Здравствуйте. Вы попали на форум родителей, где нет
вообще никакой назойливой рекламы!
Сайт сделан для людей, для вас, для тех, кто ищет новые знания и ответы
на свои вопросы.
Вкусные рецепты, неспешное общение, узнать законы и льготы,
вопросы отношений,
скачать прямой ссылкой книги, новые знакомства, истории людей,
воспитание детей, завести блог и писать свои мысли, все о свадьбах,
здоровье и уход за собой, полезные идеи для вашего дома - море
информации в нужных разделах!
У нас есть: сам форум, фотоальбомы, чат, блоги, доска объявлений,
микроблоги, слушать онлайн радио, онлайн игры и многое другое.
Мы не воруем Ваше время - мы даем возможность узнать мир лучше!
Просмотров темы Как настроить свой сайт для мобильного или адаптивного показа: 6588 Общая оценка: 5.00 :: Минимальная оценка: 5 :: Максимальная оценка: 5 :: Всего оценило: 1
Понравилось? Оцените по пятибальной шкале!
Страница 1 из 1
Автор
Сообщение
администратор
администратор Не онлайн
Зарегистрирован: 2011-09-27 Рейтинг: живет тут 4587 день
Сейчас у каждого второго пользователя телефона в руках смартфон с выходом в инет через различные способы в интернет: фай-вай, GPRS и прочее.. Многие сидят постоянно в социальных сетях, некоторые серфят через поиск нужной информации что то найти для себя или близких, и большинство из этих людей обязательно попадают на форумы, блоги, новостные ресурсы и другие сайты. В конечном результате у любого владельца сайта его сайт заточен именно на полноценный интернет - это значит, к нему заходят через ноутбуки и станционарные компьютеры. Всем здравствуйте, уважаемые читатели этого подраздела вебмастеру. Сегодня поговорим о том, как ваш сайт переделать для мобильных устройств, а именно, айпадов, айподов, смартфонов и прочих маленьких гаджетов, столь так любимые в народе из-за компактности.
Для начала давайте вспомним вот такую штуку: экран монитора и на мониторе любого ноутбука почти одинаково отображают содержание любого сайта по размеру и ширине. А вот ширина планшетов и мобильных устройств в виде телефонов и смартфонов не позволяет правильно и нужно отображать содержимое сайта.
Чтобы как все это сделать и впихнуть в размер смартфона или планшета, нужно читать больше информации, перейдя по этим ссылкам:
Поисковые системы улучшают выдачу результатов поиска для пользователей мобильных устройств (смартфонов, планшетов). Таким пользователям вероятнее всего будет показан сайт с адаптивным дизайном, или мобильная версия сайта. В Поиске Яндекса ссылки могут выделяться специальной меткой «Мобильная версия».
Ниже приведены рекомендации, которые помогут вам сделать сайт удобным для просмотра на мобильных устройствах:
Размещайте контент вашего сайта таким образом, чтобы он был максимально виден на экране мобильного устройства.
Для сайтов с адаптивным дизайном используйте мета-тег <meta name="viewport" content="width=device-width, initial-scale=1">, чтобы указать область просмотра контента. Подробно см. в разделе Использование HTML тегов.
На страницах сайта, которые имеют мобильную версию, укажите ее URL. Например, с помощью элемента link:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.com/page.html"/>
Не используйте технологии Flash, Silverlight или Applet на страницах, ориентированных на мобильных пользователей — эти технологии могут не поддерживаться на мобильных устройствах.
Совет. Например, пользователи не смогут просмотреть интерактивную часть сайта или видеоролик, встроенные на Flash. Поэтому рекомендуем встраивать контент с помощью HTML5 или отказаться от тяжелых и сложных интерактивных элементов.
Содержимое страниц не должно выходить за рамки экрана по горизонтали.
Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.
Даю пояснение что такое адаптивный дизайн сайта:
Цитата:
Любой сайт подстраивается под разрешение и размер мобильных устройств (телефон, планшет) по любому адресу на сайте, будь это тема, главная сайта или любой раздел
А вот что такое мобильная версия сайта:
Цитата:
Для просмотра с мобильных устройств сайт доступен по отдельному URL: например, m.site.com. Не по обычному протоколу интернета в виде http://
Также гугл помогает разобраться вебмастеру в этой проблеме вот тут. Давайте почитаем вот что там пишут:
Рекомендации
Цитата:
На страницах, оптимизированных для мобильных устройств, в блоке <head> должен присутствовать метатег viewport следующего содержания: width=device-width, initial-scale=1.
Сразу вам рекомендую поставить мета тег и код в структуре вашего сайта. Откройте файл сайта, где отображаются на главной мета теги (index.php, index.html, overall_header.php) и после всех тегов ставьте вот эти 2:
В случае захода на ваш сайт через мобильное устройство этот тег предложит посетителю мобильную версию домена.
Пример на структуре этого форума, скриншот:
Чтобы узнать, как отображаются ваши страницы и главная сайта, нужно смотреть либо на своих гаджетах, либо в интернете на эмуляторах айпада, айпода, планшетов и мобильных телефонов любых марок.
Для начала яндекс владельцу сайта сам предлагает посмотреть как выглядит его сайт на экране мобильного телефона:
Заходим вот сюда https://beta.webmaster.yandex.ru/ , затем прыгаем слева в колонке на Инструменты >>> Проверка мобильных страниц
Есть другие проверки сервисы:
1. http://ipadpeek.com/
Забиваете свой адрес, и крутите эмулятор смартфона как в руках, прокручиваете верх и вбок, Все повторяется как в руках обычного пользователя
2. http://quirktools.com/
Вставляете свой адрес сайта и выбираете тип, а потом марку телефона. Круто!
5. http://deviceponsive.com/
Устройства и доступные разрешения экранов.
Macbook — 1280 x 800
iPad портрет — 768 x 1024
iPad портрет — 1024 x 768
Kindle портрет — 600 x 1024
Kindle альбомная ориентация — 1024 x 600
iPhone портрет — 320 x 480
iPhone альбомная ориентация — 480 x 320
Galaxy портрет — 240 x 320
Galaxy альбомная ориентация — 320 x 240
Помните, что больше людей уже сидят в интернете и через мобильные телефоны. Пробуйте, тестируйте и адаптируйте свой сайт для мобильных устройств.
По ссылкам определяет не правильно. Мой сайт например. У меня прикручен отдельно мобильный шаблон и когда заход идёт с мобильного телефона автоматом открывает мобильную версию. По ссылкам увы..
По ссылкам определяет не правильно. Мой сайт например. У меня прикручен отдельно мобильный шаблон и когда заход идёт с мобильного телефона автоматом открывает мобильную версию. По ссылкам увы..
К сожалению, этот движок на форуме не позволяет быть мобильным. Пришлось ставить мета тег и тестировал с планшетов и с телефонов.
администратор
Я не за ваш сайт говорил - за свой. У меня на phpbb3 прикручен отдельно мобильный шаблон, который автоматом вычисляет,что юзер зашел с мобильного и открывает ему мобильный шаблон. Я просто проверил по ссылкам выше введя свой сайт - там не открыло мобильный шаблон а значит те сайты могут дать ложную инфу.
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах Вы не можете прикреплять файлы к сообщениям Вы можете скачивать файлы
