Как сделать сайт резиновым: Резиновый сайт — Примеры

 <дел>

 
Резина
 

<дел>

Вот и все для HTML.

CSS

Отлично, самое интересное. Мы начнем с определения набора ширины по умолчанию для всего.

 #контейнер {
ширина: 1000 пикселей;
поле: 0 авто;
фон: #52a0ff;
}

# заголовок {
размер шрифта: 50px;
поле сверху: 50 пикселей;
плыть налево;
ширина: 98%;
поле слева: 1%;
поле справа: 1%;
}

#главный{
фон: #ееееее;
плыть налево;
ширина: 68%;
поле слева: 1%;
поле справа: 1%;
высота: 1000 пикселей;
}

#боковая панель{
фон: #dddddd;
плыть налево;
ширина: 28%;
поле слева: 1%;
поле справа: 1%;
высота: 1000 пикселей;
}
 

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

Этап 2

На этапе 2 ширина контейнера изменится на 720 пикселей.

 @экран мультимедиа и (макс. ширина: 999 пикселей) {
#контейнер {
ширина: 720 пикселей;
}
}
 

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

Этап 3

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

 @экран мультимедиа и (макс. ширина: 719 пикселей) {
#контейнер {
ширина: 100%;
}
}
 

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

Этап 4

Когда размер браузера пользователя достигнет 479 пикселей, все элементы станут одинакового размера. Это решает проблему с iPhone, Android и т.п.

 Экран @media и (макс. ширина: 479 пикселей) {
# заголовок {
ширина: 98%;
}

#главный {
ширина: 98%;
}

#боковая панель {
ширина: 98%;
}
}
 

Заключение

Готово! У нас есть полнофункциональный резиновый макет с 4 этапами в зависимости от размера браузера. Широкоформатные, маленькие экраны, маленькие экраны и портативные устройства.

Если вам нравится, как работают резиновые макеты, вас ждет сетка: BluCSS.

Связанные теги

9 советов по созданию мощной страницы часто задаваемых вопросов для вашего веб-сайта

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

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

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

Что такое страница часто задаваемых вопросов?

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

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

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

Каковы основные преимущества наличия страницы часто задаваемых вопросов?

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

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

Мы отдыхаем.

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

6 основных преимуществ страниц часто задаваемых вопросов

1. Улучшает взаимодействие с пользователем
2. Экономит время для вас и ваших клиентов
3. Помогает пользователям перемещаться по вашему сайту
4. Повышает SEO
5. Делает ваш бизнес экспертом отрасли
6. Помогает вам завоевать доверие аудитории

Best Made ориентирован на содержательное общение и прочные отношения.

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

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

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

По сути, вы подаете им все, что им нужно (и они, возможно, не знали, что им нужно) на тарелке.

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

страницы часто задаваемых вопросов экономят время для клиентов, а также экономят время для ВАС.

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

Это беспроигрышный вариант для всех.

Справочный центр Facebook содержит множество полезных советов.

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

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

Bumble ссылки на популярные вопросы и страницы.

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

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

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

Tesco извлекает выгоду из копии, которая повышает их SEO.

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

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

Innocent исследует факты о питании, демонстрируя свой опыт.

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

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

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

Arena Flowers ссылаются на преимущества своих продуктов и услуг.

9 советов по созданию мощной страницы часто задаваемых вопросов

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

1. Список часто задаваемых вопросов
2. Обеспечить ценные решения
3. Сделать контент доступным для сканирования
4. Организуйте контент
5. Добавить параметр поиска
6. Укажите четкую точку входа
7. Максимальная читаемость
8. Используйте визуальные эффекты, чтобы помочь пользователям выполнить задачу
9. Предоставьте вариант, если клиенты все еще не могут найти то, что ищут

Страница часто задаваемых вопросов Slack невероятно наглядна и привлекательна.

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

Есть два основных способа сделать это:

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

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

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

Usabilla — это популярный инструмент, который еще больше упрощает сбор отзывов.

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

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

Dropbox предлагает ценные решения проблем клиентов.

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

В результате они вряд ли будут читать пачки информации — вместо этого они будут ее просматривать.

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

Страница часто задаваемых вопросов YouTube понятна, проста и удобна для сканирования.

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

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

Вы также можете включить раздел «Самые популярные вопросы», в котором рассматриваются наиболее распространенные и насущные проблемы клиентов.

Pinterest разделяет контент на общие и деловые вопросы.

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

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

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

Campaign Monitor использует функцию интеллектуального поиска текста.

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

Убедитесь, что его легко найти, а точка входа находится в удобном месте.

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

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

Страница поддержки Apple легко находится в основной навигации.

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

Звучит очевидно, но легко ошибиться.

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

Slack выделяет ключевой текст разными цветами.

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

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

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

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

Что произойдет, если клиенты по-прежнему не смогут найти нужную им информацию? Ну, они потерянное дело.

Шучу.

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

Facebook предлагает пользователям «ищете что-то еще?» вариант.

Заключение

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

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

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

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

Автор:

Пол Райт

Ваг — соучредитель и креативный директор Rubber Cheese. У него более 18 лет опыта работы в области цифровых технологий, и он объединяет свои знания и практический подход для управления проектами для таких мировых брендов, как Pernod Ricard и Chivas Brothers.

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