Чек лист HTML шаблона перед отправкой на Themeforest & Templatemonster

  • Вконтакте

Всем привет друзья! В этом материале мы поговорим о том как должен выглядеть код HTML шаблона, чтобы успешно пройти модерацию на Themeforest & Templatemonster.
Я покажу как делать не нужно, приведу примеры кода, и так же расскажу какие функцию ваш шаблон должен иметь на борту. Вся информация проверена на личном опыте.

Если вы планируете начать разработку шаблонов для themeforest и не знаете с чего начать, то советую к прочтению статьи:

Используйте Placeholders для изображений.

Перед отправкой html шаблона для модерации на themeforest обязательно замените все изображения на плейсхолдеры. Версия шаблона для покупателей не должна содержать изображения которые вы используете в превью шаблона.

Подробнее о том как это сделать я написать в статье: Генерация плейсхолдеров изображений перед отправкой шаблона на themeforest

Ваш HTML код должен быть валидным

HTML код обязательно должен быть валидным, для проверки валидности HTML кода страницы прямо в браузере я использую расширения для chrome которое называется Validity.
Скачать можно по ссылке: https://chrome.google.com/webstore/detail/validity/bbicmjjbohdfglopkidebfccilipgeif

Исключением может быть ошибка при подключении нескольких шрифтов с Google fonts

page

Если пытаться исправить эту ошибку и использовать подключение нескольких шрифтов отдельными строчками кода, то такой тип подключения будет считаться неправильным с точки зрения оптимизации сайта. И вы получите soft reject с этим пунктом.
С такой ошибкой валидации ваш шаблон примут!

Не используйте inline CSS

HTML код вашего шаблона не должен содержать inline css.

Что такое inline css ?

inline - когда стиль прописан не в отдельном файле/блоке, а непосредственно в коде.

Пример: 
<h1 style=”margin-top: 40px; font-size: 22px;”>Heading Title</h1>

Inline css уместно будет использовать например, для того чтобы задать для section такие стили как: background-image

Как без костыльно и грамотно сделать background-image для section ?

Воспользуемся JavaScript.

HTML:

<section class=”background-image” data-image=”images/bg1.jpg”></section>

JavaScript:

/*-------------------------------------
Background slider function
-------------------------------------*/
$('.background-image').each(function(){
 var url = $(this).attr('data-image');
 if(url){
  $(this).css('background-image', 'url(' + url + ')');
 }
});

Ounput:

<section class=”background-image” data-image=”images/bg1.jpg” style="background-image: url('images/bg1.jpg');" ></section>

В таком варианте вы получите изображения на фоне и ваш код будет чистым. Также используя JavaScript и дата атрибут можно задать и другие css свойства которые после загрузки страницы встанут на свои законные места в коде.

Оптимизируйте JavaScript код

Используйте привязку .on() для событий к методам .click(), .bind(), .hover(), .load(), .ready().

Правильно:

$('$element').on('click', function() {
 //code   
});

Не правильно:

$('$element').click({
 //code
});

Если вы не будете использовать привязку .on(), вы получите soft reject.

Используйте переменные в JavaScript

Если в вашем JavaScript коде вы часто(больше 2-3 раз) обращаетесь к одному тому же элементу через селектор типа $('.class') это будет поводом для софта.
Просто объявите переменную с нужным селектором.

Правильно:

$(function(){
 var myclass = $('.class');
 myclass.on('click', function(){
  //code
 });
 myclass.css('margin', '100000px');
 myclass.addClass('someclass');
 myclass.removeClass('someclass');
});

Не правильно:

$(function(){
 $('.class').on('click', function(){
  //code
 });
 $('.class').css('margin', '100000px');
 $('.class').addClass('someclass');
 $('.class').removeClass('someclass');
});

Шаблон должен иметь документацию

После завершения разработки HTML шаблона сделайте документация для покупателей.
Постарайтесь как можно более подробно описать настройки шаблона.

  • Как загрузить шаблон на хостинг
  • Как настроить контактную форму
  • Как менять иконки
  • Приложите все референсы
  • Оставьте ссылку для поддержки

Цель документации закрыть массу вопросов от клиента, и описать специфические моменты настройки вашей работы для использования клиентом.

Шаблоны не всегда покупают разработчики, а очень часто обычные люди которые немного разбираются в HTML. И чтобы помочь им разобраться с шаблоном и легко его настроить и конечно же избежать обращений в поддержку - делайте документацию.

Также без документации шаблон не сможет пройти проверку.

Шаблон должен быть адаптивным

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

Нормальный дизайн (Качественный, профессиональный)

Самый важный пункт который определит пройдет ли ваш шаблон - это дизайн!

У вас может быть отвратительный код, но хороший дизайн и вы низачто не получите хард, только массу софтов. В дизайне не должно быть проблем с типографикой, отступами, визуальной иерархией.

Если какой-то из пунктов я забыл упомянуть, напишите в комментарии.

Понравилась статья ? Расскажи друзьям
Вконтакте
Telegram
Читать еще: