7 мин.

Верстка и дизайн для Sports.ru, часть 2

348

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

Сегодня мы продолжим про….

Изображения

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

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

  • Частью анонса;

  • Иллюстрацией в тесте;

  • Частью текста (информационной);

  • Элементом оформления текста или блога.

Анонс

Добавить фото в анонс можно двумя способами.

Первый: указываем теги для нашего текста («NBA», «Финикс», «Стив Нэш»), после чего нажимаем ссылку «Выбрать фотографию из архива Sports.ru».  На выходе получим аккуратно оформленный анонс с небольшим фото справа от текста предисловия в ленте блогов и большой фотографией в начале текста. Данный способ хорош тем, что не нужно думать, где взять фотографию и где потом ее хранить, все делается автоматически.

Недостатки же следующие: не всегда получается найти подходящее изображение (если вы не пишете о футболе). К примеру для того же тега «Стив Нэш» sports.ru предлагает целых 12 фотографий. Такое «богатство выбора» иногда приводит к курьезным ситуациям (слева). Какое-то время в моей ленте текстов три из четырех анонсов были украшены одним и тем же фото. Это, гм, выглядит немного странно, не находите?

Поэтому я предпочитаю второй способ. К сожалению, мне не известно, как вставить изображение в анонс так, чтобы оно было выравнено по левому или правому краю и обтекалось текстом. Поэтому нужно подобрать фото так, чтобы оно примерно соответствовало по ширине ленте блогов. Все, что шире 600 пикселей, будет обрезано справа, все, что сильно меньше, будет выглядеть неряшливо. Рекомендую выбирать фото шириной от 540 до 580 пикселей.

Где искать картинки? Я пользуюсь двумя сервисами: Google Images и DayLife. Первый хорош тем, что позволяет искать фото конкретных размеров (выбираем  «Больше чем…. 400 x 300» для анонсов). Второй – тем, что хранит все изображения на своих серверах (т.е. завтра, послезавтра, через год, они никуда не денутся). Выбрали фото, скопировали ссылку на него, вставили в редактор записей sports.ru, получили симпатичный анонс.

Иллюстрации в тексте

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

Если же мы вставляем картинки вручную, то мы можем менять их размер (штатными средствами редактора) и расположением (с помощью очередного хака). С размерами все ясно: если у нас есть отличное, но большое фото, которое не влезет в блог, можно уменьшить его ширину до 540-580 пикселей. Если же мы хотим украсить текст несколькими мелкоразмерных картинками (логотипы, фото, иллюстрации к главам), то хорошо бы позаботиться о том, чтобы они обтекались текстом.

 Для этого мы снова можем использовать демо-сайт редактора FCKEditor. Выберем функцию «Insert/Edit image», вставим ссылку на фото. Кроме размеров мы можем менять еще и другие параметры: border, HSpace, VSpace и Align. Нас интересует последний – «Выравнивание», а именно два значения для него – «Left» и «Right». Дальше поступаем так же, как с цитатами: копируем отформатированное фото из редактора на демо-сайте в редактор sports.ru и наслаждаемся результатом.

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

Можете поэкспериментировать с другими типами выравнивания, но учтите, что некоторые из них либо не работают на sports.ru, либо бесполезны.

Самое главное, о чем нужно помнить, используя нестандартное форматирование (цитаты, картинки с обтеканием текста) – не нужно чрезмерно увлекаться. Все это может перестать работать нормально, если разработчики sports.ru решать изменить функционал редактора. Или представим такую ситуацию: в новом Sports.ru (который мы увидим сразу после конца света) ширина поля для записи будет увеличена с 600 до 800 пикселей. Это значит, что абзацы станут шире и тоньше. И если вы злоупотребляли фото с обтеканием, форматирование в ваших текстах может «поплыть».

Информационная часть

К этой категории изображений я отношу таблицы и графики.

Вообще говоря, это нонсенс: на спортивном сайте, где цифры, статистика и прочая структурированная информация играют огромную роль, пользователи не имеют штатных способов вставить таблицу в текст. И нельзя сказать, что эта возможность отсутствует в принципе: в новостях таблицы имеются (пример). Но для простых смертных эта функция недоступна. Почему? Потому что мы можем как-то неправильно их использовать и испортить внешний вид сайта? Возможно. Но для вандализма хватит и штатных средств – как насчет картинок высотой в 10 000 пикселей? Или текста, написанного по вертикали, по букве на строку?

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

Пока же единственный способ их добавить: создать таблицу в Excel или Google Docs, сделать скриншот экрана, обрезать, сохранить в картинку, найти сервер, куда можно эту картинку загрузить, и потом вставить ее в текст.

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

Элементы оформления

Самое нетривиальное использование изображений – для создания неповторимого дизайна блога.

Наиболее известный элемент оформления – так называемая «подписная картинка». Выбираем понравившееся фото по теме блога или рисуем сами что-нибудь типа «Нажми сюда, чтобы добавить блог в ленту», сохраняем его где-нибудь в сети и вставляем в каждую запись блога после текста. Затем копируем URL с кнопки «Добавить в ленту» нашего блога:

И, наконец, делаем изображение ссылкой:

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

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

Или просто логотип блога (и опять же, использовать его в анонсе):

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

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

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

Советы по использованию изображений

  1. Максимальная ширина фото в тексте или анонсе – 600 пикселей.

  2. Рекомендованная ширина для картинок без обтекания текстом – 540-580 пикселей.

  3. Рекомендованная ширина для изображений с обтеканием тестом – 150-250 пикселей.

  4. Не нужно вставлять очень высокие фото, особенно в анонс.

  5. Многих раздражают видео в анонсах.

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

  7. Не нужно помещать видео в анонс! Пожалуйста!

  8. Если вы ищете фото в архиве sports.ru, выберите то, которое не было использовано пять раз подряд в соответствующем разделе «Трибуны».

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

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

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

  12. Если вы вставляете два изображения подряд, разделите их пустой строкой.

  13. Сохраняйте чувство меры! Это вообще универсальное правило для всего на свете.

  14. От обилия графики в текстах рябит в глазах.

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

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

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

  18. Даже самое удачное фото не может сделать плохую запись хорошей.

  19. Лучше не вставлять ничего, чем картинку «просто так, чтобы была».

  20. Если вы не умеете рисовать, но очень хотите «подписную картинку» или логотип – попросите ваших читателей помочь.

На сегодня все.

Большей частью известных мне секретов для Sports.ru я уже поделился. Осталось кое-что по мелочам, плюс одна давно задуманная идея, до которой все никак не дойдут руки. То есть, как только – так сразу.