Бонбошка
Not your personal army
Пишет Гость:
31.10.2013 в 14:03


Какая полезная тема, и как здесь мало ответов. Дополню.

Дизайн.
1. Цветовая гамма - 2-3 цвета. Три - это максимум. Четыре и более - это уже "каша", которую мало кто умеет готовить.
2. Цвета сочетаемы. Как выбрать? Погуглите "цветовой круг" и цветовые схемы. Вот страничка для начала.
3. Шрифтов лучше поменьше. Если очень-очень нужно, то два. Максимум два. А лучше один и пользоваться курсивом, жирным курсивом и просто жирным выделением. И всё это в рамках _одного_ шрифта.
4. Цвета шрифта сочетаемы с остальным дизом!

Юзабилити оно же "удобство чтения"
5. Текст и фон должны быть контрастны, но не вырвиглазны! Например, на этом фоне лучше бы не полностью чёрный шрифт, а текст тёмно-графитового цвета
6. Выше написали: текст делать покрупнее. Дефолтный размер шрифта этого сообщества неудобный, он мелкий.
7. Наиболее удобными шрифтами для веб-контента считаются шрифты Tahoma и Verdana. Times New Roman лучше не использовать, он разрабатывался для печатных текстов.
8. Межстрочное расстояние изменить хорошо, но учитывайте, что это может не сработать. Дайри обрабатывают не весь HTML-арсенал. Лучше шрифт покрупнее сделать.
9. Не лепите текст впритык к картинкам и краям блоков. Должен быть отступ, "воздух".
10. Вообще "воздух" в дизайне крайне желателен, с ним легче читать и воспринимать информацию. Не бойтесь свободного места. Не уподобляйтесь тем гаврикам, которые в визитную карточку ака картонка пытаются втиснуть инфы на целый буклет.
11. МАСШТАБИРУЕМОСТЬ вашего макета! Помните об удобстве всех. Не надо думать, что с телефонов не читают - читают. И с недо-планшетиков читают. Минимальная ширина дизайна должна быть 500-550 пикселей. Посмотреть как видит дневники пользователь смартфона можно здесь; m.diary.ru/
12. Максимальная ширина блока с текстом лучше 800 px, если больше, то учитываете, что растаращенный по длинным строкам текст читается очень плохо. Думаете, для чего в газетах колонки?
13. Откажитесь от пёстрого фона. Вообще от фона неоднородного. даже если у вас что-то под древность, а диз имитирует побитый молью и временем пергаментный свиток - нафиг тот свиток. На пёстром фоне читать неудобно. То же самое к звёздам.

Удобство загрузки
14. Постарайтесь обойтись без PNG! Это очень "тяжёлый" формат, его использование не всегда оправдано. Вот честно, лучше заглушкам быть без тени, чем грузиться по 5 минут. Кроме того, не забывайте о мобильном интернете, многие с него ходят.
15. Форматы GIF и JPEG - ваше всё. Но не забывайте их оптимизировать. Для JPEG достаточно качества 55.
16. Сохраняйте ваши озуп-картинки в "прогрессивной развёртке". Это значит, что грузиться она будет "кубиками", чем больше загрузилось, тем мельче кубики и тем понятнее детали. НО - в любом случае, зрителю видно будет что здесь ВООБЩЕ грузится.
17. И если вы можете обойтись без графики - обойдитесь без неё.
18. Почитайте мануалы и научитесь работать с цветом фона через HTML и CSS. Это лучше, чем фон делать картинкой.
19. Верстать лучше блоками DIV, а не таблицами. При всей внешней аккуратности есть одна засада. Блоки в браузерах грузятся последовательно, от верха шаблона, к низу. Таблицу же браузеры отрисовывают всю и сразу. То есть ждут, пока загрузится вся графика, потом рисуют. Смекаете, как всё замедляется?

