На JoomlaForum есть раздел «Мой сайт на Joomla», который я периодически просматриваю. Глядя на работы новичков я, честно говоря, прихожу в ужас. Большинство работ сделаны по советам «10 грубейших ошибок при создании сайта», только советы были интерпритированы с точностью наоборот. Хочу немного обобщить всяческие советы непосредственно для меню.

Основная ошибка: слишком много пунктов меню

Зачем больше 5 пунктов в главном меню? У вас всегда есть футер. И тот человек, который ищет что-то конкретное, всегда докрутит до футера и кликнет, на интересующий его пункт меню. Вот пример отвратительного меню:

Главная | О нас | Почему мы | Цены | Услуги | Скидки | Акции | Предложение посредникам | Вакансии | Наша техника | Задайте нам вопрос | <a name="cut"></a>  Фотогалерея | Контакты

Допустим, фирма занимается бурением скважин. Значит они продают «услуги по бурению» и их клиенты скорее всего хотят себе на даче пробурить ту саму скважину. Что интересует такого клиента? Ответ очевиден — цена качественного решения. Тоесть «Во сколько мне это все обойдется?»
Берем пункты меню которые ему (в данной статье я буду этим самым покупателем) будут полезны на этом сайте:

1. Главная — не нужно, но этот пункт меню дефолтный. Оставляем.
2. О нас — не нужно, я готов обратится и к Тургению Стуслову, если тот делает качественно и недорого. Удаляем.
3. Почему мы — да действительно? Если мне делать нечего, то почитаю на досуге. Удаляем
4. Цены — о именно это я и искал. Оставляем.
5. Услуги — хм, а в «ценах» разве не написаны услуги? Удаляем.
6. Скидки — интересно, наверно сильно завышают цены, потому и скидки делают, да они всем скидки делают, сначала накрутят сверху 10% — потом на них скидки и делают… Удаляем.
7. Акции — наверно пробури 5 скважин и получи в подарок подержанное колесо от 131 ЗИЛа или флэшку на 512 Mb. Удаляем.
8. Предложение посредникам — я вообще-то просто скважину хочу, но если сосед захочет, я ему рекомендую эту фирму, то может мне копеечка перепадет. Удаляем.
9. Вакансии — не, у меня есть работа, а если и надо найти работу, то ищу на сайтах соответствующей тематики. Удаляем.
10. Наша техника — наверно фотки старых зилков… может взглянуть? Удаляем.
11. Задайте нам вопрос — а я думал в пункте «контакты» написаны все ваши контактные данные, там и можно задать вопрос. Удаляем.
12. Фотогалерея — надеюсь там хоть показано, как вы бурите и реализованные объекты — посмотрим. Оставляем.
13. Контакты — о да. Цены у вас на сайте наверно неактуальные, дай-ка вам напишу вопросец. Звонить не буду.

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

Главная | Цены | Фотогалерея | Контактная информация

Так… тут меня должны засыпать вопросами, а как-же скидки, вакансии и т.д.… ща… секундочку:

• О нас — это можно написать внизу на главной странице, только в 2-х предложениях. Вообще про данную контору я бы так написал «Бурим скважины», и написал бы это в шапке сайта под логотипом. А полноценный текст (если клиент сильно настаивает) спрятал бы за пунктом меню в футере.
• Почему мы — просто абсолютно ненужный текст, который никто не читает, кроме вебмастеров, которые хотят создать такой-же пункт меню.
• Услуги — просто запомните навсегда: «Услуги и цены», лучше просто «Цены».
• Скидки — скидки пишите в прайс-листе. А еще лучше сделайте форму в прайсе, где человек может поставить галочку напротив скидки (например — я пенсионер) — и пусть ему в прайсе цены меняются.
• Акции — акции Эппла после выхода 5-го айфона упали. Но суть не в этом. Акции — это банеры, яркие сочные банеры, но никак не пункт меню. Акции должны быть либо временными: с 1 января по 15 января в подарок фильтр очиски воды. 30-31 февраля скважины бесплатно! Если акция постоянная — то это уже спецпредложение или просто навязываемая услуга.
• Предложение посредникам — переносите в футер.
• Вакансии — футер.
• Наша техника — это в фотогалерее должно быть.
• Задайте нам вопрос — это должно быть в разделе «Контактная информация» или же небольшой онлайн чат, который всегда надоедает, на каждой странице и периодически выскакивает с заголовком «Могу ли я вам чем-то помочь?» — Мне например охота туда писать только одно «Да вы уже ...».
• Контакты — не, контакты мы никуда не переносим, но теперь, когда у нас появилось свободное место в меню, мы там можем написать «Контактная информация». В моем понимании «Контакты» — это такие усы у троллейбуса и трамвая, которыми он протирает провода, ну или штырьки у розетки. Вообще я сам пишу часто эти контакты, но советую забыть эту привычку.

