Четверг, 20 Сентября 2012 09:23

Адаптивный дизайн и верстка сайта для мобильных устройств

Written by 
Оцени эту запись
(9 Голоса)

Адаптивный дизайн - это способ создания веб-страниц, которые удобно просматривать на экранах различных устройст с разными разрешениями. Если экран монитора имеет ширину не менее 1000px, то экраны мобильных телефонов могут быть 200-300 пикселей, а то и меньше. К тому же, технологии неустанно развиваются и теперь выход в интернет можно осуществлять чуть ли не с наручных часов.

 

Но остановимся на верстке сайта для мобильных телефонов. Адаптивный дизайн, с которого началась эта статья, подразумевает универсальность вида и верстки для различных разрешений. Например, резиновая верстка, резиновые картинки, размер которых подстраивается под размер экрана, и т.д. Но есть и другие варианты создания хорошего вида сайта под мобильные устройства - создание отдельной мобильной версии сайта или отдельного css-файла для маленьких размеров экранов.

 

Если разработчики решили сделать отдельную версию сайта, то обычно в верхней части части есть ссылка на мобильную версию и пользователь, при желании, может на нее перейти. Мобильная версия может быть упрощенной - меньше картинок, дополнительной информации, меньше функционала и т.д. Только самое необходимое. Мобильная версия сайта может лежать на его поддомене mobile.sitename.com или внутри sitename.com/mobile.

 

Расммотрим другой вариант верстки сайта для мобильных устройств - отдельный css-файл. Для этого используется атрибут media для определения типа устройств. В теге <head> сайта подключаете два css-файла - для мониторов и телефонов(смартфонов):

 

 

<link href="/site.css" media="screen" rel="stylesheet" />
<link href="/mobile.css" media="handheld" rel="stylesheet" />
 
Эти файлы могут отличаться глобально или не очень. Вы можете полностью изменить разметку страницы или просто убрать сайдбар, можете скрыть большые картинки или увеличить шрифт. Но стилевой файл для мобильных устройств, как и общая разработка сайта, должен учитывать некоторые особенности просмотра сайта на экране мобильного. Пройдемся немного по ним.
 
 

Особенности верстки сайта для мобильных устройств.

 
1. Шрифт текста, в том числе и ссылок, не должен быть мелким. Если ссылка находится просто в тексте, то, чтобы на нее кликнуть, нужно попасть в нее пальцем))
 
2. Стоит продумать главную навигацию по сайту. Например, на мобильных телефонах у ссылок нет состояния hover. А вот на многих сайтах в главном меню подменю отображается именно при наведении.
 
3. Проводной интернет в наше время стал достаточно быстрым и дешевым. Потому нас уже не так глобально волнует вопрос веса страниц. Но мобильный интернет до сих пор не сильно хорош. Потому пользователь может отключить на сайте картинки. Здесь на выручку приходит атрибут alt у картинок, который поможет пользователю лучше понять информацию на странице с отключенными картинками.
 
4. По причине, описанной пунктом выше, пользователь может отключить и выполнение скриптов в браузере мобильного. Если у него, при этом, не будут меняться картинки в слайдере, это не так страшно. Но будет не очень приятно, если в данном случае пользователь лишится половины функционала сайта.
 
5. Обычно, с мобильных телефонов заходят на сайт для того, чтобы срочно найти необходимую информацию. Потому не особо важные разделы сайта можно просто отключить. Также можно заменить крупные фоновые изображения подходящим цветом. 

6. Учивайте, что большинство современных телефонов поддерживают поворот экрана при повороте телефона.

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

 

 

Additional Info

Комментарии  

 
0 #2 Сергей выше чмо 24.01.2017 08:21
:lol: :lol:
 
 
0 #1 Сергей 01.04.2015 16:13
Отличная статья! А я вот натолкнулся на курс как сделать мобильную версию сайта http://infosklad.org/threads/udemy-sozdanie-sajta-dlja-mobilnyx-ustrojstv-v-adobe-muse.8120/ мне очень понравился, рекомендую!
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов