Как сделать правильно сайт: Как создать сайт. Пошаговое руководство

Содержание

Студія з просування сайтів в пошуку України

пошукова оптимізація

якою вона має бути

Наші послуги

Просування сайту

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

Детальніше

SEO аудит сайту

Аудит включає: створення семантичного ядра, побудова структури сайту на основі семантики, технічні рекомендації, рекомендації по змісту сайту, оптимізація meta тегів.

Детальніше

Просування в Європі та США

Ми пропонуємо повний набір послуг із просування сайтів на західні ринки. Включаючи link building та контент маркетинг.

Детальніше

Просування групи сайтів

Для веб студій та серійних інтернет підприємців ми пропонуємо особливі умови для просування сайтів: знижки та бонуси.

Детальніше

Наші принципи

  • Безпека сайтів наших клієнтів є основним пріоритетом при просуванні сайтів, тому ми використовуємо тільки “білі” безпечні методи.
  • Основна мета просування сайту — збільшення прибутку наших клієнтів.
  • Повна фінансова прозорість — важлива складова довіри та ефективної роботи. Ми надаємо повну фінансову звітність та максимально прозоре ціноутворення.

Відгуки клієнтів

Тимофій Масловpeopleandlaw

Співпрацюємо з фахівцями із SEO7 вже близько року. Водночас вирішили величезну кількість складних завдань під час просування нашого сайту, успішно пережили оновлення алгоритмів Google . Завдяки співпраці з SEO7 створили успішний та популярний ресурс, а зараз плануємо запустити ще кілька інформаційних порталів. Обов’язково звертатимемося до вас знову.

Ярослав ВепревКерівник інтернет-магазину stuff-shop.com

Працюємо з командою Артема з перших днів запуску нашого інтернет магазину, за ці роки пройшли багато етапів просування нашого сайту і продовжуємо впроваджувати нові рішення щодо SEO оптимізації. Завдяки команді seo7 сьогодні займаємо лідируючі позиції у своїх сферах діяльності.

Євгенія БагликПрофесійний інструктор з фітнесу та фейсбілдингу.

Щиро дякую фахівцям SEO7! Я зробила поки тільки половину з того, що мені рекомендували але за запитами, що мене цікавлять, сайт вже на першій сторінці перший:)). Залишилося відкоригувати тексти за вашою порадою та подивитися на результат. Але надалі обов’язково звернуся до вас ще.

Сергій ШіянКерівник Навчального центру «Інтелект» Intellekt.kiev.ua
Керівник студії Веб дизайну «Осінь»

Наша компанія вже понад 3 роки користується послугами фахівців SEO7, в області інтернет маркетингу. Вже з першої зустрічі вони залишили враження спеціалістів із глибоким розумінням своєї теми. І жодного разу за роки співпраці не змушували в них засумніватися. За багато років роботи на ринку послуг створення веб-додатків та надання консультаційних послуг. Я мав справу з добрим десятком інтернет-маркетологів. Хлопці з SEO7 – єдині, кого я рекомендую своїм клієнтам та знайомим. І ще жодного разу про це не пошкодував.

Замовити безкоштовний розрахунок

Контакти

Контактна інформація

Україна, м. Київ,
Пестеля, 4, оф. 7

+38 (044) 298 46 69
с 9:00 до 18:00 в будні дні

[email protected]

Форма зворотного зв’язку

Как сделать мобильную версию сайта правильно: лучшие практики с примерами

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

Responsive design, adaptive design или mobile first?

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

В связи с этим, большинство продуктовых компаний использует подход “mobile first” при разработке дизайна. То есть при разработке интерфейса в первую очередь создается мобильная версия интерфейса, затем для дисплеев больших размеров: планшеты, ноутбуки, ПК.

Для того чтобы лучше понять этот подход, разберемся с двумя другими:

1. Responsive Web Design (Отзывчивый дизайн)

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

Преимущества:

  • Существует множество шаблонов на отзывчивом дизайне.
  • Дружественность к SEO.
  • Простота в реализации.

Недостатки:

  • Элементы могут перемещаться.
  • Может потеряться реклама.
  • Загрузка на мобильной версии дольше.

2. Adaptive Web Design (Адаптивный дизайн)

Для адаптации под разные экраны используются разные макеты. Сайт идентифицирует с какого устройства заходит пользователь и перенаправляет на нужную версию сайта. Шаблоны зависят от ширины экранов, обычно это: 320px, 480px, 760px, 960px, 1200px и 1600px. Разработка может потребоваться не для всех вариантов, а только для актуальных устройств.

