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


15 лучших примеров дизайна главной страницы сайта

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

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

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

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

Содержание статьи

Семь правил оформления главных страниц
1. FreshBooks: классика жанра
2. Airbnb: ориентация на действие
3. Pixelgrade: игра на контрасте
4. Mint: минимализм еще в тренде
5. Dropbox Business: ничего лишнего
6. 4 Rivers Smokehouse: вкусная фотография
7. Melyssa Griffin: личный бренд
8. Evernote: гармоничные цвета
9. Basecamp: мультяшный стиль
10. charity: water: убедительный призыв
11. TechValidate: баланс во всем
12. Medium: белый дизайн
13. Digiday: внимание на главном
14. KIND Snacks: яркая гамма
15. Ahrefs: четкий заголовок
Вместо заключения

Семь правил оформления главных страниц

1. Хорошая homepage четко отвечает на вопросы: «Что это за компания?», «Чем она занимается?» и/или «Что вы (посетитель) можете здесь делать?»

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

О том, почему это остается важным, лучше всех объясняет Стивен Кругг (Steven Krugg), автор бестселлера «Не заставляй меня думать» (Don’t make me think): «Если посетители не могут за пару секунд определить, чем именно вы занимаетесь, надолго они не задержатся».

2. Контент должен резонировать с потребностями целевой аудитории

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

3. Главная страница содержит убедительный оффер

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

4. Сайт оптимизирован под разные устройства и экраны

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

5. Дизайн включает в себя призывы к действию (CTA)

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

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

6. Тренды всегда меняются

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

7. Дизайн должен быть профессиональным

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

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

Читайте также: Лендинг vs главная страница: ключевые отличия

1. FreshBooks: классика жанра 

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

Главная страница сайта компании FreshBooks, занимающейся облачным бухгалтерским программным обеспечением, была выбрана в качестве классического примера дизайна потому что:

2. Airbnb: ориентация на действие 

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

Читайте также: Секреты юзабилити: намерение пользователя и поисковые фильтры

3. Pixelgrade: игра на контрасте

«Простые WordPress темы для быстрого старта. Мы разрабатываем простые темы для WordPress, доступные всем, кто хочет создать современный сайт. Смотреть темы»

Главную страницу этой студии дизайна, которая создает темы для WordPress, отличают следующие черты:

4. Mint: минимализм еще в тренде 

«Все сойдется. Когда ты распоряжаешься своими деньгами, а не они тобой, жизнь хороша. С нами это делать комфортнее. Зарегистрироваться бесплатно»

Чем интересен этот пример от бесплатного персонального сервиса по управлению финансами:

Читайте также: 10 трендов веб-дизайна на 2020 год

Дизайн сайта файлового хостинга Dropbox:

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

6. 4 Rivers Smokehouse: вкусная фотография

«Грудинка. 18 лет опыта. Вкус, который нужно смаковать»

Чем интересен этот дизайн:

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

Преимущества дизайна этого сайта, принадлежащего Мелиссе Гриффин, которая помогает предпринимателям монетизировать свой оффер и развивать свое сообщество:

  • первой строкой идет мощное социальное доказательство: «Присоединись к 200 000 других…».
  • выяснить причину посещения сайта посетителем Мелиссе помогает небольшой опрос, при этом выбранный пользователем вариант определяет характер предлагаемого ему контента.
  • поместив на главную страницу свою фотографию, она делает свой бренд более личным. Это не просто сайт, а виртуальное пространство конкретного человека, с которым вы можете связаться.
  • в дизайне использованы яркие цвета, которые делают его легким и не дают потеряться главному деловому предложению.

8. Evernote: гармоничные цвета 

Чем привлекает этот дизайн от Evernote, популярного веб-сервиса для создания и хранения заметок:

  • за годы своего существования Evernote превратился из простого приложения для заметок в полноразмерный бизнес-продукт. Этот факт довольно сложно отразить на главной странице, но Evernote удается сделать это, обозначив все основные офферы в нескольких ключевых преимуществах продукта.
  • фирменное сочетание ярко-зеленого и белого цветов позволяет выделить основные этапы конверсионного пути.
  • от простого заголовка и подзаголовка взгляд пользователя естественно перемещается на CTA-кнопку «Зарегистрируйтесь бесплатно».
  • Evernote позволяет оформить регистрацию в один клик с помощью аккаунта Google: это очень удобно и экономит время.
Читайте также: F-паттерн: неверно понятый, но все еще актуальный (даже на мобильных)

9. Basecamp: мультяшный стиль

Чем интересная главная страница этого инструмента для управления проектами, совместной работы и постановки задач:

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

10. charity: water: убедительный призыв

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

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

11. TechValidate: баланс во всем

«Социальное доказательство в масштабе. Наш софт собирает и преобразовывает отзывы клиентов в тематические исследования, отзывы, обзоры и многое другое. Получить демо»

Достоинства дизайна:

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

12. Medium: белый дизайн

«Истории, которые всегда при тебе. Приложение для читающих на ходу»

Чем примечателен этот пример дизайна от платформы для социальной журналистики:

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

13. Digiday: внимание на главном  

Что интересного:

  • в отличие от других новостных интернет-изданий, которые наводняют главные страницы своих сайтов как можно большим количеством заголовков и изображений, над «линией сгиба» Digiday внимание читателей сосредоточено только на одной статье. Вполне подходящее ее теме изображение (в данном случае, довольно пугающее) бросается в глаза, а заголовок так и просит, чтобы по нему кликнули, ведь теперь у посетителя есть представление о том, что ему предстоит прочитать.
  • в верхней части главной страницы, где дизайнеры обычно располагают меню с десятком различных разделов, расположено гамбургер-меню, предложение залогиниться и довольно лаконичная иконка конверта, клик по которой ведет на страницу оформления подписки.
Читайте также: Нейромаркетинг: как привлечь внимание на лендинге?

14. KIND Snacks: яркая гамма

Достоинства дизайна:

  • смелые цвета усиливают контраст, позволяя словам и изображениям хорошо смотреться на странице и быть заметными.
  • слоган KIND Snacks прост и гениален: «Ингредиенты, которые ты сможешь увидеть и произнести». Таким образом компания прямо говорит, что эти снеки из натуральных продуктов, знакомых каждому. Никаких консервантов и труднопроизносимых компонентов.

15. Ahrefs: четкий заголовок

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

Почему эта страница достойна внимания:

  • контраст между синим, белым и оранжевым цветами бросается в глаза и делает заголовок и CTA еще более заметными;
  • подзаголовок и CTA прекрасно дополняют друг друга: получить возможность разгадать секреты конкурентов и превзойти их — кто в здравом уме способен от этого отказаться?
  • на главной странице вы найдете много полезной информации, но она не создает ощущения беспорядка, благодаря однотонному фону и удобочитаемой типографике.
Читайте также: Анатомия шрифта: визуальный гайд по типографике

Вместо заключения

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

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

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

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

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

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

Высоких вам конверсий! 

По материалам blog.hubspot.com Изображение: freepik.com

11-01-2013

Как будет выглядеть ваш сайт? - Изучите веб-разработку

Как будет выглядеть ваш сайт? обсуждает работу по планированию и дизайну вашего веб-сайта перед написанием кода, включая «Какую информацию предлагает мой веб-сайт?», «Какие шрифты и цвета мне нужны?» И «Чем занимается мой сайт?»

Перво-наперво: планирование

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

Для начала вам нужно ответить на следующие вопросы:

  1. О чем ваш сайт? Вам нравятся собаки, Нью-Йорк или Pac-Man?
  2. Какую информацию вы представляете по этому вопросу? Напишите заголовок и несколько абзацев и подумайте об изображении, которое вы бы хотели показать на своей странице.
  3. Как выглядит ваш веб-сайт, простым высокоуровневым языком? Какой цвет фона? Какой шрифт подходит: формальный, мультяшный, жирный и громкий, тонкий?

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

Набросок вашего дизайна

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

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

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

Выбор активов

На этом этапе хорошо начать собирать контент, который в конечном итоге появится на вашей веб-странице.

Текст

У вас все еще должны быть абзацы и заголовок из ранее.Держите их под рукой.

Цвет темы

Чтобы выбрать цвет, перейдите в палитру цветов и найдите нужный цвет. Когда вы нажимаете на цвет, вы видите странный шестизначный код, например # 660066 . Это называется шестнадцатеричным кодом (сокращенно от шестнадцатеричного) и представляет ваш цвет. Скопируйте код в безопасное место.

Изображения

Чтобы выбрать изображение, перейдите в Google Images и найдите что-нибудь подходящее.

  1. Когда вы найдете нужное изображение, нажмите на него, чтобы увеличить его.
  2. Щелкните изображение правой кнопкой мыши (Ctrl + щелчок на Mac), выберите Сохранить изображение как ... и выберите безопасное место для сохранения изображения. Или скопируйте веб-адрес изображения из адресной строки браузера для дальнейшего использования.

