Оцените верстку

[skygazer]

Очередной макетик сверстал. На этот раз резина. Посмотреть можно тут.

Конструктивная критика приветствуется.

Edited February 29, 2012 by skygazer

[skygazer]

Я так понимаю, все отлично?

[buddah]

А почему ограничений нет на макс ширину для всего сайта? Или так задумано?

Почему везде img используется для оформления блоков? img это контент, а оформление через background: url('');

[skygazer]

Не всюду. Просто мне так удобно было, чтобы не создавать лишние слои.

Какой параметр max-width нужно по-твоему указать?

[buddah]

Не всюду. Просто мне так удобно было, чтобы не создавать лишние слои.

Какой параметр max-width нужно по-твоему указать?

Я бы больше чем 1400 не делал.

[Быколай]

Имхо при ширине 1400 страницу уже читать тяжеловато бывает. Зависит от макета конечно, надо смотреть.

[buddah]

Имхо при ширине 1400 страницу уже читать тяжеловато бывает. Зависит от макета конечно, надо смотреть.

Твоя правда, это самый-самый максимум для данного макета. Здесь на моем 1366 нормально все читается.

[MiksIr]

Максимальную ширину можно только тексту задать, что бы удобнее читать было, а все остальное оставить - Смотрю на 1920, вполне терпимо

А вот что не понравилось:

Отсуствие шапки. Макет сразу разделен на лево-право. По опыту - создает проблемы при жизни сайта (т.е. последующие "хотелки")

Как оформлено меню с картинками, обычно все же такое списком делают.

Почему h2? Где h1? Сеошники уже рвут волосы.

Скажите, а где та школа, которая учит верстальщиков убирать подчеркивание по наведению? А особых отличников - наоборот, показывать подчеркивание. С удовольствием ее бы уничтожил.

Своих верстальщиков учу никогда не привязвать стили к div/span именам тегов - только классы. Опять же - опыт. Ибо при доработках часто требуется добавить новый блок/span и тут начинаются проблемы, что на нем уже есть стили. Причем, часто это добавляет не верстальщик, а JS программист в качестве маркеров. Создает лишние проблемы.

<p class="border"></p> - почему p?

Где активные пункты меню? Не нарисовали или вы забыли? Если не нарисовали - должны первом делом спросить дизайнера об этом еще до верстки.

[skygazer]

Скажите, а где та школа, которая учит верстальщиков убирать подчеркивание по наведению? А особых отличников - наоборот, показывать подчеркивание. С удовольствием ее бы уничтожил.

Не знаю Это я так по собственному хотению сделал, чтобы хоть какая-то видимость при наведении была. Лучше чем ничего все-таки.

Где активные пункты меню? Не нарисовали или вы забыли? Если не нарисовали - должны первом делом спросить дизайнера об этом еще до верстки.

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

[MiksIr]

Лучше чем ничего все-таки.

Почему же ничего. С древних времен придумали подсвечивать цветом.

[skygazer]

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

В ТЗ насчет ссылок ничего сказано не было.

[MiksIr]

Ну это просто "наболевшее". Убирание подчеркивания еще не так страшно. Страшнее когда начинают делать наоборот - без подчеркивания, показывая его по наведению. Наподчеркнутые ссылки - это ужасно с точки зрения интерфейса.

[buddah]

Ну это просто "наболевшее". Убирание подчеркивания еще не так страшно. Страшнее когда начинают делать наоборот - без подчеркивания, показывая его по наведению. Наподчеркнутые ссылки - это ужасно с точки зрения интерфейса.

Да что ж так все больны Лебедевым то? Ну кто, кто сказал, что подчеркивание обязательно должно быть в интерфейсе? Кто сказал, что интерфейс должен быть именно таким и никак иначе? Зачем эта шаблонность? А если я хочу выделить ссылку другим шрифтом, цветом, увеличить\уменьшить размер её шрифта, да еще и поднять её базовую линию, с фига ли мне ваше подчеркивание нужно?

Или, допустим, заголовок поста, которому задан другой цвет, да еще и уголки скругленные, да еще и тенюшка.

Подчеркивания имеют право быть, но говорить так категорично - большая ошибка.

Не поймите превратно, это не эмоции. Подчеркивание - это холивар. Нет единственно правильного решения на все случаи. Не учите этому новичков, они пока еще не в состоянии фильтровать слова старшего товарища, тем-более представителя хорошей, судя по всему, московской веб-студии.

