Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

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

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

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

 

При работе с фотографиями

  • Уменьшайте фотографии до необходимого вам размера.
  • Если вам нужна фотография 300х400 пикселей, не нужно вставлять оригинал 5000х4000. Уменьшите изображение в фотошопе до нужного.
  • Выбирайте "Сохранить для веб". В настройках уменьшите качество изображения до 60. Это позволит вам получить красивую картинку, которая будет очень мало весить. 
  • Старайтесь выбирать картинки не в яндексе из первых 10, а например на http://flikr.com. Так увеличивается шанс выбрать действительно уникальную картинку.
  • Обязательно оставляйте отступ вокруг картинки, от 5 до 10px. Визуально смотрится выигрышнее картинка, которая не прилипает к тексту или к другим картинкам рядом. 
  • Если вы хотите, чтобы вашу картинку заметили в тексте, размещайте ее слева. Если наоборот, нужен акцент в первую очередь на текст, то справа. Дело в том, что человек начинает смотреть страницу с левого верхнего угла. 
  • Попросите вашего программиста сделать лайтбокс на сайте (это когда вы нажимаете на маленькую картинку и она красиво открывается в большую). Не вставляйте огромные картинки сертификатов, лицензий, товаров и прочего. Используйте лайтбокс. 

 

При работе с текстом

  • Чаще всего хорошо смотрится Arial от 11 до 14 px, темно-серого цвета. 
  • Если вы копируете текст из текстового редактора или с какого-либо сайта и вставляете в админку вашего сайта, обязательно очистите получившийся html-код с помощью прекрасного веб-приложения Реформатор. Это нужно, чтобы всякий лишний код во-первых не занимал место, во-вторых, так вам будет намного удобнее форматировать текст. 
  • Разделяйте текст на абзацы. Желательно, чтобы один абзац был не больше и не меньше 4-5 строк. 
  • Большие статьи разделяйте по смыслу на подстатьи и выделяйте заголовками. Заголовки хорошо делать жирными или основного цвета сайта. 
  • Пусть ваши ссылки открываются в новом окне. Да, я помню, Великий Тема Лебедев завещал нам никогда этого не делать. Но как показывает мой опыт, человеку удобнее открывать ссылку, расположенную, например, середине текста, в новой вкладке, чтобы спокойно просмотреть страницу после прочтения всего материала.  А вот ссылку на скачивание документов делайте в том же окне. 
  • Не используйте много способов для выделения текста. На самом деле стоит использовать два -  жирный текст и основной цвет сайта. Для особо важных объявлений используйте красный цвет, он сразу привлекает внимание. Не надо использовать в одной статье несколько цветов, увеличение, наклон, жирность шрифта. Это будет мешать пользователю сосредоточиться на материале.
  • Старайтесь не выкладывать слишком большие статьи. Либо делайте постраничную разбивку, либо разделяйте на несколько статей. Ну или безжалостно выкидывайте все лишнее.  Пользователю неинтересно проматывать больше пары экранов. Ну если конечно, это не суперважная для него информация. 
  • Выделяйте списки, если вам нужно перечислить несколько позиций в тексте. Упорядоченные - это когда каждый пункт списка пронумерован, или неупорядоченные, когда каждый пункт списка отмечен символом (маркером).

 

При работе с таблицами

  • Граница таблицы должна быть не больше 1px и желательно нейтрального, светло-серого цвета. Например, #eee, #ccc и т.п.
  • Делайте отступы внутри ячеек таблицы, от 3 до 5px. Так текст будет легче восприниматься. 
  • Внимательно относитесь к выравниванию в таблице. Как правило, если в ячейке одна строчка, то аккуратнее будет смотреться вертикальное выравнивание по центру, если больше одной строчки, то по верхнему краю. В столбце можно решать этот вопрос таким образом - первый столбец выравнивание слева, а остальные по центру ячейки.
  • Поделюсь с вами маленькой хитростью. Красиво, когда все таблицы на сайте в одинаковом стиле. Можно просто каждый раз форматировать новую таблицу, а можно создать для нее специальный класс в CSS. Если вы не еще не умеете работать с CSS научитесь, попросите того кто администрирует ваш сайт, прописать класс для таблицы - например, я использую в работе class="data-table", который будет описывать все свойства таблицы. Тогда, создавая новую таблицу, вам нужно будет только вставить класс в код таблицы. 
  • Не забывайте указывать ширину столбцов. У всех разные экраны, и если вы не укажете фиксированные размеры, то может получиться некрасиво. 

 

Общие рекомендации

  • Если вы работаете с контентом постоянно, то заведите себе маленький файлик с основными тегами, словами, классами, которые вы используете в работе. Тогда вам не придется каждый раз набирать заново, а можно будет просто копировать. Это существенно ускоряет работу. 
  • Используйте в работе с кодом и текстом Adobe Dreamweaver. Эта программа позволяет быстро и практически не тратя усилий форматировать текст и превращать его сразу в красивый и чистый html-код. 
  • Скачайте Adobe Photoshop Portable и Adobe Dreamweaver Portable. Их не нужно устанавливать на компьютер, они быстро грузятся, а работают так же на полную мощность. 
  • Обязательно пользуйтесь горячими клавишами! Создайте свои собственные клаиватурные сокращения в фотошопе и дримвивере на все часто используемые вами команды. Это ускорит вашу работу на 50%. Вместо того, что делать 3-4 клика мышкой, вы просто автоматически нажимаете две кнопки на клавиатуре и выполняете нужное действие. 
  • Если вам нужно выложить какой-то документ на скачивание, напишите рядышком, какой формат файла и сколько весит. Сейчас у многих мобильный интернет и такие вещи очень актуальны.
  • При необходимости выложить несколько связанных картинок и текст, есть смысл соединять их в один pdf-файл. Это красиво и удобно. Используйте Adobe Acrobat Pro Portable. 

 

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

Со временем, нарабатывая опыт, вы наверняка составите свой список хитростей, помогающих в работе) 

Stay tuned!