» Зацените сайт питомника

Starfall.lt
Как вам такой сайтик с закосом под оптимизацию стилей и ресайз картинок в зависимости от разрешения и размера окна.
Писан с 0 php/mysqli исходя из нужд, плюс - нечайно написалась полноценная админ панель, с авто-сортированием котят по пометам, пометы по закладкам (теперяшние-прошлые) исходя из статуса котят, меню тоже появляется когда есть доступные котята и собирает в одно место из всех пометов выводя впереди каждого первого из определенного помета - родителей однократно.
Новости при вводе делятся на категории, отображаютя в соот. разделах (котята, планы, кошки) и на главной - все.
И тд.
Писан фо фан, но втянулся, и хотелось бы добить минусы, которых я не замечаю.
Основной минус, тяжеловесный даже после оптимизаций, но поскольку не ньюс портал, это не критично, нужно чтобы глаз радовал посетителям.

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

Насчет прокрутки - спасибо!
Прикручу вверху панельку со списком и статусов, как в Статьях.
А может подскажите, что убрать? Фон?

С телефона 480x800 - работает.
С компа, 1280x1024 - тоже.
Отзывчивая верстка работает, даже завидно
По крайней мере, из старой оперы, похоже, не видит значёк favicon.
Цвет типа доджер блю в оформлении - по моему, слишком жёстко цветовую гамму всего остального определяет. Это что, так надо? (в социальных сетях ни где он не использован, вроде бы)
Фотки, по крайней мере, на главной - качественные.
Фон, при таком решении с плавающими блоками, как может напрягать? - По-моему, нормально.

Что убрать...

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

Стили для печати определены но не настроены. Может, их вообще убрать и положиться в этом на броузер?

--
Можно полюбопытствовать о технической базе, что использовано из готового, какие-то библиотеки, фреймворки или прямо с нуля?

mark74
Спасибо за развернутый отзыв.
Несчитая мелких багов (как иконки и тд) сайт должен быть функиональным даже на очень древних браузерах и первых смартфонах. Много пришлось заменять-дописывать от десктопной версии, чтобы было возможно просмотреть на Samsung Galaxy Ace и иже с ним.

Цвет поменял изза Material design guide https://www.google.com/design/spec/material-design/introduction.html он там как бы один из основных (ну и чуть в лево, в право, чтоб выделить что написано синим шрифтом или приглушить, т.е. шапки получаются уже приглушенные посравнению с версией ранее).
Возможно чуть за яркий, просто символика (оффлайн) питомника, украшения клетки и все, в подобном цвете, но наверное меньше вырвиглаз. Можно попробовать убрать насыщенность. Сам люблю более пастельные тона, но пробуя идти в ногу со временем, получилось нечто среднее между собственными желаниями и рекомендацией гугл.

Логотип на момент оригинального поста еще был, и меню было 250 пикселей высоты, НО тогда приходилось сворачивать в мобильную версию меню уже в 1280, просто нехватило места, а втяпать никуда неполучилось. Сегодня стер полуфоновый полупрозрачный-серый который вписывался между шапкой и контентом.
Загромождает и там появляющееся обьявление (или несколько), когда есть котята, поэтому просто нет места.
http://s011.radikal.ru/i315/1605/75/c35081579b20.png

Фреймворки и библиотеки неиспользованы. Просто сел писать сайт, первый, и вот уже 4 раза переписывал, сталкиваясь потом с проблемой функциональности, дизайна, эргономики и администрирования. В первых вариантах просто уставал обновлять с каждым обновлением статуса и фотографий.

Скрипты:
Adaptive Images (заливаются фото ОТ 2560х1600 в качестве JPEG 80, он ресайзит и шлет уже под экран пользователя, экономя трафик)
Colorbox (лайтбокс, в нем открываются фото)
Lazysizes (при поддержке браузера, вместо img-src меняет на data-src и подгружает по необходимости когда страница скролится и в бэкграунде, теже фоны загружаются этим способом нетормозя загрузку текста, особенно хорошо видна работа скрипта в Галерее, скроля через 600+ фото)
mCustomScrollbar (заменяет на минимальные прокрутку в блоках с текстом)
NivoSlider (центральные слайды у котят)
Owl (прокрутка в бок фото под каждым котенком)
SuperFish (меню, очень сильно переписанная версия + добавлено HamburgerMenu скрипт для мобильной версии)
html5.js/css3-mediaqueries.js для древних браузеров для совместимости.

А все остальное, анимированные при нажатии кнопки, фреймы в полу-материал дизайн стиле и тд - это писалось по ходу..

