Вот мой сайт flashes.at.ua сайт посвящен флеш играм. Дизайн не полностью закончен, так как больше внимания уделяю заполнению контентом а дизайном занимаюсь по мере возможности. Да и в верстке я пока новичек Ниже выкладываю скриншот сайта.
bad-designer, ... Короче, так. Ниже будет написано моё мнение ... так что без обид ... ヅ
Начну с главной, как и обычно ... Тестовый браузер - Mozilla Firefox v3.5.5
Шапка сайта: Если не брать во внимание простоту исполнения, что, кстати, большой плюс, то лично мне ... ヅ ... блин - просто - в глаза бросился добрый Винни, что занял своё, не совсем понятное мне место в правой части шапки, аккурат напротив неизвестного мне персонажа - не-то гнома - не-то эльфа - неизвестного... Мне кажется, что Пух, не совсем вписывается в компанию этого длинноухого ... это просто моё мнение ... Ну нравится мне этот медвежонок ... а вот второго - я не знаю ... ヅ ...
Так, а теперь, по существу.
Вкладки - а-ля - табы, можно было бы, даже нужно было бы оформить получше, а именно - подсветить текущую, и про наведении. Про шапку - у меня все.... Может ещё вернусь к ней, если будут замечены баги под другими обозревателями .... ヅ
Меню, левое - стандартный список, но не стоит использовать заголовок, а именно тег «h2» для обозначения - максимум - «h4» ... H2 - это серьезный тег и не подходит для надписи в шапке блока ... даже если это меню сайта.
Код
<td><h2>Жанры:</h2></td>
И ещё, ссылки, интуитивно понятные, по стечению обстоятельств развития WEB, принято обозначать в синей гамме цветов. Советую придерживаться этой негласной традиции.
Блок «найти игру», тот, что справа ... Нет, так - всё нормально, но мне кажется картинка лупы, мало того, что она заезженная, просто слишком большая ....
Блоки «ВХОД» и «МИНИ-ЧАТ» - всё - как обычно, ничего нового ... если не считать цвета ссылок.
В блоке «СТАТИСТИКА» - мне показалось лишней линия, стандартный тег «HR» - такое ощущение, что там что-то должно ещё быть ... но нет ...
И по всем блокам. Не стоит в коде писать «СТАТИСТИКА» «МИНИ-ЧАТ» и другие надписи в верхнем регистре, для этого есть CSS и замечательное свойство текста - «text-transform» ..... Вот так не правильно:
Ну, мне показалось, текст - слишком большой ... и информация - не упорядочена ... все как-то в кучу ... и копирайт и права ... и хостинг ... не знаю, я бы разделил как нить.... например - разнёс по сторонам. Копирайт и права на материалы в одну сторону - хостинг и прочее - в другую ... и шрифт поменьше сделал ... и ссылку на главную впихнул .... Как-то так...
И ещё пару слов .... В заверщение. Не стоит выставлять пустые блоки ... Например «Полезное» - как гость - для меня он пустой, возможно, при входе там что-то и есть ... но для меня - он пустой ... .... ヅ .... Как всегда - немного ошибся .... блок «Полезное» оказался не пустым ... ヅ ... При отлючении «Adblock», про который я частенько просто забываю, моему взору предстала копия мини чата. Не всего - а только содержимого ифрейма. ヅ ...
А вот под Netscape - реклама от Google ... интересно ... А во в блоке «СТАТИСТИКА», там, где я писал, что чего-то не хватает - оказалась - бегущая строка, исполненная с помощью «marquee», с банерами и счетчиками .... ヅ
А ниже - ещё кусок рекламы от Google. Под Netscape - сайт, на глаз, не отличался от его же под Мозиллой ... Но под Мозиллой - появилась горизонтальная прокрутка м мини чате ...
интересно, почему ... ヅ
И, как это обычно и бывает - полезли ошибки JS
Цитата (Консоль)
Ошибка системы безопасности: содержимое «http://googleads.g.doubleclick.net/» не имеет права загружать данные из http://flashes.at.ua/mchat/.
Цитата (Консоль)
Ошибка: Permission denied for <http://googleads.g.doubleclick.net> to call method Location.toString on <http://flashes.at.ua>.
Причем первая - зациклена.... то есть - бесконечный график ошибок.
Под MSIE ... тоже все не отличалось от стандартного вида сайта ...
А вот под Apple Safari v4.0.3 - вот такая картина:
В этом оказался виноват блок с бегущими счётчиками ... Видимо для него не была установлена ширина. И его «распёрло» - на длину всего списка банеров ...
Как и блок с рекламой - который залез на контент ...
Та же самая ситуация и под Google Chrome ...
И причины - те же ... ヅ
Под оперой - такого не наблюдалось ... Но горизонтальная полоса прокрутки, в мини чате, казалось стала ещё больше ... ヅ
2010-07-10Дата: Суббота, 10.07.2010, 23:33 | Сообщение # 5
Группа: Гости
likbezz, пару раз замечал как реклама бегуна перепрыгнула на место рекламы гугла... реклама гугла влезла в чат... Короче говоря эти вещи иногда плящут по страницам как хотят, не обьяснимо но факт.
Что еще могу сказать Насчет замечаний спасибо... учту и исправлю по возможности. Насчет шапки, она мне не нравится на 99% (особенно вини пух бесит ) , опять повторюсь... дизайнерских способностей не имею! Фотошопом пользуюсь с большим трудом! Про html и css вобще молчу Это первый дизайн который я начал делать и конечно успеха пока мало Почему все так получилось в Apple Safari сам незнаю у крайних блоков прописана ширина.
Это первый дизайн который я начал делать и конечно успеха пока мало
... Для «первого» - очень даже неплохо ... скажу я тебе ... и никапли не совру. Знаю, видел, проходили ... ツ
Quote (bad-designer)
Почему все так получилось в Apple Safari сам незнаю у крайних блоков прописана ширина
У тега «marquee» - пропиши, или запакуй его в свой блок с конкретной шириной ... Кстати, может у тебя пробелов нет между банерами ? ... Не ... вроде присутствуют .... ヅ ... Ага ... прописана у тебя ширина ... только для таблиц ... Вот так сделай:
... Для «первого» - очень даже неплохо ... скажу я тебе ... и никапли не совру. Знаю, видел, проходили ... ツ
Жаль ты изначально его не видел... это было ужастно Нужно было скриншот на память сделать
Футер мне тоже не нравится но никак руки до него не доберутся
Добавлено (11.07.2010, 06:07) --------------------------------------------- Насчет картинки над полем для поиска (которая заезженная ), она была туда вставлена только для того чтоб блок с авторизацией сдвинулся вниз... банер от бегуна закрывает форму входа
Нисколько Пока ничего не заработал(чтоб что-то заработать, нужно чтоб кто-то по рекламе кликал ) ... на сайте редко кто бывает, да и самому сайту чуть больше месяца. Ну как шапка? Лучше чем была?
... Лучше, но не оригинальная ... Где-т я эти картинки уже видел ... ツ.... Как научишься в фотошопе рисовать - переделаешь, если надумаешь ... ヅ Что щас-то мучать? ... ヅ
P.S. Кстати, могу видео-уроков по фотошопу гигов двадцать слить ... Если надо, конечно ... И по веб дизайну неплохой диск есть ... (образ) TeachPro Web-дизайн Скрин того, что под рукой ... ヅ
likbezz, не прикалуйся У меня скорость интернета не привышает 256 килобит, я 20 гиг вечность качать буду
Добавлено (11.07.2010, 08:14) --------------------------------------------- likbezz, а насчет того что не оригинальная, то пусть ... картинки может и не оригинальны, но это лучше чем сидеть с стандартным дизайном от юкоза
Интересно узнать мнение аццкого кодера, ну и может дадите советы полезные Рисунок:
Сам сайт посвящен серии игр Guilty Gear, ну уже и BlazBlue)
Сразу говорю, я особо к стандартам консорциума не прибегал, использовал некоторые свойства CSS3, более менее отточил дизайн, чтобы сайт более менее одинаково отображался в браузерах (FF, Opera, Chrome, Safari), из них только Opera не поддерживает CSS3 градиент(пришлось ей бэкграунды прописывать )) ), в остальном все ок. Использую по умолчанию FF. Ну больше сказать нечего...
... Да ... надо будет как нить убрать это слово из ... связки с сайтом/форумом ...
... Со временем, оказывается, что ты не такой уж и «аццкий», коим считал себя ещё не так давно. Со знаниями, также приходит и уверенность в том, что на самом деле, ты становишься ещё дальше от «знаний», чем когда начинал .... От того момента, когда с уверенностью можешь сказать себе - “в этом вопросе - я всё знаю” ...
Цитата (RazieL)
Сразу говорю, я особо к стандартам консорциума не прибегал, использовал некоторые свойства CSS3
... Последнее время стал замечать, что важнее(не всегда и не везде) не “придерживаться” или “не придерживаться”, а знать о них, знать как они влияют на отображение, и знать о том, что влечет за собой выбор в ту или иную сторону. И если уж сделан выбор в сторону «придерживаться» - то придерживаться, когда/если возможно....
Использую по умолчанию FF. Ну больше сказать нечего...
- Я бы добавил ещё - под каким разрешением смотришь ... (нужно впихнуть в шапку сайта ...) ... “- Блин, прикольно .... ”, - первые мысли, что проскочили в голове при переходе на сайт.... Да, интересно ... и оригинально ... Не сразу удалось унять желание «воткнуться» в исходники и посмотреть, как на самом деле всё это сделано ... ヅ Сразу порадовала шапка, как никак - “шапка сайта” - особенно переход от одного изображения к другому ... ヅ Сразу, по секрету и немного забегая в разбор кода, скажу - эту функцию уже где-то видел - вплоть до имени скрытого селектора ... ヅ Неплохая функция... в данном случае, мне показалась избыточной, так как была прописана во первых в исходном коде, а не во внешнем файле, а во вторых - только к шапке (Header.addFade("#header") ... По хорошему, такие вещи нужно выносить в отдельный файл, и, я считаю, что все скрипты которые не привязаны к исходнику, и непосредственно относятся к дизайну сайта нужно выносить из кода в один файл.
Короче, с первого взгляда, ヅ в целом, само оформление сайта и оригинальный дизайн, и, что не менее важно, неординарные методы вывода информации, мне понравились. Свежо. Например «Календарь новостей». ヅ
На сайт зашёл под Мозиллой.
ОК-йно, левая колонка. Форма входа - неплохо было бы кнопку входа - либо заменить на картинку, либо сделать повыше - вровень с полями паспорт и пароль ... и надпись «вход» - либо уж совсем убрать - либо сделать другого цвета ... ツ Я бы, сделал картинкой... Возможно фоном - меняющимся при наведении ...
«Данные пользователя» - в данном случае - я «Гость» - оказались пустыми - упаковать в комментарии <?if($USER_L0GGED_IN$)?> ...
«Статистика сайта» - убрать из кода тег «hr» - не нужен он там - не смотрится - или заменить на «br» ....
«Теги» - притормаживают ... Просто - информация ...
Сами надписи в заголовках блоков левого меню, можно сделать чуть посветлее .. и побольше. Добавить светлую тень, например, можно ... чтобы выделить. ... В «highslide.css» - прописать ссылке, что - открывает полное изображение «no-repeat» ... или нужные размеры ... ヅ
Заголовки-ссылки - в блоках контента - тож сделать поярче - конкретно не видно ... ヅ только при наведении ...
В самих блоках краткого описания - проверку на наличие картинки/маленькой картинки/скриншота (<?if($IMG_URLn$)?>) ... и выравнивание по верхнему краю - если это не вопреки задумке автора ... ヅ И, если таковой нет, одну ячейку «imageBlock» убирать ...
А ещё, .. вот эта линия, она для чего? - по моему без неё лучше будет ... Это так ... просто ...
Да, обновив страницу - заметил вот это: - То есть - список не влез... и последний пункт оказался на новой строчке - выход - прописать точные размеры каждого блока(или рассчитывать размеры скриптом) и запретить перенос на новую стоку ... и скрытие при переполнении ... ヅ Причём, выпадающий список не перекрывает кнопку «поиск»...
Ещё про меню.... Некоторые кнопки, если пользователь не вошёл, не нужны ... ヅ. Например «профиль» - выдаёт ошибку и отправляет на страницу «/index/8» ...
Текст в input-ах - можно поярче, в смысле посветлее ... ... К тексту в форме добавления комментариев такой «text-shadow» - эффект - не лучшее решение ... ヅ ... Да и саму форму - импуты и текстовое поле - можно сделать во всю ширину блока ... ヅ При фиксированном дизайне - это не проблема ... ... Форум - ваапще - понравился - в смысле диза ... Всё переделано ... здорово ... (при наличии быстрого нета) ... Вот на этой картинке, конвертик - лишний ... ヅ ... [К первому непрочитанному сообщению ] Ошибки CSS ...
Ошибок jScript - не заметил ... .... К сожалению, всё это, полностью работает только в Мозилле, в остальных - то или иное отображается по-другому, если отображается ... IE - под win, выдает ошибку для скрипта меню ...
Другие браузеры - не поддерживают некоторые CSS3-свойства ...
Будем надеяться на лучшее ... ヅ ... и большинство браузеров всё таки примут и будут поддерживать новые CSS3 свойства... и, желательно, в каком нибудь одном формате записи .... а не в «разноцветных» ... (-webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));\-moz-linear-gradient(top, #FFF, #000);) ...