Реквестирую верстальщиков тред. Техподдержка для нубов, крутые примочки для матёрых верстальщиков. Убиваться об вёрстку - в хорошей компании! Вместе веселее.
URL комментария
URL комментария
А что там за ограничения на количество
Сотня
Нужно! Буду премного благодарен.
Дизайн.
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-редактор" вы увидите что исчезли все ваши прописанные префиксы и ещё всякую фигню в коде, которую вы туда точно не писали. Вообще отключите в настройках "визуальный редактор" на время вёрстки.
Ну, вроде всё. Вспомню ещё что-то, допишу.
Пишет Гость:
jpeg-картинки
Punto Switcher - гад. Иногда
--------------------------------
Вспомнила:
19.1 Никогда, слышите, никогда не вставляйте текст в виде картинки! Большой текст, не заголовки.
Нет ничего печальнее визитки сплошь из графики. даже если у вас олупрозрачный фон, а "подложка" ах, красотень неимоверная, НЕ НАДО! Так же не надо пихать текст в виде графики ради нестандартности вёрстки, которую невозможно обеспечить связкой HTML+CSS. Поверьте, еёи не оценят, если вашаи графические простыни будут долго грузится и вынесут пользователья за лимит загрузки. Или у него просто медленный инет.
19.2 Пожалуйсте, не увлекайтесь флешем. Это красивая фича, но не нужно в ней давать важную информацию. Во-первых, это "тяжёлый" контент. во-вторых, бывает так, что плагин Adobe Flash Player конфликтует с браузером. Как думаете, какова вероятность, что рядовой читатель, увидев незнакомую выкладку, откроет другой браузер и загрузит вашу страничку туда? А ещё подумайте, каков процент тех, у кого на компе живут 2 и более браузеров - чтобы было что открыть. Крайне мало, и это сами верстальщики, для них это рабочая необходимость.
19.3 Тоже самое - с видео!
19.4 Всё важное - ТЕКСТОМ! Текстом, текстом и никакой графики!
Левокомент, но пнг-в без прозрачности очень часто легче джипега
Спасибо!
тут говорится ведь чисто про визуальный редактор дайров, который реально супер глючный
Да, и помимо упомянутого в простыне "зажевывания" кодов при переключении, у него есть еще одна милая особенность, про которую часто забывают: при сохранении записи в визуальном редакторе он добавляем кучу лишних строк
Из наблюдений: Гугл Хром - враг и саботажник. Только ФФ.
а что с ним не так? я просто привыкла с хрома сидеть везде, не хочется специально под верстку отдельный браузер держать.
Я, конечно, нуб и ламер, но я так и не нашел, где в Хроме можно посмотреть код фрагмента страницы или свойства изображения. Альтернативный текст Хром у меня нормально отображать отказался. Одним словом, я помучился два дня и зарекся.
на той фб я кучу времени задрачивал, разбираясь в кодах чужих команд.
Для этого достаточно нажать кнопку "поделиться", у тебя будет дайри-код. А в ФФ можно посмотреть реальный, посчитать символы. В Хроме тоже можно, похоже, но очень сложно, там несколько режимов, я долго искал, но нахожу либо отображение всего кода страницы, либо фрагмента, но в замороченном виде.
в любом случае нужно иметь все основные браузеры, чтобы проверять насколько адекватно они отображают вашу верстку
можно, но мне в новом окне работать удобней. ну и в firefox как-то аккуратней все, удобней, действительно
Вот, кстати, по поводу этого вопроса. Объясните нубу что делать, если в одном браузере все нормально, а в другом едет?
Править код, пока ехать не перестанет. ))
Я зимой сделал у верстки рамочку с закругленными углами, убился, старательно прописывая все атрибуты, но рамочка так и осталась с прямыми углами. Так всю игру отыграли, а под конец посмотрел в другом браузере - а рамочка-то скругленная!
Разбираться, почему едет. Может, отказаться от провоцирующих тегов. Помнится, когда-то в древние времена в одном из браузеров неправильно отображались таблицы - рапидорашивало одну колонку на весь экран, а все остальные столбцы было не видно.
Короче, анон, на общий вопрос "что делать?" можно дать только общий ответ "разбираться". Хочешь конкретного ответа - приноси кусок кода. Можешь поменять расцветку и надписи для анонимности, но остальное надо бы показать и браузеры назвать.
htmlbook.ru/css/border-radius
Ну, как-то так.
У меня нет сейчас Хрома под рукой, не могу проверить. ((