Вёрстка
20.Не надо строить навигацию по вашей выкладке только через картинки, обязательно пишите все "открыть" и названия разделов ТЕКСТОМ. Случись что с сервером, на котором лежат картинки или пользователю надо отключить в браузере показ графики, и всё, нету вашей выкладки, её не видно, в ней нельзя никуда зайти.
21. все картинки снабжайте довеском alt="пояснительный текст". Обязательно это делать если у вас картинка в качестве ссылки. Почему - см п. 19.
22. Повторяю DIV лучше TABLE, грузится быстрее, меньше возможностей запутаться.
23. Если вы новичок, не увлекайтесь всякими красивостями вроде закруглённых уголков, теней текста и боков, радиента и полупрозрачности. Усложните себе жизнь и утонете в коде.
24. Но если увлеклись, то погуглите префиксы и пропишите свою "свиристелку" для всех браузеров! Нет ничего печальнее шаблона, свёрстанного только для одного браузера и разпидорашенного в других. Да, Internet Explorer тоже учитывайте.
25. Подписывайте ваш код. К сожалению, дайри е сохраняют обычные для HTML комментарии, но я видела такой выход: в самое начало тега, перед style добавлять class="пару слов пояснения". Именно class, не ID.
26. Прежде чем взяться за вёрстку, нарисуйте макетную сетку. Просто возьмите лист бумаги и нарисуйте что и за чем у вас будет идти и как расположено относительно границ шаблона и соседних элементов.

Технический момент
27. НЕ верстайте в WORD!!! Это "чёрный ящик", пр переносе он может всякой левой фигни в код напихать. да-да, простой текст из ворда копипастой.
28. Пишите всё в обычном, банальном БЛОКНОТЕ. Сохраняйте код в TXT. Mo;yj и в Notepade++? поверьте, это очень удобная программа. Например тем, что там автоматом показывается иерархичность вложения - что во что вложено. Так легче отслеживать закрыли вы теги или нет. Для p, span, div это обязательно, иначе всё развалится.
29. Если вам в процессе нужно посмотреть, что получается (а смотреть надо как можно чаще, так легче отловить ошибку), то надо выгрузить ваш код в "новую запись", промотать
чуть вниз и нажать кнопку "просмотр". Следующей вкладкой откроются "Черновик", там вё увидите. Можно протестить)
30. НЕ ПРОВЕРЯЙТЕ в "визуальном редакторе"!!! Никогда! Особенно если у вас в дизайне всякте красивости вроде тенюшек и круглых уголков, и вы выполнили пункт 24.. Когда вы вернётесь в "HTML-редактор" вы увидите что исчезли все ваши прописанные префиксы и ещё всякую фигню в коде, которую вы туда точно не писали. Вообще отключите в настройках "визуальный редактор" на время вёрстки.

Ну, вроде всё. Вспомню ещё что-то, допишу.

URL комментария

Пишет Гость:
31.10.2013 в 14:22


озуп-картинки
jpeg-картинки
Punto Switcher - гад. Иногда

--------------------------------
Вспомнила:

19.1 Никогда, слышите, никогда не вставляйте текст в виде картинки! Большой текст, не заголовки.
Нет ничего печальнее визитки сплошь из графики. даже если у вас олупрозрачный фон, а "подложка" ах, красотень неимоверная, НЕ НАДО! Так же не надо пихать текст в виде графики ради нестандартности вёрстки, которую невозможно обеспечить связкой HTML+CSS. Поверьте, еёи не оценят, если вашаи графические простыни будут долго грузится и вынесут пользователья за лимит загрузки. Или у него просто медленный инет.
19.2 Пожалуйсте, не увлекайтесь флешем. Это красивая фича, но не нужно в ней давать важную информацию. Во-первых, это "тяжёлый" контент. во-вторых, бывает так, что плагин Adobe Flash Player конфликтует с браузером. Как думаете, какова вероятность, что рядовой читатель, увидев незнакомую выкладку, откроет другой браузер и загрузит вашу страничку туда? А ещё подумайте, каков процент тех, у кого на компе живут 2 и более браузеров - чтобы было что открыть. Крайне мало, и это сами верстальщики, для них это рабочая необходимость.
19.3 Тоже самое - с видео!
19.4 Всё важное - ТЕКСТОМ! Текстом, текстом и никакой графики!

URL комментария

Пишет Гость:
11.12.2014 в 14:35


Ну в хтмлбук вряд ли прописано, как оформлять дайри-ссылки))

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


Если используется следующая конструкция (фон поста):



Или

(если кладешь картинку как фон таблицы)

То static.diary не вписываешь.

Берешь static.diary.ru/userdir/0/0/0/0/0000000/0000000..., оставляешь /userdir/0/0/0/0/0000000/00000000.jpg, и обязательно в одинарных кавычках. '/userdir/0/0/0/0/0000000/00000000.jpg'

И только с комлогина.

URL комментария

@темы: вёрстка, полезное