Ѕудущее за адаптивными сайтами?

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

  2014 году больша€ дол€ веб-трафика будет приходитьс€ на мобильные устройства. √отовы ли веб-сайты к этому?

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

ƒело в том, что большинство сайтов ориентированы на стандартное разрешение экрана 1024х768. “акие сайты на мониторах планшетов, смартфонов, мобильных телефонов и smart телевизоров станов€тс€ крайне неудобными дл€ просмотра и использовани€.

— помощью технологии адаптивного дизайна существенно облегчаетс€ представление информации пользовател€м самых разных гаджетов (мониторы ѕ , ноутбуки, планшеты, сматрфоны), без дополнительной разработки мобильных приложений или создани€ отдельных версий веб-сайта дл€ каждого конкретного типа устройств.

ѕримеры сайтов с адаптивным дизайном можно посмотреть здесь 

јдаптивный дизайн VS мобильные приложени€ и мобильные версии сайта

ћобильные приложени€ дл€ пользователей таких попул€рных гаджетов как iPad, iPhone, гаджеты на ќ— јндройд также решают проблему просмотра интернет-ресурса на мобильном устройстве.

ќднако под каждый тип операционной системы нужно делать свое приложение или версию сайта. Ёто дополнительные ресурсы, как с точки зрени€ денег, так и времени! ѕоэтому сегодн€ создание мобильной версии сайта или мобильного приложени€ дл€ подавл€ющего большинства компаний - непозволительна€ роскошь.

 роме того, пользователи эконом€т пам€ть телефона и трафик, необходимый на загрузку приложени€, поэтому обычно загружают приложени€, только если собираютс€ им периодически пользоватьс€, и не будут грузить приложение ради единичного просмотра ресурса. Ёто значит, что дл€ сайтов компаний (корпоративных, визиток) или не раскрученных интернет-магазинов и сервисов вариант с созданием приложени€ – не вариант.

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

» еще важный момент – это неудобство наполнени€ и обработки заказов или обратной св€зи с веб-ресурса, расположенного как на сайте, так и на мобильном приложении. ƒл€ публикации материалов нужно или делать двойную работу по наполнению или обеспечить интеграцию контента, что требует ресурсов на доработку сайта и приложени€. ”сложн€етс€ и обработка заказов в интернет-магазинах, их нужно или собирать отдельно с сайта и приложени€ или интегрировать в единую базу, что также требует участи€ программиста.

јдаптивный сайт – это один URL сайта, один дизайн, один контент и один код сайта!

≈сть ли минусы у адаптивного дизайна сайтов?

Ѕезусловно, есть. ќсновной минус состоит в том, что это нова€ технологи€ и еще сыровата€.  райне мало специалистов, знающих как делать адаптивный дизайн и имеющих опыт. ѕо этой причине адаптивный дизайн сейчас практикуют в основном крупные студии, имеющие ресурсы на освоение новых технологий.

¬ нешей компании, "»нтернет-клиент" мы тоже только изучаем эту технологию и запускаем первые проекты. ќтсутствие богатого опыта не позвол€ет нам тарифицировать эту работу, поэтому первые 5 адаптивных сайтов мы делаем без взимани€ платы за работы св€занные с адаптацией, а это пор€дка 50% от стоимости дизайн-макетов и верстки. —пешите, осталось 3 места!

јдаптивный дизайн очень св€зан с контентом. Ќельз€ набить в страницу все что угодно, нужно всегда сразу задумыватьс€ о том будет ли уместен и поместитс€ ли контент в блоки, разворачиваемые на мобильной версии. ѕоэтому не стоит делать адаптивный сайт, не име€ в штате или на аутсорсе грамотного контенщика.

“ехнологи€ создани€ адаптивного дизайна

Mobile first

ƒл€ оптимизации отображени€ страниц сайта на мониторах мобильных устройств, дизайнеры отрисовывают мобильные версии сайтов с адаптивным дизайном на базе принципа «mobile first».

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

ƒизайн и верстка

ƒизайнерами разрабатываетс€ от 5 до 10 макетов сайта дл€ отображени€ на устройствах разного формата и разрешени€: мобильных телефонах, планшетах, коммуникаторах, мониторах ноутбуков и нетбуков. ѕри этом главной задачей ставитс€ сохранение качества изображений и контента. √отовые макеты передаетс€ дл€ верстки программистам.

јдаптаци€ к девайсам

√отовый сайт с адаптивным дизайном автоматически распознает формат, тип и разрешение экрана устройства, с которого на него заходит посетитель. ѕодключение/отключение элементов страницы, изменение ширины блоков и размера шрифтов, включение или отключение анимации происходит автоматически. ¬ итоге страница с responsive design адаптируетс€ к устройству и отображаетс€ с учетом специфики гаджета.

“естирование

√отовый сайт необходимо протестировать на попул€рных девайсах и браузерах. Ёто существенный момент, так как далеко не все студии имеют в наличии необходимый арсенал гаджетов и технологию тестировани€ удобства адаптивного сайта.

***

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

ќднако сегодн€ технологи€ еще дороговата и сыровата из-за отсутстви€ у студий опыта и обкатанных технологий. Ќаверн€ка, это минус временный.


—сылки на источники:

ћари€ —мирнова, директор web-студии "»нтернет-клиент"


 омментарии (0) –аспечатать ќбсудить на форуме


”важаемый посетитель, если ¬ы увидели неточность в данной статье, или знаете, как ее улучшить - напишите об этом в комментарии или отправьте сообщение јдминистраторам ресурса.  роме того, ¬ы также можете создать альтернативную авторскую статью на эту тему. Ќапоминаем, что дл€ создани€ статей ¬ам необходимо зарегистрироватьс€ или авторизоватьс€.

»нформаци€

ѕосетители, наход€щиес€ в группе √ости, не могут оставл€ть комментарии к этой статье.

 
яндекс.ћетрика