Как проще сверстать логотип (минимум кода)

[Alfa2015]

Как проще сверстать логотип ( смотрите код: http://jsfiddle.net/0msb5jj8/ )

Что-то мне кажется, у меня много кода и классов для какого-то логотипа ))))

Может, есть вариант проще сверстать?

[Нарек]

Может, есть вариант проще сверстать?

Есть. Картинка. 

[EvilScorpion]

Как проще сверстать логотип ( смотрите код: http://jsfiddle.net/0msb5jj8/ )

Что-то мне кажется, у меня много кода и классов для какого-то логотипа ))))

Может, есть вариант проще сверстать?

Думаю проще будет сделать картинку в фотошопе и вставить только её.

[klierik]

Всё нормально, я бы так и сделал.

[Alfa2015]

Вставила уже картинкой. 

А вообще, я думала, что картинкой нужно вставлять тогда, когда логотип уж очень креативный)))), а остальные (попроще) -- можно и сверстать.

[Нарек]

Вставила уже картинкой. 

А вообще, я думала, что картинкой нужно вставлять тогда, когда логотип уж очень креативный)))), а остальные (попроще) -- можно и сверстать.

Ну не факт. 95% сайтов которые я посещаю имеют лого картинку. Половину из них можно верстать текстом. Небось знают что)

[afdw]

Зачем делать текст картинкой? Не учитывается настройки хинтинга и сглаживания, текст не видят поисковые системы, без картинок работать будет невозможно! А плюсы вообще есть?

[Нарек]

текст не видят поисковые системы

Ну для картинок есть alt и title которые по моему видят поисковики.

[afdw]

Ну для картинок есть alt и title которые по моему видят поисковики.

 

Ну всё равно, какой в этом смысл?

[Нарек]

Ну всё равно, какой в этом смысл?

Ну, как минимум, что для картинок есть  itemprop="logo" от schema.org http://googlewebmastercentral.blogspot.com/2013/05/using-schemaorg-markup-for-organization.html

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

Edited July 5, 2015 by Нарек

[psywalker]

Как проще сверстать логотип ( смотрите код: http://jsfiddle.net/0msb5jj8/ )

Что-то мне кажется, у меня много кода и классов для какого-то логотипа ))))

Может, есть вариант проще сверстать?

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

[web-tech]

что поисковикам будет вас легче найти.

если написать название сайта и слоган,  видимость сайта в поисковых системах увеличится?

Также у текста можно

 

стоит для логотипа просто использовать svg

[wwt]

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

  я с недавнего времени очень полюбил SVG, вернее любил его и раньше, а вот браузеры не очень =)))

[psywalker]

 

что поисковикам будет вас легче найти.

если написать название сайта и слоган,  видимость сайта в поисковых системах увеличится?

Думаю, что да. Я честно говоря не представляю себе текст картинкой, в принципе. Меня с детства учили, что текст всегда нужно делать текстом, но возможно я плохо воспитан.

 

 

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

  я с недавнего времени очень полюбил SVG, вернее любил его и раньше, а вот браузеры не очень =)))

Да, SVG - это круто и правильно, но делать текст на SVG, даже для лого, как-то не айс. На SVG можно сделать сам лого, имхо, вот это другое дело.

[wwt]

 

 

что поисковикам будет вас легче найти.

если написать название сайта и слоган,  видимость сайта в поисковых системах увеличится?

Думаю, что да. Я честно говоря не представляю себе текст картинкой, в принципе. Меня с детства учили, что текст всегда нужно делать текстом, но возможно я плохо воспитан.

 

 

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

  я с недавнего времени очень полюбил SVG, вернее любил его и раньше, а вот браузеры не очень =)))

Да, SVG - это круто и правильно, но делать текст на SVG, даже для лого, как-то не айс. На SVG можно сделать сам лого, имхо, вот это другое дело.

 

Согласен, всяческие слоганы и тд лучше текстом. А вот если слова являются частью логотипа , к примеру "Страховая компания Крючки" ну и какай-то элемент дизайнерский. То я считаю все должно быть в виде изображения, а не текста. Тут лучше задействовать alt и title.

 