На самом деле, еще столько же кода, ушло на админку, дописающуюся теперь и начатую случайно..
Изза нее и перенес все в Mysqli, до этого хранилось все в массивах в php файлах.

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


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

Грубо говоря, весь сайт состоит из пары php файлов, базы данных, и упомянутых скриптов, файл стилей да картинки.
Все запросы на html/php или ошибки сбрасываются на index.php с параметрами.
Он загружает функции, файл перевода константами (3 языка, английский-русский-литовский) и парсит на наличие вменяемого обьекта или языка.
Т.е. ru.starfall.lt/undercover и starfall.lt////ru////undercover.php и тд дают одно и тоже, скрипт загрузив из базы имена кошек и номера пометов сверяет есть ли чтото из упомянутого, если нет - скидывает на главную, и так-же с языком, упоминается какой либо, если нет, смотрит куки, если нет смотрит браузер, если нет - английский.
10 функций страниц (коты, кошки, котята, выбор котов, кошек, котят, контакты) и кучка функций помельче (читать с базы данных, СКАНИРОВАТЬ директории, на добавленные файлы, которые, например для слайдшоу, он собирает с каждой кошки и помета, названные определенным способом (с добавкой СЛАЙД), чтобы негрузить базу лишними запросами.
Родителей, котят, пометы связывает между собой исходя из например имени родителей и автоматически линкует.
А котам добавляет пометы, если они указаны в статусе родителя.

Сортирует пометы (Актив, Старые, Планы) изходя из статуса всех котят, т.е. после резервации последнего, помет пропадает из Активных, а когда пропадает последний активный помет - пропадает меню Котята (где собираются все свободные котята с разных пометов, единожды показывая родителей впереди первого котенка каждого помета).

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

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

Вот как выглядит админка
http://s011.radikal.ru/i317/1605/2c/3bca12514d00.png

Или для примера редактирование кошки
http://s018.radikal.ru/i501/1605/27/c1eb3aaf48d4.jpg

PS.
И еще вопрос.
В КОНТАКТЫ - убрать ли скрипт аля-парралакс двигающий землю и оставить только звездный фон (под стать названию питомника)?
Или вобще убрать и звездный фон вместе со скриптом и вставить стандартного кота?

PS.При просмотре помета, выглядит перегруженно как то, а у меня закончились идеи, что там сделать (кроме убрать фотофон и заменить на простой темный либо цветной , скролящийся вместе с контентом, отдельно на каждый экран/секцию)

Цитата:

Material design guide

С интересом прочитал. Спасибо за ссылку.
Про ярко-синий понятно.
Но всё же, они его используют в сочетании с гораздо более светлыми оттенками.
Сравним:
на вашем сайте:
фон шапки, меню, плавающих блоков, подвала - #222
в этом руководстве:
фон - #fafafa
фон интерактивного блока - #e5e5e5
фон интерактивного блока под курсором - #bdbdbd
самая тёмная тень в иллюстрациях - #848484

Посмотрим в картинках гугл: Dodger blue in webdesign

Логотип посмотрел. Правильно вы его убрали. Вряд ли это можно считать "в ногу со временем". Или вообще в ногу.

По поводу логотипов и тенденций времени рекомендую фильм Helvetica.

Как в настоящее время относятся к своим супер ценным логотипам apple или hp. Как они работают с цветом типа доджер блу. мне кажется, хорошие примеры на apple tv и русском сайте HP



Добавлено:
ещё замечание по юзабилити:
у вас на сайте блок под курсором "всплывает". Хочется на него нажать, чтобы перейти в соответствующий раздел, но не получается. Надо догадаться прокрутить вниз и нажать на прямоугольник с надписью далее. Зачем вообще это "далее", если весь блок ведёт себя как кнопка? Причём, такое поведение вполне в духе рекомендаций Гугл.

звёздный фон на страничке с контактами, по-моему - не то. Тогда уж звёздный кот какой-нибудь.

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

mark74

Перейти на светлую тему в стиле материал дизайна неудалось, ненравится, откатился.
Притушил Dodger Blue, чуть подсветил и растянул по нескольким градациям блоки-меню-бэкграунд.
Подойдет ли или нужно радикальнее тушить-обесцвечить? Посоветуйте цвет.

По Вашему мнению, ширину блоков и отступы, в какую какую сторону что крутить?

Прикручиваю по дефолт экшену к каждому приподнимающемуся по mouse-over блоку или убираю эффект.

Сайт очень красивый. Но, IMHO, несколько перегруженный контентом. Слишком плотное размещение. Посмотрите этот сайт - http://white-raven.ru/ У него прямо противоположная проблема. Но, возможно, его просмотр дас вам какие-нибудь идеи...

На главой отрезал нижнюю половину контента (открывается по клику на Новости).
В Контактах убрал параллакc скрипт, заменил коллажем "звезды с котом".
Оставшиеся блоки переписал на проверку наличия контента (текст, фото, видео) перед показом (например http://ru.starfall.lt/litter-e ).
Буду благодарен за идеи, как упорядочнить странички полных пометов (например http://ru.starfall.lt/litter-c )

booster78

Цитата:

посоветуйте цвет

Не думаю, что всё так просто решается полями чистого цвета.

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

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

Панели на странице с котёнком ведут себя не так, как на главной, хотя выглядят точно также.

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

booster78

Цитата:

Как вам такой сайтик

mark74

Цитата:

Котёнок на странице слишком хороший чтобы его загораживать.

Тоже бросилось в глаза при первом просмотре, в конце мая, лениво было отписывать, но смотрю ноныча - та-же ерунда. Режет глаз объемность иконок соц. сетей, на мой взгляд, не вписывается в общий стиль страницы...)
Интересное решение с самостоятельным движением строк в 3_х столбцах, как-то не встречалось до сих пор, в остальном грубовато и слишком контрастно. Сайт посвящен кошкам, в какой-то мере представители кошачьих один из символов грации баланса элегантности, на мой взгляд, общий стиль сайта никоим образом не соответствует стилю главных героев...)
Оценка с точки зрения дизайна внешнего вида, за тех решения ничего не скажу - не силен.)
С наилучшими.)

