2017 был первым годом в истории интернета, где трафик веб-сайта smartphones и планшеты превзошли это с не мобильных устройств во всем мире Возможно, неудивительно, что эта цифра снова возросла в 2018 году и, вероятно, будет продолжать расти в течение некоторого времени.
Чтобы отразить растущую распространенность мобильного трафика, технологии в веб-дизайне должны были существенно измениться. Поисковые системы, такие как Google, начали в первую очередь индексировать мобильные версии веб-сайтов и будут активно наказывать веб-сайты, которые не совместимы с небольшими экранами. В результате для бизнеса как никогда важно иметь веб-сайт, оптимизированный для мобильных устройств.
Два основных метода мобильной оптимизации известны как адаптивный веб-дизайн и адаптивный веб-дизайн. Хотя оба метода служат одной и той же цели, их реализация и результаты могут сильно различаться.
В чем разница между отзывчивым и адаптивным?
Некоторые проекты могут больше подходить для адаптивного веб-дизайна, тогда как другие лучше подходят для адаптивного веб-дизайна. Но как они сравниваются?
По сути, разница между адаптивным и адаптивным веб-дизайном заключается в плавности. Если вы берете свой веб-браузер и перетаскиваете углы, чтобы отрегулировать размер окна, обратите внимание, что происходит с содержимым страницы.
Если текст, прямоугольники и изображения плавно уменьшаются или перетасовываются при уменьшении размера окна, тогда дизайн, вероятно, отзывчивый. Однако, если ничего не изменится, пока вы не достигнете определенных «точек скачка» – где все внезапно движется вместе – тогда, скорее всего, дизайн адаптивен. (Хотя стоит отметить, что адаптивный веб-дизайн также может иметь точки скачка).
Адаптивный веб-дизайн
При создании адаптивного веб-сайта разработчики обычно создают несколько различных статических макетов для страницы и просят веб-сайт загрузить соответствующий в зависимости от разрешения или размера экрана, на котором просматривается страница. Например, может быть определенный макет, созданный для ширины экрана 320 пикселей, или 960 пикселей, или 1200 пикселей, и так далее. Затем пользователь видит другую оптимизированную для устройства версию страницы, если он посещает веб-сайт на iPad или в Google Pixel, или на настольном ПК с широкоэкранным монитором.
Одним из недостатков этого метода является то, что новые устройства, и, следовательно, новые размеры экрана, постоянно разрабатываются и выпускаются – просто подумайте, сколько раз размер экрана iPhone менялся за эти годы. С адаптивным дизайном, вы должны создать новый макет для каждого отдельного устройства, и эта работа складывается. Вы можете просто аппроксимировать макет, который должен быть максимально приближен к существующему устройству, но который оставляет вас открытыми для недостатков и несоответствий. И никто этого не хочет.
Адаптивный веб-дизайн
Решением этой проблемы является создание веб-сайта с адаптивным веб-дизайном. Адаптивный дизайн строится из одного макета и соответствующим образом уменьшается (или увеличивается) в зависимости от разрешения устройства с помощью таких методов, как медиазапросы и манипуляции с CSS. Например, вы можете создать его таким образом, чтобы изображение на странице всегда занимало 30 процентов веб-страницы, независимо от ширины экрана, а остальные 70 процентов также соответственно масштабировались. Таким образом, вы гарантированно воспользуетесь всеми возможностями и разместите веб-страницу, оптимизированную для каждого отдельного устройства.
Хотя кажется, что для разработки, скажем, шести или семи отдельных макетов с адаптивным подходом требуется много работы, адаптивный подход также является большой работой, поскольку теоретически вы разрабатываете бесконечные макеты для экранов неограниченного размера, а для этого требуется целое много больше работы с кодом – в начале, по крайней мере.
Один важный фактор, который нужно иметь в виду, состоит в том, что, как только веб-сайт запущен и работает, поддерживать адаптивный дизайн гораздо проще, чем адаптивный. Это связано с тем, что любые изменения в содержании адаптивного сайта необходимо вносить только в одну версию, и, если реализация прошла успешно, изменения будут работать без проблем во всех разрешениях. Обновление адаптивного дизайна – это гораздо больше работы, потому что вы должны проверить все различные итерации сайта, чтобы убедиться, что ничто не нарушает ваши множественные макеты. Таким образом, несмотря на то, что с самого начала работы больше, общие усилия адаптивного дизайна уравновешиваются меньшей потребностью в постоянном обслуживании.
Модернизация против старта
По этой причине, если вы начинаете новый веб-сайт с нуля, адаптивный веб-дизайн обычно является лучшим выбором. Однако, если вы просто хотите модернизировать существующий веб-сайт с помощью мобильной оптимизации, адаптивный подход будет проще реализовать, и вы увидите столько же преимуществ.
Если у вас есть существующий сайт и вы хотите адаптировать его с помощью адаптивного подхода, рекомендуется провести аудит устройства, чтобы определить, какие устройства наиболее популярны среди ваших посетителей. Программное обеспечение, такое как Google Analytics, может показать вам, какие устройства используются для доступа к вашему веб-сайту, давая вам основу, с которой вы можете начать создавать свои первые макеты для конкретных устройств.
Стоит помнить, что большинство хостинговых компаний теперь предлагают услуги по созданию сайтов своими руками, где вы можете создать сайт, просто выбрав один из множества шаблонов и перетаскивая компоненты на место. Если вам повезло создать новый сайт, но у вас еще нет бюджета на профессионально созданный сайт, эти услуги – отличное место для быстрого запуска и запуска нового сайта. Более того, их шаблоны обычно всегда отзывчивы, поэтому вся тяжелая работа уже сделана для вас.
Отзывчивый против адаптивный: какой метод вы должны использовать?
В конечном счете, идеальный метод сводится к индивидуальному варианту использования. Если вы начинаете веб-сайт с нуля, рассмотрите возможность адаптивного подхода с помощью решения для создания веб-сайтов хостинговой компании или наймите разработчика, который сделает для вас что-то действительно уникальное. Если вы просто пытаетесь заставить свой текущий веб-сайт работать на меньших экранах, адаптивный подход, вероятно, будет наиболее прагматичным для вас.
Нил Томс, менеджер кампании, Fasthosts
Add comment