Нужна верстка интернет-магазина на Opencart. Опыт в верстке ОС. Портфолио. Цена договорная.
OcStore 2.3|Улучшить Cumulative Layout Shift страниц мобильного вида д
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.
Прошу оценить стоимость и сроки.
Сайт:
Движок:
ocStore 2.3
Задание:
Улучшить показатель CLS (Совокупное смещение макета) до значения менее 0,25 для проблемных страниц из Google Search Console:
https://up2.whitebx.ru/k/k/q/2022-02-08_16-27-06.KkqhkqCFooGrzAs3JrSzsE.png
Примеры таких страниц
https://up2.whitebx.ru/6/j/s/Скорость_сайта_CLS_проблемные_урлы.6jSHWeQUivMHCHr6h9svJZ.xlsx
Скорее дело в каком-то одном сквозном элементе на сайте. Первое предположение
было в том, что показатель портит плашка мобильного приложения сверху
https://up2.whitebx.ru/5/3/c/photo_2022-02-08_16-54-47.53C8j6zHgDpNAihR9Wufeg.jpg
Однако после изучения отчета сервиса Google Page Speed по странице
https://canapeclub.ru/hot-meals/kompleks-lanch/
оказалось, что в случае этой страницы это вот такие блоки:
https://up2.whitebx.ru/g/r/d/2022-02-08_16-50-42.GrdA6MEgfd2t8HNNHYPyLc.png
Подробнее:
1.
На сайте не должно быть страниц со значением CLS для мобильного вида >=0.25
2.
Измерение CLS на каждой отдельной странице производится посредством Google PageSpeed Insights.
Особенности:
A. Кроссбраузерность.
Результаты работ должны одинаково выглядеть в основных браузерах (в том числе
старых версий): Firefox 53.0.3, Firefox ESR 52.9.0, Firefox, Chrome,
Safari.
B. Адаптивная вёрстка.
Сайт использует адаптивную вёрстку, необходимо чтобы после выполнения задач, в мобильной версии всё
было читабельно и никуда не съезжало.
Устройство посетителя считается мобильным в случаях когда:
Ширина экрана браузера менее 768px (если CSS-правилами сайта не определено иное).
User-Agent браузера позволяет определить что устройство мобильное.
Вышеуказанные условия должны реагировать на resize окна браузера (мобильные элементы
после ресайза должны быть такими же как после полной перезагрузки с
изначально мобильным разрешением).
Размеры элементов адаптивной версии должны растягиваться в зависимости от размера экрана браузера, и
по ширине и высоте, сохраняя макетные пропорции.
C. Пояснение по адаптиву.
Адаптивность вёрстки мобильного варианта подразумевает, что не существует какого-то
отдельного html-кода для мобильной верстки, дублирующего десктопные
элементы. Вместо этого, один единственный вариант вёрстки, в зависимости
от размера экрана, отображается как десктопный, либо как адаптивный
вариант. Т.е. для десктопного вида и для мобильного вида шапки+меню не
должно быть двух разных блоков html-кода. Один и тот же html должен
отображаться по-разному в зависимости от разрешения экрана..
D. Нельзя использовать h1, h2, h3.
Для вёрстки новых элементов нельзя использовать теги h1 h2 h3 и т.д., поскольку это вредно с точки зрения SEO.
E. Минимум javascript.
Задачи должны быть выполнены с минимально возможным применением javascript.
Если какие-то задачи могут быть решены средствами PHP/HTML/CSS, то они
должны быть решены с помощью PHP/HTML/CSS.
G. Поломки.
Выполнение данной задачи не должно сломать какой-либо другой функционал. Если в
процессе работы вы что-то сломаете, то исправление поломки
осуществляется вами безвозмездно.
H. Результат.
Результат задачи должен быть представлен в том конечном виде, который описан в ТЗ.
Варианты "оно в принципе готово, просто зайдите туда-то, нажмите то-то,
затем ещё туда и туда и вот сюда" крайне не приветствуются. Если после
выполнения работ нужно обновить кэш модификаторов сайта - обновите. Если
нужно будет обновить кэш браузера - измените html-код таким образом,
чтобы файл сам обновился либо смените режим кэширования для этого файла.
Посетители сайта обновлять кэш не будут, но зато увидят поехавшую
вёрстку. Закладывайте это дополнительно в стоимость задачи.
I. SCSS/SASS/препроцессоры.
Следует избегать использования технологий, предполагающих стадию компиляции,
поскольку они усложняют и без того запутанный процесс разработки,
повышая её стоимость. Выгоды от их использования нивелируются негативным
экономическим эффектом.
J. Никакого дебага на продакшене.
На продакшене не должно появляться никаких заглушек и прочего. В случаях
острой необходимости произвести дебаг именно на продакшене, выводите
дамп внутрь HTML-комментария, либо оборачивайте в
if($_SERVER['REMOTE_ADDR'] == 'ВАШ-IP-АДРЕС') { ?>.
Пожалуйста оцените стоимость и сроки выполнения.
- Похожие заказы
- HTML-верстка11 заявокЗакрыт2 года назад
Здравствуйте. Нужно сверстать html Email по этому файлу https://www.figma.com/file/48iRyqLXgKlLJ3raXQiJC2/email?node-id=0%3A1 Чтобы потом этот код можно было экспортировать в mailchimp или что-нибудь наподобие того. Срок желательно сегодня
HTML-верстка14 заявокЗакрыт2 года назадТЗ : Правки в код сайта на wordpress , добавление блоков и расширение функциональности сайта. Знание html и css b javascript.
HTML-верстка9 заявокЗакрыт2 года назадНужна верстка 15 макетов для html писем и 2 макета для печати (эти макеты будут размещены на сайте, переход по ним в html письме по кнопке "Распечатать" (ссылка)). Все скриншоты во вложении. Верстка должна быть адаптивная, ...
HTML-верстка1 исполнительЗавершен2 года назадНужно качественно сверстать макет, по ссылке ниже https://www.figma.com/file/EN2hoMOowNqTPW17LReFqT/%D0%9F%D0%B5%D1%80%D0%B5%D0%B2%D0%BE%D0%B4%D1%8B?node-id=201%3A485 В макете появится еще одна страница - О нас, максимум 3 экрана в высоту В макете появятся следующие изменения - https://docs.google.com/document/d/15qZ1905tYtRWpvlNkWXP-un3cTmi5w2Y_xb9Db3Fpac/edit#heading=h.ht2oztbv513b (только то что написано ниже текста "Правки от 07 февраля").
HTML-верстканет заявокЗакрыт2 года назадсоздать мобильную версию сайта, работает на CMF Arte 7.0
HTML-верстка1 исполнительЗавершен2 года назад- $100
Верстка простого сайта адаптив Исходники https://drive.google.com/file/d/1TEBEoXMUf6p2wd-PV65a5b8bouhsAAuY/view?usp=sharing Натяжка на цмс не нужно я сам буду натягивать. Пишите цена и срок, без цены и сроков не рассматриваю заявки. Антибот 56+5=
HTML-верстка1 исполнительЗавершен2 года назад