Чек-лист правильной верстки сайтов | Блог о маркетинге

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

Итак, всё по порядку:

1. Кликабельные контакты

Все телефонные номера, e-mail адреса, контакты skype, viber, whatsapp и других распространенных мессенджеров, а также адреса оформляются не просто текстовой информацией, а в виде ссылок, позволяющих напрямую взаимодействовать с ними без необходимости выделять, копировать и вставлять куда-либо.

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

2. Удобная навигация

Основные разделы сайта выносятся в верхнее (основное) меню

• Справочная информация для покупателей выносится во вспомогательное меню
• Отдельно создается навигация по основному разделу сайта (как правило это каталог продукции)
• На мобильных устройствах вся навигация спрятана (свернута) в так называемые «бургеры», чтобы не занимать контентную область сайта

3.

Принцип сетки

В проектах мы стремимся следовать так называемому «принципу сетки». Его суть в ровном и грамотном разбиении контента сайта на области и разделы. Параллельно следим за правильным горизонтальным и вертикальным выравниванием объектов на странице.

4. Типографика

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

5. Помощь пользователю

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

6. Кроссбраузерность

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

• Google Chrome
• Mozilla Firefox
• Safari
• Opera
• Microsoft Edge

Также в обязательном порядке мы проверяем корректное отображение сайта на разных операционных системах (Windows, MacOS, iOS, Android).

7. Адаптивность

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

8. Скорость загрузки и оптимизация кода

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

В среднем наши проекты набирают показатели в районе 80+.

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

Как проверить вёрстку сайта? Пошаговый чек-лист

55 шагов к идеальной верстке. Чек-лист по тестированию и оптимизации HTML-верстки сайта.

Материал создан с участием партнёра.
Веб-интегратор «Компот»

Содержание

• 1. Кроссбраузерность
  • Старые браузеры
• 2. Разрешения экрана
• 3. Мобильные устройства
  • • Важно ли адаптировать сайт для мобильных устройств?
• 4. Базовые проверки вёрстки сайта
• 5. Валидность
• 6. Оптимизация верстки

1. Кроссбраузерность

Базовое правило верстки сайта — кроссбраузерность. Это подразумевает под собой корректное отображение сайта во всех современных браузерах.

• Firefox
• Chrome
• Opera
• Safari
• Edge

Старые браузеры

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

2. Разрешения экрана

Подготовьте страницы для корректного отображения при разных разрешениях экрана.

• 1024×600
• 1024×768
• 1152×864
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1080

3. Мобильные устройства

Верстка на смартфоне

Важно ли адаптировать сайт для мобильных устройств?

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

• Android (смартфоны и планшеты)
• iOS (смартфоны и планшеты)

4. Базовые проверки вёрстки сайта

