Сайт на html5 и сss3

Статья для заказчиков, которая простым языком рассказывает что ждать от сайтов на Html5 и почему фрилансеры Вас разводят на этом.

Вступление: Зачем нужен html и css?

Html и css — Это базовые языки в любом сайте, т.е. на них написан абсолютно любой сайт. Все остальные языки и системы управления нужны чтобы управлять этими двумя.

Вывод: Html и Css действительно очень важные части сайта, поэтому нужно знать как они работают.

В чем главный обман, при создании сайтов на html5 и css3?

Если заказчик спрашивает меня делаю ли я сайты на html5 и css3, то это значит он вообще ничего не понимает в сайтах, но хочет чего-то модного.

1) На самом деле Html5 и css3 появились и применяются уже несколько лет. Как вообще появляются новые версии языка? Это все из-за заказчиков. Каждый год все хотят все более оригинальные сайты, нестандартные дизайны и т.д. Но реализовать на практике то что создал мозг креативного дизайнера бывает очень и очень сложно! Причем речь идет об очень простых вещах: Например изображение с закругленными углами! Кажется банальность? Но еще 2 года назад эта задача вызывала кучу проблем! Поэтому производители браузеров договорились между собой и внесли изменения в свои браузеры. Таким образом появилось новое свойство css, которое отвечает за скругление углов.

Получается, что очень многое из того, что Вы привыкли видеть по-умолчанию, это уже html5 и css3. Т.е. фрилансер может сделать просто текст с тенью или скругленные углы и сказать что Ваш сайт на html5 =)

2) В Html5 и Css3 появилось много вещей, которые облегчают жизнь разработчику, но заказчик не заметит никакой разницы.

Как видно из предыдущего абзаца новый стандарт языка появляется чтобы облегчить жизнь разработчикам. Например раньше все анимации делались на Javascript, а теперь есть возможность их делать на Css. Но Вам как заказчику какая разница на чем сделана анимация на Вашем сайте? Разве Вы сможете отличить одну от другой?

3) Новые функции в разных браузерах могут работать по-разному.

К сожалению, новые свойства внедряются очень медленно. А некоторыми браузерами они не поддерживаются совсем, особенно это касается браузеров на мобильных телефонах и старых Internet Explorer. Тут многие молодые разработчики откровенно халявят и просто массово используют новые свойства, не проверяя их нигде. Заказчик же также проверяет сайт только в том браузере где сидит сам, вот и получается что 30% пользователей увидят Ваш сайт с ошибками.

Чем же полезен Html5 для сайта? Это важно знать!

Html5 помогает продвижению! Представьте что на наш сайт пришел робот яндекса и пытается понять насколько этот сайт полезен и как высоко поставить его в поиске. Но у нас на каждой странице вверху шапка, внизу подвал, слева дополнительное меню и т.п. Каждый из Вас легко поймет что это все повторяется и на каждой странице одинаковое, а читать нужно только то что в центре. Роботы этого не понимают!  В html5 появились специальные теги для обозначения каждого элемента Вашего сайта, они помогают понять роботу что является основным текстом страницы, а что побочной информацией! Этих тегов очень много и большинство Вам никогда не пригодится. Например, есть тег для первого вхождения термина в текст, который потом потом стал аббревиатурой.Теги, которые на 2015 год поддерживаются всеми браузерами и которые должны быть на сайте:

1. nav — обозначает главное меню вашего сайта
2. header — говорит поисковику, что это шапка сайта
3. footer — подвал вашего сайта
4. aside — боковая колонка с меню, рекламой и т.п.
5. article — новость или статья. Используется для списка новостей. Т.е. если у Вас выносятся 3 последние новости на главную, то каждая должна быть в теге article.
6. section — очень важный тег для одностраничников. Каждый отдельный блог должен быть в таком теге, а то поисковик вообще не понимает где у Вас кончаются условия доставки и начинается описание товара.

Как проверить используются ли эти теги на Вашем сайте? Для этого я записал небольшое видео, которое появится очень скоро. Просто перешел на Win10 и программка для записи полетела =) Как только восстановлю, так сразу выложу.

Насколько это помогает — наш опыт. На самом деле какой-то объективной статистики нет, т.е. на данный момент никто Вам не скажет насколько Выше Ваш сайт станет в поиске, если в нем заменить все теги на новые, но один яркий пример у меня есть:

Параллельно мы ведем другой сайт, на котором публикуются новости и который есть в сервисе «Яндекс новости». Там мы конкурируем с сайтами, которые были разработаны гораздо раньше и над которыми работают гораздо более серьезные команды. Новости мы берем от этих же конкурентов и просто переписываем своими словами. Для Яндекса очень важна дата публикации новости, т.к. кто первый опубликовал, тот будет самым первым в списке СМИ.

И вот тут вступает Html5: в нем появился новый тег для обозначения даты: date, он позволяет поисковикам показывать время создания новости вплоть до секунды, а обычным пользователям просто дату и час. У конкурентов же старый тег, который показывает только дату и час всем. Таким образом Яндекс с считал именно нас первоисточником и ставил нас выше конкурентов с своем списке.