Дискуссия по поводу современных технологий в области веб-дизайна и верстки

Здравствуйте!
У меня в процессе создания сайта на завершающей стадии возникли некоторые вопросы, или сомнения, как угодно. Я в этом деле новичок, поэтому неудивительно, что позиция по некоторым сторонам сайтостроительства у меня еще не сформировалась. Поэтому хотелось бы обсудить как с мэтрами, так и с продвинутыми пользователями эти вопросы. Я их обозначил кратко, но хотелось бы услышать ваши мнения, объяснения. По сути, эта тема - приглашение к дискуссии. Я так же буду благодарен, если Вы укажите и свои замечания и ответы на них. Думаю, эта тема будет всем интересна, и особенно полезна новичкам, которые наверняка задаются подобными вопросами.
Итак:
1) Стоит ли использовать в верстке изображения .svg для иконок?
2) Какой "максимальный" размер сайта, при условии, что должен загружаться в среднем за 2-3 секунды?
3) Стоит ли значительно ухудшать качество изображения для уменьшения размера файла? Кто какого качества изображения использует?
4) Насколько распространен CSS3 среди пользователей, примерно, поскольку используются технологии CSS3 и на старых браузерах могут возникнуть проблемы с отображением?
5) Что основное, на что нужно обратить внимание при верстке сайта, если возможно, приведите чек-лист, список пунктов, которые должны быть соблюдены.

Пожалуйста, высказывайтесь!

0

1) Не вижу не одной причины чтобы сказать не стоит.
2) Вообще раньше было правило что сайт должен весит макс. 80-100кб но с учетом повышения скорости интернета сейчас спокойно загружаются сайты 300-400кб- конечно же чем меньше тем лучше.
3) Мне нравится как сжимает PageSpeed Insights от google- может есть варианты получше, но я пользуюсь им.
4) Лично я считаю что пора перестать гонятся за поддержкой старых версий IE- в конце концов те же разработчики игр не парятся что их продукты не поддерживают windows 2000- это проблема пользователей, а в css3 есть очень много вкусняшек которые свели мое пользование javascript практически до нуля.
5) Это довольно необычный вопрос, так как сайты бывают разными, с различной структурой.
Если затрагивать конкретно верстку, а не дизайн то неплохо бы тут поговорить о возможности легкого расширения содержимого сайта, например если у тебя боковое меню с заданной высотой и потом добавляется еще 1 пункт меню и он вылазит за границы блока- распространенная ошибка новичков- потом надо тратить время на изменения стилей, причем иногда это несколько часов. Хороший тон как программистов так и верстальщиков думать наперед даже если это может никогда не пригодится.

2

Дискуссия заглохла, т.к. вопросы не требуют дискуссии. Что ж, может быть, кто-то поставит свои собственные вопросы? На что еще обратить внимание?

0

а вот такой вопрос - 300-400 кб - это с картинками, или это код? вопрос как бы глупый, т.к. 300-400 кб - очень много для кода, но и очень мало для картинок. прямо как-то очень

и еще вопрос - если у меня на css есть элемент со свойством display:none содержит картинку. этот элемент будет показываться при определенных условиях, но по умолчанию он не отображается. А будет ли браузер эту картинку, не показывая, тем не менее загружать?

0

Сообщение от setnik Стоит ли использовать в верстке изображения .svg для иконок?

Почему бы нет? Вот статья для старта понимания вопроса.

Сообщение от setnik Какой "максимальный" размер сайта, при условии, что должен загружаться в среднем за 2-3 секунды?

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

Сообщение от setnik Стоит ли значительно ухудшать качество изображения для уменьшения размера файла? Кто какого качества изображения использует?

Для JPG/JPEG в большинсве случаев для веб-страниц достаточно качества 60. Не используйте PNG-24, если не нужна полупрозрачность (альфа-канал) и большая палитра одновременно. Иногда есть смысл использовать PNG-8.
Уменьшеннию размера изображения также здорово способствует удаление из него метаданных (EXIF).