• Соответствие макету.
• Контактные данные оформлены микроразметкой.
• Кодировка UTF-8. Проверяется в браузере: Инструменты → Информация о странице. В появившемся окне должно быть написано «Кодировка: UTF8». Эта кодировка должна использоваться для всех файлов: html, css, js. Если файлы в разных кодировках — могут быть проблемы.
• DOCTYPE: HTML5. Первая строка 
• Логотип добавлен в формате SVG, не мутнеет и не пикселится при масштабировании.
• Формат копирайта. Правилом хорошего тона будет использование корректного копирайта в подвале сайта. Пример — © ООО «Рога и копыта», 2010—2019
• Независимость блоков в CSS. При наведении на любой блок, в его стилях не должно быть множество перечёркнутых правил (следствие длинного каскада). Для минимизации каскада и построения надёжной, современной, масштабируемой вёрстки сейчас применяют следующие техники: БЭМ, MCSS и SMACSS.
• Label и input/select должны быть связаны. Проверяется кликом по label — должен активироваться соответствующий ему элемент ввода.
• HTML5 валидация заполнения формы. Проверяется в Opera: выключаем javascript, не заполняем форму, жмём Submit — должны появится уведомления о необходимости заполнить поля.
• JS-валидация форм. Проверяется в Opera/Safari/Chrome: включаем javascript, не заполняем форму, жмём Submit — должны появится уведомления о необходимости заполнить поля.
• Правильные input type=«email/url/tel». Проверяется на iPhone — в зависимости от типа поля ввода он должен показывать различную клавиатуру: стандартную/цифровую/для набора web/email-адресов.
• Уведомления об ошибках. Должны быть не js-alert’ом, а текстом в дизайне сайта.
• Правильная структура заголовков (h2,h3,и TITLE). Проверяется в FF через плагин addon Web Developer>Information>View Document Outline. Красных строк быть не должно!
• Использование 1 тега h2 на странице.
• Заголовки <h2> — <h6> не применяются в заголовках блоков.
• Работоспособность сайта при выключенном JavaScript. Проверяется в FF через плагин addon Web Developer>Disable>Disable JavaScript>All JavaScript. Сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились! Весь критически важный функционал сайта должен быть доступен без JS. Дополнительные фишки, например, ссылки на увеличение шрифта или распечатку, при выключенном JS не должны отображаться. Если не хочется/нет возможности реализовывать функционал без JS, нужно хотя-бы выводить уведомление о необходимости включить его.
• Логотип в шапке является ссылкой. Логотип должен являться ссылкой на главную страницу во всех макетах, кроме макета главной. На главной странице лого не должен являться ссылкой, т.к. страница будет ссылаться сама на себя, что отрицательно сказывается на SEO.
• Ховер-эффекты на текстовых ссылках. Все ссылки должны как-то реагировать на :hover, :active и :focus.
• Favicon. Желательно создавать несколько favicon с включенными внутрь неё 32×32, 48×48 и 64×64 вариациями и apple-touch-icon.
• Skype-плагин не должен ломать вёрстку.
• Ссылки на внешние ресурсы. Ссылки на чужие сайты должны быть с target=«blank», желательно выделять их иконкой «внешняя ссылка».
• Структура каталогов верстки. Картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной. Графика, не являющаяся частью дизайна (всякие иллюстрации, фото в новостях и т. д.), нужно положить в отдельную папку, например, «userfiles».
• В хлебных крошках отсутствуют ссылки текущую страницу.
• Надежность верстки. На странице с контентом, пробуем добавлять и удалять содержимое — «что будет когда текста много?», «а когда мало?».
• Наличие удобной маски для ввода телефона. Удобная маска для ввода телефона

5. Валидность

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

• Валидность верстки.
• Валидность CSS.

6. Оптимизация верстки

• Подключение CSS должно быть в <head>, а JS — в конце HTML, перед </body>
• Оптимизация графики. Для ускорения работы сайта рекомендуем пропустить все графические изображения через специальный оптимизатор.
• Использование CSS-спрайтов
• Объединять все css в один файл
• Объединять все js в один файл
• Использовать только WOFF при подключении web fonts.
• Соответствие типов файлов изображений и их назначения. Например, png стоит использовать только в тех случаях, когда требуется прозрачность. В большинстве других случаев png можно заменить на jpg без потери качества. Благодаря этому существенно уменьшится вес страницы и вырастет скорость загрузки.
• Проверить и оптимизировать сайт с помощью сервиса PageSpeed Insights.
• Вынести кнопки соц. шаринга в пост-загрузку. Мануал.
• Подключить библиотеку LazyLoad для графики с целью ускорения загрузки страницы.
• Подгружать невидимые при первой загрузке части страницы через AJAX. Например содержимое табов, скрытых блоков и так далее.
• Подгружать js-библиотеки и шрифты с CDN для использования их версий, закешированных с других сайтов, и быстрой загрузки с CDN, если кеша нет.
• Минимизировать CSS, JS и HTML

Оценка доработки сайта

Доработаем ваш сайт в формате разовых работ без абонентской платы. Напишите на почту [email protected], позвоните по телефону +7 (499) 685-19-29 или воспользуйтесь данной формой.

Представьтесь

Номер телефона

Опишите задачу (необязательно)

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

Digital-агентство «Компот»

Окончательный контрольный список адаптивного веб-дизайна для веб-сайтов

