3.875 1 1 1 1 1 1 1 1 1 1 Rating 3.88 (4 Votes)

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

Сайт в мобильном телефоне

Зачем мне понадобилась верстка под мобильники?  
Лично я, когда просматриваю сайты на своем телефоне то держу его горизонтально и не замечаю есть ли у сайта адаптивный дизайн или нет. Но есть люди которые держат телефон вертикально, а в таком формате просматривать и читать не адаптированные сайты  не удобно. И это, я думаю увеличивает количество отказов. То есть, теоретически адаптация сайта должна улучшить поведенческие факторы.

Суть этого метода адаптивной верстки, заключается в том что бы подсунуть устройству с другим разрешение экрана специальный файл со стилями под ширину мобильника. Адаптивный дизайн не зависит на чем сделан сайт. Это может быть Джумла, Вордпресс, ДЛЕ или чистый ХТМЛ.

Подготовка к адаптивной верстке, мои рекомендации

1. Если на ваш сайт сверстан с помощью таблиц, то обязательно переделайте его на верстку слоями (дивами), так будет проще.
2. Уберите из ХТМЛ шаблона все стили, перенесите их в отдельный файл CSS. Все изображения шаблона тоже должны подгружаться через CSS.
3. В <head> вставьте ссылку на таблицу стилей в которой будут прописаны правила для мобильников:

<link rel="stylesheet" media="(max-width: 480px)" href="/small-device.css" /> 

То есть при разрешении экрана менее 480px, начинают работать стили в этом файле.
4. Создайте и загрузите на хостинг файл css для мобильных устройств. У меня это small-device.css, вы можете назвать его как угодно.

Пример создания адаптивного шаблона на этом сайте

Сначала я открыл основной css-файл. С в поиске Нотпед++ вбил «width» и нашел все стили с фиксированной шириной более 480px, и перенес их в файл small-device.css.
Это были: класс ширины колонки с контентом в 550 пикселей, ширина картинки в шапке и в футоре, ширина сайта - 980 пх.
Везде установил ширину в 100%
Убрал обтекание центральной части. Прописал стиль дива float:none.

.art-content{float:none; width:100%}

После чего правая колонка опустилась под контент.
Так же поступил с горизонтальным меню.

.art-nav li{float:none; width:100%}

Мне не понавились как смотрятся картинки в шапке и в футоре и я решил исключить  их таким кодом:

.art-Header, .art-Footer{background-image:none}

(На одном из сайтов, состоящих из трех колонок, нужно было исключить левую часть. Там находилось длинное меню. Я применил к этому слою свойство - display: none, которое вообще исключает код из документа )

Правая колонка шириной в 250px смотрелась нормально, но на всякий случай присвоил ей ширину 100%.

На всем протяжении проверял сайт Гугловский инструментом: «Проверки удобства просмотра на мобильных устройствах», как видите он выдает оценку «Отлично!».

Яндекс с его инструментом "Проверка мобильных страниц" тоже ошибок не обнаружил.



После этого проверил как смотрится сайт на Айфоне, результат меня устроил.

 

Сказать спасибо лучше кнопками:

Добавить комментарий


Защитный код
Обновить

Feedburner
Поиск
Новые материалы
Последнии Комментарии