Идеальное решение, для любителей все-таки запихать всё, абсолютно всё, в главное меню — сделайте его выпадающим и логическим. Как пример хорошего логического меню — я всегда давал официальный сайт браузера оперы. У них кстати в 2009 было 8 пунктов, 2010 — 7, 2011 — всего 6 пунктов.

Дополнено после комментариев al-teen  

Старайтесь писать короткие названия пунктам меню. Например пункт «Предложение посредникам» можно сократить до: «Посредникам». Люди поймут. Или «Сохранить в черновиках» можно сократить до: «В черновики». «Авторизация» — «Вход», «Каталог продукции» — «Каталог» и т.д.

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

Шапка сайта

В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:

«Стуслов и сотоварищи»

Меховое ателье

Это сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов и его друзья. Но этого недостаточно. Если данный коллектив работает в г.Пенза, а посетитель сайта живет в г. Сыктывкар, то не надо заставлять его просмотреть пару страниц (или более) сайта… и затем открыв страничку «контакты» — плюнуть и грязно выругаться на то, что оказывается, все что надо, но, блин, в другом городе. Не поедет же он за шапкой за тыщу триста километров.

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

Телефон в шапке — он нужен. Как удобно, когда я открыл страничку каталога с фетровой шляпой в синюю клеточку — посмотрел наверх, набрал телефонный номер и говорю «Алло… это Стуслов и сотоварищи?… да… да… я бы хотел у вас заказать фетровую шляпу… что?… а… артикул ФШ-033… дада ...». Если телефон указывать только в разделе «контакты», то прийдется сначала открывать эту страничку, потом возвращатся на предыдущую. А пользователь компьютера, который не разбирается в «этих ваших интернетах» не умеет смотреть «назад» и ему это обернется такой морокой, что возможно он превратится из потенциального покупателя в недовольного посетителя.

Поэтому телефон должен быть на главной и остальных страницах. Всегда на виду.

Поле поиска по сайту — желательно на главной в шапке справа, т.к. это привычно. Если сайт небольшой, то поиск не нужен.

Что еще нужно в шапке? — ничего! Тут я хочу акцентировать ваше внимание… ничего больше не надо, не стоит болеть этой толи «жадностью», толи «булемией». Если у вас стоит вопрос: «что еще впихнуть?» — то я на него уже ответил. У меня, при создании сайтов всегда стоит вопрос — «что еще выкинуть из шапки, что неважно?» А большинство клиентов хотят туда запихать слайдер, карту, скидки и акции, все контакты (2 стационарных телефона, 3 мобильных, скайп, аська, группа в вконтакте и твитерр с 5 последними твитами), 18 пунктов меню и герб с флагом нашей страны.

Так все-таки, что оставить из всего того, что я перечислил? У нас есть название фирмы (или логотип), описание рода деятельности. 1 телефоный номер. Город.… ну… правильно «Скидки и акции» можно оставить — остальное ни в коем случае не пихать туда. Клиент всегда неправ, а если прав, то вы скоро проснетесь и все станет на свои места.

Итог:

«Стуслов и сотоварищи»                    (48431)3-28-99 г.Пенза

Меховое ателье                          Доставка во все регионы России

Далее у нас, под шапкой, будет горизонтальное меню или контент. В данном примере у меня будет горизонтальное меню, а уже после него контент. В горизонтальном меню у меня будет всего 3-5 пунктов меню, это:

«Главная», «Каталог продукции», «Доставка и оплата», «Контактная информация»

