Jump to content

Прежде чем выставлять сайт на обсуждение...


Vlad
 Share

Recommended Posts

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

1. Работа должна быть доделана, а не представлять собой пустой шаблон.

2. Если сайт работает лишь частично, то работу лучше не выставлять вообще, либо заранее отметить, на что обратить внимание.

3. Указывайте, что именно вы желаете оценить: дизайн, верстку, код, юзабилити, общее впечатление и др. В противном случае обсуждение может пойти совсем в другом русле, чем вам бы хотелось.

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

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

6. Критика никому не нравится, но если она по существу, относитесь к ней как способу улучшить свою работу.

7. Выставляйте только один сайт на обсуждение. Если у вас несколько работ, создайте для каждой работы отдельную тему.

Пример выставления работы

Сайт http://merjevich.ru

Фотографии Владимира Сергеевича Мержевича, личные и из его архива.

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

Link to comment
Share on other sites

Рекомендации относительно верстки

1. теги font, b, hr, br, center и подобные устарели. Всех их можно заменить более элегантными конструкциями CSS+(x)HTML. То же относится и к некоторым атрибутам вроде align, nowrap, hspace, vspace и т.д. Т.е., если чтото можно вынести в CSS и при этом код становится более логичным, удобочитаемым и меньше, то так и делайте. Подробнее...

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

strong вместо b

em вместо i и т.д.

Кроме того используйте такие теги как code, samp и т.д.

Во-первых это логично.

Во-вторых практично для задания стилей с помощью CSS

И наконец это хорошая поисковая оптимизация Подробнее...

3. Таблицы (table) используются только для табличных данных. Исключение составляют те случаи, когда, слоями (дивами) просто не возможно сделать некоторые вещи, или когда это более разумный способ, но в 95 из 100 случаев такая необходимость отсутствует.

4. Форматируйте правильно CSS-код. Некоторые верстальщики полагают, что написав все в одну строчку они таким образом оптимизируют CSS-код. На самом деле это не так. Выигрыш от этого не большой, но вот код становится неудобочитаемым и легко запутаться. Если Вы считаете, что я не прав, то взгляните на CSS популярных и много-посещаемых порталов. Например http://www.i.ua/

5. Не используйте CSS-хаки. Они не надежны, это не валидно и это не красиво. В 99 из 100 случаев достаточно использования условных комментариев для IE. Причем в 99% случаев достаточно конструкции вида

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie6.css">
<![endif]-->

Т.е. отдельные стили для ИЕ ниже 7 версии.

6. Указывайте правильный доктайп. При неправильном (или отсутствующем) доктайпе ваша верстка будет очень отличаться в разных браузерах (Quirks mode). Подробнее...

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

Валидаторы: Онлайн валидатор (x)HTML, Онлайн валидатор CSS

Полезные плагины для Firefox: Валидация CSS, Валидация (x)HTML

Существуют также "отладчики":

Для Opera - Opera Dragonfly (как сделать оффлайновой)

Для IE - IE Developer Toolbar

Для Firefox - Firebug

8. Так лучше не верстать

<li>
<a href="http://google.com/">
<span>
</span>
<span>
<p class="Stylz21">
<span class="Stylz21">
</span>
</p>
</span>
</a>
</li>

<td class="menuplace">  Отступ слева</td>

и т.п.

9. Стили должны быть вынесены в отдельный файл(ы) (или в крайнем случае тег <style>). Использование атрибута style="" крайне нежелательно.

10. Отключаем картинки. Все ли можно прочесть? Можно ли получить информацию, которую ваш сайт хочет донести посетителю? Доступна ли навигация? А теперь отключаем стили. Оцениваем собственную верстку. Пробуем различные комбинации вышеприведенного.

10.1. Для важных (те которые служат для навигации, фотографии и т.д.) картинок должен указываться атрибут alt="" с соответствующим описанием

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

10.3. Должно быть правильное логическое разбиение структуры страницы.

10.4. Навигационное меню желательно делать не нумерованным списком (ul)

11. Удобно использовать следующую конструкцию в начале CSS-файла

ul,ol {list-style: none;}
ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}
img {border: 0;}

12. Оптимизируйте графику. Этим вы сэкономите трафик и время посетителя.

13. Проверяйте верстку в разных браузерах (Самые важные на данный момент браузеры это Internet Explorer 6, Internet Explorer 7, Firefox 2.x, Opera 9.x, Safari). Подробнее...

Пример хорошей (с моей точки зрения верстки)

http://www.fasthtml.ru/clients/omitrans/index.html

Вы также можете поискать хорошие примеры самостоятельно (просматривайте код понравившыхся Вам сайтов, популярных сайтов, т.е. смотрите как верстают другие).

Плохие примеры не привожу. Их в сети достаточно.

Рекомендуется к прочтению

Оценка качества верстки

70 идей экспертов для улучшения CSS кода

Доступность сайтов для пользователей мобильных устройств

Making Small Devices Look Great

HTML ? XHTML ? XML

XHTML Strict - элементы и атрибуты, которые не надо использовать

Азбука веб стандартов

P.S. Это всего лишь рекомендации. 100% следовать им не стоит и скорей всего даже не получится. Но это идеал к которому необходимо стремится.

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

По поводу правила, 30 сообщений перед тем как создать свою тему. А нельзя сделать исключение?

