E-mail design

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



20 Email Design Best Practices and Resources for Beginners - базовая статья с основами и ссылками на другие полезные статьи




Responsive Email Design - да-да, и е-мейлы могут быть "отзывчивыми". Будем изучать...

@темы: html, css, design

---

Колбы

Хорошие уроки по рисованию колб:

@темы: photoshop, tutorial

---

Fade in on load

$(document).ready(function(){

// Fade in on load

$("#content".fadeTo(600, 1);

});

@темы: small useful things, jQuery

---

Колонки одной высоты

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

Four Methods to Create Equal Height Columns и ее перевод на хабре.
Колонки одинаковой высоты, самый простой способ - хаброответ на предыдущую статью

@темы: css, small useful things

---

Бесплатный фотошопный плагин для создания различных (!) сеток

@темы: photoshop, downloads

---

Ленточка для навигационной панели в Аргемону. Горжусь собой.

@темы: training

---

Адаптивный дизайн

В последнее время все больше проектов делаю с использованием media queries и концептов адаптивного дизайна. Наткнулась на очень полезную статью на тему "куда девать навигацию на маленьком экране????????" =))) - Responsive Navigation Patterns

Fluid type - и сразу еще одна интересная статья, в этот раз на тему размера шрифта. Очень нужная мысль про 45-75 символов на строку и ее практическое применение в виде

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

@темы: theory, design

---

html5 или Лучше когда-то, чем никогда =)))

Я села, наконец, за освоение html 5 - надо же когда-то начинать. В основном пока интересуют основные теги layout (как оно по-русски? оО), т.к. они сейчас вроде как поддерживаются всеми современными браузерами.

Coding An HTML 5 Layout From Scratch - начинаю со статьи еще 2009 года, которая все еще актуальна и содержит как раз необходимые базовые вещи.

Краткие записи или Что полезного я вытащила из статьи:

Интуитивно понятные теги - header, nav, footer.
nav - блок основной (primary) навигации.

aside - Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель». (c) html book
Т.е. все левое, боковое, все что не основной контент

article - задает содержание сайта вроде новости, статьи, записи блога, форума или др. (c) html book

hgroup - Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от h1 до h6.(c) html book
Т.е. если есть заголовок и подзаголовок, то их помещаем в одну группу.

figure - Используется для группирования любых элементов, например, изображений и подписей к ним. (c) html book
This tag is used to enclose some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. (c) статья по ссылке выше

Продолжение следует...

@темы: html

---

Приятный шаблон

Шаблон от Template Monster - живая демка шаблона продающегося на templatemonster.com. Все, как я люблю: грандж, плавный скроллинг, ненавязчивый и очень красивый параллакс.

@темы: inspiration

---

Много, ОЧЕНЬ много CSS-кнопок!

50 amazing CSS button sets - 50(!) потрясающих сетов CSS-ных кнопок от WebDesignShock! Много вкусного и многому можно поучиться...

@темы: UI, css, set

---

Золотые правила успешной кнопки

Золотые правила успешной кнопки - хорошая статья на Хабре про кнопки =)

@темы: UI, theory, design

---

www.jamiechavez.com/
www.raggiorama.it/home.html

@темы: inspiration

---

jQuery ListNav Plugin - полезный плагин для списков...

@темы: important, jQuery, downloads

---

Browser Shots - потерянная и вновь найденная онлайн-штука для проверки кросс-браузерности

@темы: instrument

---

Кнопочки

Zocial CSS social buttons -вот эти вот красоты сделанные на чистом css. Прелестно. Увидеть живьем

@темы: UI, css, downloads

---

jQuery вкусняшки от Codrops!

Сегодня у нас в меню jQuery вкусняшки от Codrops!

1.

Typography Effects with CSS3 and jQuery - очень красивые извращения над текстом при помощи css3 & JQuery. Демки


2.

Elastic Image Slideshow with Thumbnail Preview - очень необычный слайдер! Полностью респонсив (как оно по-русски? оО) и красиво двигается =) Посмотреть

@темы: jQuery

---

Шрифты

Fonts2U - архив бесплатных и условно бесплатных шрифтов. Очень удобный поиск, возможность посмотреть шрифт на своем тексте и скачать font-face kit(!!!)

@темы: downloads

---

Еще кусочек jQuery

Этот кусочек кода отслеживает скроллинг окна вниз и назначает нужный класс при скроллинге ниже видимости объекта. Очень модный в последнее время эффект - даже на главной дайров есть =)))

var theLoc = $('#nav').position().top;
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('#nav').hasClass('fixed')) {
$('#nav').removeClass('fixed');
}
} else {
if(!$('#nav').hasClass('fixed')) {
$('#nav').addClass('fixed');
}
});

@темы: important, small useful things, jQuery

---

Очень, очень хороший принцип!

"Hypothetically, let’s say you started with a large, 1020px wide site. Check it out on the largest screen you can get your hands on and make sure it looks great. Now drag the window and make it smaller until the design gets ugly. There’s your first breakpoint. Set a media query for that point and fix everything that you need to address. Once you’re finished, grab that window and find the next point of ugliness. Repeat these steps until you’re satisfied with the range that you’ve accounted for. "

Joshua Johnson

@темы: inspiration, css

---

@темы: color