Хватит. Зачастую в меню пихают столько пунктов, что посетитель не дошел глазами до контента, а уже прочитал 1000 символов. Больше он читать не будет, поверьте мне на слово. Будьте лаконичны. Дав выбор из данных мною 4 пунктов (а на самом деле 3-х, т.к. главная уже открыта) посетитель без сомнения выберет только тот раздел, который ему нужен.

Область контента.

Тут обычно все еще хуже, чем в захламленной шапке и 12-ти пунктовом меню. Что там мы видим, это абсолютно бесполезные вещи:

• Погоду
• Мировое время
• Курсы валют
• Калькулятор
• Облако тегов
• Случайное фото
• Анекдоты
• ТОП 10 товаров >> Самое покупаемое >> Выбор покупателей >> Новинки
• Форма авторизации
• Наши плюсы (ну не менее 10 обычно)

Это не нужно. На главной странице надо сразу «зацепить» человека, а не давать ему думать и выбирать. Как зацепить? Это зависит от рода деятельности. В нашем примере есть несколько вариантов, например:

3 шляпа в подарок (акция длится еще месяц)

Почему Д.Билан покупает шляпы только у нас? 3 причины.

Эти дамские шляпки продаются в единственном экзэмпляре ...

Новая коллекция шляп. Тренд сезона. (старая коллекция со скидкой 25%)

Вообщем все зависит от фантазии, но главное «зацепить». Почему я пишу про три шляпы, три причины — да потому что больше не надо. Это болезнь. Если вы хотите на главной расписать плюсы вашей компании, то напишите 3 плюса. Настоящих, что действительно является плюсами, относительно конкурентов. Я часто, общаясь с заказчиками (перед встречей всегда смотрел на их конкурентов) спрашивал о их плюсах — так вот вам секрет — ни у кого настоящих плюсов нет. Все продают одинаковые товары по одинаковым ценам, одинаково просирают сроки выполнения работ, одинаково косячат и так до бесконечности. Поэтому найдите только 3 настоящих плюса. Я всегда находил. Например, недавно у одной компании выяснил один плюс и сделал из него три. Плюс был в том, что экспортная продукция всегда есть на складе, и поэтому доставка делается в день заказа. Поэтому отсюда я выделил: У нас самая быстрая доставка. У нас самый быстрый возврат по гарантии, вам не прийдется ждать. У нас дешевле, т.к. транспортные расходы минимальны. Читал сайт конкурентов — стотыщмильон плюсов 1. Мы внимательны 2. Спросите — ответим 3. Качество 4. Гарантия 5. Цены 6. ну и тд. Когда узнал у своего клиента, про основной критерий при выборе фирмы-поставщика продукции, то оказалось, что 80% его клиентов больше всего интересует сроки поставки (средние сроки месяц, у него неделя). Цены — вторичный вопрос, т.к. разница небольшая, а ждать долго. Да вы наверно сами знаете, что обычно на вопрос «К какому сроку вы хотите, чтобы мы сделали работу» всегда один ответ «Вчера».

От я заболтался. Что далее. Позле «зацепки» по идее посетитель уже перейдет на целевую страницу, а уж там вы его как хотите привлекайте.

Ниже этих цеплялок я советую дать информацию о вашей фирме, роде ее деятельности. Как никак — но продвигать главную страницу сайта в ПС надо и поэтому в тот текст можете хоть бред напичканный ключевыми словами написать (только первый абзац напишите нормальным, скучным текстом аля «наша компания была образована ...»)… вообщем как из анекдота про сеошников «Зашли 2 сеошника в бар выпить после работы, алкоголь, развлечения, спиртные напитки, круглосуточно, рядом с метро». Почему так? Да потому что этот текст никто читать не будет. Вся эта ваша писанина для поисковиков, а люди питаются картинками и малюсенькими заголовками и коротенькими абзацами.

Вот собственно и все. Хотите еще? — Это болезнь. Вы всегда хотите больше, чем нужно.

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

Попытаюсь поставить таких людей на путь истинный.

Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.

<img src="original_photo.jpg" width="640" height="480">

Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.

Размер изображения 640x480, размер файла 603 kb.

Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше с потерей качества:

Размер изображения 640x480, размер файла 79 kb (качество JPG: 40).

Многие скажут, что это таже-самая фотография, но размер файла тут гораздо меньше, но я попробую еще уменьшить:

Размер изображения 640x480, размер файла 49 kb (качество JPG: 10).