Скорее всего, вы читаете это на своем смартфоне. То, как мобильные устройства стали частью нашей повседневной жизни, неудивительно. По данным Google, более 50% поисковых запросов по всему миру в настоящее время поступают с мобильных устройств. И скорость страницы теперь является фактором ранжирования результатов мобильного поиска. Таким образом, предприятия и блоггеры должны убедиться, что они используют тему WordPress, которая создана и оптимизирована для более высокой производительности. Это означает, что если вы не оптимизировали свой веб-сайт для мобильных устройств, вам следует сделать это сейчас, иначе вы рискуете потерять более половины своей аудитории. Веб-сайт с адаптивным дизайном — это то, что спасет вас от потери аудитории и вашего бизнеса. В этом посте я расскажу, что такое адаптивный веб-дизайн и почему он важен, на нескольких примерах адаптивного веб-дизайна. Я также указал Контрольный список адаптивного веб-сайта из 12 пунктов , чтобы убедиться, что ваш веб-сайт WordPress адаптивен.

Содержание

• Удобный для мобильных устройств дизайн имеет решающее значение для вашего веб-сайта
• Контрольный список для тестирования более 12 адаптивных веб-сайтов
• Инструменты для тестирования отзывчивости веб-сайта
  • Инструмент Google для мобильных устройств
  • Am Responsive?
  • Средство проверки адаптивного дизайна
• Примеры адаптивного веб-дизайна
  • DropBox
  • Treehouse
  • Dribble