Обратите внимание, что большинство изображений в Интернете, в том числе в Картинках Google, защищены авторским правом. Чтобы снизить вероятность нарушения авторских прав, вы можете использовать фильтр лицензий Google. Нажмите кнопку Tools , а затем - получившуюся опцию Usage rights , которая появится ниже.Вам следует выбрать такую ​​опцию, как С меткой для повторного использования .

Шрифт

Для выбора шрифта:

  1. Перейдите в Google Fonts и прокрутите список вниз, пока не найдете тот, который вам нравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.
  2. Щелкните значок «плюс» (Добавить в) рядом с нужным шрифтом.
  3. Нажмите кнопку «* Семейство выбрано» на панели внизу страницы («*» зависит от того, сколько шрифтов вы выбрали).
  4. Во всплывающем окне вы можете увидеть и скопировать строки кода, которые Google предоставляет вам, в текстовый редактор, чтобы сохранить их на будущее.

В этом модуле

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера

  • Объявление определяет этот документ как HTML5
  • Элемент является корневым элементом HTML стр.
  • Элемент содержит метаинформацию о документе
  • Элемент </code> определяет заголовок документа </li> <li> Элемент <code> <meta> </code> должен определять набор символов как UTF-8 </li> <li> Элемент <code> <meta> </code> с name = "viewport" позволяет веб-сайту хорошо выглядеть на всех устройствах и разрешениях экрана. </li> <li> Элемент <code> <style> </code> содержит стили для веб-сайта (верстка / дизайн) </li> <li> Элемент <code> <body> </code> содержит видимое содержимое страницы </li> <li> Элемент <code> <h2> </code> определяет большой заголовок </li> <li> Элемент <code> <p> </code> определяет абзац </li> </ul> <hr/> <h3> Создание содержимого страницы </h3> <p> Внутри элемента <code> <body> </code> нашего веб-сайта мы будем использовать наш макет Черновой вариант" и создайте: </p> <ul> <li> Заголовок </li> <li> Панель навигации </li> <li> Основное содержание </li> <li> Боковое содержимое </li> <li> Нижний колонтитул </li> </ul> <hr/> <h3> Заголовок </h3> <p> Заголовок обычно располагается вверху веб-сайта (или прямо под верхним меню навигации).Часто содержит логотип или название веб-сайта: </p>. <p> <div> <br/> <h2> Мой веб-сайт </h2> <br/> <p> Веб-сайт создано мной. </p> <br/> </div> </p> <p> Затем мы используем CSS для стилизации заголовка: </p> .header {<br/> отступ: 80 пикселей; / * немного отступов * / <br/> text-align: center; / * центрировать текст * / <br/> фон: # 1abc9c; / * зеленый фон * / <br/> цвет белый; / * белый цвет текста * / <br/>} <p> / * Увеличиваем размер шрифта элемента <h2> * / <br/> .заголовок h2 {<br/> font-size: 40px; <br/>} </p> <p> Попробуйте сами »</p> <hr/> <hr/> <h3> Панель навигации </h3> <p> Панель навигации содержит список ссылок, помогающих посетителям перемещаться по ваш сайт: </p> <p> <div> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> <a href="#"> Ссылка </a> <br/> </div> </p> <p> Используйте CSS для стилизации панели навигации: </p> / * Стиль верхней панели навигации * / <br/>.навигационная панель {<br/> переполнение: скрыто; / * Скрыть переполнение * / <br/> background-color: # 333; / * Темный цвет фона * / <br/>} <p> / * Стиль ссылок панели навигации * / <br/> .navbar поплавок {<br/>: левый; / * Убедимся, что ссылки остались рядом * / дисплей <br/>: блочный; / * Измените отображение на блок, по причинам реагирования (см. ниже) * / <br/> цвет: белый; / * Белый цвет текста * / <br/> text-align: center; / * Центрировать текст * / <br/> отступ: 14 пикселей 20 пикселей; / * Добавляем отступы * / <br/> text-decoration: none; / * Убрать подчеркивание * / <br/>} </p> <p> / * Ссылка по правому краю * / <br/>.navbar a.right {<br/> float: right; / * Размещаем ссылку вправо * / <br/> } </p> <p> / * Изменение цвета при наведении / наведении указателя мыши * / <br/> .navbar a: hover {<br/> цвет фона: #ddd; / * Цвет серого фона * / <br/> цвет: черный; / * Черный цвет текста * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <hr/> <h3> Содержание </h3> <p> Создайте макет из 2 столбцов, разделенных на «побочное содержимое» и «основное содержимое». </p> <p> <div> <br/> <div>... </div> <br/> <div > ... </div> <br/> </div> </p> <p> Мы используем CSS Flexbox для обработки макета: </p> / * Обеспечение правильного размера * / <br/> * {<br/> box-sizing: border-box; <br/>} <p> / * Контейнер колонки * / <br/> .row {<br/> display: flex; <br/> flex-wrap: пленка; <br/>} </p> <p> / * Создать два неравных столбца, которые расположены рядом друг с другом * / <br/> / * Боковая панель / левый столбец * / <br/>. Сторона {<br/> изгиб: 30%; / * Устанавливаем ширину боковой панели * / <br/> цвет фона: # f1f1f1; / * Серый цвет фона * / <br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/>} </p> <p> / * Основной столбец * / <br/>.основной { <br/> гибкость: 70%; / * Устанавливаем ширину основного содержимого * / <br/> background-color: white; / * Белый цвет фона * / <br/> padding: 20px; / * Некоторые отступы * / <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> Затем добавьте медиа-запросы, чтобы сделать макет адаптивным. Это обеспечит что ваш сайт хорошо выглядит на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефоны). Измените размер окна браузера, чтобы увидеть результат. </p> / * Адаптивный макет - когда ширина экрана меньше 700 пикселей, делаем два столбцы располагаются друг над другом, а не рядом * / <br/> @media экран и (максимальная ширина: 700 пикселей) {<br/>.ряд {<br/> flex-direction: столбец; <br/>} <br/>} <p> / * Адаптивный макет - если ширина экрана меньше 400 пикселей, сделайте навигационные ссылки складываются друг на друга, а не рядом * / <br/> @media screen и (max-width: 400px) {<br/> .navbar a {<br/> float: нет; <br/> ширина: 100%; <br/>} <br/>} <br/> </p> <p> Попробуйте сами »</p> <p> <strong> Совет: </strong> Чтобы создать другой вид макета, просто измените ширину гибкости (но убедитесь, что она составляет 100%).</p> <p> <strong> Совет: </strong> Интересно, как работает правило @media? Узнать больше о это в нашей главе CSS Media Queries. </p> <p> <strong> Совет: </strong> Чтобы узнать больше о модуле гибкой компоновки коробки, прочтите наши Глава CSS Flexbox. </p> <p> <strong> Что такое размер коробки? </strong> </p> <p> Вы можете легко создать три плавающих бокса рядом. Однако, когда вы добавляете что-то, что увеличивает ширину каждого блока (например, отступы или границы), блок сломается. Свойство <code> box-sizing </code> позволяет нам включить заполнение и границу в общую ширину (и высоту) блока, следя за тем, чтобы заполнение оставалось внутри блока и не ломалось.</p> <p> Вы можете узнать больше о свойстве box-sizing в нашем руководстве CSS Box Sizing Tutorial. </p> <hr/> <h3> Нижний колонтитул </h3> <p> Наконец, добавим нижний колонтитул. </p> <p> <div> <br/> <h3> Нижний колонтитул </h3> <br/> </div> </p> <p> И стиль: </p> <p> .footer {<br/> отступ: 20 пикселей; / * Некоторые отступы * / <br/> text-align: center; / * Центр текста * / <br/> фон: #ddd; / * Серый фон * / <br/>} </p> <p> Попробуйте сами »</p> <p> Поздравляем! Вы создали адаптивный веб-сайт с нуля.</p> <br/> <br/>.<h2> веб-сайтов выглядят неправильно или выглядят иначе, чем должны </h2> <p> В этой статье рассматриваются веб-сайты, неправильно отображаемые в Firefox. </p> <strong> Примечание. </strong> Если у вас возникли проблемы с веб-сайтом, щелкните значок в адресной строке, чтобы узнать, не заблокировал ли Firefox небезопасные части страницы. См. Подробности в разделе «Блокировка смешанного содержимого в Firefox». <p> Firefox кэширует веб-сайты, что означает, что он сохраняет некоторые файлы на вашем компьютере, чтобы вам не приходилось повторно загружать все при посещении сайтов.Если веб-сайт обновил свой код, Firefox может по-прежнему использовать часть старого кода вместе с частью нового, что может привести к неправильному отображению веб-страницы. Чтобы исправить это, вам необходимо очистить файлы cookie и кеш: </p> <ol> <li> Нажмите кнопку Библиотека на панели инструментов. (Если вы не видите его там, нажмите кнопку меню затем щелкните.) Щелкните История и выберите Очистить недавнюю историю…. </li> <li> В раскрывающемся списке <strong> Time Range to clear: </strong> выберите <strong> Everything </strong>.</li> <li> Под раскрывающимся меню выберите <strong> Cookies </strong> и <strong> Cache </strong>. Убедитесь, что другие элементы, которые вы хотите сохранить, не выбраны. </li> <li> Щелкните Очистить сейчас. </li> </ol> Теперь, когда ваши файлы cookie и кеш очищены, посетите веб-сайт еще раз, чтобы узнать, решена ли проблема. <p> Некоторые веб-сайты могут некорректно отображаться при разных уровнях масштабирования. Чтобы сбросить настройку масштабирования, для сайта нажмите Ctrl + 0команда + 0, а для всех сайтов см. Документацию об используемом надстройке Zoom.</p> <p> Некоторые сайты не отображаются должным образом с минимальным размером шрифта. Чтобы сбросить минимальный размер шрифта: </p> <ol> <li> Нажмите кнопку меню и выберите Параметры. </li> <li> Выберите панель панели и перейдите к <em> Язык и внешний вид </em>. </li> <li> В разделе <strong> Fonts & Colors </strong> щелкните Advanced…. </li> <li> Измените минимальный размер шрифта <strong> с </strong> на <strong> Нет </strong>. </li> </ol> <p> Возможно, вы случайно установили стиль страницы.Чтобы убедиться, что Firefox настроен на использование стиля страницы по умолчанию: </p> <ul> <li> Нажмите клавишу Alt, чтобы временно вызвать традиционные меню Firefox В строке меню В верхней части окна Firefox щелкните меню, затем выберите, затем щелкните. </li> </ul> <p> Теперь, когда для страницы используется стиль по умолчанию, он может отображаться правильно. </p> <p> Вы должны проверить, есть ли у вас расширение (например, NoScript) или программа безопасности в Интернете (например, брандмауэр, антивирус или программа защиты от шпионского ПО), которая может блокировать JavaScript.</p> <p> В некоторых случаях загрузка и проверка защищенного веб-содержимого будет зависеть от времени, поэтому вам следует проверить правильность установки даты, времени и часового пояса в вашей системе. </p> <p> Некоторые расширения могут мешать отображению веб-сайтов или вашей видеокарте и драйверам некорректно отображать веб-контент при включенном аппаратном ускорении. Следуйте инструкциям в статье Устранение неполадок с расширениями, темами и аппаратным ускорением, чтобы решить общие проблемы Firefox, чтобы узнать, не является ли одно из них причиной проблемы.</p> <p> Иногда вы можете встретить страницу, которая просто не работает в Firefox. Если это произойдет, сообщите о проблеме, посетив Webcompat.com. </p> <p> Если вы используете Firefox Beta, Developer Edition или Nightly, щелкните меню действий со страницей (три точки в адресной строке) и выберите. </p> <p> <em> <strong> На основании информации с веб-сайтов выглядит неправильно (mozillaZine KB) </strong> </em> </p> .<h2> Структура сайта | Руководство по веб-стилю 3 </h2> <p> Столкнувшись с новой сложной информационной системой, пользователи строят ментальные модели. Они используют эти модели, чтобы оценить взаимосвязь между темами и угадать, где найти вещи, которых они раньше не видели. Успех организации вашего веб-сайта во многом будет определяться тем, насколько хорошо его информационная архитектура соответствует ожиданиям пользователей. Логичная организация сайта с одинаковыми названиями позволяет пользователям делать успешные прогнозы относительно того, где искать предметы.Последовательные методы организации и отображения информации позволяют пользователям расширять свои знания от знакомых страниц до незнакомых. Если вы вводите пользователей в заблуждение со структурой, которая не является ни логичной, ни предсказуемой, или постоянно использует разные или двусмысленные термины для описания функций сайта, пользователи будут разочарованы трудностями, связанными с передвижением и пониманием того, что вы предлагаете. Вы же не хотите, чтобы ментальная модель вашего веб-сайта выглядела так, как показано на рисунке 3.1. </p> <p> Рисунок 3.1. Не создавайте непонятную паутину из ссылок. Не только дизайнеры создают модели сайтов. Пользователи также пытаются представить себе структуру сайта, и успешная информационная архитектура поможет пользователю построить устойчивую и предсказуемую ментальную модель вашего сайта. </p> <h3> Возможности просмотра вашего сайта </h3> <p> После того, как вы создали свой сайт в форме структуры, проанализируйте его способность поддерживать просмотр, протестировав его в интерактивном режиме, как в группе разработчиков сайта, так и с небольшими группами реальных пользователей.Эффективный дизайн веб-сайта в значительной степени зависит от соотношения основного меню или домашних страниц с отдельными страницами содержания. Цель состоит в том, чтобы создать иерархию меню и страниц с контентом, которая кажется естественной для пользователей и не вводит их в заблуждение и не мешает им пользоваться сайтом. </p> <p> Веб-сайты со слишком мелкой иерархией информации зависят от огромных страниц меню, которые могут превратиться в запутанный подробный список несвязанной информации. Схемы меню также могут быть слишком глубокими, скрывая информацию под слишком большим количеством слоев меню.Необходимость перемещаться по слоям вложенных меню, прежде чем добраться до реального содержимого, разочаровывает (рис. 3.2). </p> <p> Рисунок 3.2 - Примеры «проблемы Златовласки» в получении «правильной» структуры сайта. Слишком мелкая структура (слева) заставляет меню становиться слишком длинными. Слишком глубокая структура (справа), и пользователи разочаровываются, копаясь во многих слоях меню. </p> <p> Если ваш веб-сайт активно растет, правильный баланс меню и страниц с контентом является движущейся целью.Отзывы пользователей (и анализ вашего собственного использования сайта) могут помочь вам решить, изжила ли ваша схема меню свою полезность или есть слабые места. Сложные структуры документов требуют более глубоких иерархий меню, но никогда не следует заставлять пользователей переходить на страницу за страницей меню, если возможен прямой доступ. Благодаря хорошо сбалансированной функциональной иерархии вы можете предлагать пользователям меню, которые обеспечивают быстрый доступ к информации и отражают организацию вашего сайта. </p> <h3> Поиск по сайту как навигация </h3> <p> Если на вашем сайте более нескольких десятков страниц, ваши пользователи будут ожидать, что параметры веб-поиска найдут контент на сайте.На более крупном сайте, который может содержать сотни или тысячи страниц контента, веб-поиск является единственным эффективным средством для поиска определенных страниц контента или поиска всех страниц, на которых упоминается ключевое слово или поисковая фраза. Интерфейсы просмотра, состоящие из основных сайтов и ориентиров содержания, необходимы на начальных этапах посещения пользователем вашего сайта. Однако, как только пользователь решил, что ваш сайт может предлагать то, что он или она ищет, пользователь переступает порог специфичности, с которым может помочь только поисковая система: </p> <ul> <li> Никакой интерфейс просмотра ссылок не может гарантировать пользователю, что он или она нашел все экземпляры данного ключевого слова или поисковой фразы.</li> <li> Поиск - наиболее эффективное средство для достижения определенного содержания, особенно если это содержание не часто посещается другими пользователями и, следовательно, вряд ли появится в виде ссылки на основной странице навигации. </li> </ul> <p> Как и в случае с популярными книгами в библиотеке или популярными песнями в iTunes, использование контента на крупных веб-сайтах является классическим феноменом «длинного хвоста»: некоторые элементы привлекают 80% внимания, а остальные - значительно меньше трафика. Поскольку потребности пользователя становятся более конкретными, чем может удовлетворить интерфейс браузера, поисковые системы - это средства для поиска контента в длинном хвосте, где в противном случае он мог бы остаться незамеченным (рис.3.3). </p> <p> Рисунок 3.3 - «Длинный хвост» веб-поиска. Большие сайты слишком велики, чтобы зависеть исключительно от просмотра. Часто используемые страницы могут появляться на страницах меню просмотра, но неясные страницы глубоко внутри сайта можно будет найти и прочитать только с помощью технологий веб-поиска. </p> <h3> Структурные темы сайта </h3> Веб-сайты <p> построены на основе основных структурных тем, которые одновременно формируют и укрепляют ментальную модель пользователя того, как вы организовали свой контент. Эти фундаментальные архитектуры управляют навигационным интерфейсом веб-сайта и формируют у пользователя ментальные модели организации информации.Для создания веб-сайта можно использовать три основные структуры: последовательности, иерархии и сети. </p> <h4> Последовательности </h4> <p> Самый простой и привычный способ организовать информацию - это расположить ее по порядку. Это структура книг, журналов и всей другой печатной продукции. Последовательное упорядочение может быть хронологическим, логическим рядом тем, переходящих от общего к частному, или алфавитным, как в указателях, энциклопедиях и глоссариях. Прямые последовательности - это наиболее подходящая организация, например, для учебных или образовательных сайтов, на которых ожидается, что пользователь будет продвигаться по фиксированному набору материала, а единственными ссылками являются те, которые поддерживают линейный путь навигации (рис.4, вверху). </p> <p> Более сложные веб-сайты могут быть организованы в виде логической последовательности, но каждая страница в этой последовательности может иметь ссылки на одну или несколько страниц отступлений, информацию в скобках или информацию на других веб-сайтах (рис. 3.4, внизу). </p> <p> Рисунок 3.4 - Некоторые веб-сайты, такие как обучающий сайт, показанный на диаграмме выше (вверху), предназначены для чтения в линейной последовательности. Логика программирования может предлагать настраиваемый контент для определенной аудитории и допускать отклонения от основной последовательности страниц (нижняя диаграмма).</p> <h4> Иерархии </h4> <p> Информационные иерархии - лучший способ организовать самые сложные массивы информации. Поскольку веб-сайты обычно организованы вокруг одной домашней страницы, которая затем ссылается на страницы меню подразделов, иерархическая архитектура особенно подходит для организации веб-сайтов. Иерархические диаграммы хорошо знакомы в корпоративной и институциональной жизни, поэтому большинство пользователей находят эту структуру легкой для понимания. Иерархическая организация также налагает полезную дисциплину на ваш собственный аналитический подход к вашему контенту, потому что иерархия практична только с хорошо организованным материалом.</p> <p> Самая простая форма иерархической структуры сайта - это звездообразный или звездообразный набор страниц, расположенных на центральной домашней странице. Сайт по сути представляет собой одноуровневую иерархию. Навигация, как правило, представляет собой простой список подстраниц плюс ссылка на главную страницу (рис. 3.5a). </p> <p> Большинство веб-сайтов используют ту или иную форму многоуровневой иерархической или древовидной архитектуры. Такое расположение основных категорий и подкатегорий имеет большое преимущество для сложной организации сайта, поскольку большинство людей знакомы с иерархическими организациями и могут легко формировать мысленные модели структуры сайта (рис.3.5b). </p> <p> Рисунок 3.5 - Иерархии просты и неизбежны в веб-дизайне. Большая часть контента хорошо работает в иерархической структуре, и пользователи находят их легкими для понимания. </p> <p> Обратите внимание, что хотя иерархические сайты организуют свой контент и страницы в виде дерева меню сайта и подменю за пределами домашней страницы, эта иерархия подразделений контента не должна становиться смирительной рубашкой навигации для пользователя, который хочет перейти из одной области сайта в другую. . Большинство интерфейсов навигации по сайту предоставляют ссылки для глобальной навигации, которые позволяют пользователям переходить от одной основной области сайта к другой без необходимости выполнять резервное копирование на центральную домашнюю страницу или подменю.На рисунке 3.6 вкладки в заголовке позволяют пользователю переходить из одной основной области содержимого в другую, левое меню навигации предоставляет локальные тематические категории, а поле поиска позволяет пользователю выходить из категорийной навигации и находить страницы в Интернете. поисковый движок. </p> <p> Рисунок 3.6 - Локальная (левый столбец) и глобальная (вкладки под заголовком) системы навигации представляют собой гибкую и простую для понимания систему навигации. </p> <h4> Паутины </h4> <p> Сетевые организационные структуры накладывают несколько ограничений на способы использования информации.В этой структуре цель часто состоит в том, чтобы имитировать ассоциативное мышление и свободный поток идей, позволяя пользователям следовать своим интересам в уникальном, эвристическом, идиосинкразическом образце. Эта организационная модель развивается с плотными ссылками как на информацию в другом месте сайта, так и на информацию на других сайтах. Хотя цель этой организации состоит в том, чтобы в полной мере использовать возможности Интернета для связывания и ассоциации, сетевые структуры могут так же легко распространять путаницу. По иронии судьбы, ассоциативные организационные схемы часто являются наиболее непрактичной структурой для веб-сайтов, потому что их так сложно понять и предсказать пользователю.Веб-сайты лучше всего подходят для небольших сайтов, на которых преобладают списки ссылок, и для сайтов, предназначенных для высокообразованных или опытных пользователей, которые хотят получить дополнительное образование или обогащение, а не базовое понимание темы (рис. 3.7). </p> <p> Рисунок 3.7 - Простая сеть связанных страниц. </p> <h3> Сводка </h3> <p> Большинство сложных веб-сайтов имеют общие аспекты всех трех типов информационных структур. Иерархия сайта создается в основном с помощью стандартных навигационных ссылок внутри сайта, но тематические ссылки, встроенные в контент, создают сетку ассоциативных ссылок, выходящую за рамки обычной навигации и структуры сайта.За исключением сайтов, которые строго следят за соблюдением последовательности страниц, пользователи, скорее всего, будут перемещаться по вашему сайту в свободной форме, как в сети, перепрыгивая через регионы в информационной архитектуре, точно так же, как они пропускают главы в справочнике. По иронии судьбы, чем яснее и конкретнее организация вашего сайта, тем легче пользователям свободно прыгать с места на место, не чувствуя себя потерянным (рис. 3.8). </p> <p> Рисунок 3.8 - Мы структурируем сайты как иерархии, но пользователи редко используют их таким образом.Четкая информационная структура позволяет пользователю свободно и уверенно перемещаться по вашему сайту. </p> <p> Нелинейные шаблоны использования, типичные для веб-пользователей, не освобождают вас от необходимости организовывать свое мышление и представлять его в рамках четкой, последовательной структуры, которая дополняет ваши общие цели дизайна. Рисунок 3.9 суммирует три основных паттерна организации на фоне линейности повествования и сложности содержания. </p> <p> Рисунок 3.9. Выберите правильную структуру сайта для вашей аудитории и контента.</p> .<table><hr><h2 class="relpost">Смотрите также</h2> <ul class="relpost"> <li><a href="/raznoe/informacionnyj-sajt-kak-sdelat.html" title="Информационный сайт как сделать"><div class="relimg"><img src="/wp-content/uploads/informacionnyj-sajt-kak-sdelat_0.jpg" /></div>Информационный сайт как сделать</a></li> <li><a href="/raznoe/kak-izmenit-razmer-shrifta-na-sajte.html" title="Как изменить размер шрифта на сайте"><div class="relimg"><img src="/wp-content/uploads/kak-izmenit-razmer-shrifta-na-sajte_0.jpg" /></div>Как изменить размер шрифта на сайте</a></li> <li><a href="/raznoe/kak-izmenit-datu-registracii-braka-na-sajte-gosuslug.html" title="Как изменить дату регистрации брака на сайте госуслуг"><div class="relimg"><img src="/wp-content/uploads/def.jpg" /></div>Как изменить дату регистрации брака на сайте госуслуг</a></li> <li><a href="/raznoe/kak-sozdat-sajt-na-vordpress.html" title="Как создать сайт на вордпресс"><div class="relimg"><img src="/wp-content/uploads/kak-sozdat-sajt-na-vordpress_0.jpg" /></div>Как создать сайт на вордпресс</a></li> <li><a href="/raznoe/kak-sdelat-sajt-samostoyatelno-s-nulya-svoimi.html" title="Как сделать сайт самостоятельно с нуля своими"><div class="relimg"><img src="/wp-content/uploads/kak-sdelat-sajt-samostoyatelno-s-nulya-svoimi_0.jpg" /></div>Как сделать сайт самостоятельно с нуля своими</a></li> <li><a href="/raznoe/kak-iskat-uyazvimosti-sajta.html" title="Как искать уязвимости сайта"><div class="relimg"><img src="/wp-content/uploads/kak-iskat-uyazvimosti-sajta_0.jpg" /></div>Как искать уязвимости сайта</a></li> <li><a href="/raznoe/kak-sozdat-platnuyu-podpisku-na-sajte.html" title="Как создать платную подписку на сайте"><div class="relimg"><img src="/wp-content/uploads/kak-sozdat-platnuyu-podpisku-na-sajte_0.jpg" /></div>Как создать платную подписку на сайте</a></li> <li><a href="/raznoe/kak-na-noutbuke-udalit-istoriyu-posecsheniya-sajtov.html" title="Как на ноутбуке удалить историю посещения сайтов"><div class="relimg"><img src="/wp-content/uploads/kak-na-noutbuke-udalit-istoriyu-posecsheniya-sajtov_0.jpg" /></div>Как на ноутбуке удалить историю посещения сайтов</a></li> <li><a href="/raznoe/kak-uznat-prichinu-bana-sajta.html" title="Как узнать причину бана сайта"><div class="relimg"><img src="/wp-content/uploads/kak-uznat-prichinu-bana-sajta_0.jpg" /></div>Как узнать причину бана сайта</a></li> <li><a href="/raznoe/kak-zajti-na-mobilnuyu-versiyu-sajta-s-kompyutera.html" title="Как зайти на мобильную версию сайта с компьютера"><div class="relimg"><img src="/wp-content/uploads/kak-zajti-na-mobilnuyu-versiyu-sajta-s-kompyutera_0.jpg" /></div>Как зайти на мобильную версию сайта с компьютера</a></li> <li><a href="/raznoe/kak-vstavit-piksel-v-ishodnyj-kod-sajta.html" title="Как вставить пиксель в исходный код сайта"><div class="relimg"><img src="/wp-content/uploads/def.jpg" /></div>Как вставить пиксель в исходный код сайта</a></li> </ul></table>