Тут нужно пытаться понять что же конкретно является частью логотипа, а что уже отдельным контентом имхо. Хотя я могу и ошибаться конечно же, да и каждый в праве делать все что пожелает =))

[web-tech]

Я честно говоря не представляю себе текст картинкой, в принципе.

 

В логотипе часто используются нестандартные шрифты, которые без надобности для подключения в css. И в общем то, часто текстовые элементы располагаются внутри графического элемента.  Да и хотелось бы примеры сайтов, в которых текст в логотипе не в графике.

Берем для примера сайт https://www.digitalocean.com/, смотрим логотип их и удивляемся, а почему это надпись DigitalOcean не текстом. И воспитание казалось бы вообще здесь не причем.

Хотя слоган сайта в принципе можно и текстом написать. 

Edited July 5, 2015 by web-tech

[psywalker]

 

 

 

что поисковикам будет вас легче найти.

если написать название сайта и слоган,  видимость сайта в поисковых системах увеличится?

Думаю, что да. Я честно говоря не представляю себе текст картинкой, в принципе. Меня с детства учили, что текст всегда нужно делать текстом, но возможно я плохо воспитан.

 

 

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

  я с недавнего времени очень полюбил SVG, вернее любил его и раньше, а вот браузеры не очень =)))

Да, SVG - это круто и правильно, но делать текст на SVG, даже для лого, как-то не айс. На SVG можно сделать сам лого, имхо, вот это другое дело.

 

Согласен, всяческие слоганы и тд лучше текстом. А вот если слова являются частью логотипа , к примеру "Страховая компания Крючки" ну и какай-то элемент дизайнерский. То я считаю все должно быть в виде изображения, а не текста. Тут лучше задействовать alt и title.

 

Тут нужно пытаться понять что же конкретно является частью логотипа, а что уже отдельным контентом имхо. Хотя я могу и ошибаться конечно же, да и каждый в праве делать все что пожелает =))

 

Конечно! Всегда надо смотреть по ситуации.

 

 

Я честно говоря не представляю себе текст картинкой, в принципе.

 

В логотипе часто используются нестандартные шрифты, которые без надобности для подключения в css. И в общем то, часто текстовые элементы располагаются внутри графического элемента.  Да и хотелось бы примеры сайтов, в которых текст в логотипе не в графике.

Берем для примера сайт https://www.digitalocean.com/, смотрим логотип их и удивляемся, а почему это надпись DigitalOcean не текстом. Быть может все таки дело действительно в воспитании?  

 

Имхо, вот как раз тут можно картинкой, ибо видно, что этот текст входит "в картинку" логотипа. А вот у ТС иная ситуация. Сравните сами.

[antonKar]

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

[wwt]

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

Я бы выкрутился просто сделав скриншот нужной области =)

[afdw]

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

 

Пусть откроет для себя скриншоты.

[antonKar]

Пусть откроет для себя скриншоты.

А если на сайте неоднородный фон или фоны разные?

 

PNG с прозрачным фоном или SVG — идеальный вариант для логотипа. За всё остальное в приличном обществе линейкой по рукам бить надо.

 

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

Edited July 6, 2015 by antonKar

[afdw]

А если на сайте неоднородный фон или фоны разные?

 

В Dev Tools удалить все ненужные элементы и поставить белый фон.

[antonKar]

А если на сайте, куда надо вставить контент, неоднородный фон?

 

Нет, понятно конечно, что в любом случае можно придти к какому-то одному результату, но момент всего этого в том, что:

1) контентщик, вместо простого сохранения картинки тратит время и нервы на вытаскивание логотипа;

2) верстальщик тратит время в никуда, верстая то, что верстать не нужно.

 

Смысл делать что-то в виде текста в том, чтобы это можно было скопировать. Логотип можно нормально скопировать только картинкой.

Edited July 6, 2015 by antonKar