Преимущества:

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

Недостатки:

  • Требуется больше времени для разработки.
  • Появление устройств с новыми экранами — необходимость разработки новых шаблонов.
  • Трудности с SEO оптимизацией.

3. Mobile First Design (Сначала мобильный)

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

Преимущества:

  • Удобство для пользователя. Пользовательский путь создается с учетом ограничений небольшого экрана.
  • Быстрая загрузка страниц. Поскольку размещается только самый важный контент, изображения меньшего размера, отсутствуют “костыли” для адаптации, код более легкий.
  • Хорошая ранжируемость. С 2016 года Google ввел новый алгоритм для анализа сайтов Mobile First Index, который анализирует удобство пользования сайтом в мобильных версиях.

Недостатки:

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

3 подхода к мобильной разработке

Как проверить, что страницы вашего сайта соответствуют требованиям поисковых систем? Можно воспользоваться сервисом Google Mobile-Friendly Test, он покажет удобна ли страница на мобильных устройствах или что с ней не так. Если вам необходимо проверить весь сайт, то лучше использовать Google Search Console. Там вы найдете описание для каждой страницы, что ухудшает удобство сайта для мобильных посетителей.

Что нужно учесть в разработке дизайна мобильной версии

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

1. Иерархия контента

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

  • Центральная часть для самого важного контента.
  • Пространство над и под основным содержанием для контента второстепенной важности.
  • Самая верхняя часть экрана для неважной информации и элементов.

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

Используйте легкодоступные зоны и располагайте важный контент в нужных местах.

2. Ширина контента

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

Чем меньше экран, тем меньше колонок можно эффективно отразить.

3. Удобный шрифт

Чтобы пользователю не приходилось увеличивать или уменьшать масштаб, используйте подходящий размер шрифта. Минимальный размер основного текста может быть в пределах от 16рх до 18рх:

  • Apple в руководстве Human Interface Guidelines рекомендует 17рх.
  • Google в Material Design рекомендует 16рх.

Но если буквы очень тонкие, можно сделать и 18рх. Выбирайте шрифты, которые хорошо масштабируются и состоят в одном семействе. Например, Noto Serif и Noto Sans, создатели делают так, чтобы они хорошо сочетались между собой. Для подбора шрифтов можно воспользоваться сервисами Fontpair и Fontjoy. Не используйте на сайте больше 3 типов, это будет замедлять загрузку сайта.

Больше – не значит лучше. Соблюдайте баланс и гармонию в отображении текста.

4. Размеры меню

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

Сделайте меню компактным.

5. Сократите вторичный контент

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

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

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

6. Сделайте заметной возможность связаться

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

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

Чаты, мессенджеры, обратный звонок — через телефон это сделать проще.

7. Адаптируйте формы для заполнения

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

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

Примеры хорошего мобильного дизайна

Instagram

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

McKinsey

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

Aviasales и Ostrovok

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

Divan.ru

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

Рив Гош

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

У вас есть идея? У нас есть решение!

Разработаем интернет-магазин на CS-Cart

Оставить заявку

9 советов по созданию многоязычного веб-сайта

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

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

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

1. Используйте глобальные шаблоны для единообразного фирменного стиля

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

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

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

Например, когда вы посещаете домашнюю страницу Airbnb из такой страны, как Австралия…

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

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

2. Сделайте так, чтобы переключатель языка было легко найти

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

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

Вы также должны убедиться, что ваши параметры переключения языков кристально чисты. Лучше всего обращаться к новому языку на его родном языке. Например, используйте «Deutsch» вместо «немецкий» и «日本語» вместо «японский».

Asana, например, использует раскрывающееся меню с названиями различных доступных языков:

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

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

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

Крупные бренды — худшие преступники. Часто вы обнаружите, что многие из них заставляют вас изменить регион своего многоязычного сайта (например, перейти с www.adobe.com на www.adobe.com/kr/), когда вы просто хотите изменить язык по умолчанию.

Тот факт, что кто-то говорит на хинди, не означает, что он хочет переключиться на этот регион для многоязычного веб-сайта компании. Что, если они живут в Нью-Йорке и хотят покупать на сайте в США, но хотят читать сайт на хинди? Не ставьте им барьер на пути к покупке на вашем многоязычном веб-сайте — помогите им получить доступ к вашему контенту на предпочитаемом ими языке.

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

Когда вы нажимаете «Английский», появляется модальное окно, позволяющее выбрать предпочитаемый язык:

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

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

