Черновик верстки/сайта готов - что дальше?

[Zverushka]

Итак, сделав основую верстку, с плывающими окнами и скриптами нужно пройтись по нижеследующем пунктам, прежде чем отдать сайт заказчику. После каждой своей верстки я прохожусь по каждому из этих пунктов. Часть из них относится только к верстке landing page.

 

Завершение проекта

1) Просмотр страницы в разных масштабах(zoom) и разрешениях. 

Здесь обычно всплывают такие проблемы - как неверное масштабирование спрайтов, лишняя прокрутка страницы, съезжание некоторыъ элементов. Некоторые люди любят смотреть сайты в 0.9 или 1.1 масштабе и у них сайт тоже должен выглядеть нормально.

 

2) Проверка работы javascript - все ли скрипты подключены, нет ли ошибок, проверка usability сайта, подсветки ошибок отправок форм, реакции на hover, active.

 

3) Валидация html css

Тут все понятно, всплывают опечатки, в css или html, а также некоторые ошибки, это все нужно поправить.

 

5) Чистка html, javascript

Удаляем из базового шаблона, на основе которого делалась верстка, лишние javascript плагины, удаляем лишние закомментированые и ненужные куски кода. Код должен быть чистым и аккуратным.

 

6) Окончательная сверка с макетом

Чрезвычайно важный пункт. Так как в процессе верстки часть стилей могла перезаписаться другими, съехать отступы или даже банально - можно было упустить некоторые моменты. Обычно на этом этапе отлавливается много косяков. Накладываем pixel perfect - и смотрим.

 

7) Проверка орфографии. 

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

 

8) Оптимизация изображений и шрифтов

Оптимизируем большие изображения, прежде всего касается png, мелкие - кодируем в base64, шрифты - проверяем все ли использовались, что были приложены к проекту - лишние комментируем на будущее.

 

10) Проверка отправки каждой формы

Пункт относящейся опять к LP верстке под ключ. Отправляем каждую форму из любимого браузера - проверяем на почте - все ли правильно.

 

11) Проверка кроссбраузерности + одна отправка форм

Смотрим сайт в ie, firefox, chrome, opera - заодно в каждом из них делаем одну отправку формы. Известны случаи, когда отправка формы не работает только, например, в файрфоксе. 

 

12) Удаленная проверка

Заходим на сервисы удаленной проверки - для проверки сайта на mac os (здесь я проверяю только в сафари), ie8, android планшетах, ipad'е. Как они выглядят - нет ли багов, глюков, желательно делаем отправку формы (опять же, в и8 легко славить с формой глюк).

 

Ну все - сайт оттестирован и отполирован - можно отправлять заказчику.

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

Edited May 4, 2014 by Zverushka

[121990]

Я б дальше сел и подумал.
Равна ли сумма всех слогаемых бюджета заказчика к моими энергозатратам физическим и психическим.

Если да, можно и вылизывать...

[swandev]

Итак, сделав основую верстку, с плывающими окнами и скриптами нужно пройтись по нижеследующем пунктам, прежде чем отдать сайт заказчику. После каждой своей верстки я прохожусь по каждому из этих пунктов. Часть из них относится только к верстке landing page.

 

Завершение проекта

1) Просмотр страницы в разных масштабах(zoom) и разрешениях. 

Здесь обычно всплывают такие проблемы - как неверное масштабирование спрайтов, лишняя прокрутка страницы, съезжание некоторыъ элементов. Некоторые люди любят смотреть сайты в 0.9 или 1.1 масштабе и у них сайт тоже должен выглядеть нормально.

 

2) Проверка работы javascript - все ли скрипты подключены, нет ли ошибок, проверка usability сайта, подсветки ошибок отправок форм, реакции на hover, active.

 

3) Валидация html css

Тут все понятно, всплывают опечатки, в css или html, а также некоторые ошибки, это все нужно поправить.

 

5) Чистка html, javascript

Удаляем из базового шаблона, на основе которого делалась верстка, лишние javascript плагины, удаляем лишние закомментированые и ненужные куски кода. Код должен быть чистым и аккуратным.

 

6) Окончательная сверка с макетом

Чрезвычайно важный пункт. Так как в процессе верстки часть стилей могла перезаписаться другими, съехать отступы или даже банально - можно было упустить некоторые моменты. Обычно на этом этапе отлавливается много косяков. Накладываем pixel perfect - и смотрим.

 

7) Проверка орфографии. 

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

 

8) Оптимизация изображений и шрифтов

Оптимизируем большие изображения, прежде всего касается png, мелкие - кодируем в base64, шрифты - проверяем все ли использовались, что были приложены к проекту - лишние комментируем на будущее.

 

10) Проверка отправки каждой формы

Пункт относящейся опять к LP верстке под ключ. Отправляем каждую форму из любимого браузера - проверяем на почте - все ли правильно.

 

11) Проверка кроссбраузерности + одна отправка форм

Смотрим сайт в ie, firefox, chrome, opera - заодно в каждом из них делаем одну отправку формы. Известны случаи, когда отправка формы не работает только, например, в файрфоксе. 

 

12) Удаленная проверка

Заходим на сервисы удаленной проверки - для проверки сайта на mac os (здесь я проверяю только в сафари), ie8, android планшетах, ipad'е. Как они выглядят - нет ли багов, глюков, желательно делаем отправку формы (опять же, в и8 легко славить с формой глюк).

 