[MiksIr]

Это не холивар, это привычный для людей элемент интерфейса. Когда на дороге рисуют зебру - значит тут можно переходить дорогу. Когда подчеркнутый текст - значит это ссылка. Не нужно заставлять человека решать ребусы на сайте куда можно нажать, а куда нет, водя мышкой. И Лебедев тут непричем, скорее уж Купер и Раскин.

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

Наверняка объясняя человеку который первый раз видит сайты, что тут можно кликать мышкой и получать другие страницы, вы скажете - "видишь подчеркнуто? можно кликнуть"... и тут этот ваш приятель попадает на сайт дизайнера - оригинала... и уходит с него, ибо там нет ссылок

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

Edited March 1, 2012 by MiksIr

[skygazer]

аверняка объясняя человеку который первый раз видит сайты, что тут можно кликать мышкой и получать другие страницы, вы скажете - "видишь подчеркнуто? можно кликнуть"... и тут этот ваш приятель попадает на сайт дизайнера - оригинала... и уходит с него, ибо там нет ссылок

Мне кажется убранное подчеркивание при наведении ничего не портит. Где ссылки понятно же.

[Анна]

Ой как согласна с buddah!

Это не холивар, это привычный для людей элемент интерфейса.

Мир ИТ развивается оочень быстро, наши пользователи растут также быстро, новое поколение(молодое)уже не нуждается в подсказках(подчеркн. ссылки) которые просто раньше просто были необходимы. Они пока нужны для более позднего поколеня, кто поздно начал общение с интернетом. А вот разработать дизайн так, чтобы интуитивно было понятно где кликать - это как раз тема над которой дизайнер должен поломать голову.

[MiksIr]

Мир ИТ развивается оочень быстро, наши пользователи растут также быстро, новое поколение(молодое)уже не нуждается в подсказках(подчеркн. ссылки) которые просто раньше просто были необходимы. Они пока нужны для более позднего поколеня, кто поздно начал общение с интернетом.

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

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

А в чем смысл? Ну т.е. все признают, что подчеркивание - понятно и доступно. А потом заявляют - давайте обойдемся без подчеркивания, а дизайнер пускай подумает, как нам выкрутиться. Мне кажется, что нормальный дизайнер справедливо решит, что над ним издеваются. Тем более, что внятно никто так и не сможет ему объяснить "а зачем от подчеркивания то отказываться". Ну кроме детсадовских "а так не модно".

[Анна]

MiksIr, естественно никто никого не списывает, и я не говорю об абсолютном отказе от подчеркивания (всему свое место и свое время). Уже многие сайты давно отказальсь от подчеркивания в главном меню и очередь за остальным. Это нормальная эволюция, котрая должна быть во всем и везде(ну не может быть человек долго консервативен непрерывный промежуток времени). Ведь когда вместо переходных дорожек "зебра" построили подземные переходы и поставили рядом соответствующий знак, ни у кого не возникло вопроса, а что это такое?

[MiksIr]

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

А даже и не в вопросах дело. Эволюция? Я уже спрашивал, повторюсь еще раз - в чем преимущества этого усовершенствования. Тем более если вы завете это эволюцией.

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

[Searcher]

Полностью согласен с MiksIr.

AnnaP, вы же, как мне кажется, все слишком обобщаете.

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

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

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

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

Получив посетителя нужно ведь еще и удержать его. Конечно, помимо интересного содержания сайта (что в любом случае первично), это можно сделать какой-то необычной но удобной фишкой интерфейса. Ключевое слово - удобной. И тут надо мыслить рационально.

Это все, конечно, кратко и упрощенно.

[mishka]

Максимальную ширину можно только тексту задать, что бы удобнее читать было, а все остальное оставить - Смотрю на 1920, вполне терпимо

А вот что не понравилось:

Отсуствие шапки. Макет сразу разделен на лево-право. По опыту - создает проблемы при жизни сайта (т.е. последующие "хотелки")

Как оформлено меню с картинками, обычно все же такое списком делают.

Почему h2? Где h1? Сеошники уже рвут волосы.

Скажите, а где та школа, которая учит верстальщиков убирать подчеркивание по наведению? А особых отличников - наоборот, показывать подчеркивание. С удовольствием ее бы уничтожил.