Автоопределение языков

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

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

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

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

Флаги и названия языков

Флаги часто используются для обозначения языка, но есть некоторые контекстуальные особенности , которые следует иметь в виду:

  • Флаги представляют страны, а не языки.
  • В стране может быть более одного официального языка.
  • На одном языке могут говорить более чем в одной стране.
  • Посетители могут не распознать флаг (из-за размера значка) или их могут смутить похожие флаги.

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

4. Учетная запись для расширения текста

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

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

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

Примеры расширения текста

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

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

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

В таблице ниже показаны сравнительные длины слова «view» на разных языках в соотношении с исходным английским:

Расширение текста на разных языках

Это расширение с английского на итальянский на 300%!

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

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

5. Учитывайте совместимость и кодировку веб-шрифтов. Рекомендуется использовать UTF-8, чтобы убедиться, что специальные символы отображаются правильно независимо от языка.

Вот как сделать объявление UTF в заголовке ваших страниц:

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

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

Google Fonts, например, позволяет выбирать языки перед загрузкой пакета шрифтов:

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

6. Дизайн для языков с письмом справа налево

Разработка страниц для языков с письмом справа налево может вызвать трудности. Как пишет разработчик SteelKiwi Роберт Додис для Smashing Magazine, проектирование для TRL означает «перевернуть интерфейс».

Например, вот как выглядит дизайн Facebook слева направо:

А вот как выглядит дизайн Facebook справа налево на арабском языке:

Отражение вашего дизайна — это то, что вам нужно учитывать, если вы занимаетесь дизайном. для языков LTR и RTL.

Я настоятельно рекомендую прочитать статью Роберта в журнале Smashing Magazine , где подробно рассказывается о том, как разрабатывать дизайн для RTL. Я не хочу изобретать велосипед здесь, так что прочитайте его учебник. Я хочу показать вам, как Weglot поддерживает языки с письмом справа налево и может упростить процесс перевода вашего многоязычного веб-сайта.

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

  • Арабский (ar)
  • Иврит (он)
  • Персидский (фа)
  • Урду (ур)

После добавления языка с письмом справа налево на ваш многоязычный сайт с помощью Weglot вы можете настроить способ его отображения, применив к макету правила CSS. В панели администратора WordPress перейдите к пункту 9.0011 Weglot > Дизайн кнопки «Язык» (необязательно)  и прокрутите вниз до  Переопределить CSS . Добавьте любые правила CSS, которые вы хотите, в текстовую область — вы можете изменить шрифт, размер, высоту строки и многое другое, чтобы стиль основного языка соответствовал вашему дизайну.

Это все, что вам нужно сделать, чтобы добавить и оформить языки с письмом справа налево с помощью Weglot! Вы можете узнать больше о том, как Weglot поддерживает языки с письмом справа налево, в документации.

7. Используйте изображения и значки, соответствующие культурным условиям

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

Например, на французской версии домашней страницы Clarins изображена белая женщина:

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

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

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

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

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

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

8. Используйте культурно-подходящие цвета

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

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

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

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

9. Даты и другие форматы

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

Вам также может понадобиться перевести единицы измерения, что поможет в SEO, в зависимости от вашей целевой аудитории. В то время как 90% стран мира используют метрическую систему, США, Либерия и Мьянма по-прежнему используют имперскую систему мер и весов.

Выбор подходящего плагина для перевода WordPress для вашего дизайна

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

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

С Weglot дизайн и расположение вашего языкового переключателя на 100% настраиваются. Кнопка по умолчанию была разработана для любого сайта, но вы также можете настроить ее с помощью собственного CSS, чтобы использовать любой формат, который вам нравится.

Более того, Weglot поддерживает принципы дизайна, изложенные в этом посте, в том числе:

  • Использование глобального шаблона для последовательного брендинга
  • Предоставление легкодоступных вариантов переключения языков
  • Предоставление посетителям возможности выбирать предпочитаемый язык
  • Автоматическое кодирование UTF
  • Языковая поддержка RTL

Давайте рассмотрим самую важную функцию, связанную с дизайном, которую предлагает Weglot: настройку переключателя языка.

Настройка параметров переключения языка вашего сайта с помощью Weglot

После установки плагина Weglot на многоязычном веб-сайте WordPress и настройки вам будет предложено ввести ключ API, язык по умолчанию и язык, который вы хотел бы перевести ваш контент, например, в Google Translate.

Если у вас еще нет учетной записи Weglot, вам необходимо создать ее, чтобы получить ключ API.

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

