Архив Галактики

Адаптивные сайты

Блог мамы и учителя Дегтяревой Елены Александровны / 17.06.2016

Источник Википедия



Понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Итан Маркотт в своей статье в мае 2010 года.
Он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии, на русском языке она называется
"Отзывчивый веб-дизайн". Немного об авторе можно почитать здесь.

Данный вопрос поднят не на пустом месте, так как многие из нас выходят в интернет с мобильного телефона, и важно, чтобы сайт и его контент корректно отображались на мобильном устройстве не смотря на его размеры.

Более подробно можно почитать в статье Адаптивный веб-дизайн: что это такое, зачем он нужен и его принципы
Кратко из статьи приведу следующие моменты:
Причины появления адаптивного веб-дизайна.
1) Большое разнообразие устройств, с которых можно выходить в Интернет.
2) Популярность мобильных устройств с выходом в Интернет и увеличение мобильного Интернет-трафика.
3) Срочная информация.


Отличие адаптивного сайта от мобильной версии сайта.
1) Под каждый тип операционной системы нужно свое приложение/версия сайта.
2) Необходимость загрузки приложения.
3) Разделение траффика.
4) Необходимость интеграции материалов сайта.

Типы адаптивных макетов.
1) Резиновый
2) Перенос блоков
3) Переключение макетов
4) Адаптивность «малой кровью»
5) Панели
Источник

А теперь перейдем к реальной практике и посмотрим 25 интересных примеров адаптивных веб-дизайнов.
Для таких сайтов разработаны специальные инструменты, методы, шаблоны и платформы для разработки адаптивного дизайна сайтов, их может использовать любой желающий.
Есть и руководство по разработке адаптивного дизайна для новичков. Есть желание попробовать?

Например, можно попрактиковаться на сайте http://xprs.imcreator.com
Инструкции



С помощью этого онлайн-конструктора можно создавать адаптивные сайты, которые будут правильно отображаться на всех устройствах.
Плюс конструктора еще в том, что для некоммерческих организаций есть возможность использовать премиум-функции бесплатно.
Премиум функции дают возможность перенести сайт на свой домен, при этом пользователю предоставляется доступ к неограниченному хостингу и ко всем встроенным темам оформления, а также отсутствует реклама.

Разработчики конструктора поставили перед собой цель - сделать инструмент для создания сайтов, который будет доступным и простым для всех.
В начале все как обычно:
выбираете категорию сайта, потом шаблон.



Для перехода в режим редактирования нажимаете на зеленую кнопку EDIT.


На сайт можно добавлять следующие элементы: текст, картинка, видео, ссылка, карта, код и другие.




Настроить слайд-шоу.


Выбранные элементы появятся на слайде.


Как добавить новые страницы?
1. Нажмите на кнопку Страницы Pages в верхнем меню.
2. Нажмите кнопку Добавить новую страницу Add a New Page.
3. Выберите пустую или одну из готовых страниц.
4. Введите название новой страницы.
5. Добавьте страницу в меню сайта.


Для навигации между страницами просто нажмите кнопку Страницы Pages в верхнем меню и выберите страницу, которую вы хотите изменить.

Самое незаменимое, что есть в конструкторе, это возможность редактировать сайт с мобильного устройства!


Для студентов, дизайнеров и некоммерческих организаций сервис предоставляет возможность использования всех премиум-функций совершенно бесплатно.
Для этого необходимо написать письмо на info@imxprs.com с указанием своего аккаунта.

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

Как опубликовать свой сайт и подключить домен?
Когда вы закончите редактировать ваш сайт и решите опубликовать его в интернете, вы можете подключить его к существующему домену или купить новый.
Разработчики предоставляют без рекламы URL-адрес для просмотра сайта.

1. Нажмите Кнопку Опубликовать Publish.
2. Если есть домен, то нажмите кнопку Подключить существующий домен Connect an exisiting domain.
3. Если нужен новый домен, то нажмите кнопку Купить новый домен Buy a new domain.
4. Новый домен готов к работе.