Спасибо, за мнения.
Примеры бывших шапок.
Один, Два, Три
Да я понимаю, что смотрится местами симпотичнее, но...
И к сожалению большинства версий ненашел, так как менялась структура и тд.

Сайт был в оттенках, на шапку наложен PNG блик, блок с меню был в 4 раза шире, с левой стороны логотип, а дальше меню.
Проблема в том, что там да сям получается громоздко. Хотя меню и сворачивалось при скроллинге до такой же ширины, но для лого там места нет.
Отдельно лого - тоже нет, нерешает проблему, а только загромоздит больше. А лого в бэкграунде (т.е. выше бэкграунда, но уже под блоками и меню при скролле) - неудается вписать потому что опять же, загромождается все.
Бэкграунда становится не видно совсем либо слишком большое простраство остается для скроллинга, и тогда, на тех же мобильных девайсах, даже непонятно что там в низу есть блоки, поэтому пришлось урезать верх и подтянуть все.
Поэтому сайт и был переписан упрощая, как это показывает гугл (материал дизайн).
Контрастность мне тоже не по душе, но увы пока ненайдено решение без убирание бэкгранда, что далобы возможность притушить всю гамму и цвета. Градаций отказался в принципе специально (в пределах одного элемента) и сайт огрубил, больше отступы в шапке каждого блока до шрифта, меньше ненужным элементов или подстрок, переливов и переходов, хотя если присмотрется, каждый уголок закруглен и элементы подогнаны.
Шапка каждого блока, тоже имела фото-заголовок, на него накладывался блик, под него уезжал контент, при этом блоки себя вели так-же в общем.

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

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

Если же решить что материал-дизайн себя не оправдал, то убрать бэкграунд на #222222, чуть подсветить блоки #303030, по наводке мыши #404040 (теней нет, бэк темный), на каждый блок прикрепить по картинке (теперь нельзя, сливается с фоном), тогда градацию заголовков можно сделать практически серыми и сайт от этого не станет унылым. Но это все меня вернет на две версии обратно...

Как то обидно, теперь все огрубить и упростить до референсных тем материал дизайна Пример 1, Пример 2

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

