01:56

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

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

@темы: эээ, Из жизни команд, ФБ-2014

Комментарии
17.06.2014 в 23:54

*подписался*
17.06.2014 в 23:58

Подписываюсь.
А что там за ограничения на количество

18.06.2014 в 00:19

А что там за ограничения на количество
Сотня
18.06.2014 в 03:00

В эпиграфе есть "технический ликбез", там про вёрстку было. Анон помнит, как писал "простынку" про основы. Но забыл: сюда или на зимний инсайд?
18.06.2014 в 06:59

На зимний. Я сохранил, могу сюда перепостить, если нужно. :)
18.06.2014 в 08:12

На зимний. Я сохранил, могу сюда перепостить, если нужно. :)
Нужно! Буду премного благодарен.
18.06.2014 в 08:27

Пишет Гость:
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 комментария
18.06.2014 в 08:29

Постарайтесь обойтись без PNG!
Левокомент, но пнг-в без прозрачности очень часто легче джипега
18.06.2014 в 09:02

Гость в 08:27, это тебе
:red:
Спасибо!
18.06.2014 в 10:47

У меня всё-таки отличное от анона мнение насчёт формата пнг.

изображение
18.06.2014 в 10:50

Да я и с визуальными редакторами поспорил. Дримвьюер няшка (мне по работе его приходится юзать). Позволяет быстро соотнести код/визуалку
18.06.2014 в 10:57

с визуальными редакторами поспорил
тут говорится ведь чисто про визуальный редактор дайров, который реально супер глючный
18.06.2014 в 11:48

тут говорится ведь чисто про визуальный редактор дайров, который реально супер глючный
Да, и помимо упомянутого в простыне "зажевывания" кодов при переключении, у него есть еще одна милая особенность, про которую часто забывают: при сохранении записи в визуальном редакторе он добавляем кучу лишних строк :facepalm: Мы пару раз с этим пролетели, когда править командную запись лезли люди не отвечающие за верстку ("мне только пару слов добавить", "я только картинку поменяю"), с тех пор строго-настрого запретил всем, кроме меня и второго верстальщика к записям подходить, потому что исправлять потом распидоращенную запись очень муторно.
18.06.2014 в 11:55

В дайри удобно верстать в хтмл-режиме, сразу и предпросмотр есть, и автосохранение. Был верстальщиком поневоле, сначала верстал в стороннем хтмл-редакторе, потом заметил, что все равно код вручную правлю, плюнул и верстал в форме новой записи в командном сообществе.
Из наблюдений: Гугл Хром - враг и саботажник. Только ФФ.
18.06.2014 в 11:59

Из наблюдений: Гугл Хром - враг и саботажник.
а что с ним не так? я просто привыкла с хрома сидеть везде, не хочется специально под верстку отдельный браузер держать.
18.06.2014 в 12:04

а что с ним не так?
Я, конечно, нуб и ламер, но я так и не нашел, где в Хроме можно посмотреть код фрагмента страницы или свойства изображения. Альтернативный текст Хром у меня нормально отображать отказался. Одним словом, я помучился два дня и зарекся.
18.06.2014 в 12:09

кстати да, мне firefox очень нравится еще и тем, что можно посмотреть исходный код страницы.
на той фб я кучу времени задрачивал, разбираясь в кодах чужих команд. :facepalm: многое подчерпнул
18.06.2014 в 12:13

на той фб я кучу времени задрачивал, разбираясь в кодах чужих команд
Для этого достаточно нажать кнопку "поделиться", у тебя будет дайри-код. А в ФФ можно посмотреть реальный, посчитать символы. В Хроме тоже можно, похоже, но очень сложно, там несколько режимов, я долго искал, но нахожу либо отображение всего кода страницы, либо фрагмента, но в замороченном виде.
18.06.2014 в 12:21

не хочется специально под верстку отдельный браузер держать.
в любом случае нужно иметь все основные браузеры, чтобы проверять насколько адекватно они отображают вашу верстку
18.06.2014 в 12:22

Для этого достаточно нажать кнопку "поделиться", у тебя будет дайри-код.
можно, но мне в новом окне работать удобней. ну и в firefox как-то аккуратней все, удобней, действительно
18.06.2014 в 12:24

в любом случае нужно иметь все основные браузеры, чтобы проверять насколько адекватно они отображают вашу верстку
Вот, кстати, по поводу этого вопроса. Объясните нубу что делать, если в одном браузере все нормально, а в другом едет?
18.06.2014 в 12:28

что делать, если в одном браузере все нормально, а в другом едет?
Править код, пока ехать не перестанет. ))

Я зимой сделал у верстки рамочку с закругленными углами, убился, старательно прописывая все атрибуты, но рамочка так и осталась с прямыми углами. Так всю игру отыграли, а под конец посмотрел в другом браузере - а рамочка-то скругленная! :lol:
18.06.2014 в 12:29

Вот, кстати, по поводу этого вопроса. Объясните нубу что делать, если в одном браузере все нормально, а в другом едет?

Разбираться, почему едет. Может, отказаться от провоцирующих тегов. Помнится, когда-то в древние времена в одном из браузеров неправильно отображались таблицы - рапидорашивало одну колонку на весь экран, а все остальные столбцы было не видно.

Короче, анон, на общий вопрос "что делать?" можно дать только общий ответ "разбираться". Хочешь конкретного ответа - приноси кусок кода. Можешь поменять расцветку и надписи для анонимности, но остальное надо бы показать и браузеры назвать.
18.06.2014 в 12:30

Если у меня корректно работает во всех, кроме ИЭ, я плюю на него и оставляю как есть.
18.06.2014 в 12:36

Ой, а как правильно делать круглую рамочку?
18.06.2014 в 12:38

Ой, а как правильно делать круглую рамочку?
htmlbook.ru/css/border-radius
18.06.2014 в 12:39

А сочетание ctrl+U в хроме не дает посмотреть исходный код?
18.06.2014 в 12:39

Ой, а как правильно делать круглую рамочку?
Ну, как-то так.
18.06.2014 в 12:41

А сочетание ctrl+U в хроме не дает посмотреть исходный код?
У меня нет сейчас Хрома под рукой, не могу проверить. ((
18.06.2014 в 12:55

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

Расширенная форма

Редактировать

Подписаться на новые комментарии