Адаптивный шаблон для maxsite CMS. Часть 1

Воскресенье, 8 февраля 2015 г. | Рубрика: Дизайн блога
Приветствую Вас на своем блоге!

Мобильный шаблон

Мобильный шаблон для сайта, очень актуально на сегодняшний день. Компактная версия сайта, которая рассчитана на отображение в мобильных устройствах. Если этого нет, большая вероятность, что ваш сайт быстро покинут.

Есть два варианта решения данного вопроса. Точнее три, третий – ничего не делать grin

Первый вариант – создание отдельного шаблона, который будет подменять основной, исключительно на мобильных устройствах. Достаточно трудоёмкое занятие по его созданию. Приходится редактировать код на компьютере с просмотром результата на мобильном устройстве в разных браузерах.

Второй вариант – вписать код, который «объяснит» браузеру, что сайт адаптирован для мобильного устройства. При этом желательно подогнать отображение, чтобы посетителю было удобно просматривать сайт.

К примеру, на этом сайте в HEAD вставлен следующий код:

<meta name="MobileOptimized" content="800" />
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="target-densitydpi=high-dpi,width=device-width," />

Что он даёт? Подгоняет размер сайта под размер экрана мобильного устройства, уменьшает шрифты сайдбаров и увеличивает размер основных записей. Чаще всего, в разметке сайта css, обязательно есть конкретные размеры каких либо элементов. А для мобильных устройств лучше всего использовать проценты. Т.е. как пример, не width: 1200px, а width: 90%

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

А как Вы решаете вопрос с адаптацией своего сайта/блога? Напишите в комментариях.


Рубрика: Дизайн блога | Просмотров: 12701
Метки: | | |
Подписаться на комментарии по RSS
Понравилась статья? Поделитесь с друзьями!!
twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru rutvit.ru blogger.com livejournal.ru yandex.ru
Оставьте свой комментарий.

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Простой комментарий. Впишите имя и капчу внизу

Используйте нормальные имена. Ваш комментарий будет опубликован после проверки.


Комментарий с аватаркой и ссылкой на Ваш сайт


  

ИЛИ

Имя и сайт используются только при регистрации

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

Авторизация MaxSiteAuth. Loginza

(обязательно)

Скопируйте набранный текст перед тем, как отправить, на всякий случай.
⇑ Наверх
⇓ Вниз