Продолжаем следовать модному тренду

[troll]

Тогда пара вопросов от новичка:

1. По каким причинам фон шапки сделан через img, а не background?
   
2. Для чего в подвале используется таблица?
   

Edited April 9, 2012 by troll

[1nfecteD]

…код не смотрел.

А почему?

Я вот например люблю смотреть чужой код. Часто можно научиться чему-нибудь интересному, почерпнуть идеи.

Для новичков так и вовсе практически обязательно смотреть код как можно чаще, отмечать интересные решения и образцы как делать не надо.

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

[wildhind]

Тогда пара вопросов от новичка:

1. По каким причинам фон шапки сделан через img, а не background?
   
2. Для чего в подвале используется таблица?
   

Хорошие вопросы.

Фон шапки сделан через img потому что его нужно растянуть на всю ширину окна, а background-size работает не во всех браузерах.

Как можно было бы поступить иначе: использовать модный плагин jquery или же увести картинку в равномерный фон, который можно продолжать бесконечно.

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

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

Моё решение: сделать тэгом <img> — меньшее из зол.

Табличка же там всего лишь для вертикального центрирования и гибкого растягивания.

Содержимое ячеек этой таблицы может меняться, там могут оказаться и блочные элементы. Единственный разумный вариант центрирования — использовать таковую возможность ячеек таблиц. Альтернатива — задание блокам display: table-cell. Но во-первых это не работает должным образом в некоторых старых браузерах, а во-вторых, таблица честнее

[alexandr_v-vich]

Фон шапки сделан через img потому что его нужно растянуть на всю ширину окна, а background-size работает не во всех браузерах.

А почему не background-color?…

[wildhind]

background-color не рисует картинку

[troll]

Табличка же там всего лишь для вертикального центрирования и гибкого растягивания.

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

[alexandr_v-vich]

wildhind,

Так а что там картинного. Или я не туда смотрю… Там же, вроде, просто градиент стоит, затем линия блеска (ну светлая тонкая полоска) и тень (только она не ровная, без картинки, конечно никак). Причём сама жёлтая полоса с градиентом отдельной же картинкой стоит…

Или это больше запары на всё это?

[wildhind]

Табличка же там всего лишь для вертикального центрирования и гибкого растягивания.

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

Всего, конечно, не предусмотришь, но это следовало предусмотреть, спасибо.

Поправлено, хотя и грязным хаком. В чём такое наблюдалось? Хочу убедиться, что косяк ушёл.

[troll]

Chrome 18.0.1025.151 m / Win7 x64

[wildhind]

wildhind,

Так а что там картинного. Или я не туда смотрю… Там же, вроде, просто градиент стоит, затем линия блеска (ну светлая тонкая полоска) и тень (только она не ровная, без картинки, конечно никак). Причём сама жёлтая полоса с градиентом отдельной же картинкой стоит…

Или это больше запары на всё это?

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

Кроме того у шапки есть три состояния в зависимости от положения прокрутки страницы. В идеале должно быть быть четыре, чтобы большая шапка складывалась в маленькую более плавно, но у меня не получилось реализовать задуманное. Просто так не видно, но если присмотреться, то заметно, что после того, как шапка наконец сложилась в узкую полоску, фон прыгает вниз. Сейчас уже прошло некоторое время, деталей не помню, почему именно не получилось, но основная загвоздка в том, что position:fixed и overflow:hidden не дружат.

Chrome 18.0.1025.151 m / Win7 x64

Тогда я вас попрошу посмотреть ещё раз. Windows у меня при себе, к сожалению, сейчас нет.

[troll]

Теперь нормально.

[buddah]

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

Почему-то очень долго открываются фото из этой самой Медиагалереи. Наверное хостинг тупит.

При ховере на любой из спецификаций появляется какая-то превьюшка. Всегда одна и та же.

Хром, Вин7.

У вас 4 css-файла. Их можно объединить, нагрузка на сервер падает.

Зачем айдишники использовать? Если для программирования, то не лучше ли задавать отдельно класс и айди элементам? Класс для css, id - js.

Но это спорно, я знаю.

А вообще хорошо, редко такие сайты в этом разделе проскакивают.

[wildhind]

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

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

Почему-то очень долго открываются фото из этой самой Медиагалереи. Наверное хостинг тупит.

Нет, этот вопрос уже поднимали, не хостинг тупит, картинки такие. Косяк уже известен, контент-менеджеру заказчика задача поставлена.

При ховере на любой из спецификаций появляется какая-то превьюшка. Всегда одна и та же.

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

Хром, Вин7.

У вас 4 css-файла. Их можно объединить, нагрузка на сервер падает.

Не соглашусь.

