От первого html тега, до SEO оптимизации порталов
Украина
+380 63 85 62 538
admin@sozdaj-sam.com

История адаптивной верстки

Адаптивная верстка - история

История адаптивной верстки

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

Так что пора внедрять это в свои проекты и делать, что говорится качественно и надежно.

Адаптивная верстка — это верстка после которой сайт на различных мониторах отображается нормально, читабельно и не требует применять зуммирование или масштабирование, а также нет необходимости в скроллинга по горизонтали. За такими сайтами будущее и конечно им будут отдаваться преимущества среди прочих неудобных сайтов.

Сам адаптивный дизайн можно разделить на три основные составные части:

  • Отзывчивый дизайн
  • Mobile First
  • Progressive Enhancement

Отзывчивый дизайн впервые появился в мире май 2010 года упомянутый неким Итаном Марком в его статье, а позже этот же парень написал книгу с четким названием «Responsive web design», которая не утратила свою актуальность и по сегодняшний день. Суть такого дизайна заключалась в трех техниках способствующих вашему сайту быть отзывчивым:

  • Fluid grid — отзывчивая сетка макета
  • Flexible media — гибкие медиа (изображения, видео, флеш вставки и т.д.)
  • Media queries — медиа запросы

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

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

Вообще верстка адаптивного сайта разделяется на определенные этапы, по окончании каждого этапа у вас получается законченная верстка под определенные устройства или размеры экрана. И так последовательно этап за этапом вы доводите до полного совершенства ваш сайт.

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

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

  1. НастяНастя09-23-2015

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

  2. СанекСанек10-29-2015

    Давно пора было все сайты сделать адаптивными. Это ведь удобно, мобильные версии так это вообще сказка! Правда не все ещё перешли, хотя уже прошло больше чем пол года. Нужно просто больше понизить в выдаче не адаптивные сайты и всё быстро изменится.

  3. ВикторВиктор10-30-2015

    Хотя понятие адаптивного дизайна активно мусолится аж с февраля этого года, я все еще до сих пор не перевел на него свой сайт. Сходил на конференцию гугла в Киеве, послушал, подумал, и забыл. А когда доля посещения с мобильных устройств упала больше чем в 2 раза, а объявления в adwords не хотят получать 10/10 за счет «низкого качества целевой страницы», то тут уже активно начал думать и действовать в сторону адаптивного дизайна. И еще я слышал про мобильные версии, но как по мне, то мобильная версия это просто порнография, по крайней мере у некоторых наших известных интернет-магазинов, я всегда выбираю на телефоне «показывать полную версию сайта». Поэтому я всему руками за адапт, и очень надеюсь в ближайшее время и самому на него перейти.

    • AndrejAndrej10-30-2015

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

  4. ВикторВиктор10-30-2015

    Но единственный момент, если сам не умеешь верстать, то адаптив заказывать, конечно, подороже будет, но как по мне оно того стоит!

  5. РоманРоман11-11-2015

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

  6. ГалинаГалина04-07-2016

    Интересно… А если сайт обычный, уже готовый, трудно ли его менять на адаптивную верстку? Или же уже нет смысла?
    Или… адаптивную верстку делают с нуля при создания сайта ? Может мои вопросы глупые…но хотелось бы чтоб мой сайт работал удобно на всех гаджетах 🙂

    • AndrejAndrej04-08-2016

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

  7. МирославМирослав04-22-2016

    Сейчас нахожусь в процессе подготовки к переезду своего интернет-магазина на новый движок и новый соответственно дизайн. Верстку решил делать адаптивную. Верстальщица, с которой я работаю, всем меня устраивает, что касается отображения на компьютере — все гуд. Но то что получается на смартфоне — особо меня не радует. Может дело в том, что я еще не встречал такого сайта (ИМ), с адаптивной версткой, чей вид и навигация меня бы устраивала.. Но мне кажется что все жутко неудобное…
    Суть вопроса заключается вот в чем:
    Сейчас у нас совсем нет времени посидеть-подумать и довести до ума все. Нам важно быстрей переехать и продолжить работу. Смогу ли я позже, после переезда, найти специалиста по адаптивной верстке, чтоб он довел до ума отображение ИМ на смартфонах? То есть на первое время я переживу то что получится, а потом, хотел бы внести какие-то правки. Или же мне нужно с самого начала все приводить в нормальный вид?
    Прошу прощения, если вопрос покажется глупым, сам в этом совсем не бум-бум, у меня совсем другой профиль.

    • AndrejAndrej04-22-2016

      Дело в том, что все зависит от того, как сейчас верстают сайт, если дизайн «натягивают» уже на какой-то css фреймворк? то будет легко.
      Но если это банальная верстка без сетки, то вам грубо говоря придется все с нуля верстать. Я бы делал сразу качественно, но это я, а у вас могут быть нюансы, простой бизнеса и т.д.
      Многое нужно учитывать.

Написать ответ

© 2016 Андриевский Андрей
Украина, город Киев
Тел: (063) 856-2538
E-Mail: admin@sozdaj-sam.com
Web: https://sozdaj-sam.com/