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

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

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

Немного вводной «воды»

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

Разработкой мобильных сервисов люди занимаются на протяжении многих лет. Среди первых таких был сервис pda.yandex.ru, содержащий список готовых сайтов для мобильных устройств. Также были и «продвинутые» сайты, имеющие сразу десктопную версию с полным функционалом и мобильную (уменьшенную), для мобильных телефонов с операционной системой Simbian, Windows Mobile и прочими. Тогда данное решение вполне удовлетворяло все пользовательские требования.

Спустя некоторое время популярность смартфонов достигла пика, также возросла скорость мобильного интернета. Все это способствовало развитию адаптивных версий сайтов в период с 2012 по 2013 года. Честно признаюсь, сначала я скептически воспринял нововведения, так как не видел в них особого потенциала. Причиной тому было широкое использование в 2000-х годах так называемой «резиновой верстки», работающей по принципу изменения размера блоков, масштаба текстов и изображений. Ее актуальность была вызвана наличием широкого парка мониторов, начиная от устаревших 640-пиксельных ЭЛТ, заканчивая первыми жидкокристаллическими мониторами на 1280 и 1600 пикселей.

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

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

Отдельная мобильная версия

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

Положительные стороны дизайна:

1. Автономность. Данное решение позволяет разработчикам дополнять и корректировать каждый сайт по отдельности.
2. Увеличение скорости. Такой сайт можно легко оптимизировать под потребности мобильной аудитории, исключая использование «тяжелых» элементов, фишек и различной сложной анимации.
3. Практичная навигация. При разработке сайта учитываются все потребности мобильной аудитории.

Минусы:

1. Одновременное поддерживание двух сайтов. Параллельная поддержка нескольких сайтов требует дополнительных временных затрат и финансовых ресурсов. К тому же, на совместное редактирование мобильной и основной версии не всегда будет достаточно времени одного модератора. Приоритет часто остается за основным сайтом, вследствие чего, наполнение и главные разделы мобильной версии со временем будут очень отличаться от десктопной.
2. Сложности для пользователей. Отдельная мобильная версия является самостоятельным сайтом, его наполнение и навигация могут иметь различия с десктопной версией. Это требует от пользователя отдельной адаптации к каждому сайту, и запоминания нескольких вариантов поиска информации.
3. Уменьшенная версия. Главная цель мобильного сайта заключается в обеспечении только ключевого функционала, что не позволяет удовлетворить все требования пользователя, как на десктопном сайте.
4. Дополнительный адрес. У каждой страницы есть два URL: десктопный и мобильный. В качестве примера приведу случай: часто на лентах соц. сетей можно встретить ссылки вроде m.site.ru/article.php?id=268533. После перехода на мониторе компьютера появляется «растянутая» версия для смартфона. Здесь целесообразней было бы осуществлять переадресацию пользователей на десктопный сайт.
5. Время загрузки. При посещении сайта со смартфона, выполняется автоматическая переадресация на версию для мобильных устройств, которая снижает скорость загрузки.
6. Трудности с SEO. При наличии у статьи сразу двух адресов, значительно ухудшается ее поиск и SEO.
7. Каждому устройству своя мобильная версия. Это означает, что качественное отображение сайта при наличии одной мобильной версии будет недостаточным, и придется создавать дополнительные версии для планшетных ПК, ТВ и retina-дисплеев.

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

Уникальные особенности данной версии позволяют перестраивать сайт под все возможные расширения экрана, изменяя расстановку и величину блоков, масштаб текстов, а также меняя сам контент и блоки. Стоит упомянуть тот факт, что специализированные источники оперируют несколькими
терминами дизайна. Чтобы не запутаться, необходимо четко разобраться в терминологии. Общим для всех является утверждение, что сайт способен подстроиться под любое расширение экрана. Каким путем это будет осуществляться, напрямую зависит от профессиональных навыков разработчика и его предпочтений.
Адаптивный или adaptive design. Этот дизайн создает готовые версии для каждого расширения экрана, перестраивая размещение информационных блоков.

Отзывчивый или responsive design. Представляет собой объединение «адаптивного» с «резиновым» дизайном. Подстраивание осуществляется по методу «резиновой» верстки со сменой положения информационных блоков. Ярким примером такого дизайна является «liquidapsive.com». Наглядно разъяснить методы перестроения сайта поможет выбор необходимого типа дизайна (правый верхний угол) с параллельным изменением масштаба окна браузера.

