Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Что такое адаптивный дизайн

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

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

Если вспомнить историю, то раньше альтернативой, была резиновая верстка, которая давала возможность сайту как бы растягиваться под разрешение экрана и т.д., но она не всегда отображалась корректно при маленьком разрешении или наоборот слишком большом. Так же было такое понятие как фиксированный дизайн, суть которого была в том, что сайт центрировался в браузере и имел всегда один размер, а для больших разрешений пустота заполнялась фоновым изображением или просто цветом. И вот как результат эволюции появился адаптивный дизайн, первое упоминание о котором появилось в 2010 году. Свой функционал адаптивный дизайн приобрел благодаря технологиям HTML 5 и CSS 3.

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

пример адаптивного дизайна с разрешением до 650 px

Данное разрешение применимо для мобильных устройств и смартфонов, следующий диапазон которому адаптирован мой дизайн это от 650 до 980 px и выглядит следующим образом:

пример адаптивного дизайна с разрешением больше 650 px

Как вы могли заметить здесь у нас уже ни одна информационная колонка, а две и значительно изменился размер логотипа, еще один интересный момент это изменение размеров шрифтов, вы можете делать на каждое разрешение свой размер для шрифта. Данный вариант сделан уже для планшетов, нетбуков, и прочих устройств с подобным разрешением. Ну и последний интервал это свыше 980px и выглядит он так:

пример адаптивного дизайна с разрешением больше 980 px

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

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

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

Подводя итог всему вышеизложенному хочу вас заверить, что ни чего сложного в этом нет и не стоит боятся перемен, они как известно к лучшему…

Дата публикации:2013-10-16


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

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget