This version of the page http://xenos.org.ua/web/my_h.php (0.0.0.0) stored by archive.org.ua. It represents a snapshot of the page as of 2007-03-13. The original page over time could change.
У Романа. Веб дизайн. Мои советы. Перейти на главную страницу Добавить сайт в избранное Написать автору письмо Карта сайта
 
 


Введение      
Мои советы      
Советы других людей      
HTML+многое к нему      
Java, PHP, Perl (doc+ссылки)      





Партнеры:
  4burn
 

---
Готов к интересным обменам:

---

 
Проба пера Личное WebDesign Мой Комп Проекты   Гостевая      

Веб дизайн Мои советы.
 
Мужчина, добившийся успеха, это тот, кто зарабатывает больше денег, чем может потратить его жена. Женщина, добившаяся успеха, это та, которая сумела найти такого мужчину. "Законы Мерфи."
| В общем   1.1   1.2   1.3   1.4   1.5   1.6   1.7   1.8   1.9   1.10   1.11   1.12   1.13   1.13a   1.13b   1.14   1.15 |

Мои советы.

   Итак, самой распространенной ошибкой начинающих, является убеждение, что их сайты будут просматриваться ТОЛЬКО с включенными картинками. Поверьте, это глубокое заблуждение!

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

   Во-вторых, стоит помнить, что не каждому дана цифровая АТС, или чего доброго выделенка на 64-128к. Поверьте, имея в распоряжении скорость 14-21к, тебе вряд ли захочется рассматривать полуметровые "шедевры" авторов, когда единственное, что им надо - это прочитать строку новостей, какой-то рецепт, ссылки на mp3 сайты. Если ваш сайт ему для чего-то понадобился, то будьте гостеприимны, и не дайте ему уйти, увидь он пустой сайт.

   В-третьих, себя я отношу именно к этой категории: мое ограничение - время. Я могу позволить себе и загрузить страницу на 100-200кб, посмотреть всю рекламу, которую вы сюда положили, но я не хочу этого делать. Я хочу быстро добраться к тому месту сайта, куда мне надо. А отключение картинок ускоряет загрузку сайта в 2-10 раз. Так что я не вижу смысла их включать, когда я за день обхожу достаточно много сайтов.

   Если я все же смог убедить, что тут есть хоть одна весомая причина рассмотреть, что именно у вас не так то:

   1.1 Проверьте, чтобы у каждой картинки (тэг img), в тексте страницы было проставлено alt=_описание_. Ведь если это меню, то видно лишь пустые квадратики и больше ничего. А прописав это там будет проставлена подпись, что означает эта картинка.

   1.2 Если картинка идет в качестве фона под текст, то побеспокойтесь, что бы цвет фона (тэг bgcolor) также был примерно такого же цвета. Часто: вставляют светлую картинку фоном, делают черный основной фон и текст. Вроде все красиво, но знаете, что видно без картинок? Чистый, точнее черный прямоугольник БЕЗ текста.

   1.3 Не забывайте прописывать width и height для того же тэга img. Это не увеличит скорость загрузки, но тем не менее избавит вас от прыгающего текста, картинок и т.д.

   1.4 Далее, о самих картинках. Чаще всего это кнопки, фоны и пиктограмки (значки). Для всех их есть одно общее правило: одни не должны быть из различных тематик. Т.е. в основном не рекомендуют смешивать рисованное с фотографическим. Немаловажную роль играет также и цветовые оттенки каждого из этих объектов. Все должно быть однородным. Ведь сайт это не лавка торговца, которая пестрит изысканностью и выбором, но не несет ничего из красоты, из гармонии. Все должно быть однородно и сочетаться. Не стоит кидать ВСЕ подряд, что вам понравилось: горячий песок пустыни и ледяные льды Антарктиды, а потом снизу дополнить это озером Байкал и горой Эверест. Хотя в итоге получим замечательный винегрет и несуразицу. Аккуратней с этим.

   1.5 Фотоальбом. Трудная для описания тема. Не стоит лишь в качестве предпросмотра использовать тот же файл, что и для обычного, изменив лишь его размер. Изображение то загружается полностью! А это долго. Также обратите особое внимание на пропорциональность мини-картинки. Зачем ее сплющивать? Уменьшите пропорционально, а потом добавьте столько свободного места по краям, сколько вам надо. (см. пример в моей фотогаллерее).