Учитывая отзывы и исходя из личного опыта браузинга по подобным сайтам, перед горами информации (например на главной), чтоб не пугать неискушенных людей, сделал бампер. Теперь заходя на сайт (не на определенную страницу, а когда конечная цель неуказана, т.е. просто на сайт) вы попадаете на некий вэлком экран с минималистическими блоками-навигацией и можете сделать выбор языка (раньше терялся во всем) и перейти на главную либо сразу на интересующую страницу, минуя лишние переходы либо поиски навигации. Ориентированно на казуалов сети, людей старшего возраста, с мобилки (удобнее тыкать), людей не шибко занитересованных в раскопке инфо. Притом экран получился с функционалом а не просто приветствие. Линки в блоке котят меняются в зависимости от общей ситуации (если есть котята - то ведут к ним, если нет котят, но есть планы, то туда, а если ни планов, ни котят, то на страницу со всеми пометами).
Так-же переделал неинформативные страницы выбора пометов и кошек, выводя к графике некий минимум инфо, который позволит сделать интересующий выбор.
Среди прочего, из упомянутых замечаний - переделал заголовки блоков, скрутил цветность в нн-ный раз, доп. оптимизация для мобильных девайсов (например background scale) и расширенная поддержка (например CSS3) для старых браузеров, девайсов.
Функционал сайта (мобильное меню и прочее) должно сохранятся и без JS, ессесно с минусами, например тогда страница галереи уже занимает при начальной загрузке за 20 мб, вместо 2-4мб обычных (более 800 картинок в lazy-mode подгрузке через data-bg, который без JS неработает и тогда просто грузит все картинки, которые до этого отсекались <noscript>)

На сайтах питомников обычно первым делом ищется кнопка "котята в наличии" и при открытии этой страницы либо идет список котят, либо, если их в настоящий момент нет, появляются ссылки на планы и прошлые пометы.
Здесь это не очевидно совсем

И как продумано будет меню пометов, когда их пару десятков будет?

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

raymi, это и сделал на днях.
При заходе на сайт http://www.starfall.lt/ присутствует блок Котята который ведет либо на свободных котят (всех пометов вместе), либо на планы если нет котят, либо на прошлые пометы, если нет планов.
При просмотре пометов http://www.starfall.lt/litters, выводится дата-размер помета и групируются внизу на Актуальные (неотображается если нет котят) и прошлые
Т.е. сделал так, чтобы можно было попасть в найболее важные отделы (Главная, Кошки (все), Котята-Пометы(все) и Контакты) без меню попав на сайт и в один-два клика по блокам (например Котята - Помет Д, или Кошки - Кошкатакаято), либо в один клик по меню.
Когда есть свободные котята, посередине экрана (между header и контентом) появляется круглый баджик(и) http://starfall.lt/images/news/badge-kittens-blue-ru.png с линком на помет.

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

классный сайт, просто супер

Если кто не лениться, покоментируется.
Хочется довести до ума, за неделю родятся котята. А мой взгляд всетаки небезпристрастный (да и местами технический) + смотрю не как потребитель (а как поставщик да и заводчик). Вижу минусы, но пока что вот таким у меня получился баланс между UX, информативностью, тех. частью, СЕО и собственными тараканами
Просто я увлекся тех. частью и она (с админкой) разрослась уже далеко за сам дизайн сайта, который уже в принципе мелочи по сравнению с тем что наваял за кулисами, практически CMS получился нечайно. Даже sitemap картинок для индексирования гуглом генерируется по планеру раз в неделю (хотя при такой конкуренции в популярной породе, без штучек-дрючек, только в локальном литовском гугле удается войти в конец 10 по нужным фразам, русский помоему в 50, а с английским жесть).

Добавил ненавязчивый оверлей полупрозрачного лого на обои.
Можно ли оставить welcome страницу в таком виде? Что подправить убрать с блоков, особенно при "mouse over" анимации?
Достаточно ли ясны и информативны блоки выбора пометов и кошек?
Понятно ли сгруппированны отдельные котята на самой странице просмота помета?
Подходит ли бэкграунд шапки блоков (с текстом, эдакая вариация самсунг андроид обоев или прост вернуть синее, как например заголовок верхний в контактах).
Как писал выше, галерея (авто генерируется из существующих кошек и котят, берет с дб инфо о папках и сканит) подгружается автоматически по мере прокрутки страницы или самого блока (принцип загрузки элемента lazyload "is_visible?" ) но общее количество линков уже 1000, а это все нужно грузить даже без картинок.
Собсно вопрос, стоит ли разбивать на страницы (paginate 1-2-3..) по 1 блоку и если да, включать ли в каждую слайдшоу (или только в первую), т.е. имеет ли смысл, будет ли актуально.. делать ли над первым слайдшоу тогда блок с выборкой (список кошек и пометов, чтоб перейти к странице Х), потому что с тем же успехом можно перейти сразу на страницу кошки или помета через главное меню.

главная картинка с котом на заднем плане не в кассу

Цитата:

33788871

Какую из 900 в галерее вы бы предложили?

Коты няшные. Но визуально перегружено.

Это я вижу и согласен. Частично уже разгрузил - а вот как дальше и что именно...