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

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

Так что вы открываете файл презентации вашей речи в Powerpoint.

Практически на каждом сайте нужно реализовывать меню. Обычно в этом нет никакой проблемы — заворачиваем все в ненумерованный список — ul, прописываем все наобходимые стили и готово.
Но очень часто дизайнеры, пытаясь создать очередной мегаопупительный макет, делают какие-либо 3D кнопки, либо кнопки с закругленными краями и кучей градиентов, либо еще что либо ужасное :)

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

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

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

И так, моя пятерка советов верстальщику:

1. Никогда не слушай ничьих советов по верстке, только если ты не сам спросил.

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

3. Будь дисциплинированым. Пиши код без ошибок, по самым строгим стандартам. Это не дешевые понты, а основной способ избежать ошибок и не “потеряться” в коде.

4. Интересуйся тем, что ты делаешь. Изучай разносторонне даже те вопросы, на которые, как тебе кажется, у тебя уже есть ответ.

5. Инспектируй время от времени свои старые работы. Если при рассмотрении одной из них окажется что ты совсем ничего не хотел бы в ней изменить — пора подумать о смене профессии ;)

Upd: Все советы на сегодняшний день

* Александр RMcreative Макаров
* Виталий Харисов
* Никита Селецкис
* Александр Исаков
* Алекс Iline
* Юрий Дроздов
* The Webmakers Lounge
* Марат Таналин
* Вадим Макеев
* Юрий Артюх
* Павел Корнилов
* kizu.ru

По просьбам трудящихся коснёмся темы «типографских» раскладок клавиатуры. То есть, как системных средств Windows, так и сторонних программ, позволяющих вводить различные специальные символы с помощью клавиатуры (обычно, правой клавиши Alt, она же AltGr).

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

Также в самом начале скажу, что по моему мнению и мнению некоторых моих коллег использование «типографской» раскладки клавиатуры при определённом навыке (который нарабатывается за неделю-две) гораздо эффективнее в смысле соотношения затрат сил и качества набранного текста, чем использование «автоматизированных типографов» вроде лебедевского и других. Проблема в том, что автотипографы всё равно не справляются с типографированием текстов идеально. А как показывает наша практика, искать ошибки в типографированном тексте тяжелее, чем типографировать текст «с нуля». Конечно же, это в меньшей мере относится к случаям, когда необходимо типографировать длинные литературные тексты, где автотипографы справляются относительно хорошо, а затраты на ручное типографирование весьма велики.

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

Большинство веб-сайтов нашпиговано мелким текстом, читать который — сплошное мучение. Для чего? Нет никаких причин для того, чтобы ужимать так много информации на один экран. Это — просто дурацкое коллективное заблуждение, восходящее к временам, когда экраны были очень, очень маленькими. Поэтому…

Не заставляйте нас изменять размер шрифта

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

Не доказывайте нам, что переполненные страницы лучше выглядят

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

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

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

LeechBlock

LeechBlock может блокировать загружаемые в Firefox сайты. Вы можете создать до шести «блок сетов», каждый из которых может содержать множество сайтов, которые следует блокировать в течение определенного промежутка времени. Например, вы можете создать список со всеми социальными сетями и блокировать их весь рабочий день. Потом вы можете составить список с остальными малополезными сайтами и блокировать их вместе в определенный интервал времени. В блок-сетах вы можете блокировать только определенные субдомены или части определенных порталов.
Скачать LeechBlock можно здесь.

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

Первым в этом списке я выбрал http://www.textureking.com/ — красивый и понятный дизайн сайта, а также хороший выбор текстур которые разделены на 14 категорий.

Следущим будет http://www.cgtextures.com/ — огромное количество текстур и их категорий (вожможно он и получше textureking :), вам решать.

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.

Примечание: ниже приведен перевод статьи «Replace GIF with PNG Images» о том, в каких случаях стоит использовать PNG-формат вместо GIF. Мои комментарии далее курсивом.

Введение

Переносимый сетевой графический формат (Portable Network Graphics, PNG) разрабатывается как более эффективная, гибкая и свободная от патентов замена GIF-формату. PNG был задуман для хранения отдельных растровых изображений для дальнейшего распространения по компьютерным сетям (1). PNG был создан в 1995 в ответ на давление со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый в GIF. Хотя срок действия патента Unisys уже закончился, причины на переход от GIF к PNG остались, практически, прежними (2). Заменив ваши GIF-изображения теми же самыми, но в формате PNG, вы можете ускорить загрузку ваших страниц и сэкономить трафик ваших пользователей.

PNG против GIF: алгоритмы сжатия

PNG использует алгоритм deflate-сжатия обычно с 32Кб скользящим (sliding) окном. Deflate является улучшенной версией алгоритма сжатия Lempel-Ziv (LZ77), который используется в ZIP- и GZIP-файлах (3, 4). Созданный Phil Katz для второй версии PKZip, deflate совмещает LZ77 с кодированием Huffman и является от 10% до 30% более эффективным, чем LZW при сжатии без потери информации. Так же, как и GZIP, некоторые инструменты по PNG-сжатию предполагают опциональный параметр «степень сжатия», которая варьируется от 1 до 9. По умолчанию выставляется 6. 9 является практически всегда лучшим выбором для максимального сжатия.

Не удивительно, что изображения, сохраненные как PNG, обычно от 10% до 30% меньше, чем GIF, хотя в некоторых редких случаях они могут быть больше по размеру (5, 6). В нашем тестировании мы обнаружили, что часть картинок могут быть сжаты от 40% до 50% или даже больше (до 85% для одного примера), в зависимости от изображения. По большей части изображения с большими однотонными областями сжимаются лучше, чем градиентные с большим количеством переходов между цветами.

читать дальше на webo.in →

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

Для начала представлюсь. Зовут меня Евгений (Eugene Spearance) — автор небезызвестного сайта и технологии Типограф.
Просиживая вечера в сладком безделии решил написать несколько статей посвящённых теме компьютерной вёрстки, раскрыть секреты собственного Типографа, а так же поделиться кое-какими соображениями о будущем развитии типографики.

Летом прошлого года компания Apple анонсировала новую версию своего браузера Safari. Неожиданностью стало то, что данный браузер работает не только под Mac OS, но и под Windows XP/Vista. Данный факт дал возможность в первую очередь веб-разработчикам ознакомиться с браузером и тестировать свои разработки в нем, не имея возможности, как например у меня, работы на компьютерах Apple.
На данный момент этот браузер проходит бета-тестирование, и доступен всем желающим для скачивания. Все мы уже не раз читали заявления по поводу того, что Safari быстрее всех, но это вызывает противоречивые мнения. Хотя хочу заметить, что в собственных тестах, часто Safari оказывается на первом месте. Но скорость, браузера хоть и важна, но не является приоритетной. Нам, как веб-разработчикам, важно знать, что представляет из себя браузер, что в нем поддерживается, что нет. В этом плане данный браузер только радует. Он поддерживает стандарты так же хорошо как и FF, и Opera. Конечно, есть свои недоработки, но у кого их нет? У меня выходит так, что все что работает в FF и Opera, так же работает и в Safari. Крайне редко замечаются какие то глюки, ощущение, что баги чаще случаются в других браузерах — но это субъективно. Так же стоит отметить, что Safari идет в авангарде, и многие фишки впервые были внедрены именно в нем, к примеру, тот же <canvas>.
Мне до недавнего времени казалось, что браузер пытаются сделать более стабильным, потому не выпускают релиз. Было странным, что уже больше полугода релиз не может состояться. Однако, на днях наткнулся на интересный блог, где описываются нововведения. Оказывается до сих пор в браузер вводят новую функциональность. Нет, не новые табы и настройки, а именно ту функциональность, которую могут задействовать веб-разработчики. Многие вещи еще тестируются, и доступны только в ночных сборках.

Юзабилити и практичность, а не визуальный дизайн, определяют успех или провал любого веб-сайта. Так как именно пользователь — единственный, кто кликает мышкой и, таким образом, принимает все решения, то одним из стандартных подходов для создания успешных и прибыльных веб-дизайнов стал «дизайн, ориентированный на пользователя» (user-centric design). В конце концов, если пользователь не умеет пользоваться той или иной функцией, ею можно легко пренебречь.

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

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

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

Цвет выделения текста будет, как можно догадаться, красным. Можно добавить несколько параграфов и определить для них разные цвета выделения.

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}

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

Данный текст написан по материалам лекции, прочитанной мной на занятиях «Инновационной студии» в МГУ. Хотел опубликовать ее сразу, но сначала кармы не хватало, потом руки не доходили.
Изложенное полностью основано на собственном опыте и пройдено на 4 реализованных и находящихся в процессе реализации проектах.
Итак, поехали.

Навеяно этим.

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

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!

Честно скажу — люблю Firefox. Люблю еще с тех времен, когда никакого Fx и в помине не было, зато был движок Gecko на котором работал Netscape Navigator, отныне павший в войне браузеров и официально прекращающий свою разработку и поддержку с конца 2007 года. Но не будем о грустном, сегодня доля Fx в России около 15 процентов (примерно столько же имеет и любимая многими Opera), а в Европе по некоторым данным и все 30, на сегодняшний день загружено почти 500 миллионов копий по всему миру. С каждым днем эти цифры постоянно увеличиваются.

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

• Adblock 0.5.3.043 — баннерорезка
• Context Search 0.4.1 — выпадающее меню поисковиков по правой кнопке мыши в контексте страницы
• CustomizeGoogle 0.68 — гуглотюнинг
• Deepest Sender 0.8.0 — блог-клиент
• del.icio.us Bookmarks 1.5.44 — социальные закладки в браузере
• Download Statusbar 0.9.5.2 — интерфейс качалки в статусбаре
• Flashblock 1.5.5 — флэшстоппер
• Gmail Notifier 0.6.2.2 — gmail-уведомлялка
• ImgLikeOpera 0.6.15 — экономия трафика на картинках
• InfoLister 0.9f — генератор списка установленных плагинов и тем
• Locationbar² 0.7.2.1 — удобная адресная строка
• Magic's Video — Downloader 1.5.311207 — флэш-качалка
• MinimizeToTray 0.0.1.2006102615+ — сворачивание в панель задач Виндоус
• OpenSearchFox 0.1.5 — добавление поисковиков из любой формы поиска
• Organize Search Engines 1.1.2 — организация поисковиков с помощью разделителей и папок
• Paste and Go 2 0.8 — вставить и перейти (фишка opera)
• PDF Download 1.0.0.0 — pdf-качалка
• Restarter 1.0 — рестартер
• Sxipper 1.2.4 — паролевставлялка
• Tab Mix Plus 0.3.6 — настройка работы табов