Как стресс проверить содержимое вашего сайта

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

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

Тестирование размеров изображений

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

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

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

Тестирование других носителей

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

Тестирование текстовых заголовков

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

Если вы создали сайт, чтобы разместить такой заголовок, как этот:

«Тестирование текстовых заголовков»

Но ваш клиент использует CMS для добавления статьи с таким заголовком:

«Тестирование текстовых заголовков на различных веб-страницах с различными требованиями к размерам и потребностям пользователей»

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

Тестирование длины текста

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

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

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

Тестирование страницы Zoom

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

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

Не забывайте о скорости загрузки и производительности

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

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

Обучение клиентов имеет важное значение.

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