Jump to content
  • Sign Up

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


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 2
Link to comment
Share on other sites

  • 3 years later...

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

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

Link to comment
Share on other sites

  • 5 months later...

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

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...
  • 9 years later...

По поводу первого пункта: "CSS+(x)HTML" это что? Я просто начинающий... Чтобы не офтопить - где-нибудь на форуме есть информация на эту тему? Буду признателен за ссылку. В Яндексе не заблокирован, но хотелось бы на этом форуме почитать, так как нравится здешний фидбэк и атмосфера. 

Link to comment
Share on other sites

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

  • Обсуждения

    • Switch74
      .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
    • Switch74
      все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
    • Иван Евгеньевич
      Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи,  есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом      <div class="tabs">              <input type="radio" name="tab-btn" id="tab-btn-1" value="">              <label for="tab-btn-1">Свадьба</label>              <input type="radio" name="tab-btn" id="tab-btn-2" value="">              <label for="tab-btn-2">Мужу</label>              <input type="radio" name="tab-btn" id="tab-btn-3" value="">              <label for="tab-btn-3">Жене</label>              <input type="radio" name="tab-btn" id="tab-btn-4" value="">              <label for="tab-btn-4">Партнеру</label>              <input type="radio" name="tab-btn" id="tab-btn-5" value="">              <label for="tab-btn-5">Коллекции</label>              <input type="radio" name="tab-btn" id="tab-btn-6" value="">              <label for="tab-btn-6">Редкость</label>                            <div id="content-1">                <img src="images/Kolca1.png" alt="Кольца" class="kolca">                <p class="kolca11">Кольца</p>              </div>              <div id="content-2">                Содержимое 2              </div>              <div id="content-3">                Содержимое 3              </div>              <div id="content-4">                Содержимое 4              </div>              <div id="content-5">                Содержимое 5              </div>              <div id="content-6">                Содержимое 6              </div>     </div>   CSS code .tabs {   top: 1100px;   position: absolute;   left: 600px;   font-size: 50px; } .tabs>input[type="radio"] {   display: none; }   .tabs>div {   /* скрыть контент по умолчанию */   display: none;   border: 1px solid #e0e0e0;   padding: 10px 15px;   font-size: 16px; }   /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{   display: block; }   .tabs>label {   display: inline-block;   text-align: center;   vertical-align: middle;   user-select: none;   background-color: #f5f5f5;   border: 1px solid #e0e0e0;   padding: 2px 8px;   font-size: 16px;   line-height: 1.5;   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;   cursor: pointer;   position: relative;   top: 1px;     font-family: 'Gilroy';   font-style: normal;   font-weight: 500;   font-size: 18px;   line-height: 21px;   text-align: center;   letter-spacing: 0.1em;   text-transform: uppercase; }   .tabs>label:not(:first-of-type) {   border-left: none; }   .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; }  
    • Наташа
      Сегодня index.html неожиданно начал загружаться, но некорректно. Ссылки на веб-страницы не работают, но я думаю, что я сама указала неправильный путь к файлам, сегодня буду это исправлять. Ещё почему-то отображаются не все иллюстрации, а те что отображаются - все перепутаны. Пробовала открывать иллюстрации на самом сервере, но и там почему-то название картинки одно, а картинка совсем другая. Адрес сайта http://j90365fr.beget.tech/  
    • Switch74
      адрес сайта можно по какому адресу грузится css?  
×
×
  • 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