Блог графического дизайнера

Все о дизайне и для дизайна

Заказать дизайн

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

14.02.2017

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

Пока остановлю свое внимание на iPhone.

На Айфонах текст страниц автоматически уменьшается. Из-за этого не всегда можно рассмотреть, что же написано на странице. Если мы вспомним media queries, о котором я писала в предыдущем посте, то он может сжать изображение до 1000 рх и менее. Но на Айфоне 4 ширина браузера составляет не более 320 рх. В этом сматрфоне используется виртуальное окно, которое отличается увеличенными размерами, отличными от фактических размеров. Так мы можем просматривать страницы, которые нужно просматривать только на ПК.

Изначально окно приспосабливается к масштабу, чтобы можно было просмотреть нормальную читаемую версию страницы. Чтобы увеличить определенную область окна, нужно растянуть ее или нажать 2 раза. Если ширина окна Айфона больше 980 рх, то такие страницы можно с легкостью просматривать и на ПК.

Существует специальный тег, который работает только для мобильных устройств. Это тег viewport. Если вы добавите его в область head, то можно сделать наш мобильный дизайн адаптивным. Если мы хотим, чтобы ширина окна соответствовала ширине браузера, то мы используем два значения между тегами viewport. Это минимальный масштаб и максимальный масштаб: initial-scale и maximum-scale.
Вы можете максимально точно задавать ширину окна, если будете пользоваться тегами width и width=device-widht.

Плюсы и минусы адаптивного дизайна для мобильных устройств

Сначала остановлюсь на плюсах адаптивного дизайна.

  • Удобная и быстрая разработка. Вся конструкция вашего сайта будет автоматически варьировать вокруг настроек вашего браузера. Более того, вы можете взять за основу неадаптивный дизайн и немного его подправить. Поддерживать такой продукт довольно просто.
  • Отдельный единственный url. Это удобно в первую очередь для пользователей, которым не придется запоминать адрес вашего сайта. Такой сайт будет проще продвинуть в поиске.

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

  • Различные требования к функциональности для мобилок и ПК. Если вы просто делаете копию веб версии сайта для мобильного телефона, то можете забыть об удобстве пользователя.
  • Медленная скорость загрузки страниц. Поскольку вес страниц увеличивается, то это, несомненно, сказывается на скорости загрузки. Даже если вы воспользуетесь функцией сжатия кода, то запросы на сервер будут поступать с такой же концентрацией.
  • Невозможность переключиться на десктопную версию сайта. Если вы еще не знали, то адаптивные дизайны исключают эту возможность. Конечно, есть всевозможные способы, чтобы это обойти, но их нельзя назвать надежными.

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

*

*