Неважный результат, много артефактов, размер файла небольшой, а может попробовать формат GIF а не JPG:

Размер изображения 640x480, размер файла 288 kb (256 цветов).

Хороший результат, качество нормальное, но размер файла бОльший, нежели мы делали JPG с таким-же качеством изображения, попробую… нет, пробовать не буду, а просто вам покажу пример в GIF, чтобы размер файла был не выше 100 kB:

Размер изображения 640x480, размер файла 105 kb (16 цветов).

Плохо. Качество никудышное, и размер файла все-равно больше 100 kB, но хуже уже только нецветное фото.

Вывод: уменьшаем размер фоток, далее экспортируем их в формат JPG и выбираем удовлетворительное качестро при минимальном размере.

Вроде пора и закончить, но возьмем не фотографию, а табличку, схему и т.д.

Размер изображения 480x640, размер файла 126 kb.

Уменьшаем с потерей качества:

Размер изображения 480x640, размер файла 52 kb (качество JPG: 50).

Отлично. А можно еще меньше?

Размер изображения 480x640, размер файла 39 kb (качество JPG: 10).

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

Размер изображения 480x640, размер файла 32 kb (256 цветов).

Отлично, это лучшее качество GIF 256 цветов, и при этом размер файла меньше чем самый плохой JPG. Пробуем уменьшить кол-во цветов:

Размер изображения 480x640, размер файла 25 kb (64 цвета).

Отлично. Пробуем еще уменьшить:

Размер изображения 480x640, размер файла 11 kb (2 цвета).

Ерунда. Предыдущий вариант идеален.

Вывод: уменьшаем размер схем, таблиц, графиков, далее экспортируем их в формат GIF и выбираем удовлетворительное качестро при минимальном размере.

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

Общий вывод:

• Фотографии надо уменьшать в размерах (пиксели). Руками в фотошопе или автоматически в специальной утилите.
• Фотографии надо сжимать. Сжимать до такой степени, чтобы они выглядели еще хорошо, но размер был меньше. По опыту скажу, автоматические утилиты — дрянь, т.к. на одном фото сжатие наполовину дает отличный результат, а на другой — плохой. Поэтому если вам важно — то работайте индивидуально с каждой фотографией.
• Используем разные форматы GIF для таблиц, схем и т.д., JPG — для фотографий. (про PNG тут не говорил, но их используют если нужна прозрачность)
• Где можно обойтись без картинки (видел я сканы прайс-листов) — обходимся без картинки
• Если картинка изначально хреновая — то выкидываем ее. Всякие «улучшатели» — не более чем развод.
• Ну и читать всякие умные статьи дядек и тетек про подобное.

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

Несемантическая верстка

• Списки
  

  Неверно:

   - Пункт один;&lt;br&gt;<br /> - Пункт два;&lt;br&gt;<br /> - Пункт три.&lt;br&gt;<br /> &lt;br&gt;<br /> 1. Пункт один;&lt;br&gt;<br /> 2. Пункт два;&lt;br&gt;<br /> 3. Пункт три. 

  
  

  Верно:

   
  • Пункт один;
   
  • Пункт два;
   
  • Пункт три.
  1. Пункт один;
   
  2. Пункт два;
   
  3. Пункт три.
• Параграфы
  

  Неверно:

  Параграф один. <br><br>
  
  Параграф два.
  
  

  Верно:

  Параграф один.

  <code><br />

Параграф два.

Неверно:

<code><span style="text-size: 24px;">Заголовок</span><br />

Подзаголовок

<code><br />

Подзаголовок

Верно:

<code><br />

<code><br />

Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.

Перенос предлогов
на новую строчку

• Используем непереносимый пробел
  

  Ошибочно:

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

  Грамотно:

  В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!

Для этого есть специальные утилиты, например «Реформатор»

Картинки без отступов

У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:

• Отступы у картинки

   #content img {margin: 20px;} 

Тег readmore в неположенном месте

Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.

• Тег readmore
  

  Ошибочно:

  В чащах юга жил бы цитрус?

  ---

  да, но фальшивый экземпляр!
  
  

  Грамотно:

  В чащах юга жил бы цитрус?
  
  

  ---

  
  
  да, но фальшивый экземпляр!
  
  

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

P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.