| Kosten | Пятница, 23 Февраля 2018 | Сообщение 1 |
| Вы видите снижение органического трафика на сайте. Вы все еще используете тот же старый дизайн сайта, который вы использовали при первом запуске своего сайта. Это может быть трудно поверить, но ваш плохой дизайн сайта может быть основной причиной, по которой вы теряете трафик на ресурсе. Как вы возможно знаете, что Google недавно изменил свой алгоритм поиска, чтобы повысить рейтинг для мобильных веб сайтов, а также наказать другие сайты только для настольных компьютеров. Существует множество статей, где содержатся советы по обеспечению того, чтобы сайт хорошо работал с мобильными устройствами, а также с рабочим столом.
Прежде чем мы начнем работу по оптимизации сайта, вам нужно выяснить, насколько ваш сайт нуждается в улучшении. Используйте инструмент Google Mobile Friendly Test для тестирования вашего веб-сайта и выясните, какие части вашего сайта необходимо устранить. Инструмент также предлагает предложения по улучшению вашего сайта для мобильных устройств.
Вы также можете использовать свои данные Google Analytics, чтобы узнать, какие типы мобильных устройств используют ваши посетители в основном. Затем вы можете оптимизировать свой портал для определенных экранов устройств на основе этих данных.
Многие из этих статей включают неопределенные предложения, такие как:
1. Знайте свою аудиторию;
2. Подумайте заранее, прежде чем строить свою аудиторию;
3. Знайте, что делают ваши пользователи;
4. Совместная работа;
5. Создавайте свои страницы перед их созданием;
6. Сделайте свой дизайн простым;
7. Будьте краткими в том, что вы представляете пользователям;
8. Дизайн экрана;
9. Обеспечьте быстрое время отклика с дизайном;
10. Разрешить обратную связь с пользователем;
Если вы делаете кодирование сайта, то большинство из этих советов настолько расплывчаты, что они не очень эффективны. Что было бы более полезно, чем эти советы, было бы несколько простых, более сжатых советов, которые помогут тем, кто создает сайт или приложение. Следующие советы следует учитывать, если вы хотите, чтобы ваши решения были более мобильными.
Совет 1: Оптимизация изображений
Одним из самых простых областей, которые помогут создать мобильный сайт, является обеспечение максимально возможной оптимизации ваших страниц. Это включает как можно меньше общего размера файлов, отправляемых клиенту. Одним из крупнейших участников формата страницы являются файлы изображений. Если изображения не оптимизированы, вы можете заставить своих пользователей загружать файлы, которые намного больше, чем необходимо.
Таким образом, все изображения должны быть пересмотрены и оптимизированы. Оптимизация статей может быть выполнена несколькими способами. Одним из способов является уменьшение фактического размера или разрешения изображения. Другим является уменьшение размера файла, используемого для хранения изображения в материале.
Совет 2: Рассмотрите размер изображения
В первом совете было предложено оптимизировать размеры файлов изображений и самих изображений. Стоит быть немного лишним говоря, что вы должны рассмотреть разрешение изображений. Легко включить изображение на страницу, которое больше, чем необходимо используя свойства ширины и высоты в теге HTML.
Простое решение для отображения изображения с точным размером, если вы используете изображение, которое больше чем необходимо, вы снова вынуждаете загрузку, что больше чем необходимо. Обслуживание изображения 4K (3840x1600) в приложении или странице на телефоне, как правило, не является оптимальным. Вам лучше уменьшить файл, как указано в подсказке номер один.
Совет 3. Использование HTML тегов и таблиц стилей
Стили позволяют изменять макет страницы с помощью JavaScript. Современное кодирование имеет тенденцию использовать базовый HTML5 для определения структурных элементов страницы, а затем использовать CSS3 для добавления дизайна.
Насколько это возможно, вам следует избегать использования жестко закодированного свойства в ваших тегах HTML. Это не только требует изменения сайта, чтобы касаться нескольких страниц, чтобы делать обновления, но и уменьшает легкость, с которой вы можете динамически настраивать дизайн на различные устройства.
Следует избегать такого кода, как следующее:
Код <p style='font-family:"Arial Black",sans-serif'>Дизайн на различные устройства</p>
Скорее переместите стиль в таблицу стилей и найдите этот код в области, которая может быть разделена и легко обновляться.
Совет 4: Не используйте теги PRE
Очень конкретное предложение, это избегать использования тега HTML. Этот и другие теги, которые вызывают определенную ширину и могут вызвать хаос на экране отображения содержимого. Хотя некоторые мобильные браузеры могут переопределять тег, вы не должны предполагать, что это всегда произойдет. Лучше всего избегать его использования и полагаться на форматирование таблицы стилей, которое не позволяет отображать текст с нужного размера экрана.
Есть две проблемы, которые вы хотите избежать, что могут быть вызваны этим тегом. Во первых, текст может отображаться с экрана, что вынуждает пользователя прокручивать влево и вправо, чтобы читать код или текст. Этот тип прокрутки следует избегать. Вторая проблема заключается в том, что некоторые браузеры избегают прокрутки, сокращая текст в теге для отображения на экране.
В некоторых случаях текст в теге pre может быть обернут. В отличие от абзаца и других тегов, обернутый текст часто делается с графом символов вместо поиска границ внутри слов и текста.
Совет 5: Не используйте таблицы
Подобно тегу pre выполнение таблиц с использованием HTML Table и связанных тегов может привести к тем же проблемам. Тег таблицы может привести к тому, что содержимое будет отжимать правую сторону экрана, уменьшено по размеру или обернуто способом, который затрудняет его чтение.
Лучший результат, это использовать более динамичный стиль, чтобы он мог приспосабливаться к меньшим ширине экрана и по прежнему читаться пользователю. Даже если вы масштабируете таблицу с процентами вместо жестко закодированных размеров, меньшие мобильные экраны могут по-прежнему вызывать рендеринг, который является плохим пользовательским интерфейсом.
Совет 6: Будьте кратки
Многие страницы полны текста, изображений и других информационных функций. При разработке для мобильных устройств вы должны учитывать, что необходимо, а что нет. Из-за ограниченного размера экрана ценится краткость. Вы должны сосредоточиться на предоставлении контента, который вам нужен, однако включают только то, что необходимо. Предоставление контента на высоком уровне и позволяющее пользователям бурить его хорошо.
Например, эта статья будет лучше представлена на мобильном устройстве, показывая каждый из подсказок без основного текста. Затем пользователь может развернуть каждый элемент или у них должна быть возможность расширить их все, если они захотят.
Совет 7: Дизайн для Touch
Многие мобильные устройства используют сенсорный интерфейс, поэтому вам нужно сконструировать свои страницы с прикосновением. Существует множество рекомендаций по проектированию, которые имеют правила минимального размера для контрольных целей для прикосновения. Они варьируются от 28 до более 44 пикселей.
Ирония многих из этих рекомендаций по размеру состоит в том, что большинство предложений меньше средней области касания среднего пальца или большого пальца и, следовательно, подвержены ошибкам, если пальцы не используются осторожно. Вы должны держать свои кнопки и области касания настолько большими, насколько сможете, но не настолько большими, чтобы он больше не выглядел как элемент управления.
При создании элементов управления для взаимодействия с пользователем на вашем сайте будьте осторожны, полагаясь только на использование пикселей для калибровки. В зависимости от устройства размер элемента управления может варьироваться в зависимости от того, насколько компактны пиксели на устройстве. Устройство с более высоким разрешением пикселей, скорее всего отобразит элемент управления меньший, чем один с более низким числом пикселей.
Совет 8: Использование шрифтов
Использование существующих стандартов веб разработки, включая HTML5 и CSS3, поможет обеспечить более эффективную адаптацию вашей страницы к современным технологиям. Точно так же использование шрифтов поможет обеспечить загрузку страниц быстрее и чище. Чтобы обеспечить успех при загрузке шрифтов, вы можете объявить резервные шрифты в коде CSS с помощью font-family свойства.
Совет 9: Используйте отзывчивый дизайн
Лучший совет для разработки мобильных страниц, это использовать отзывчивый дизайн. Книга может быть написана на основе гибкого дизайна, поэтому для этого совета здесь подытожу, говоря, что отзывчивые проекты, это абсолютная необходимость в разработке сайтов или приложений сегодня. Проще говоря, отзывчивый сайт, это тот, который будет корректировать презентацию на основе размера экрана, используемого устройства или других факторов.
Интернет ресурс отвечает на используемое устройство, это может включать изменение таблиц стилей, изображений, меню и другие функций. В некоторых случаях адаптивный дизайн будет корректироваться в зависимости от ширины браузера или экрана, используемого для просмотра статьи. Например, статья может выглядеть как любое из следующих трех изображений в зависимости от ширины окна вашего браузера или используемого вами устройства.
Существует несколько общих подходов к выполнению гибкого дизайна.
К ним относятся:
Использование процентов: Используя процентные значения вместо фиксированных размеров, вы можете заставить дисплей настраиваться в зависимости от процента размера экрана. Это не рекомендуемый общий подход.
Doing Server-side Sniffing: Использование кода на стороне сервера для определения того, какое устройство получает доступ к странице, а затем обслуживает файлы, которые наиболее подходят. Этот подход часто упоминается как обнюхивание браузером. Хотя это работает и это был популярный подход, где он не самый лучший по целому ряду причин. Количество устройств продолжает изменяться. Устройство также не указывает ширину используемого браузера. Если вы обнаружите, что человек использует настольную систему, это также не означает, что они используют полно экранный браузер.
Применение слушателей CSS3 и Media: Использование CSS3 и медиа слушателей для динамического изменения страницы. Используя комбинацию сценариев и CSS3 "более конкретно, сетку CSS3 Grid Layout", можно создать отзывчивый дизайн.
Нажатие на адаптивную структуру: Существует несколько фреймворков, где были написаны, например «Twitter Bootstrap», которые сделали тяжелую работу, чтобы добавить отзывчивость к странице. Использование фреймворка позволяет больше сосредоточиться на уникальном контенте вашего сайта, а не на макете. Структура может помочь позаботиться о гибких проблемах макета.
Существует множество других подходов, которые также могут быть использованы. Наилучший подход, это использовать комбинацию из вышеизложенного с использованием CSS3, а адаптивные системы, это безусловно лучший способ для получения отличного результата.
Совет 10: Тест на совместимость
Этот совет немного туманнее предыдущих советов, но это подсказка, которая достаточно важна, чтобы гарантировать включение всех списков. Существует огромное количество мобильных и настольных устройств, которые можно использовать для запуска сайта или приложения. У каждого из них может быть другое разрешение или режим отображения.
Таким образом, есть вероятность, что мобильное устройство может отображать ваш сайт иначе, чем другие. Чем шире разнообразие устройств и браузеров, используемых для тестирования вашего приложения, тем выше вероятность того, что вы найдете какие-либо проблемы. Быстрое обнаружение проблем означает, что вы можете изменить свой дизайн, пока на него не повлияет слишком много людей!
В заключение:
Будут исключения из этих советов, но в целом это хорошие правила для подражания. Если обнаружите, что вам нужно идти против одного из этих советов. То нужно как можно подробно убедиться, в том, что вы понимаете, то, что делаете. Например, некоторые сайты перезаписывают тег pre, при отображении на мобильных устройствах. Если вы это сделаете, вы можете проигнорировать отзыв 3. В целом, лучший совет, хотя и нечеткий, заключается в том, чтобы убедиться, что ваш сайт работает эффективно на мобильных устройствах.
Одна вещь с которой большинство людей соглашается, заключается в том, что показ рабочего стола на небольших мобильных устройствах на сегодняшний день может вызвать очень раздражающий опыт для ваших пользователей.
| | Страна: (RU) |
| |