Просто не во всех темах "Обсуждение работ" могу что то посоветовать или оценить правильно. И получается я буду очень долго эти 30 сообщений набирать, а хотелось бы сейчас выложить на оценку свой первый сайт.

Link to comment
Share on other sites

  • 5 months later...

1.1 Кодинг: Начинаем

второй пункт

Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.

47-я страница книги самоучителя css расположенной здесь на сайте (Здесь не нашел...или может не там искал? )

«Обнуление стилей» (см. пример 1.51) прививает у разработчика дурную манеру верстки. Вместо того чтобы

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

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

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

опять же приводит к повышению нагрузки на браузер и замедлению его работы

Объясните мне кто прав.

Или может это не одно и тоже? И может мне стоило написать в другую тему? :)

Edited by Влaд
Link to comment
Share on other sites

Сбрасывать надо только то, что надо сбрасывать, вот и весь секрет. А то обычно берут мейеровскую "рыбу" и втыкают на сайт. А там, например, сбрасывается vertical-align для блочных элементов, у которых вообще нет такого свойства.

Edited by Gaspode
Link to comment
Share on other sites

  • 3 weeks later...

Сайт http://merjevich.ru

Фотографии Владимира Сергеевича Мержевича, личные и из его архива.

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

s_1326048628_9139403_be5547265c.jpeg

Link to comment
Share on other sites

  • 4 weeks later...

Сбрасывать надо только то, что надо сбрасывать, вот и весь секрет. А то обычно берут мейеровскую "рыбу" и втыкают на сайт. А там, например, сбрасывается vertical-align для блочных элементов, у которых вообще нет такого свойства.

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

Link to comment
Share on other sites

  • 2 months later...

Рекомендации относительно верстки

...

Не помешало бы обновить список этих рекомендаций. Много чего изменилось за эти года ;) Или хотя бы подобавлять Упдейты-уточнения. ИМХО

Link to comment
Share on other sites

Рекомендации относительно верстки

...

Не помешало бы обновить список этих рекомендаций. Много чего изменилось за эти года ;) Или хотя бы подобавлять Упдейты-уточнения. ИМХО

Простите, а что принципиально изменилось, кроме актуальных версий браузеров?

Сами рекомендации пусть и не бесспорны, но актуальности и практической ценности не потеряли.

Link to comment
Share on other sites

Простите, а что принципиально изменилось, кроме актуальных версий браузеров?

Сами рекомендации пусть и не бесспорны, но актуальности и практической ценности не потеряли.

1-2. полностью(почти) стоит пересмотреть из-за HTML5, в основном.

4. стоит более подробно о причинах и выгодах написать этого написать. И примеры есть куда солиднее ;) Возможно, вспомнить тут или отдельным советом про "верстку независимыми блоками" - часть идеологии БЭМ. ИМХО Или я не правильно понял этот пункт...

6. устарел

10. обновить следует

11. Есть куда более полезные "ресеты"

12. Как? Сейчас об этом можно куда больше написать и смысла в этом уже больше, чем было при написании этих рекомендаций.

13. обновить

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

П.П.С. Это не критика - это пожелание/предложение.

Edited by Viper
Link to comment
Share on other sites

  • 6 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Оценить стоимость сложно. Причины - это не ТЗ, а хотелки заказчика. Для начало нужно написать грамотное ТЗ, по уму еще сделать прототипирование, выбрать CMS, отрисовать дизайны страниц и сверстать их, а так же подобрать контент. = это все закладывается в стоимость проекта. Не маловажным фактором являются сроки. Как пример простой и быстрой реализации проекта предлагаю вам отрисовать карту в формате SVG (преимущество - векторный формат, полный адаптив без геморроя) c присвоением ID к каждому объекту и управлять ими через CSS и JS... Порфтель - http://dev.pro100max.ru/  
    • Вы для .item строго задаете ширину. вот она и остается неизменной. Если хотите ограничить ширину - пишите max-width
    • Можно)) Iframe с данными <iframe src="https://www.youtube.com/embed/2lN-dbQ7tSI" allow="accelerometer; clipboard-write; encrypted-media; gyroscope;" style="background: #FFFFFF;" src="http://zingaya.com/widget/9d043c064dc241068881f045f9d8c151" frameborder="0" height="400px" width="100%"></iframe> Iframe без данных <iframe style="background: #FFFFFF;" src="http://zingaya.com/widget/9d043c064dc241068881f045f9d8c151" frameborder="0" height="400px" width="100%"></iframe>  
    • Есть сайт с видеоконтентом. Стандартный код плеера по умолчанию выводится через iframe на всех страницах сайта в одном и том же месте (по ID материала). Сразу говорю - да, сайт с фильмами, контент пиратский, надеюсь в 21-м веке это никого не удивит. Дальше по теме - бывает так, что у видеобалансера нет моего фильма и соответственно на моем сайте вместо рабочего плеера выводится пустое место. Вопрос: можно ли реализовать подложку под iframe в виде текста, типа "Видео отсутствует" и т.п.  Я пытался создать блок div с текстом на темном фоне с размерами равным плееру, но на рабочих фильмах текст "просвечивается наружу" поверх блока iframe. Можно ли реализовать подложку под блок iframe, которая не была бы видна при наличии плеера и наоборот появлялась при его отсутствии средствами HTML и CSS?
    • Спасибо большое. А такой вопрос, можно ли это сделать с помощью display : inline-block? Просто в интернете видел, что с помощью него делают, вот интересно, почему у меня не получается.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy