Адаптивный дизайн сайта. Плюсы и минусы

адаптивный дизайн сайта

Привет читателям блога! Сегодня мы поговорим об актуальной теме – адаптивный дизайн сайта. Что это такое, рассмотрим плюсы и минусы этой технологии. Не будет долгих вступлений, я их и не люблю. Перейдём сразу к рассмотрению вопроса.

Что это такое?

Сайт создаётся под размеры следующих устройств: телефонов, планшетов, ноутбуков и мониторов.

Активное взаимодействие пользователя с сайтом с разных мобильных устройств (ноутбук, планшет, телефон) привело к тому, что человек всё реже выходит в интернет с компьютера. Разрешение у таких устройств отличное от компьютерного, поэтому дизайн приходится изменять.

Он так и называется Adaptive Web Design. Даже не зная английского, прочитав это словосочетание, вы понимаете, о чём речь, об адаптивном дизайне сайта, то есть подходящего под мобильные устройства.


разрешение мобильных устройств

Ниже представлены размеры экрана устройств, под которые создают дизайн сайта.

Мобильные телефоны

  • 320px
  • 480px

Планшеты, нетбуки

  • 768px
  • 1024px

Компьютеры

  • 1280px
  • 1650 px
  • 1920 px


Почему он нужен сейчас?

Объяснить появление мобильного дизайна просто. Виной тому развитие мобильного интернета. И тенденция развития с каждым годом будет увеличиваться.

У моего блога, на сегодняшний день 25.06.17, нет мобильного дизайна, и это большой минус. В ближайшие пару месяцев обязательно появится. Советую прочитать мою статью под названием: какой должен быть веб-дизайн сайта в 2017 году?

Плюсы и минусы

Начну сразу с минусов. По-моему, мнению, он есть, но только один. На сложных сайтах, вроде kinopoisk.ru, невозможно на мобильных устройствах отобразить все элементы, как на компьютере или ноутбуке.

Пару месяцев назад тот же kinopoisk запустил мобильную версию своего сайта. Она не до конца доработана. Если вы зайдёте на сайт сначала с телефона или планшета, а затем с компьютера, сразу почувствуете разницу. В мобильной версии вы не найдёте подробного описания фильмов, как он отображается на мониторе. Но и не уменьшается весь материал на маленький экран, если только не делать выпадающее меню. Думаю, описание фильмов, да и всё остальное, доработают со временем.

Особенности создания

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

      • Изменение размеров элементов сайта. В первую очередь, изображений.
      • Изменение меню (навигация по сайту). В мобильной версии это значок с левой или с правой стороны в виде 3-4 полосок.
      • Шапка сайта на мобильных устройствах, не отображается. Только название.


создание мобильного дизайна

Существует мнение при разработке макета дизайна сайта, сначала создают мобильную версию, а затем для компьютера. Это написано в книгах по веб-дизайну. С чем связано?

Первое и самое главное, как я люблю повторять, акцент делают на главное. А что важное на любом сайте. Это контент. Здесь выбирают тип и размер шрифта, чтобы было удобно читать текст на телефоне и планшете. И чтобы ничего не отвлекало посетителя от чтения. Нет баннеров на правой стороне, когда просматриваете сайт на компьютере или ноутбуке.

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

Я хотел предложить список бесплатных сайтов, где можно посмотреть адаптацию под любые устройства. Но на них нет такой возможности. Объясню почему. Сайт отображается обрезанным, не адаптированным к мобильной версии. Введите kinopoisk.ru и посмотрите, а затем наберите на телефоне и увидите разницу.

      • quirktools.com/screenfly/
      • www.responsinator.com
      • mattkersley.com/responsive/

Плагин для Google Chrome — resize window. Для этого следует зайти по ссылке интернет магазина google chrome — https://chrome.google.com/webstore/category/extensions и ведите в строку поиска resize window. Вторая строчка сверху и будет это приложение. Нажмёте его и установите в браузер Google Chrome.

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

Если у вас есть сайт, и нет его мобильной версии, начинайте делать. Это удобно и для посетителей и для поисковых систем. И с каждым месяцем тенденция будет только увеличиваться.

На сегодня у меня всё. Всего вам хорошего! С уважением, Вадим Сулик.

Понравилось? Поделитесь с друзьями, нажав на одну из кнопок:


Оставить коментарий

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