Чтобы приступить к основным настройкам, перейдите к Weglot > Дизайн кнопок языка (необязательно) . На этом экране вы можете выбрать:

  • Использовать или нет раскрывающийся список
  • Использовать или не использовать флаги
  • Типы флагов
  • Для отображения названия языков
  • Чтобы просто отобразить код для языков

В разделе Override CSS  вы можете применить правила CSS для изменения внешнего вида переключателя языка на многоязычном веб-сайте. Например, вы можете:

  • Убрать стрелку на кнопке
  • Изменить цвет фона
  • Добавить полосу прокрутки
  • Удалить границу
  • Добавить заполнение

В этой статье Weglot приводит несколько примеров настройки дизайна кнопки языка.

Когда вы прокрутите вниз экран конфигурации Weglot, вы найдете инструкции о том, как расположить переключатель языка:

  • В меню. Перейдите в Внешний вид -> Меню и перетащите ссылку Weglot Translate Custom в нужное место.
  • Как виджет. Перейдите в «Внешний вид» -> «Виджеты» и перетащите виджет Weglot Translate в нужное место.
  • С коротким кодом.  Используйте короткий код Weglot [ weglot_switcher ] (без пробелов), чтобы поместить переключатель языка в нужное место.
  • В исходном коде. Вы можете добавить код

    в любое место исходного кода своей HTML-страницы.

Чтобы показать вам, как можно настроить переключатель языка на многоязычном веб-сайте (будь то WordPress, Shopify или любой другой тип веб-сайта), вы можете увидеть ниже, как Patyka отображает переключатель языка в верхнем левом углу страница.

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

Практический пример: Maestrooo использует Weglot

Основанное в 2013 году агентство веб-разработки Maestrooo во Франции, среди клиентов которого есть From Future и Patyka. Maestrooo теперь обслуживает большинство клиентов Shopify Plus во Франции.

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

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

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

Maestrooo ежегодно помогает от 8 000 до 12 000 клиентов начать работу с Shopify, используя Weglot для своего многоязычного веб-сайта.

Перейти к полной культурной оптимизации с локализованным дизайном

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

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

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

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

Определение размеров элемента веб-страницы : TechWeb : Бостонский университет

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

Если вы используете стандартную тему Flexi…

  1. Ширина области содержимого составляет 550 пикселей. во всех стандартных темах Flexi, использующих вариант макета «средний».

Если вы используете пользовательскую тему…

Chrome

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

    В Chrome щелкните правой кнопкой мыши (или щелкните, удерживая клавишу Control) в области содержимого и выберите «Проверить элемент», чтобы открыть инспектор элементов.

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

    Найдите область содержимого в инспекторе элементов. Он будет выделен синим цветом.

  3. Вы увидите всплывающую подсказку рядом с выделением. Первое число — это ширина.

    Ширина элемента будет первой цифрой в желтой подсказке.

Safari

  1. Сначала необходимо включить панель инструментов разработчика в браузере. Сделать это:
    1. Откройте Safari «Настройки» (Mac, нажмите Safari и перейдите к «Настройки». ПК щелкните Файл и перейдите к Настройки )
    2. Перейдите на вкладку Advanced (шестеренка справа)
    3. Выберите Показать меню «Разработка» в строке меню в нижней части этой панели.
    4. Закрыть окно настроек
  2. Щелкните правой кнопкой мыши или щелкните правой кнопкой мыши в любом месте области содержимого и выберите Проверить элемент .
  3. В новом окне, которое появляется в нижней части браузера, перемещайте указатель мыши по коду, пока не увидите выделенную область содержимого (обычно синего цвета).
  4. Вы увидите всплывающую подсказку рядом с выделением. Первая цифра — ширина.

Firefox

  1. Щелкните правой кнопкой мыши в любом месте области содержимого и выберите Проверить элемент .
  2. В новом окне, которое появится в нижней части браузера, нажмите кнопку, которая выглядит как курсор мыши, входящий в квадрат.
  3. При включенном инструменте Select Element наведите указатель мыши на свой сайт. Вы заметите, что вокруг элементов на странице появляются пунктирные линии. Найдите область содержимого и щелкните, чтобы сфокусироваться на ней.
  4. Вернувшись в нижнее окно, нажмите Box Model справа.
  5. Будут показаны ширина и высота. Первая цифра — ширина.

Microsoft Edge

  1. Нажмите F12 или Ctrl+Shift+I , чтобы открыть инструменты разработчика .