Оцените первый сайт

[Морок]

Доброго времени суток уважаемые форумчане.

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

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

У меня просьба, не обращайте очень пристального внимания на цвет я все таки склоняюсь к черно-бело-серому варианту и в конечном итоге хотелось бы чтобы сайт выглядел как рукописный труд алхимика или мага, как чертеж Леонардо да Винчи (не могу сформулировать точнее). Хотелось бы чего-то такого очень простого но в то же время очень эргономичного и не знаю оригинального. Может вы знаете какой нить ресурс на котором я мог бы преисполниться вдохновением и скачать шаблон или макет.

Заранее всем признателен за критику и советы.

Как улучшить кроссбраузерность? Ну и замечания по коду.

Собственно сайт http://numerology.16mb.com

[cyklop77]

при изменении масштаба домик уезжает в сторону

[Yazon_Nile]

1. поресаизи окно. с домиком беда

2. добавь текста в контент. боковые блоки начтнают плясать самбу.

3. добавь текст в "Заполните поля которые находятся слева от этого текста..."

[Морок]

при изменении масштаба домик уезжает в сторону

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

1. поресаизи окно. с домиком беда 2. добавь текста в контент. боковые блоки начтнают плясать самбу. 3. добавь текст в "Заполните поля которые находятся слева от этого текста..."

Я использую шрифт Bookman Old Style и просматривая сайт в фаирфоксе все выглядит нормально, но просматривая его в IE все выглядит не самым лучшим образом. Текста добавлять не следует его там достаточно. Здесь проблема во шрифте. Попробую решить эту проблему.

[cyklop77]

Текста добавлять не следует его там достаточно.

это ты контент-менеджеру объясни

[Морок]

это ты контент-менеджеру объясни

Что это за достойнейший человек?

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

Edited March 17, 2013 by Морок

[Yazon_Nile]

Ну вот ты сделал сайт. Отдал его.

Клиент натыкал в два раза больше текста, чем у тебя - все повалилось

[Морок]

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

В данном случае я совмещаю в себе и разработчика и клиента.

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

Edited March 18, 2013 by Морок

[ori]

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

Для основного текста оптимальные параметры: verdana 13px/1.4 60-90 символов в строке

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

http://www.elegantthemes.com/gallery/

http://rutracker.org...c.php?t=4152371

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

Скорее проклятие новичка, который не разобравшись начинает лепить говнокод, лишь бы работало.

Я использую шрифт Bookman Old Style

Это нестандартный шрифт http://www.xiper.net...nts-on-css.html

Edited March 19, 2013 by ori

[Libiros]

Из-за того, что сайт очень контрастный (черное бьёт по глазам на белоснежном фоне), то по нему не хочется бегать глазами и акцентировать внимание на определенном месте. Я посмотрел шапку, опустил взгляд ниже и заболели глаза.

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

В плане добавления текста - возможно, нужно будет его пересмотреть для SEO. Но не читал, подробнее сказать не могу. Это к тому, чтобы критика не воспринималась так остро.

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

Справка (где написано "Заполните поля которые находятся слева от этого текста.") должна быть выделена другим цветом, чтобы было понятно, что это вообще справка. Из-за того, что вообще никакой текст этого сайта не хочется читать, то и справку тем более. В первый раз я не прочитал дальше "Заполните поля...".

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

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

при изменении масштаба домик уезжает в сторону

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

Моё решение такое:

1. Переместил

<div id="main_references">
<a href="index.php" title="Главная страница сайта"><img src="v/img/index.png"></a>
</div>

внутрь <div id="wrapper">

2. Добавил в carcase.css padding-left:50px в #wrapper

3. Для #main_references я сделал так:

#main_references
{
width:45px;
height:0px;
margin:auto 0;
background-color:#ffffff;
position:fixed;
text-align:center;
margin-left:-50px;
}

Edited March 20, 2013 by Libiros

[Морок]