Своих верстальщиков учу никогда не привязвать стили к div/span именам тегов - только классы. Опять же - опыт. Ибо при доработках часто требуется добавить новый блок/span и тут начинаются проблемы, что на нем уже есть стили. Причем, часто это добавляет не верстальщик, а JS программист в качестве маркеров. Создает лишние проблемы.

<p class="border"></p> - почему p?

Где активные пункты меню? Не нарисовали или вы забыли? Если не нарисовали - должны первом делом спросить дизайнера об этом еще до верстки.

Плюсанул этот пост по всему кроме h1 и подчеркивания.

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

Както у нас тут с Максом стычка произошла по этой теме.

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

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

Вобщем вставите в контент h1 или нет, но застайлить нужно.

Подчеркивание.

Если все дизайнеры будут рисовать для линок ховерное состояние, то конечно верстальщик это учтет. Но мне за несколько лет попалось пару таких макетов. А если я буду сидеть цвета придумывать, то боюсь получим что-то типа салатовые буковки на желтом фоне . Поэтому просто убираю подчеркивание. И ничего плохого в этом нет. Да и людям с проблемами зрения это будет более наглядным.

Еще вопрос: неужели людям с проблемами зрения легче читать белый текст на черном экране? У меня с нормальным зрением от этого глаза слезятся через пару минут.

[psywalker]

mishka,

по всему кроме h1

Медведь, т.е. h1 для лого всё таки хреново? Расскажи об этом поподробнее плз.

И чем предлагаешь заменять?

[buddah]

Searcher, я согласен по поводу подчеркивания, если ссылка стоит в тексте. Но везде и всегда - это как-то уж слишком. Меня не смутил совет "подчеркивать ссылки", меня смутила его его категоричность. Посмотрите на http://www.smashingmagazine.com/ Изначально подчеркивание стоит только у ссылок в тексте, и то дизайнеры старались сделать его незаметным.

[MiksIr]

Searcher, я согласен по поводу подчеркивания, если ссылка стоит в тексте. Но везде и всегда - это как-то уж слишком. Меня не смутил совет "подчеркивать ссылки", меня смутила его его категоричность. Посмотрите на http://www.smashingmagazine.com/ Изначально подчеркивание стоит только у ссылок в тексте, и то дизайнеры старались сделать его незаметным.

Никакой категоричности. Если элемент имитирует другой известный кликабельный элемент интерфейса, в частности кнопку - можно и без подчеркивания. И еще куча других исключений. Только приниматься одни должны осознанно и исходя не из того, что "подчеркивание надоело, хочу не как у всех", а исключительно с точки зрения использования интерфейса.

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

Т.е. если уж не подчеркиваете ссылки, а выделяете их иначе - цветом, там... ну и хрен бы с ним. Но зачем мешать все в одну кучу? Это уже как нарочно людей путать.

mishka,

по всему кроме h1

Медведь, т.е. h1 для лого всё таки хреново? Расскажи об этом поподробнее плз.

Можно я?! )))

Из небольшого опыта общения с ашмановцами про заголовки вынес следующее: h1 должен быть на заголовке страницы (т.е. там должен быть текст, причем коррелирующий с текстом страницы), и прочими заголовками лучше не злоупотреблять... ну максимум несколько h2, но вообще чем больше разных h* будет налеплено - тем хуже, это начинает компрометировать страницу. Так что h1 на лого хреново... если только для главной страницы оставить

Edited March 2, 2012 by MiksIr

[Searcher]

Searcher, я согласен по поводу подчеркивания, если ссылка стоит в тексте. Но везде и всегда - это как-то уж слишком. Меня не смутил совет "подчеркивать ссылки", меня смутила его его категоричность. Посмотрите на http://www.smashingmagazine.com/ Изначально подчеркивание стоит только у ссылок в тексте, и то дизайнеры старались сделать его незаметным.

В меню крайне редко подчеркиваются ссылки - это тоже уже правило. Заголовки новостей, картинки - не подчеркнутые ссылки - тоже правило. И т.п.

А в приведенном вами примере - исключение из правил. Цвет ссылки ни с чем не перепутаешь и в тексте она контрастна. Не мгновенно, но быстро понимаешь, что это ссылки. Однако, есть ограничения в такой ситуации: такого цвета, и даже близкого оттенка больше не должно быть на сайте.

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