Сообщение от setnik Насколько распространен CSS3 среди пользователей, примерно, поскольку используются технологии CSS3 и на старых браузерах могут возникнуть проблемы с отображением?

Link 0
Link 1
При желании можно найти еще таблицы совместимости, но эти - достаточно качественные.
Следует конкретизировать понятие "старые браузеры", иначе вопрос получается уж очень расплывчатым. Нет такого, что начиная с такой-то версии браузера включается поддержка всех фич CCS3, а в предыдущей версии ничего из CSS3 не было. Поддержка функционала и имплементация API проходит постепенно.

Сообщение от setnik Что основное, на что нужно обратить внимание при верстке сайта, если возможно, приведите чек-лист, список пунктов, которые должны быть соблюдены.

Тут могут быть разные точки зрения на вопрос. Кто-то скажет, что основное - выполнить ТЗ (включая сроки). Не оспаривая это ни в коей мере, приведу свой взгляд на техническую сторону, ведь вы, скорее всего, о ней спрашиваете:
- адаптивность и доступность контента (учитывайте, что ваш сайт могут просматривать на разных устройствах);
- модульность (реиспользование кода (code reuse), легкость внесения изменений в код, расширяемость);
- семантичность настолько, насколько она возможна и оправдана;
- разделение структуры (верстка), представления (стили) и логики (скрипты);
- соблюдение стиля кодирования (code style), принятого в вашей команде.

Сообщение от setnik и еще вопрос - если у меня на css есть элемент со свойством display:none содержит картинку. этот элемент будет показываться при определенных условиях, но по умолчанию он не отображается. А будет ли браузер эту картинку, не показывая, тем не менее загружать?

Будет. Будет даже если она установлена фоном, а не напрямую через атрибут src тега img. Хотя я не встречал среди современных браузеров иного поведения, но все же предполагаю, что оно возможно, особенно там, где браузер "одержим" оптимизацией скорости загрузки страницы. Вы, кстати, можете это легко проверить, достаточно открыть инструменты разработчика и глянуть на вкладку "Сеть" ("Network").

1

Сообщение от zhibirc Как вы понимаете, на это влияют скорость интернет-соединения, задержки на пути прохождения пакетов, наличие ресурсов в кэше браузера, загрузка системы, которая может мешать рендерить "тяжелый" контент, наличие блокирующих запросов в коде страницы, отклик сервера

Да, конечно, Вы правы, и бессмысленно пытаться определить некую среднюю величину. Собственно, я спрашиваю потому, что делаю коммерческий лендинг, и поэтому важно, чтобы он "открылся" в течение 2-3 секунд, иначе велика вероятность того, что пользователь не дождется загрузки и уйдет (будет "отказ").
Поэтому "скорость загрузки" - это не столько технический (в данном контексте) показатель, сколько маркетинговый. Нужно, чтобы пользователь не ушел. Поэтому нужно, чтобы сайт открылся за 2-3 секунды, или чтобы он открывался не дольше, чем у конкурентов.
Представляется, соответственно, что есть два пути, чтобы к этому вопросу (скорость загрузки аля отказы) подступиться:
1. Можно сделать так, чтобы содержимое сайта подгружалось постепенно, т.е. отказ будет, только если сайт целиком долго грузится, а если сайт большой, но первые 2-3 экрана полностью загрузились быстро, и пока пользователь их смотрит, подгружается все остальное, то это нормальная ситуация. Соответственно, вопрос - а как это сделать? Я даже близко не представляю.
2. Можно оценить размеры ("вес") сайтов конкурентов, т.е. не просто их код, а вместе с картинками, и провести сравнение со своим сайтом. Вопрос - как можно это сделать, посмотреть вес их сайтов?

0

У меня сайт написан на php и css3, нет никакой CMS. А от меня PageSpeed Insights требует прописать настройки в файле .htaccess. Кто-нибудь знает, что это вообще за файл, и где можно взять его типовые образцы.
Другая проблема с Gzip сжатием. Тот же PageSpeed Insights говорит, что у меня Gzip не включено, а сторонние тесты говорят, что Gzip включен по запросы. Как узнать, включен он вообще или нет?

0