Адаптивный или адаптированный сайт – как выбрать наилучший подход

Адаптивный или адаптированный сайт – как выбрать наилучший подход

Представительство "Адаптивный дизайн.'Веб-сайты стали общим термином для обозначения работы на устройствах с низким разрешением.

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

А Ретина. — Teston еще больше размыл границы между анализом дисплеев на разных платформах. В идеале ваш сайт должен выглядеть и работать так, как вам нравится, на разных устройствах.

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

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

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

Адаптивный или адаптированный дизайн?

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

Большинство дизайнеров используют вопросы СМИ в обоих подходах, потому что они очень надежны. Однако, только если вам не нужно обеспечивать совместимость сInternet Explorer 8.

Для тех, кому приходится иметь дело с более старыми версиями, Скотт Джел создал библиотеку JavaScriptRespons.js..

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

Дизайнер и верстальщик (если это не один и тот же человек) в равной степени отвечают за все, начиная с анализа трафика и заканчивая принятием решений по содержанию при смене ориентации экрана.

Хорошие примеры вдохновения для дизайна смотрите в галерееMediaqueri.es.Каждый сайт представлен четырьмя различными скриншотами.

ЧИТАТЬ ЕЩЁ:  Принять автоматизацию и максимизировать эффективность SEO

Разработка сайта с адаптированными версиями дизайна

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

Это был самый простой и очевидный подход, но он требовал большой рутинной работы. Часто его выбирали люди, которые хотели, чтобы их существующий сайт работал на мобильных устройствах.

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

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

План.

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

На практике часто проще сначала разработать самую маленькую версию, а затем работать по нарастающей.

С другой стороны, если начать с высокого разрешения, то к тому времени, когда вы дойдете до смартфонов, элементы дизайна могут начать накладываться друг на друга.

Количество разрешений дисплея, выбранное кодерами и дизайнерами в зависимости от назначения сайта и количества пользователей.

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

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

Макет.

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

Медиа-запросы для маленькой, средней и большой версий сайта могут выглядеть следующим образом

/* Mobile low and high resolution viewports */ @media (min-width: 320px) < ... > @media (min-width: 480px) < ... >
/* Tablet low and high resolution viewports */ @media (min-width: 768px) < ... > @media (min-width: 1024px) < ... >
/* Desktop low and high resolution viewports */ @media (min-width: 1080px) < ... > @media (min-width: 1440px) < ... >

Нацелены на конкретные разрешения, поэтому переключение между ними кардинально меняет расположение элементов на странице.

ЧИТАТЬ ЕЩЁ:  Как эффективно донести результаты своей работы до клиентов

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

Поддержка нескольких резолюций одновременно "с самого начала" без особой необходимости не оправдана.

Проектирование и разработка адаптивного дизайна

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

Легче внедрять элементы, специфичные для конкретного места, что является конкурентным преимуществом.

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

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

Это было хорошо для того времени, но это было до появления смартфонов и планшетов. Сегодня резиновые дизайны должны быть наполнены медиа-запросами, по крайней мере, в самом низком и самом высоком разрешении, чтобы не создавать слишком сжатые или, наоборот, разросшиеся сайты.

План.

Хотя правила адаптивного дизайна очень просты и консервативны, в адаптивном дизайне все не так просто. Наиболее радикальным и неоднозначным методом адаптивного дизайна являетсяДизайн в браузере.', который на самом деле является комбинацией дизайна и верстки.

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

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

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

Это заставит их забыть о правилах хорошей веб-разработки, но адаптироваться к вашей аудитории. Кроме того, сайт должен работать на пользователя, а не на оценки критиков.

Макет.

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

ЧИТАТЬ ЕЩЁ:  7 услуг по построению ссылок для оптимальной эффективности SEO

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

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

Смешанные типы дизайна

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

веб-дизайнердепо Существуют типичные "точки перегиба" при переходе от высокого разрешения к среднему и от среднего к низкому. Есть также дополнительные мультимедийные вопросы, которые исправляют некоторые аномалии дизайна, появляющиеся на промежуточных экранах.

Кроме того, сайт ведет себя как резиновый, но только до определенной максимальной ширины окна браузера. Учитывая все это, вы можете проявлять изобретательность и нарушать правила!

Тестирование адаптивных и адаптированных сайтов

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

Например, используйте расширение Google ChromeСимулятор риппинга..

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

Заключение

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

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

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

Сообщество веб-разработчиков постоянно придумывает новые решения проблем, которые мы только начинаем решать. Существует огромное количество информации об адаптивном дизайне, но сама концепция еще не созрела.

Поэтому существует множество инструментов и отсеков, готовых к работе, но помогает творческий подход к поиску собственных решений.

 

Оцените статью