Как многие уже догадались из названия, речь пойдет о движке LiveStreet, а вернее о базовом шаблоне Synio, который включается в сборку CMS, и автором которого мне повезло стать.
Сегодня я хотел бы рассказать о процессе его создания и о том, что удалось воплотить.
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вилжами Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
Читать полностью »
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №15 (14 — 20 июля 2012)")
Читать полностью »
Возможно, многие из вас уже читали книгу Итана Маркотта «Responsive Web Design» в оригинале. Для тех, кто еще этого не сделал, у меня есть хорошая новость – весной этого года издательство «Манн, Иванов и Фербер» выпустило данную книгу на русском языке под названием «Отзывчивый веб-дизайн».
Во-первых, эта тоненькая книга (всего 176 страниц) содержит описание технологии, которая уже стала революционной. Если оценивать влияние, которое оказала данная книга на Сеть и процесс веб-разработки, то ее можно поставить в один ряд с такими инновационными книгами прошлых лет, как: «WEB-дизайн по стандартам» Джеффри Зельдмана и «AJAX в действии».
Во-вторых, данная книга была написана Итаном Маркоттом (Ethan Marcotte) — человеком, который придумал само понятие отзывчивый веб-дизайн.
В-третьих, в ноябре 2011 года «Отзывчивый веб-дизайн» был признан журналом .net magazine одной из 25 лучших книг для веб-дизайнеров и разработчиков.
Читать полностью »
Данная статья посвящена опытным верстальщикам и неопытным дизайнерам. Первым она понадобится, чтобы тыкать в неё носом вторых, вместо того, чтобы долго объяснять, что такое жизнь в черном квартале как правильно подготовить макет под верстку.
Зачастую верстальщики, громко матерясь, рвут на голове волосы, после того, как увидят присланный на верстку макет. А все потому, что дизайнеры забывают о том, что макет нужно не только дизайнить а в дальнейшем еще и верстать. В итоге на выходе получается в лучшем случае «немножко не то», в худшем — «никому не говорите, что это сделал я». Как избежать подобных инцидентов, читайте под катом.
Читать полностью »
Данная статья посвящена опытным верстальщикам и неопытным дизайнерам. Первым она понадобится, чтобы тыкать в неё носом вторых, вместо того, чтобы долго объяснять, что такое жизнь в черном квартале как правильно подготовить макет под верстку.
Зачастую верстальщики, громко матерясь, рвут на голове волосы, после того, как увидят присланный на верстку макет. А все потому, что дизайнеры забывают о том, что макет нужно не только дизайнить а в дальнейшем еще и верстать. В итоге на выходе получается в лучшем случае «немножко не то», в худшем — «никому не говорите, что это сделал я». Как избежать подобных инцидентов, читайте под катом.
Читать полностью »
Ниже представлены полезные ссылки и советы исходя из моего личного опыта. Старался указать только то что может быть новым для разработчиков, поэтому ресурсов типа FireBug и других общеизвестных в списке нет.
NounProject — лучшая и наибольшая коллекция SVG картинок
В связи с тем что кроссбраузерная поддержка SVG не идеальна, я делаю следующим образом, нахожу на этом сайте SVG картинку которая мне нужна, открываю ее в блокноте и в ручную корректирую цвет и размеры (иногда и саму картинку), потом открываю файл с картинкой в браузере, делаю скриншот картинки, обрезаю ее в фотошоп и сохраняю в gif с наимешьшими параметрами. Вывод — наилучшее качество картинки, так как качество SVG не изменяется при уменьшении или увеличении, и занимает наименьшее количество места, и как следствие, отсутствие дефектов, как например, размытые края, неполное окрашивание когда цвет изменяется заливкой и тд.
Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.
Так как разные браузеры, в частности IE воспринимают некоторые параметры CSS по разному, это доставляет проблем при кроссбраузерности. С помощью этого ресурса можно создать CSS файл который будет идентично работать во всех браузерах.
Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.
Особенность в том что можно разделять одно окно как вертикально так и горизонтально, то есть можно сделать во весь экран и поделить его на несколько частей разных размеров для использования для различных назначений.
Web developer — плагин для Firefox дающее множество возможностей.
Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.
ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.
Не нужно делать скриншот, потом закидывать в фотошоп и кликать на цвете. Просто устанавливаем плагин и все. Очень удобно.
DataUrl — генерирует код из изображения.
Просто перетаскиваем картинку и получаем строковый код. Очень удобно, можно например передавать картинку как строку между скриптами, или хранить в базе данных в виде строки, то есть вообще файл не сохранять.
Spritebaker — кодирует CSS файл в Base64 что значительно уменьшает время загрузки.
Советую использовать когда CSS файл достаточно большой, 100 строк к примеру.
Pjax — плагин которой позволяет изменять содержимое страницы без ее перезагрузки.
Читать полностью »
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
.png "Дайджест интересных новостей и материалов из мира айти за последнюю неделю №14 (7 — 13 июля 2012)")
Читать полностью »
На большинстве сайтов, посвященных веб-дизайну, можно найти перечни наиболее распространенных ошибок оформления. Это всевозможные карикатуры, 'вредные советы' или строгие наставления из разряда 'низачто не делайте так, иначе ваш сайт никогда не станет популярным'. Перечислять их тут нет смысла, так как они не только весьма широко распространены, но и, большей частью, очевидны. Казалось бы, любой сайт с высокими рейтингами ТИЦ и PR должен соответствовать этим требованиям, однако, разработчики Blizzard Entertainment стремятся убедить нас в обратном.Читать полностью »
Любое поведение — это вид взаимодействия. Антонима (антивзаимодействия и неповедения) не существует, а не взаимодействовать невозможно.
Все, что есть на сайте, взаимодействует с пользователем. Расположение блоков, копирайтинг, цвет текста, выравнивание форм, отсутствие или наличие сетки — все это части коммуникации. С человеком то же самое — сообщение несет все, начиная от типа походки до цвета кожи и длины юбки. И эти сообщения все люди воспринимают почти моментально.
Где-то было исследование, что девочки принимают решение, спать ли с мальчиком (или наоборот) за полторы секунды после того, как его увидели. И у сайта примерно столько же времени, чтобы произвести впечатление приятного, нужного и интересного. Ну, может чуть-чуть побольше, потому что механизм оценки других особей развивался дольше, чем алгоритм распознавания нужных страничек в интернете. Метрика считает отказами визиты менее 15 секунд, но это скорее показатель посетителей, которые вроде поняли, что вы делаете, и это им почему-то не подошло. А вот за <5 секунд уходят люди, которые может быть и нуждаются в ваших услугах, но, загружая страницу, думают «о боже, что это, куда я попал», и уходят, навсегда потеряв возможность преобразить свою жизнь с помощью вашего сайта мечты.
Читать полностью »