• Ищете адаптивную тему WordPress?
  • Отзывчивая тема WordPress
    • Бесплатный блог о путешествиях WordPress
    • Бесплатный дизайн интерьера WordPress Тема
    • Бесплатный адвокат WordPress Theme
    • Бесплатная медицинская тема WordPress
    • БЕСПЛАТНАЯ СРЕДНАЯ ЖИЗНА адаптивный веб-дизайн? Мы живем в мире, полном умных устройств. Эти умные устройства бывают всех форм и размеров экрана. Люди используют все эти устройства для просмотра и взаимодействия с веб-страницами в Интернете. Это означает, что ваш веб-сайт должен хорошо выглядеть и быть простым в использовании независимо от устройства. Здесь на помощь приходит тест адаптивного веб-дизайна. Адаптивный веб-дизайн позволяет вашему сайту хорошо работать на разных устройствах.

      В зависимости от устройства этот подход к дизайну скрывает, показывает, уменьшает, увеличивает или перемещает содержимое, чтобы оно хорошо выглядело на любом устройстве. Многие пользователи задавались вопросом: «Как мой веб-сайт выглядит на мобильных устройствах?» Быть отзывчивым имеет прямое отношение к мобильной отзывчивости.

      Подумай об этом. Ваша аудитория уже приняла адаптивный дизайн. Сегодня 80 процентов интернет-пользователей владеют смартфоном. Эти пользователи тратят в среднем 69% своего времени на смартфоны. Компании без мобильного сайта рискуют отвернуться от клиентов. По данным socPub, колоссальные 57% пользователей говорят, что не будут рекомендовать компанию с плохо разработанным мобильным сайтом. С другой стороны, ваши конкуренты расстилают красную ковровую дорожку для ваших клиентов. Согласно MarketingLand , 72 процента бюджета цифровой рекламы в США будет потрачено на мобильную рекламу. А 68% предприятий интегрировали мобильный маркетинг в свою общую маркетинговую стратегию. Вердикт ясен. Будьте отзывчивыми или разоритесь.

      Если вы изменили дизайн (или создали новый веб-сайт) за последние несколько лет, скорее всего, он уже адаптивен. Поскольку отзывчивость больше не является дополнением, большинство компаний, занимающихся веб-дизайном, предлагают адаптивный дизайн в качестве стандарта. Но убедиться, что ваш сайт оптимизирован для мобильных устройств, — это не разовая задача. Вам необходимо периодически выполнять тест проверки адаптивного дизайна и обновлять свой веб-сайт для обеспечения адаптивности, следуя контрольному списку дизайна веб-сайта. Итак, если вы задаетесь вопросом: «Отзывчив ли мой веб-сайт?» Вот удобный контрольный список адаптивного дизайна веб-сайта, который поможет вам протестировать ваш веб-сайт WordPress.

      1. Проверка на разных устройствах и в разных браузерах. Соберите данные мобильного и веб-трафика из Google Analytics для тестирования адаптивного веб-сайта. Эти данные включают мобильные устройства и браузеры, используемые для доступа к вашему веб-сайту. Это важный пункт в контрольном списке дизайна веб-сайта.
      2. Пересматривайте сочетание устройств и браузеров каждые несколько месяцев. На основе вновь собранных данных удалить старые комбинации и освободить место для новых для тестирования адаптивного дизайна.
      3. Проверка важного содержимого. Убедитесь, что важное содержимое страницы отображается на всех устройствах. Другой вспомогательный контент может быть скрыт на устройствах меньшего размера.
      4. Проверка порядка содержимого на основе важности. Убедитесь, что важный контент отображается перед другим вспомогательным контентом на небольших устройствах.
      5. Тест на работоспособность. Измерьте, сколько времени требуется вашему веб-сайту для отображения в браузерах, устройствах и скорости Интернета. Сжимайте большие ресурсы и используйте кэширование для повышения производительности сайта.
      6. Визуально проверьте веб-сайт. Важным этапом тестирования адаптивного дизайна является проверка выравнивания текста, изображений и элементов управления. И не запускать и не заливать края экрана. Убедитесь, что содержимое правильно прокручивается и отображается на разных устройствах.
      7. Проверка типографики сайта . Убедитесь, что весь текстовый контент читается на разных устройствах. Убедитесь, что шрифт, стиль и цвета соответствуют друг другу.
      8. Шрифты тестового устройства . При использовании шрифтов устройств убедитесь, что вы учитываете шрифты для разных устройств и операционных систем. Убедитесь, что вы указали шрифты по умолчанию для устройства в семействе шрифтов таблицы стилей вашего веб-сайта.
      9. Тест плавной навигации . Убедитесь, что элементы навигации не выходят за края экрана и не выходят за его пределы. Используйте скрытую навигацию с помощью значка меню-гамбургера на небольших устройствах. Убедитесь, что пользователь может перемещаться с помощью жестов смахивания.
      10. Проверка всплывающих окон на сайте . Убедитесь, что всплывающие окна на вашем сайте тоже реагируют. К ним относятся как встроенные всплывающие окна, так и всплывающие окна браузера.
      11. Тест на интерактивность . Люди используют различные устройства для взаимодействия с устройствами. Клавиатуры, мыши, стилусы и, конечно же, кончики пальцев. Убедитесь, что ваши элементы управления удобны для касания и достаточно велики для нажатия пальцами.
      12. Сначала оптимизируйте для мобильных устройств. При изменении дизайна раздела (или всего веб-сайта) придерживайтесь подхода, ориентированного на мобильные устройства. Сначала адаптируйте свой дизайн для небольших мобильных устройств. Затем создайте для больших экранов.

      Инструменты для тестирования отзывчивости веб-сайта

      Существует множество инструментов для проверки адаптивности вашего веб-сайта. Мы выбрали для вас три лучших:

      Google Mobile-Friendly Test Tool

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

      Отвечаю ли я?

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

      Responsive Design Checker

      С другой стороны, если вы хотите протестировать свою веб-страницу на различных устройствах, используйте Responsive Design Checker, адаптивный веб-тестер. Хотя инструмент проверки адаптивного дизайна работает аналогично Am I Responsive, он дает вам гораздо больше вариантов разрешения экрана. Помимо стандартных устройств, вы также можете протестировать свою страницу на определенных устройствах, таких как телефоны Amazon Kindle и Google Pixel.

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

      DropBox

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

      Treehouse

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

      Dribble

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

      Ищете адаптивную тему WordPress?

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

      Адаптивная тема WordPress

      Адаптивная — одна из первых адаптивных тем WordPress. Скачав более 1 000 000 раз, эта тема набирает силу с каждым днем. Тема поставляется с 40 бесплатными и премиальными готовыми к использованию шаблонами веб-сайтов, которые можно импортировать всего в 1 клик и легко настроить с помощью конструкторов страниц Gutenberg и Elementor. Эти готовые к использованию шаблоны веб-сайтов облегчат запуск вашего веб-сайта! Ниже приведены некоторые из бесплатных адаптивных тем, которые вы можете проверить.0005

      Бесплатная тема WordPress для блога о путешествиях

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

      Бесплатная тема WordPress для дизайна интерьера

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

      Бесплатная тема WordPress для юристов

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

      Бесплатная медицинская тема WordPress

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

      Бесплатная тема WordPress Lifestyle

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

      Заключительные мысли…

      Поскольку по всему миру насчитывается более 8,5 миллиардов активных мобильных устройств, ваш веб-сайт должен обеспечивать удобство работы с мобильными устройствами. Однако тестирование адаптивного веб-дизайна — это не разовая деятельность. Вы должны регулярно следить за контрольным списком дизайна веб-сайта. Каждый день появляются новые устройства, операционные системы и браузеры. Вам необходимо периодически обновлять список устройств и браузеров, которые поддерживает ваш сайт, и тестировать их. Если вы создаете новый веб-сайт, в Интернете есть хорошие примеры адаптивного дизайна.

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

      Все, что вам нужно знать

      Эта статья является частью нашего Content Hub. Для получения более подробных ресурсов посетите наш концентратор контента в учебнике по адаптивному тестированию.

      Мы живем в эпоху смартфонов и проводим с ними много времени. Знаете ли вы, что в настоящее время средний пользователь смартфона проводит за своим устройством 4 часа 30 минут в день? Велика вероятность, что вы читаете эту статью и на своем смартфоне.

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

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

      Что такое адаптивный веб-дизайн?

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

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

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

      Контрольный список для тестирования адаптивного дизайна

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

      • Проверка навигации по сайту
      • Проверка шрифтов на нескольких устройствах
      • Проверка комбинаций «устройство-браузер»

      Тест

      • на устройствах с маленьким экраном
      • Проверьте скорость вашего сайта
      • Проверка выравнивания элементов
      • Тест на размещение контента
      • Тест на кросс-браузерную совместимость
      • Тест на интерактивность
      • Проверка всплывающих окон веб-сайта на совместимость с мобильными устройствами
      • Протестируйте веб-сайт в качестве пользователя

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

      1. Проверка навигации на веб-сайте

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

      На следующем рисунке показано, как LambdaTest изменяет панель навигации в зависимости от ее размера.

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

      СКАЧАТЬ LT БРАУЗЕР

      2. Проверка шрифтов на нескольких устройствах

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

      На изображении выше показано, как метод font-face поддерживается в различных браузерах.

      3. Проверка комбинаций «устройство-браузер»

      Источник

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

      4. Тест для устройств с маленьким экраном

      Источник

      Более 80% пользователей Интернета используют мобильные устройства. Поскольку мобильных пользователей с каждым днем ​​становится все больше, у вас не может быть веб-сайта, который не реагировал бы на каждое мобильное устройство. Таким образом, становится безупречным учитывать подход к дизайну, ориентированному на мобильные устройства, при разработке адаптивного дизайна. Ваш дизайн должен подходить для устройств с маленькими экранами, таких как мобильные телефоны, а затем переходить к экранам большего размера.

      5. Проверьте скорость вашего сайта

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

      Исследование, проведенное Forrester Consulting, показало, что пороговое время ожидания составляет всего две секунды. Если ваш загрузчик все еще вращается через 2 секунды, пользователь, вероятно, нажмет кнопку «Назад». Поэтому проверьте скорость своего веб-сайта, и если скорость немного ниже, чем вы ожидали, используйте альтернативные методы для рендеринга тех же изображений на этих небольших устройствах. У нас есть отдельная статья о методах рендеринга изображений на веб-сайтах. Вы можете прочитать его, чтобы узнать о лучших методах разработки и оптимизации тяжелых элементов.

      GTMetrix — популярный сайт для тестирования скорости. Вы можете пойти дальше и взглянуть на него.

      6. Проверка выравнивания элементов

      Источник

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

      7. Проверка размещения содержимого

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

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

      8. Тестирование проблем кросс-браузерной совместимости

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

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

      9. Тест на интерактивность

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

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

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

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

      11. Тестирование веб-сайта в качестве пользователя

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

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

      Чтобы узнать больше об адаптивном тестировании от LambdaTest, посмотрите подробное видео ниже:

      Инструменты для тестирования адаптивного дизайна

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

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

      • Мобильная отладка на более чем 40 разрешениях устройств
      • Тестирование сайта на разных устройствах
      • Создание пользовательских устройств
      • Бок о бок мобильный вид сайта для сравнения
      • Встроенные инструменты DevTools для тестирования мобильного веб-сайта
      • Проверить локальный веб-сайт без расширения или туннеля
      • Регистрация ошибок в один клик
      • Плавное тестирование с помощью Scroll Sync
      • Горячая перезагрузка, позволяющая мгновенно видеть изменения в режиме реального времени

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

      Ключевые уроки

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

      This entry was posted in Популярное