Видится мне крайне маловероятным, что этот сайт будет испытывать предельные нагрузки. Это узкая тематика, посещаемость предвидится небольшая, сервер сильно напрягать не будем. При этом 4 css-файла имеют смысл: один — оформление сайта, а ещё три — стили использованных в разработке jquery-плагинов. Более того, в основном css-файле переопределяются стили, определённые в css плагинов. Это тоже противоречит идее тотальной оптимизации, но сделано вполне осознанно. Предположим, что впоследствии в ходе поддержки и развития сайта возникла необходимость обновить версию плагина. Идея понятна?

Зачем айдишники использовать? Если для программирования, то не лучше ли задавать отдельно класс и айди элементам? Класс для css, id - js.

Но это спорно, я знаю.

а так они и используются, именно по такому принципу. Я с этим принципом скорее согласна.

А вообще хорошо, редко такие сайты в этом разделе проскакивают.

Только от нас и зависит, какие сайты проскакивают в этом разделе. Давайте сообща улучшать картину.

Теперь нормально.

Спасибо. Мелочь, а пусть лучше будет порядок.

[wildhind]

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

Что скажете теперь, коллеги?

[paracelso]

Seo здесь никогда не будет конечно, но сделано круто.

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

Edited April 14, 2012 by paracelso

[wildhind]

Seo здесь никогда не будет конечно

Простите, а почему?

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

На вопрос "зачем" отвечает недостаточно четко

ну ведь понятно же, что это ещё рыба Там будет нормальный текст, ориентированный на клиента.

кнопку "заказать" надо выделить

да, главная кнопка на сайте. Но она и так везде, и так яркая и крупная. Куда ж ещё выделять?

это внатуре круто

Спасибо. Это и интересно. Хорошие интересные сайты делать намного приятнее, чем типовые безликие.

[kir]

Восторга paracelso не разделяю, однако, мне сайт тоже нравится.

В общем, впечатление приятное, но многие неудачные мелочи его портят и удаляют от идеала. Сравните с apple.com (для развития полезно же ставить себе высокую планку, не так ли ; ) — там неудачных мелочей немного и сайт выглядит потрясающе.

Итак, мелочи, которые портят ваш сайт:

1. Для контролов и ссылок недостает состояния active.
   
2. [Пункты меню] Жирность выглядит грубо. Сравните с bold-ом у вас и без bold-а у apple.com:
   
   
3. [Телефонный номер]
   
   • Шрифт с засечками сильны выбивается из общего визуального ряда и притягивает к себе внимания больше, чем логотип и меню.
     
   • "7(495)" -> "(+7 495)".
     
   • "7(495)" сейчас выделено сильнее, чем основной номер телефона, и, учитывая, что в шапке на телефон идет самый большой акцент, получается, что больше всего внимания в шапке привлекается к "7(495)". Хотя, по логике, должно-то быть наоборот.
     Можно, например, для "7(495)" уменьшить размер шрифта и сделать одного цвета с основным номером; или не уменьшать размер, сделать одного цвета с основным номером, но добавить полупрозрачность.
     

[*]Иконка слева от "Перейти на canesugar.ru" неоправданно жирная.

[*]При переходе шапки в фиксированное меню блик на фоне съезжает вниз и получается, что в пунктах меню блик занимает полкнопки, а на фоне блик оказывается намного ниже, чем был.

[*]Две тени слегка грязноваты:

[*][Большие вызженные иконки]

• Мне кажется, что они выглядели бы лучше, если б были на 10—20% поменьше.
  
• У смайлика в пункте "Всепогодная конструкция..." глаза белые.
  
• У большинства иконок тень вызвана источником света из верхнего левого угла, а у иконок для пунктов "Прочность купола..." и "Быстрое возведение..." тень образуется от источника света из нижнего левого угла.
  
  
• Иконки глаза (слева от "И еще 12 причин выбрать геокупол") в обычном состоянии и при hover лучше сделать спрайтом.
  

[*]Графические элементы с тенями имеют три разных не сочетающихся источников света.

[*]Картинки в разделе "ГЕОДЕЗИЧЕСКИЙ КУПОЛ" переключаются с помощью клавиш [Стрелка влево], [Стрелка вправо]. А вот для увеличенных картинок в "МЕДИАГАЛЕРЕЯ" эти клавиши почему-то не работают : ) — вместо них картинки сменяются клавишами [Стрелка вверх], [Стрелка вниз].

[*]Состояние hover есть для всех ссылок и контролов, кроме:

• Кнопок "Присоединяйтесь к нам".
  
• Ссылок "Почему?" в "СПЕЦИФИКАЦИИ".
  

[*]"Вы", "Вам", "Ваше" и т. д. следует писать с маленькой буквы, если только это слово не в начале предложения.

[*][Типографика]

• Нехватает неразрывных пробелов после предлогов и перед знаками тире — прогоните тексты через Типограф.
  
• "30.0м²" -> "30 м²".
  
• "6.8 метра" -> "6,8 м", "3.86 метра" -> "3,86 м".
  
