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%.

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

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



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

 

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

Комментарии   

0 #2 Gisele 18.09.2017 22:39
It has in no way been easier to opt between the rewriting services,
as all customer opinions and testimonials are gathered in ditty categorize for you to pick the best.
Escape bad quality and as a culminate inadequate endure by means of consulting any paraphrase website
reviews. Entirely written testimonials will manual you through
the process of selecting the song and but transfiguration checking that settle upon fit your needs.


Here is my website: getmegoogled: http://getmegoogled.com
Цитировать
0 #1 Федя 21.08.2017 17:02
бля , скоко не читал про адаптивный дизайн , нигде не видел такого подключения отдельного цсс когда разрешение меньше какого-то значения , здесь же все предельно ясно , респект автору !
Цитировать

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


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

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