Введение: Как делать сайты

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

Принцип создания сайтов

Концепция

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

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

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

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

Дизайн

Ещё одна печальная ошибка — подход к работе вебдизайнера только с точки зрения оценки красоты «шапки» сайта.

Поверьте мне, если у вас совершенно некрасивый сайт, но имеющий интересную индивидуальную информацию, правильный функционал и структуру, позволяющую найти эту информацию, то пользователю не будет никакого дела до красоты «шапки» сайта (например, посмотрите на мегапопулярный сайт библиотеки Машкова).

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

По поводу того, какой сайт должен быть: «резиновый» (масштабируемый под различные разрешения браузера) или жёстко свёрстанный под определённый размер. Заказчик обычно, ни секунды не колеблясь, заявляет: конечно «резиновый».

Но! «Резина» не всегда хороша. Конечно, всё это замечательно: сайт «разъезжается» вширь, занимает всё пространство монитора и использует по максимуму возможное разрешение. Многим кажется, что это очень круто.

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

Обязательно нужно закладывать какую-то максимальную ширину, дальше которой сайт «разъезжаться» не будет.

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

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

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

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

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

Постарайтесь отказаться от красивых меню на «флеше» и JavaScript: поисковики очень плохо индексируют ссылки, запрограммированные при их помощи. И если уж отказаться не получается, обязательно сделайте «карту» сайта, имеющую ссылки на все страницы, реализованные простыми тегами «<a href=””>». Конечно же, на «карту» сайта должна также вести простая текстовая ссылка. Этим вы поможете поисковикам проиндексировать весь ваш сайт.

На сайт, выполненный на белом фоне обычным шрифтом Verdana, выровненным по левому краю, намного приятнее смотреть, чем на что-нибудь такое:

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

Какие шрифты выбрать?

Тут всё просто. Используйте только самые популярные шрифты. Такие, как Tahoma, Verdana, Arial, Times New Roman. Делается это из-за того, что, в случае отсутствия шрифта у пользователя, текст будет отображаться шрифтом по-умолчанию и лишь немногие браузеры поддерживают загрузку недостающих шрифтов. А какой у пользователя шрифт назначен по-умолчанию — для нас загадка. И как будет выглядеть в этом случае текстовый блок — никому не известно.

Вооружившись всеми этими знаниями, запускайте Photoshop и отрисовывайте весь сайт в нём.

После того, как рисунок готов, приступайте к разделению этого рисунка на составные части: вырезайте картинки, сохраняйте их отдельными файлами в формате jpg или png и, посредством HTML, верстайте страницы.

О правилах сохранения вырезанных элементов сайта и вёрстке, мы поговорим в следующих статьях. Потому как дело это весьма нетривиальное.

Программинг

Нарисовали, сверстали, теперь наполняете сайт жизнью. При помощи PHP-скриптов, например.

Автор: Андрей Морковин.

Ещё материалы по этой теме:

Валерий
Интересная статья. Я не давно начал изучать web -дизайн и узнал много важных мелочей (типа ширины текстового блока).
Хотел выразить благодарность автору и попросить следующее — можно еще таких статей…. на тему мнений профессионалов и различных рабочих моментов, которые приходят только с опытом.
PS попробовал joomla и wordpress … не зная html, css и php там просто нечего ловить….. если конечно человек хочет сделать что толковое

Андрей Морковин
Спасибо Вам за положительный отзыв. Как раз сейчас я планирую написать еще одну вводную статью.
Действительно, знания HTML, CSS и PHP необходимы для продуктивной работы в сфере сайтостроительства. Могу посоветовать Вам, в плане материалов для обучения, вот такие ссылки:
1) Мой видеокурс по блочной div-верстке сайта: ***
2) Две статьи на блоге Михаила Шакина, в которых перечислены интересные ресурсы для изучения HTML и PHP:
https://shakin.ru/other/best-php-and-mysql-resources.html
https://shakin.ru/useful/best-html-and-css-resources.html

Валерий
Спасибо за быстрый ответ. Ваш курс уже изучаю понемногу, а на shakin.ru был…. от туда к вам и пришел ваши методы подачи информации намного эффективнее.

Never Lex
Целиком и полностью согласен

red_lion
Случайно наткнулся на один из ваших видеоуроков, а затем нашёл и сайт. Очень был рад для себя обнаружить грамотный подход к преподнесению материала особенно видео (информативный, НЕ занудный, подходящий голос автора (уж поверьте мне, пересмотрел много вариантов видеоуроков с различных сайтов… встречаются и такие, от которых уже на второй минуте начинает «укачивать»)).
В общем автору большой риспект!!!
Ну и теперь небольшая ложечка дёгтя…
В IE8 на этой странице (тема «введение») нет процентов 50 текста, в остальных же браузерах вроде всё ОК. Хотелось бы исправления этого бага.

Андрей Морковин
Спасибо за добрые слова.
По поводу IE8, забавно, я под ним не работаю и не видел глюка. Странная штука, эти браузеры от Майкрософта

Alekstr
Александр! Доброе время суток! Это эффект некорректной обработки IE заремаренных строк. Лучше все-таки удалить эти строки со всех страница(). Код должен быть чистым.

Devil_Shurik
Забудьте Вы про IE!
Это вообще не браузер, а головная боль юзера.
Я лично его держу вообще только для обновления драйверов, ну не хотят многие производители затачивать автоматический поиск и обновления дров под нормальные браузеры.

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

Роман
Нынче можно забИть на юзеров IE. Рекордно низкий показатель. Google Chrome заполонил державы и наши головы

Alekstr
Андрей! Доброе время суток! Это эффект некорректной обработки IE заремаренных строк. Лучше все-таки удалить такие строки со всех страниц Вашего сайта. Код должен быть чистым.

Иван
Доброго времени суток Андрей и всем Вашим читателям.
Спасибо огромное за работу, которую Вы проделали по созданию видео уроков. Не сколько лет назад я начинал изучать сайтостроение и все, что с этим связано, но в то время в принципе не было информации в виде видео уроков. Благодаря Вашему курсу по «Div’ной верстке» у меня наконец-то пришло понимание того, как верстается полноценный дизайн сайта без использования таблиц. Очень бы хотелось увидеть Ваш видео курс по «натягиванию» своего дизайна на WordPress, либо Joomla.
Еще раз Огромное Спасибо за качественные видео курсы. Желаю Вам удачи в развитии Вашего проекта.

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

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