Неопрятный сайт, возникает желание поскорее с него уйти. Куча жирных черных рамок, беда с отступами и типографикой. Для основного текста оптимальные параметры: verdana 13px/1.4 60-90 символов в строке

Согласен с тем что работы проделать мне здесь предстоит еще очень и очень много. Со шрифтом проблему исправлю. Вплотную займусь этим на выходных сейчас Молох работы пожирает все свободное время.

http://www.elegantthemes.com/gallery/ http://rutracker.org...c.php?t=4152371

Очень красиво, все так аккуратно и удобно. Восхищен мастерством создавшего это.

Скорее проклятие новичка, который не разобравшись начинает лепить говнокод, лишь бы работало.

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

[Морок]

Набери в гугле "черно-белые сайты"

Может не поверишь но я до этого как-то раньше и не додумался. Искал рисованные сайты, черно-белые рисунки, сайты подобной тематики, а это ускользнуло. Большое спасибо. Я глянул несколько сайтов. Что сказать очень и очень даже. Отчего-то тянет меня к черно-белому и карнавал всех цветов радуги это не мое.

В плане добавления текста - возможно, нужно будет его пересмотреть для SEO

Об этом мне пока рановато думать.

Спасибо за подсказку с css, гляну это все на выходных.

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

[Libiros]

  <div id="header">
   <div id="for_statements">
   Число правит миром, научись управлять<br/> числом
    <div id="for_doplnitelny_statement">
    Для того кто открывает свою душу для самопознания, кто знает, что способ достижения духовного и материального совершенства можно открыть в себе, кто понимает, что он – часть Вселенной и вибрирует в гармонии с Силами Космоса, обретая полноту человеческого бытия.
    </div><!-- #for_doplnitelny_statement-->  
   </div><!-- #for_statements-->
  </div><!-- #header-->

Здесь ты в div с главной надписью вставил уезжающий блок. До меня потом дошла твоя логика, но так делать не нужно. Можно обойтись без div'a. Ведь надписи (выделим ее тегом <p>) можно задать стиль text-align:right и у тебя останется место под подсказку, которую также просто можно вставить в любое место шапки, используя абсолютное позиционирование.

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

  <div id="header">
   <p>
    Число правит миром, научись управлять<br/> числом
   </p>
    <div id="for_doplnitelny_statement">
    Для того кто открывает свою душу для самопознания, кто знает, что способ достижения духовного и материального совершенства можно открыть в себе, кто понимает, что он – часть Вселенной и вибрирует в гармонии с Силами Космоса, обретая полноту человеческого бытия.
    </div>
  </div>

В style.css можно удалить все стили для #for_statement, они все равно не используются, да и сам этот div тоже. И меняем

#for_doplnitelny_statement

#for_doplnitelny_statement
{
position:absolute;
width:470px;
height:70px;
top:80px;
margin-left:20px;
padding:5px;
background:#ffffff;
border:#000000 2px solid;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
font-size:12px;
font-weight:normal;
font-style: italic;
}

В carcase.css задаем стили для параграфа

#header p {
font-size:44px;
font-weight:bold;
text-align:right;
padding-right:225px;
top:-40px;
display:block;
position:relative;
}

Зачем только стили разделены по разным файлам?

[Морок]

Зачем только стили разделены по разным файлам?

Я имел в виду класс help_num_system. Но и за то что есть спасибо. Гляну на выходных сейчас просто сил нет. Когда я разделял стили по разным файлам то руководствовался следующим соображением. Один файл для стилей скелета страницы голова, тело, подвал и глобальные значения. А на каждую систему по своему файлу, дабы не путаться. Это сейчас системы только 3, а я их буду еще добавлять и добавлять.

[cyklop77]

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

Edited March 22, 2013 by cyklop77

[Tatiana_Balitskaya]

Иногда за вдохновение захожу на такие сайты, возможно что то интересное найдете для себя http://www.siteinspire.com/

[Mouse-art]

В Chrome дизайн ужасен. Сдублируйте стили, заменив -moz- на -webkit-, авось запашет.