Как правильно верстать в 2022 году. Часть 1 / Хабр
Вступление
Меня зовут Николай и я Frontend-разработчик в логистическом стартапе Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.
Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.
В этой статье я расскажу лишь о небольшой части проблем, которые можно достаточно быстро решить, не прибегая к радикальному переписыванию больших частей проекта.
Содержание
Используйте правильные теги.
Как правильно вкладывать теги друг в друга.
Работа с медиаконтентом.
Пишем таблицы на HTML правильно.
a или button? Работа с интерактивными элементами и как выбрать правильный тег.
Различный теги для медиа-контента.
Прекратите писать велосипеды! Как мы можем стилизовать дефолтные HTML-элементы.
Пишем доступные формы.
Избыточная вёрстка. Как облегчить разметку.
Современные фишки HTML и CSS способные облегчить нам жизнь.
Экспериментальные технологии, входящие в стандарт.
Используйте правильные теги
Исторически так сложилось, что HTML служит для описания документов. То есть язык гипертекстовой разметки был придуман для обмена документами (в основном научного характера) и не предназначался для построения сложных веб-приложений и сайтов. Благодаря развитию стандарта стало полегче, но большинство современных разработчиков всё ещё предпочитают <div> в качестве главного тега и засовывают в него любой контент, вплоть до изображений (через background-image).
И я прекрасно их понимаю, <div> — очень удобный тег: у него нет встроенных стилей, его можно вкладывать в другие дивы. Чем не кандидат на лучший тег. Но при таком использовании тегов мы теряем главные преимущества HTML:
семантику — чёткую структуру контента, где каждый тег говорит о том, зачем он здесь и что ожидается внутри;
доступность — HTML может рендериться не только браузером, но и другими инструментами, вроде скрин-ридеров, роботов-поисковиков и т.д. И в наших силах упростить для них парсинг страниц.
Про какие теги нам следует стоит помнить?
Структурные теги документа
Почти любой сайт или приложение можно разбить на 3 большие части: <header>, <main> и <footer>. Сейчас это стало неким стандартом в дизайне. Некоторые части приложения повторяются от страницы к странице, и мы можем выделить их в отдельные части (шапку и подвал).
Шапка — это контент вверху страницы.
Там обычно размещается логотип, навигационное меню и другие элементы, которые должны быть доступны пользователю с любой страницы. Тег <header> не обязательно один на странице, он может озаглавливать любую независимую часть (например, быть частью модального окна).
Подвал — нижняя часть сайта, где обычно дублируется навигация и располагаются контакты компании. Также, как и шапка, <footer> может быть не один и использоваться для других независимых частей, помимо страницы.
Тег <main>
Плохо
<body> <div> ... </div> <div> ... </div> <div> ... </div> </body>
Хорошо
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
Помимо трёх базовых семантических тегов существует ряд других.
Разберём их ниже.
<article>
Это независимый блок на странице, который без внешнего контекста может существовать в рамках других сайтов и сервисов. Это может быть статья в блоге, твит, виджет VK, коментарий к публикации и т.д. Желательно, чтобы у этого блока был заголовок.
<section>
Неотделяемая от основного контента секция на странице. Например, это может быть блок на лендинге. Чаще всего имеет заголовок.
<aside>
Побочный, косвенный контент на странице, находящийся в стороне. Может иметь заголовок и быть не в одном экземпляре. Главная ошибка — использовать его только для боковой панели. Этот тег многогранен и может использоваться для любых блоков, не имеющих основное значение.
<nav>
Блок навигации с ссылками на другие страницы или разделы текущей страницы. Может использоваться только для основной навигации, а не для каждой группы ссылок. Например навигацию в <nav>, так как подвал сам по себе предполагает присутствие навигационных элементов.
И этот тег не обязательно должен включать в себя список ссылок. Туда может входить навигация любого типа, главное, чтобы она считалась основной.
<address>
В этот тег нужно вкладывать контактные данные. У него по-особенному работает «область видимости» — контактные данные в <article>, либо к <body>, если он находится вне <article>.
Заголовки
Как и в любом документе на HTML-странице могут содержаться заголовки. По стандарту мы обязаны всегда указывать заголовок первого уровня <h2>. Остальные уровни опциональны, но они должны быть в иерархической последовательности! Это значит, что мы не можем <h4> поставить после <h2>. Чтобы лучше это понять, посмотрим код ниже:
<body> <header> ... </header> <main> <h2> Наша кондитерская самая кондитерская из всех кондитерских </h2> ... <section> <h3> Почему наши булочки лучшие? </h3> ... <h4> Мука высочайшего сорта </h4> ... <h4> Много корицы </h4> ... <h5> Корица со Шри-Ланки</h5> ... <h4> Минимум сахара </h4> ... <h5> </section> </main> <footer> ... </footer> </body>
Как вы видите, заголовки выстраиваются в иерархию и идут один за одним, формируя логичную структуру.
По поводу использования нескольких заголовков 
Блочные теги
<p>
Простой тег для абзацев, именно для разделения текстовых частей. Не используйте <p> для коротких фраз внутри интерфейса. С точки зрения доступности, этот тег очень крут, дает пользователям с ограниченными возможностями «прыгать» между ними с помощью шорткатов.
<figure> и <figcaption>
Это иллюстрация с необязательной подписью. Во многих книгах изображения подписываются как «Рис. 1 — такой-то объект». Вот это и есть <figure>. Но в рамках HTML назначение этого тега гораздо шире. Мы можем разместить внутри цитату (см. ниже), фрагмент кода, какую-нибудь диаграмму. В общем <figure> — это любой объект с подписью. Подпись размещается внутри тега <figcaption>, который, в свою очередь, вкладывается в
<figure> <img src="https://example.com/cat.jpg" alt="Сердитый кот"> <figcaption>Кот, который зол на своего хозяина</figcaption> </figure>
<blockquote>
Тег для вставки длинных цитат.
Может иметь аттрибут cite, в котором указывается URL на источник цитаты, а также хорошо совместим с тегом <figure>, где в <figcaption> можно указать автора и название источника.
<figure> <blockquoute cite="https://www.youtube.com/watch?v=ZXsQAXx_ao0"> Just Do It! </blockquote> <figcaption> Shia LaBeouf, <cite>Motivational Speech</cite> </figcaption> </figure>
<hr>
Одиночный тег для разделения контента. Про него забывают и заменяют на border-bottom, но помимо визуального отображения этот тег несёт семантический смысл — тематическое разделение абзацев.
<pre>
Тег для вывода предварительно отформатированного текста. Имеет ограниченную область использования — ASCII-арт, вывод программного кода. Не рекомендую использовать для других задач, так как тег довольно ненадёжен и непредсказуем. Например, мы потеряем всё форматирование, если сборщик проекта минифицирует HTML.
Списки
Списки в вебе просто везде! Но очень редко их верстают как списки. Например, преимущества компании на лендинге это что? Правильно, список. Они бывают двух видов: упорядоченные и неупорядоченные. Я в этот раздел также добавил список описаний Description list.
<ul>
Неупорядоченный список применяется в том случае, если мы безболезненно можем поменять порядок элементов. Примеры:
<ul> <li>Удобная оплата</li> <li>Быстрая доставка</li> <li>Гарантия в 1 год</li> </ul>
<ol>
Упорядоченный список применяется тогда, когда нам важен порядок элементов. Например:
<ol> <li>Оформляете заявку</li> <li>С вами связывается менеджер для уточнения деталей</li> <li>Совершаете оплату</li> <li>Ожидаете доставку</li> </ol>
<dl>, <dd>, <dt>
Списки описаний применяются для формирования списков терминов.
<dl> <dt>HTML</dt> <dd>Язык разметки гипертекста, с помощью которого формируют контент веб-страницы</dd> <dt>CSS</dt> <dd>Язык для описания стилей веб-страницы</dd> <dt>JS</dt> <dd>Язык программирования, часто применяемый для написания веб-приложений</dd> </dl>
Строчные теги
<b>, <i>, <u>, <s>
Чудесные теги, которые чаще всего используют не по назначению. Они несут исключительно визуальное выделение текста. Если вы сбросите их стили, то они ничем не будут отличаться от обычного текста. В данный момент их можно использовать как теги для дополнительного выделения текста, которое вы оформите с помощью CSS. И да, тег <i> НЕ предназначен для иконок.
<em>
Как и <i> выделяет текст курсивом. Но зачем нам два тега для одного и того же? В том то и дело, что они разные.
<i>, как говорилось выше, не несёт никакого семантического смысла, это просто визуальное выделение, а <em> делает акцент на обёрнутом им тексте, который меняет смысл всего предложения. Например:
Я <em>просто обожаю </em>, когда верстальщики используют только дивы.
<strong>
Браузер выделяет текст обёрнутый тегом <strong> полужирным. Но помимо визуального выделения, текст обретает семантический смысл — большую важность по сравнению с остальным текстом вокруг.
<cite> и <q>
Оба тега связаны с цитирований, но применяются в разных случаях. <cite> — тег, в который мы оборачиваем текст, который отсылается к другому документу/произведению/etc.
Больше информации вы сможете найти в стандарте <cite>[ISO-0000]</cite>
<q> похож на <blockquote>, разница лишь в том, что <q> применяется для строчных цитат.
<q cite="https://russian.rt.com/business/news/966657-rubl-dollar-evro"> Рубль растёт к доллару и евро </q> — сообщает RT со ссылкой на ФАН.
<code>
Применяется для оформления программного кода внутри текста. Если требуется вывести многострочный блок кода, то лучше использовать <code> в связке с тегом <pre>.
<time>
Тег для обозначения даты и времени. У него может быть атрибут datetime, куда необходимо передать дату и время в формате ISO.
<time datetime="1995-11-24">24 ноября 1995 года</time>
<sub> и <sup>
Используются для добавления в текст индексов и степеней. Удобны для описания формул.
x<sub>1</sub> + x<sub>2</sub> = y<sup>2</sup> <!-- Икс первый плюс икс второй равно игрек в квадрате -->
<del> и <ins>
Нужны, чтобы показать, что из текста было что-то удалено или добавлено.
При этом они также обозначают факт изменения текста семантически, а не только визуально.
Вася пришёл домой в <del><time>19:00</time></del> <ins><time>23:00</time></ins>
<br>
Простой тег для переноса строки, думаю, все про него знают, потому что альтернативы нет.
Интерактивные элементы
<details>
Нативный дропдаун прямо в HTML! На самом деле не совсем так. <details> применяется, чтобы скрыть часть информации, которую можно получить, кликнув по кнопке, описанной во внутреннем теге <summary>.
Рубль растет на фоне заявлений Запада о введении санкций против России
<details>
<summary>Подробнее</summary>
Согласно данным валютных торгов на Московской бирже, по состоянию
на 22.40 мск курс доллара находился на уровне 78,7 рубля (-1,6%),
курс евро снижался до 89,3 рубля (-0,9%).
</details>Внимание! Данный тег не поддерживается IE и старыми версиями основных браузеров.
Другие интересные теги
<abbr>
Тег для аббревиатур.
<abbr title="HyperText Markup Language">HTML</abbr> — основной язык разметки веб-приложений
<dfn>
Тег для выделения термина. Элемент<p>, пара <dt>/<dd> или <section>, который является ближайшим предком <dfn> считается определением термина.
<p> <dfn>JavaScript</dfn> — язык программирования, используемый в основных веб-браузерах. </p>
<kbd>
Используется для выделения названия клавиш в клавиатурных сочетаниях.
Чтобы открыть диспечер задач, нажмите сочетание клавиш <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>.
<samp>
Тег для обозначения вывода компьютерной программы. По-умолчанию выводится моноширинным шрифтом.
<p> Приложение упало с ошибкой:<br> <samp>404 Неизвестный ресурс</samp>
<var>
Элемент для вывода математических переменных
Для рассчёта расстояния <var>S</var>, необходимо перемножить скорость <var>V</var> на время <var>t</var>.
<bdi> и <bdo>
Теги, связанные с направлением текста ltr и rtl. Необходимы, когда мы встраиваем в текст, написанный языком в одном направлении, фразу или предложение написанное в другом.
<bdi> изолирует от окружающего текста фрагмент, который может поменять направление (но не обязательно поменяет).
<bdo> в свою очередь, переопределяет направление текста так, что текст внутри тега отображается в другом направлении, нежели чем окружающий.
<p dir="ltr"> Это <bdi>арабское слово</bdi> будет перевёрнуто. </p> <!-- Это оволс еоксбара будет перевёрнуто.-->
--><mark>
Элемент, выделенный по причине его актуальности в определённом контексте. Чаще всего используется для выделения ключевых фраз, введенных пользователем, в результатах поиска. По умолчанию, на текст внутри этого тега применяется жёлтый фон.
<meter>
Современный компонет, который может показывать шкалу с наполнением разного цвета, в зависимости от указанных значений. Используется преимущественно для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.
Имеет следующие аттрибуты:
min— минимальное значение шкалы;max— максимальное значение шкалы;low— предел, при достижении которого, значение считается низким;optimum— предел, при достижении которого, значение считается оптимальным;high— предел, при достижении которого, значение считается высоким;value— собственно само значение.
<p>Температура воды</p> <meter value="0" max="100" low="10" high="60">Низкая</meter> <meter value="30" max="100" low="10" high="60">Нормальная</meter> <meter value="80" max="100" low="10" high="60">Горячая</meter> <meter value="100" max="100">Кипяток</meter>
Текст внутри является фолбэком для браузеров, которые не поддерживают этот тег.
<progress>
Тег для отображения индикатора, показывающего ход выполнения задачи. По простому — прогресс-бар.
<progress max="100" value="70">70%</progress>
<wbr>
Одиночный тег, указывающий, в каком месте можно переносить цельную строку. Является аналогом символа ­, с той лишь разницей, что не добавляет символ переноса в конце строки.
<ruby>, <rt>, <rp>
Теги, в основном используемые для иероглифов.
Не вижу смысла подробно их разбирать. Если интересно, можно почитать здесь.
<big>, <small>, <tt> и прочая эзотерика
Просто забудьте об этих тегах. Стандарт говорит, что они больше не поддерживаются и не рекомендует их использовать. Полный список здесь.
Заключение части 1
В этой статье ничего не сказано про элементы форм, таблицы, всякий медиа-контент, а также теги <a> и <button>. Об этом в следующих публикациях.
Также, я ничего не сказал по <div> и <span>, которые являются базовыми элементами для вёрстки. Их стоит использовать только в том случае, когда ничто из вышеперечисленного не подошло.
Как сверстать страницу, если совсем новичок и никогда не верстал?
Как сверстать, если никогда не верстал
ХТМЛ, структура и содержимое
ЦСС, оформление страницы
Публикация страницы в интернете
Как сверстать, если никогда не верстал
ХТМЛ, структура и содержимое
ЦСС, оформление страницы
Публикация страницы в интернете
Как всё устроено
Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы.
Например, несложный в освоении бесплатный редактор Саблайм Текст
Любая веб‑страница — это просто текстовый файл с особой разметкой. Поэтому чтобы создать страницу, достаточно создать файл с любым именем и расширением .html. Этот файл можно открыть любым текстовым редактором, а можно сразу перетащить в браузер. Если файл пустой, то и в браузере откроется чистый белый лист.
Открывать ХТМЛ‑файлы можно и в блокноте, но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор Саблайм Текст
В файл можно написать любой текст. Если после этого сохранить файл и обновить страницу в браузере, текст появится на странице.
ХТМЛ, теги и атрибуты
ХТМЛ‑разметка структурирует содержимое и состоит из тегов — контейнеров, в которые помещается текст. Текст помещается внутри тега, между его открывающей и закрывающей частями:
<h2>Текст внутри тега-заголовка</h2>
<p>
Текст внутри текстового тега p — параграфа
</p>
<small>
Маленький текст в своём специальном теге
</small>Полный список тегов
Теги можно бесконечно вкладывать друг в друга.
Например, сделать жирный текст внутри параграфа или обозначить пункты списка:
Полный список тегов
<p>По-настоящему <b>важные</b> принципы:</p>
<ul>
<li>Не планировать впритык</li>
<li>Сделать значит сдать</li>
<li>Флекс — всегда боль</li>
</ul>Все атрибуты тегов
У тегов есть атрибуты — параметры для настройки внешнего вида и поведения. Например, атрибут href добавляют к тегу‑ссылке a, чтобы он по клику отправлял на другую страницу. Тег br в примере переносит строку, чтобы ссылки не слиплись.
Все атрибуты тегов
<a>Нерабочая ссылка</a>
<br>
<a href="https://vk.com/">Рабочая ссылка</a>Ещё есть теги, которые не нужно закрывать и в которые нельзя ничего вложить. Это картинки и разные интерактивные элементы: видео, поля ввода, кнопки. Поведение и содержимое таких тегов полностью настраивается атрибутами.
Например, у тега‑картинки img ссылку на саму картинку указывают в атрибуте src:
<img src="https://bureau.ru/files/3slova-logo.png">
Служебные теги
В завершение вёрстки минимальной страницы, нужно добавить пару служебных тегов.
Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины
Наличие служебных тегов — это требование стандартов разработки веб‑страниц. Они помогают браузеру и поисковым системам лучше понимать страницу и работать с ней. Современные браузеры крайне терпимы и покажут страницу и без них, но по‑хорошему забывать эти теги нельзя. На старте можно не вникать в детали служеных тегов, а просто запомнить их как некое заклинание.
Стандарты и рекомендации для веб‑страниц разрабатывает Консорциум Всемирной паутины
Добавим тип документа, корневой тег, обозначение языка страницы и кодировку UTF‑8, контейнер для метаданных head и контейнер для всего видимого содержимого body.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>Моя прекрасная веб-страница</h2>
<p>Я верстаю и сияю как заря!</p>
</body>
</html>Визуально от этих тегов ничего не меняется, но так мы соблюдаем стандарты веб‑разработки и облегчаем работу браузерам и поисковикам.
В тег head обычно помещают много разных служебных тегов. В самом простом варианте, кроме кодировки, будет достаточно тега title. Это заголовок страницы для поисковиков и название вкладки для браузера. Внутри title может быть только чистый текст, никаких вложенных тегов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>😎 Моя прекрасная веб-страница</title>
</head>
<body>
<h2>Моя прекрасная веб-страница</h2>
<p>Я верстаю и сияю как заря!</p>
</body>
</html>Всё! Концептуально это весь ХТМЛ, дальше верстальщик уже изучает разные теги и особенности работы с ними, осваивает смежные технологии: язык стилей ЦСС и язык программирования Яваскрипт.
В следующих советах расскажу как стилизовать теги языком ЦСС и как загрузить страницу в интернет, чтобы сделать доступной для других людей.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Поделиться
Запинить
Твитнуть
Свежак
Как настроить веб-сайт — локальный корпоративный офис
В наши дни онлайн-бизнес переживает бум. Без веб-присутствия ваша фирма, скорее всего, может исчезнуть из поля зрения. Чтобы ваш бизнес не стал жертвой цифровой эпохи, лучше выйти в интернет и открыться для глобальной аудитории.
Приличный веб-сайт не должен стоить Земли; на самом деле существует множество пакетов, которые помогут вам собрать сложный сайт, который не будет выглядеть дешевым и дилетантским.
Следующие пункты описывают основные шаги, необходимые для того, чтобы приступить к работе в Интернете.
Зарегистрируйте свой домен
У вас не может быть веб-сайта без веб-адреса. Однако не поддавайтесь на предложения бесплатных веб-адресов, так как клиентам может быть трудно их найти, или они могут сделать вашу фирму менее профессиональной.
Зарегистрируйте свой адрес в одном из реестров доменов, предлагающих выбранный вами домен в Ирландии. Адреса в формате «точка-ком» (.com) дешевле, но фирмы, ведущие бизнес в Ирландии, могут захотеть зарегистрировать доменное имя в формате «т.е.», так как некоторые клиенты могут счесть его более надежным. Dot-eu также является вариантом для ирландских фирм, особенно если они планируют вести бизнес по всей Европе.
Выбрать хостинг
Вы можете разместить сайт самостоятельно, если у вас есть собственный сервер. Однако у большинства малых предприятий нет доступа к выделенному серверу. К счастью, есть много фирм, готовых разместить ваш сайт за определенную плату.
Тщательно выбирайте хостинг-провайдера. Не поддавайтесь искушению выбрать самый дешевый; сначала сделай домашнее задание. Существует также вопрос, следует ли придерживаться ирландской фирмы или искать за границей. Хотя вас могут соблазнить кажущиеся более низкими цены, которые предлагают иностранные хостинговые фирмы, могут быть скрытые проблемы, которые вам следует учитывать. Например, что произойдет, если сервер здесь выйдет из строя в середине дня, но это нерабочее время вашей хостинговой фирмы? Предоставляется ли круглосуточная поддержка или придется ждать, пока техподдержка приедет в офис для ответа?
Спланируйте свой сайт
Независимо от того, собираетесь ли вы разрабатывать веб-сайт самостоятельно или доверить его профессионалам, убедитесь, что вы точно знаете, что вы хотите разместить на сайте.
Если вы не определите эти детали на ранней стадии, скорее всего, вы получите постоянно расширяющийся проект.
У вас также должно быть приблизительное представление о том, как будут выглядеть страницы, выбор цветовых схем, логотипов и наличие функций электронной коммерции.
Создайте свой сайт
Если у вас достаточно навыков и опыта в дизайне, чтобы создать свой собственный сайт, это может сэкономить вам деньги.
Доступно множество пакетов веб-дизайна, от Microsoft FrontPage до более продвинутых программ, таких как Macromedia Dreamweaver, которые обеспечивают представление «что видишь, то и получаешь» (WYSIWYG), то есть вам не нужно иметь дело с HTML язык программирования, если вы действительно этого не хотите. Программа, которую вы выбираете, в конечном итоге зависит от вашего бюджета. Dreamweaver, например, стоит несколько сотен евро.
Веб-сайт состоит из трех основных элементов:
- Понятная навигация.
- Легко читаемая информация.
- Определенная цель сайта — будет ли он продавать вашу продукцию или предоставлять информацию для клиентов?
При настройке сайта также следует помнить о следующих моментах:
- Будьте проще.
- Убедитесь, что сайт работает во всех веб-браузерах, а не только в Internet Explorer.
- Убедитесь, что ваша контактная информация хорошо видна на сайте.
Если вы собираете личную информацию от клиентов, у вас должна быть политика конфиденциальности.
Если вы не знакомы с дизайном, лучше доверить его экспертам. Быстрый поиск в Google покажет ряд фирм веб-дизайна, расположенных в Ирландии. Проверьте их предыдущую работу, прежде чем брать на себя какие-либо обязательства; также помогает, если они знакомы с вашим конкретным видом бизнеса.
Варианты электронной коммерции
Если вы продаете через Интернет, вам необходимо принимать платежи по кредитным картам. Для этого необходимы два основных элемента: платежный шлюз и учетная запись интернет-продавца.
Хотя это может показаться большим хлопотом, есть несколько компаний, которые предлагают коммерческие банковские услуги и платежные шлюзы для фирм, продающих онлайн, без хлопот и затрат, связанных с созданием специального торгового счета.
Например, стандарт платежей через веб-сайт PayPal объединяет платежный шлюз с учетной записью продавца в Интернете.
Это предоставит вам безопасный сервер для приема платежей, независимо от того, платят ли клиенты кредитной картой или PayPal. WorldPay предлагает аналогичную услугу. Вы также можете выбрать обычное финансовое учреждение для предоставления своей учетной записи интернет-продавца.
Присутствие в Интернете
Независимо от типа вашего бизнеса, вы, скорее всего, выиграете от присутствия в Интернете — порта захода, где клиенты и потенциальные клиенты могут узнать больше информации о ваших продуктах или услугах. Если ваши конкуренты выходят в интернет, вы должны спросить себя, можете ли вы позволить себе этого не делать.
Getting Business Online
Кампания Getting Irish Business Online поможет предприятиям и индивидуальным предпринимателям создать полнофункциональный веб-сайт к концу сессии, что является первым шагом к построению онлайн-бизнеса. www.gettingbusinessonline.ie
Создать сайт | Руководство для начинающих
Пошаговое руководство по созданию веб-сайта для бизнеса
Зарегистрируйте веб-адрес (также называемый доменным именем или URL-адресом): Ряд компаний могут зарегистрировать доменное имя для вас (и они часто также предоставляют хостинг).
Найдите реестры доменов в Интернете и посетите их веб-сайты. Используйте их инструменты, чтобы ввести предпочтительные веб-адреса и посмотреть, заняты ли они. Когда вы найдете то, что не так, заявите об этом.Наймите кого-нибудь для размещения вашего сайта: Веб-сайты хранятся на серверах, называемых хостами. Вы сможете найти хост за скромную годовую плату. Ваш хост также будет продавать дополнительные продукты, которые помогут защитить ваш сайт от вирусов и вредоносных программ, и они могут продавать шаблоны для создания вашего сайта.
Выберите правильный план для вашего сайта: Перед подписанием контракта с хостингом убедитесь, что у вас есть правильный план. Вы можете начать с базового веб-хостинга, но могут возникнуть дополнительные расходы, если вы захотите добавить несколько адресов электронной почты или интернет-магазин.
Выберите шаблон (или получите индивидуальный дизайн): Вы можете создать веб-сайт с нуля, но сегодня многие компании используют готовые шаблоны.
Там тысячи. Вы можете просто вставить свой текст и изображения или попросить разработчика настроить шаблон по своему вкусу.Получить логотип: Хорошо продуманный качественный логотип поможет вам выглядеть невероятно профессионально. Если у вас нет логотипа, воспользуйтесь дизайнерскими сервисами, такими как Tailor Brands, Fiverr.com и 9.9Designs.com. Убедитесь, что выбранные вами цвета и шрифт соответствуют вашему бренду. Вам нужна единая тема для всех ваших материалов.
Добавьте свой контент: Вам не нужно слепо следить за тем, что делают ваши конкуренты, но проверяйте их. Если что-то работает для них, учитесь на этом. Затем сосредоточьтесь на том, как вы можете быть свежими и разными.
Протестируйте свой сайт: Посетите свой сайт с разных устройств и браузеров. Убедитесь, что он выглядит и ощущается практически одинаково на всех из них. Спросите у друзей и семьи их честное мнение.
Опубликовать: Оживите свой сайт и расскажите о нем всем.
Электронная почта клиентов и контакты. Посмотрите, есть ли какие-либо локальные каталоги, в которые можно добавить ваш сайт. Попросите соответствующих деловых партнеров дать вам ссылку.Установка дат проверки и обновления: Запланируйте даты проверки в своем календаре, чтобы обновить и изменить свой сайт. Держите информацию точной. Если вы упоминаете актуальные вопросы, убедитесь, что они устарели или постоянно обновляются.
Найдите реестры доменов в Интернете и посетите их веб-сайты. Используйте их инструменты, чтобы ввести предпочтительные веб-адреса и посмотреть, заняты ли они. Когда вы найдете то, что не так, заявите об этом.
Там тысячи. Вы можете просто вставить свой текст и изображения или попросить разработчика настроить шаблон по своему вкусу.
Электронная почта клиентов и контакты. Посмотрите, есть ли какие-либо локальные каталоги, в которые можно добавить ваш сайт. Попросите соответствующих деловых партнеров дать вам ссылку.Что размещается на веб-сайте?
Веб-сайты обычно имеют четыре типа страниц:
Домашняя страница: Включите название вашей компании и логотип, а также подробное описание того, чем вы занимаетесь и почему. Держите это коротким на данный момент. Конкретные детали могут жить на других страницах. Покажите свою индивидуальность и страсть.
Товары и услуги: Расскажите посетителям, что они могут купить у вас, с помощью нескольких строк о каждом продукте или услуге.
Укажите цены на продукты. Если вы работаете в сфере услуг, вам придется позвонить и узнать, раскрываете ли вы свои сборы.Информация: Расскажите немного о себе и перечислите все свои членства в организациях или профессионалах. Расскажите свою историю, но сосредоточьтесь не столько на том, что произошло, сколько на том, почему. Вы хотите, чтобы ваша страсть сияла. Это также хорошее место для отзывов клиентов.
Свяжитесь с нами: Укажите свой адрес электронной почты и служебный почтовый адрес, а также ссылки на свои учетные записи в социальных сетях. Многим людям по-прежнему нравится видеть номер телефона. Если у вас есть физический адрес, вставьте карту Google. И укажите часы работы.
Укажите цены на продукты. Если вы работаете в сфере услуг, вам придется позвонить и узнать, раскрываете ли вы свои сборы.Советы по написанию веб-страниц
Пишите меньше: В любом случае люди читают только около 30% слов на странице.
Используйте описательные заголовки: 80% людей просматривают информацию, которая им нужна, поэтому сделайте это проще.
Сделайте его чистым: Читать онлайн сложнее (и медленнее), поэтому используйте более крупные шрифты и оставляйте много пустого места.
Избегайте ловушки шаблона
Выбирая готовый шаблон веб-сайта, вы, естественно, ожидаете, что ваш сайт будет выглядеть как образец в галерее. Но это произойдет только в том случае, если ваши заголовки и текстовые блоки будут примерно такой же длины, как и их. Вам нужно писать в выбранном вами шаблоне, иначе это может выглядеть странно.
Не все на вашем сайте должно продаваться
При создании веб-сайта думайте не только о том, чего вы хотите от своих посетителей. Спросите себя, с какими вопросами они, вероятно, сейчас борются. Можете ли вы ответить на них? Вот почему полезно делиться полезной информацией или советом:
Привлеките людей на свой сайт: Когда люди ищут тему в Интернете, ваши лучшие статьи могут начать появляться в списке рекомендуемых к прочтению.
И если этот контент действительно полезен, читатели начнут делиться им со своими контактами.Завоевать новых клиентов: Люди любят получать советы и подсказки. Если они найдут ценную информацию на вашем сайте, им будет приятно иметь с вами дело.
Держитесь за клиентов: Когда вы предвидите следующий вопрос клиента и отвечаете на него, клиенты чувствуют, что вы их понимаете. Это отличный способ установить взаимопонимание и лояльность.
И если этот контент действительно полезен, читатели начнут делиться им со своими контактами.Сосредоточьтесь на своем бренде
Когда вы пишете контент для своего веб-сайта, очень важно иметь что-то, что поможет сосредоточить ваши мысли. Запишите ценности, наиболее важные для вашего бренда, и превратите их в облако слов. Такие сайты, как Worditout, позволяют делать это бесплатно. Распечатайте его и повесьте на стену, где вы пишете.
Восемь способов обеспечить высокое качество вашего веб-сайта
При запуске бизнеса убедитесь, что ваш веб-сайт:
Релевантный: Поймите, с кем вы общаетесь (ваш целевой рынок) и что они думают ищу.
Создайте свой сайт для этих людей. Вы хотите, чтобы они знали, что нашли правильное место, как только приземлились.Профессиональный вид: Относитесь к своему сайту так, как он выглядит при первом впечатлении. Используйте качественные изображения, хорошо написанный текст и современный дизайн. Если бюджет является проблемой, сделайте меньше страниц для начала. Сосредоточьтесь на качестве.
Надежный: Включите страницу «О нас» с полной контактной информацией, небольшой информацией о вашей предыстории и несколькими фотографиями, которые придают вашему бизнесу человеческое лицо.
Легко найти: Создайте сайт, который будет отображаться, когда местные жители будут искать ваши продукты и услуги в Интернете. Поисковая оптимизация (SEO) может вам помочь. Основы освоить не так сложно.
Подключено к вашим социальным сетям: Некоторые люди, которые находят ваш сайт, могут предпочесть подключиться к социальным сетям.
Упростите им это. Это отличный способ показать им индивидуальность вашего бренда.Предоставление отзывов и отзывов: Ничто не сравнится с реальными отзывами людей, которые пользовались вашими услугами или продуктами, поэтому приглашайте клиентов присылать отзывы. Будьте готовы принять хорошее вместе с плохим.
Всегда актуальная информация: Устаревшая информация выглядит некрасиво. Это создает впечатление, что вам все равно, и снижает доверие к сайту. Снимите старые промо и не ставьте даты в тексте, если в этом нет необходимости.
Легко купить: Если вы продаете через свой сайт, сделайте его простым и безопасным. Предоставьте покупателям простую в использовании корзину для покупок, проясните стоимость доставки до того, как они дойдут до оформления заказа, и предложите различные способы оплаты, такие как дебетовая карта, кредитная карта и PayPal.
Создайте свой сайт для этих людей. Вы хотите, чтобы они знали, что нашли правильное место, как только приземлились.
Упростите им это. Это отличный способ показать им индивидуальность вашего бренда.Как начать свой бизнес
Каждый день открываются тысячи новых предприятий.
Если все эти люди могут это сделать, почему бы и нет? Вот что делать и когда.
Как провести исследование рынка
Ваша бизнес-идея явно вдохновлена. Но это помогает проверить, что вы не единственный, кто так думает.
Как составить бизнес-план
Написание бизнес-плана поможет вам сформулировать вашу идею и даст план ее реализации.
Составление бюджета и прогнозирование
Пришло время оценить вашу бизнес-идею. Бюджетирование и прогнозирование помогают в этом.
Стратегии ценообразования и себестоимость проданных товаров
Ваши цены могут влиять на количество ваших продаж и прибыль, которую вы получаете от каждой сделки.
Типы бизнес-структуры
Ваша бизнес-структура может влиять на размер налогов, которые вы платите, и на то, как к вам относится закон.
Бухгалтерский учет малого бизнеса
Если вы начинаете свой бизнес, вам необходимо ознакомиться с некоторыми основами бухгалтерского учета.
Регистрация бизнеса и другие административные задачи
После всех волнений, связанных с решением начать бизнес, вам придется заполнить некоторые документы.
Как создать бизнес-сайт
Относитесь к своему веб-сайту как к онлайн-версии витрины. Это первое впечатление для многих клиентов и потенциальных клиентов.
Инструменты и руководства для вашего бизнеса
Теперь, когда вы в бизнесе, вы хотите остаться в нем. У Xero есть ресурсы и решения, чтобы помочь.
Загрузите руководство по открытию бизнеса
Узнайте, как начать бизнес, от идеи до запуска. Заполните форму, чтобы получить это руководство в формате PDF.