Ну все - сайт оттестирован и отполирован - можно отправлять заказчику.

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

 

Никогда первый пункт не проверяю, не это ли проблема конечных пользователей сайта?

 

12.  Каким сервисом проверяешь?

[Zverushka]

Никогда первый пункт не проверяю, не это ли проблема конечных пользователей сайта?

Например, если твой сайт просматривают с планшетов с другим разрешением - он автоматически уменьшится (без запрета на уменьшение)- и могут вылезти артефакты от спрайтов. Да, я никогда не ставлю - полный масштаб для таких дейвасов. По-моему намного удобнее обозревать целый сайт сразу - понятно что и где находится, да и часто уменьшение идет небольшое. И сайт и выглядит красиво и читать/пользоваться им удобно.

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

Сервис http://www.browserstack.com/

Edited May 4, 2014 by Zverushka

[swandev]

35$ себя оправдывают?

[Zverushka]

Почему сразу 35? может и 100 быть, все зависит от объема работы. 

Вот, к примеру 10 часовой сайт и его обработка по пунктам, правда они были немного другими на тот момент

 

Завершение проекта

 ✔ -1) Сверка с макетом @done (14-04-20 01:54)

 ✔ 0) Просмотр страницы в разных масштабах и рарешениях @done (14-04-20 01:55)

 ✔ 1) Валидация html css @done (14-04-20 01:57)

 ✔ 2) Проверка javascript @done (14-04-20 02:03)

 ✔ 3) Чистка html, javascript @done (14-04-20 02:04)

 ✔ 4) Оптимизация изображений и шрифтов @done (14-04-20 02:07)

 ✔ 4) php наладка кода @done (14-04-20 02:12)

 ✔ 5) Проверка отправки каждой формы @done (14-04-20 02:12)

 ✔ 6) Проверка кроссбраузерности + одна отправка форм @done (14-04-20 02:34)

7) Удаленная проверка

40мин ушло, при этом я это время включаю в оплату. Основная сложность идет с проверкой отправки форм - вот на этой части я обычно больше всего времени трачу и меня от нее тошнит, потому что всегда куча косяков и проблем вылазит, а все эти сверки, масштабы - фигня...

Edited May 4, 2014 by Zverushka

[swandev]

Я имел ввиду месячная подписка browserstack

 

А с формами проблем не возникало, т.к зачастую она переходит из проекта в проект

Edited May 4, 2014 by ALEEX SWN

[Zverushka]

Я на триале сижу, завожу новые почты. Подумываю объединиться с кем-нибудь и оплачивать, но не сейчас, а в будущем).

У меня в формах есть идентификаторы форм, а также достижение целей метрики. И когда их 7 штук на странице - нужно проверить, та ли цель достигнута (часто ошибаешься), тот ли идентификатор вписан в Hidden тип формы -  вроде "отправка с формы номер 3" - это данные тоже учитываются на почте. Или же прикол с щелчком по кнопке в каталоге заказать нужный товар, а форма на всплытии везде одна - нужно сделать, чтобы при отправке учитывались разные виды целей, да и тип формы был нужны, например "товар длинные бигуди" - и это все надо сверить, не возникло ли где-нибудь ошибки, ведь кроме меня над сайтом никто не работает, а заказчик получит слишком неприятный сюрприз, если данные придут неверные.

Edited May 4, 2014 by Zverushka

[npofopr]

Начинайте уже пользоваться grunt или gulp. 

Многие пункты можно легко автоматизировать.

Информации сейчас очень много. 

У меня например идет сразу проверка на не закрытые теги и т.п. В общем там куча всего. И удалит лишнее оно само) комментарии уж точно.

[Zverushka]

 

У меня например идет сразу проверка на не закрытые теги и т.п. В общем там куча всего. И удалит лишнее оно само) комментарии уж точно.

 

Хм, но ведь нужно удалить только левые комментарии, а нужные оставить.

Щас гляну, что за грунт и гилп...

глянула.. я так поняла для мелких проектов подобная оптимизация js не требуется.

Edited May 4, 2014 by Zverushka

[Sensei]

подобная оптимизация js

Системы сборки позволяют делать намного больше.

Конкатенация, обфускация, шаблонизация, оптимизация и кодирование изображений, генерация спрайтов...

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

 

нужно удалить только левые комментарии, а нужные оставить.

В плагинах это предусмотрено, обычно восклицательный знак в начале комментария.

[CroaToa]

Полезно) спс)

[npofopr]

 

 

У меня например идет сразу проверка на не закрытые теги и т.п. В общем там куча всего. И удалит лишнее оно само) комментарии уж точно.

 

Хм, но ведь нужно удалить только левые комментарии, а нужные оставить.

Щас гляну, что за грунт и гилп...

глянула.. я так поняла для мелких проектов подобная оптимизация js не требуется.

 

Вот у меня самое простое https://github.com/npofopr/my-gulpfile/blob/master/gulpfile.js 

Картинки оптимизирует, уже плюс большой)

Правда у меня stylus livereload не работает.

[CroaToa]

Вот у меня самое простое https://github.com/n...er/gulpfile.js

 

Проще и не бывает )))

 

 

[npofopr]

 

Вот у меня самое простое https://github.com/n...er/gulpfile.js

 

Проще и не бывает )))

 

 

вот так тогда http://github.com/npofopr/my-gulpfile/