• "22000.0 руб/неделя" -> "22 000 руб./неделя", "24000.0" -> "24 000".
  
• "кб" -> "КБ", "мб" -> "МБ".
  
• "2006-2011" -> "2006—2011".
  
• "продажа и изготовление..." -> "Продажа и изготовление...".
  

[*]Битая ссылка "/media/img/domes/docx.png" на иконку Word-а.

[Vin]

Seo здесь никогда не будет конечно, но сделано круто.

Простите, а почему?

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

Paracelso свято верит в желозобетонную связь семантики вёрстки и SEO.

Нередко «SEO-оптимизаторы» рекомендуют убрать с главной страницы оформление логотипа как заголовка первого уровня, чтобы прописать в заголовок что-нибудь «релевантное». Иногда рекомендуют удалить «комментарии», указывая на блок… условных комментариев (Conditional Comments). Иногда, увидев грамотную вёрстку, таращат глаза и просят логотипу, выполненному как заголовок, прописать alt-текст, а когда объясняешь, что alt — атрибут _изображения_, просят заменить заголовок на изображение. Весёлые ребята — эти «SEO-оптимизаторы».

[kir]

Запамятовал добавить: favicon забыли сделать.

[wildhind]

Запамятовал добавить: favicon забыли сделать.

Кстати, да, косяк. Спасибо.

[Viper]

Добрый день, "вставлю и свои пять копеек" по данному проекту:

1. Будет плюсом, если вы определите "язык" сайта - например, <html lang="ru">. Это придает положительный эффект не только для мульти-язычных сайтов...

2. ~93 запроса при загрузке Главной странице... Очень много, какой бы сайт это не был... Особенно важно, если это Главная станица!

3. Не правильная структура заголовков. Частично...

4. Много ошибок валидации. По большому счету, отсутствие атрибутов Alt в изображениях.

5. Есть, возможно много, не нужных тегов ( мельком глянул... ). Например, ссылка "Перейти на canesugar.ru"

6. Много фоновых изображений, вставленны с помощью Img. Возможно, вы решили, что "это тут нада"... та и не критично.., но уверен - есть оптимальней решения... Но если семантика не в приоритетах, то проблемы нету. Но жалко, однако, семантику )

П.С. Выбрал только некоторые "поверхностные", ИМХО, проблемы. Если есть интерес - уточню, обьясню, кину пруф... Придераться не стал, понимаю... Но в целом сайт симпатичный и сделан "с душой" ^__^

П.П.С. И да, если об этом уже писали, сорри, не заметил )

[Nanto]

kir, ну с грамматикой Вы, конечно, погорячились...

[wildhind]

Добрый день, "вставлю и свои пять копеек" по данному проекту:

Спасибо.

1. Будет плюсом, если вы определите "язык" сайта - например, <html lang="ru">. Это придает положительный эффект не только для мульти-язычных сайтов...

зачем?

2. ~93 запроса при загрузке Главной странице... Очень много, какой бы сайт это не был... Особенно важно, если это Главная станица!

что в этом плохого, кроме того, что это не по-пацански?

3. Не правильная структура заголовков. Частично...

конкретнее пожалуйста.

4. Много ошибок валидации.

на что они влияют?

По большому счету, отсутствие атрибутов Alt в изображениях.

не проверяла на валидность, но в используемой спецификации alt не является обязательным атрибутом.

Опять же: зачем он нужен, когда он не нужен?

5. Есть, возможно много, не нужных тегов ( мельком глянул... ). Например, ссылка "Перейти на canesugar.ru"

хм… а заказчик, значит, ошибся, попросив разместить эту ссылку?

6. Много фоновых изображений, вставленны с помощью Img. Возможно, вы решили, что "это тут нада"... та и не критично.., но уверен - есть оптимальней решения...

Догадываюсь, о чём вы. Фон шапки, подсветка меню в спецификациях. Вот мне тоже кажется, что есть решения лучше. Вы можете их предложить? У меня просто профессионального уровня не хватило решить задачу более изящно.

Но если семантика не в приоритетах, то проблемы нету. Но жалко, однако, семантику )

а если не бросаться громкими словами, то в чём проблема?

П.С. Выбрал только некоторые "поверхностные", ИМХО, проблемы. Если есть интерес - уточню, обьясню, кину пруф...

Интерес есть. Мнение изложено, но не обосновано. Ждём обоснования.

Придераться не стал, понимаю... Но в целом сайт симпатичный и сделан "с душой" ^__^

П.П.С. И да, если об этом уже писали, сорри, не заметил )

[troll]

не проверяла на валидность, но в используемой спецификации alt не является обязательным атрибутом.

Это в какой? В HTML5:

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.

Иногда можно его не писать, но не в вашем случае.

[wildhind]

Иногда можно его не писать, но не в вашем случае.

обоснования?

С позиций здравого смысла, пожалуйста.