Плюсы данного подхода:

1. Сохраняется содержимое На сайте полностью сохраняется контент и HTML-разметка десктопной версии, и не зависит от устройства на котором просматривается сайт. Данный подход можно использовать в наше время все чаще, так как все больше пользователей используют свои планшеты и мобильные телефоны как основной метод доступа в интернет.
2. Один URL для одной и другой версии. Здесь владелец и разработчики избавляются от дублирования контента и от ненужных редиректов страниц, чтобы иметь наилучший вид подачи страниц под разные устройства (в отличие от подхода с отдельной мобильной версией сайта).

Минусы:

1. Контент не всегда будет полностью оптимизирован под все мобильные устройстваЭто отличает данный подход от отдельной мобильной версии, где в приоритете проектируются страницы именно под мобильные устройства и весь контент изначально подстроен под них, а не скорректирован от начальной десктопной версии.
2. Медленная загрузка. Если для десктопной версии сайта скорость загрузки с качественным отображением графики является достаточно приемлемым, то отображение с такой же качественной графикой на мобильных будет слегка излишней, когда скорость загрузки сайта будет медленной
3. Может быть трудно перемещаться по сайту. Задачи и желания пользователей мобильных устройств как правило отличаются от пользователей на обычных десктопных устройствах. Кроме этого, эти задачи чаще всего являются уже привычными в использовании мобильных интерфейсов, и в случае, когда структура навигации продумана не должным образом для каждого устройства, часто возникают проблемы у пользователя с юзабилити.

RESS

Данный метод использует программирование со стороны сервера, и необходим для создания CSS и HTML. При этом, используя смартфон или десктопный компьютер, пользователь получит разный набор программного кодов для каждого устройства. Оптимизация кода осуществляется с учетом используемого устройства, и приводит к ускорению подгрузки интернет страниц.
Конечно, существуют и иные способы реализации, но я выделил самые главные. Работая над реальными проектами, мы предпочитаем выбирать лучшее, соединяя гибкие возможности resposive design и оптимизацию RESS.

Плюсы данного метода:

1. Страница с одним адресом. Наличие одного URL благоприятно влияет на шеринг страницы.
2. Сохранение навигации. Независимо от того какое устройство вы используете, структура контента остается практически неизменной.
3. Удобная поддержка сайта. Исключение наличия дополнительных версий упрощает и улучшает дальнейшую поддержку сайта.
4. Автоматическое подстраивание. Качественный адаптивный дизайн позволяет подстраивать сайты не только для смартфонов, но
и для телевизоров, планшетных ПК и игровых приставок PSP.
5. Улучшенная SEO оптимизация и работа поисковиков. Наличие сайта в единственном экземпляре без сложной структуры и копий гарантирует качественную SEO оптимизацию.

Минусы:

1. Увеличение веса страницы. Причиной этого недостатка, чаще всего, является невнимательность разработчиков, которые забывают подгружать изображения с маленьким расширением и оставляют включенной подгрузку скриптов, не отображающихся на смартфоне.
2. Неадаптированный контент. Если цели на десктопном сайте имеют некие отличия, это может повысить количество нерешенных пользовательских сценариев при работе на мобильных устройствах.

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

Актуальность отдельной мобильной версии сайта возрастает только тогда, когда в ней есть незамедлительная потребность. Однако в дальнейшем от разработчиков и владельца проекта потребуется увеличение ресурсов, чтобы одновременно поддерживать обе версии сайта. Спустя некоторое время версии станут сильно отличаться друг от друга, где приоритетная десктопная версия будет более функциональной, нежели мобильная. Поэтому создавать мобильные версии лучше для сайтов, контент которых подвергается наименьшим изменениям. Как правило, это промостраницы и корпоративные представительства. Для других сайтов целесообразней будет использование адаптивного дизайна, учитывая, что интернет моментально реагирует на появление нововведений и изменений функционала. Любой сайт считается эффективным, если он способен быстро перестраиваться под изменение ситуации. В ином случае он будет представлять собой не более чем ненужный громоздкий набор JPEG и CSS.

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

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

Подписывайтесь на наш Блог,
С уважением, ваш Сергей Кучма