Мне в шутку сказали, что таким образом большие фотки будут загружаться за 2 секунды, но извините:) Я сомневаюсь, что вы дождетесь, пока они прогрузятся и станут маленькими:)

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

   1.7 Фоны. Также не надо лепить все что не попадя. Вот смотрите: какое отношение могут иметь раки, к странице, на которой преобладает комп тематика? Я не знаю. Да! И не забывайте, что фон должен грузится 1-5 сек, а не минуту!!! Этого никто ждать не будет.

   1.8 Пиктограмки. Если уже вам захотелось все оформить этими маленькими значками, то уж постарайтесь! Не надо тут лепить что-то стандартное из панели управления или из документации на ваш принтер. Каждый сайт - это отдельная картина, а картинам свойственна индивидуальность. Самый оптимальный вариант - нарисовать самому. Крайний - ... берите готовые, но хоть что-то измените!
   P.S.: со временем натолкнулся на одну версию размышлений. Создавая сайт в привычном, для пользователя, виде, вы упрощаете его ориентацию по вашему детищу. Т.е. меню привыкли видеть вверху и слева. Используя "накрученные" пиктограмки, пользователь теряет время на ориентацию. А т.к. многие пользуются windows, и знакомы, так или иначе, с оснвными ее элементами, то пользуясь ее иконками, вы лишь помогаете пользователю. Так что - выбор всегда за вами. А на мой взгляд - достаточно придумать свою пиктограммку, которая просто своим одним видом давала понять ЧТО ЭТО. А для проверки: просто покажите 10-20 своим знакомым, и просто спросите: - Как, на твой взгляд, это можно понять, если это будет у меня на сайте?

   1.9 Цвета. Немало времени уделите подборке основного цвета для основного фона. Не стоит думать, что сделаю синий фон с красными буквами и все. Не надо. На сайте находится информация, которую посетитель читает. Чтение - это напряжение глаз. Поэтому надо оптимально сбалансировать цвета, что бы они вызывали минимум дискомфорта даже после 3 часов чтения. Прошу обратить внимание: черный фон сочетается со светлыми тонами, но не ЧИТАБЕЛЕН. Глаза устают просто моментально, а если через 20-30 минут оторвать взгляд от монитора посмотреть на чистый белый лист, то обещаю: таких букашек вы даже под наркотиками не увидите:) Также не стоит делать ядовитый фон. Старайтесь использовать "мягкие" цвета фона и четкие для текста. Однажды я увидел сочетание: ядовитый синий фон и красный наклонный шрифт. Поверьте, это было не особо приятно:(

   1.10 Ява эффекты и прочие украшательства. Это палка о двух концах. С одной стороны - это прекрасно выглядит, а с другой - мешает и очень перегружает сайт ненужным мусором. Обратите внимание, что практически ни на одном сайте не используются эффекты летающих указателей, прыгающих букв, бегающих заголовков. Максимум, что можно найти - это меню. И то, не те, которые слетаются из разных частей экрана, а строгие и работающие как дополнение, а не как отдельная часть. Подумайте над этим. К диалогу про суть "бегущих строк" - я еще не готов.

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

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

   1.13 А теперь, если вы дочитали до этого места, самый основной совет, которым многие пренебрегают, из-за той же самоуверенности в красоте. Ваша заглавная страница. Что тут обычно можно увидеть? 10 рекламных банеров друзей, погода в 3х городах, курсы валют, адреса чатов, где сейчас может быть владелец, любимая кошка, ваша фотография в возрасте одного месяца, 20 обещаний, что вы обязуетесь сделать, если ваш кот перестанет гадить на паласе... Я ничего не забыл? Хорошенькая картина, не правда ли?

   а) не надо напихивать в нее все, что попало. Если это банеры друзей - то сделайте отдельную ссылку в меню: "Ссылки на друзей". Если это ваши любимые фото - то сделайте ссылку "Фотоальбом". А забивать первую страницу информацией, которая не интересна в 80% случаев вашим посетителям - я, думаю, не стоит.

   б) кстати, о том, сколько будет загружаться такая страничка: не 10-20 сек точно. А ждать 2-5 мин, что бы увидеть такое пестрое сочетание - мало кто захочет. Немаловажную роль играет выбор места под страницу. Стразу определите категорию пользователей. Например я, с Украины, довольно тяжело смотрю страницы, размещенные на народ.ру. С России также тяжело попасть на мою страницу. Поэтому - прикиньте, оцените, спросите. Винить вас никто не будет, т.к. просто нажмут кнопочку закрыть в окне. А вот если постараетесь - то можно и лестный отзыв в гостевую заработать:)

   1.14 Разрешение экрана сайта. Стремитесь к тому, что бы разрешение 1024х768 не было минимальны для просмотра. На 640х480 тоже не стоит ориентироваться. Поэтому оптимальный вариант: сделайте сайт при 800х600, и проверьте, чтобы в 1024х768 он не потерял своего изящества.

   1.15 Image-Maps. Некоторые люди любят делать меню одной картинкой, а потом уже наносить на нее так называемые image-map. Чаще всего это идет из программы для начинающих: MS FrontPage. Что удалось заметить мне, в данном случае, так это: НЕТ кнопки "показать рисунок". Т.е. попадя на такой сайт, точнее в гости к такому меню, я просто беспомощен, пока не включу картинки... Не очень умный ход заставлять посетителя это делать:) Есть еще вариант ненужности: трудно понять где ссылка, долгая загрузка и т.д. но это вы уже сами для себя выведете, все необходимое я сообщил. Также обращаю ваше внимание на то, что тоже самое можно реализовать и через обычные таблицы. При этом в проигрыше не будет никто. (суть совета предложена человеком "Чапаев", из арийского чата;) )

p.s.: владельцы собственных страниц, т.е. "О мне красивом" :), и в частности мои знакомые, сказали, что эти советы я видимо сам для себя писал, т.к. им они не по душе и как то все строго. Согласен, строго, но ЛИШЬ для собственной страницы, и если нет желания заниматься web-дизайном. А если все же это ваша цель, то, думаю, кое-что почерпнете отсюда.
| В общем   1.1   1.2   1.3   1.4   1.5   1.6   1.7   1.8   1.9   1.10   1.11   1.12   1.13   1.13a   1.13b   1.14   1.15 |
>> К содержанию.



 
 
     

 WebDesign and programming by Xenos, 2005.