Нужна справедливая критика (front-end'еры, отзовитесь)

Выслушав критику по предыдущей версии своего сайта, я предприняла шаги, чтобы исправить недостатки.
Вот мой сайт:
lingvo-lang.com

Исправлено:
1) Убрала margin-left и margin-right, заменив на left и right.
2) Сделала sticky указатель на меню.
3) Сделала отступ между блоками (почему-то на мобильных девайсах они слишком большие, хотя выставляла в процентах)
4) Изменила шрифт в некоторых местах (в поле отправки сообщений, в первых двух секциях, и так по мелочи)
5) Добавила логотоп в head и там, где должен быть footer.
6) Сделала акцент на первых нескольких блоках: выбрала фоновые картинки и разместила на их фоне текст, предварительно затемнив картинку при помощи тегов.
7) Добавила отступы у заголовках в тех блоках, где их не было.

По-прежнему 94% по адаптиватору, 1 ошибка в html (не могу убрать, там тег, который мне нужен, а валидатор воспринимает его за ошибку), хорошая responsiveness, а вот performance score по gtmetrix упал до 79%. :(

Ольга

24 апреля 2018, 18:55

3 425

Комментарии: 38

Konstantin

24 апреля 2018, 22:00

Интересно сколько вы денег заработайте, точнее сколько курсов продадите «адоптиватору», «gtmetrix-у» и «responsiveness-у»? Вы же для под них сайт подгоняете?

Ольга

24 апреля 2018, 22:08

Нет, просто мне нужна объективная оценка как смотрится сайт на разных девайсах. У меня только андроид и стационарный ПК, я не могу проверить, как сайт смотрится на других устройствах.
На моих мониторах никаких проблем не возникает, а если и возникает, я этого не замечаю.
Опять же, скорость загрузки сайта: как я ее проверю не пользуясь сторонними сайтами, если у меня сайт сохранен в кеше, и скорость интернета высокая? Я никогда не испытывала проблем с загрузкой любых сайтов. Поэтому мне нужно объективное мнение со стороны.
То же самое про отзывчивость. Я не могу проверить отзывчивость сайта, пользуясь только двумя-тремя устройствами.

Stan Ezersky

24 апреля 2018, 22:32

Открыл во весь экран на 27", офигел

Фуллскрин и главный экран не заканчивается!

Второй экран — кусок фона от первого экрана, отступы отсутствуют, нечитаемый тест

Третий экран, вы думаете от тех, кто будет читать?

Четвёртый экран. Хочется вставит картинку с А. Реввой и «не понятно».

Дальше комментировать не буду.

Юзабилити — 0, а оно главное. Вопрос в не в дизайне, а как вы всё преподали…

Посмотрите пару сайтов из гугла, навскидку — всё по теме, ничего лишнего.
ru.duolingo.com/
www.busuu.com/ru

Ольга

24 апреля 2018, 22:39

Какие у вас устройства? Apple? Какой размер экрана?
Busuu предлагает курсы для начального уровня, а duolingo вообще ничего не дает.
У меня абсолютно другой продукт- esp, живые уроки.

Max

24 апреля 2018, 23:11

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

Первая мысль — продаете алкоголь? Потом понял, что-то с языками. Слишком большие фигуры на картинках, зрительно наезжают и подавляют.

Кнопка — призыв к действию, поехала:

И опять в конце водка…

Ольга

24 апреля 2018, 23:18

Большое спасибо за отзывы!

Max

24 апреля 2018, 23:19

поехали изображения относительно текста.

Max

24 апреля 2018, 23:40

Вообще, с предыдущими комментаторами соглашусь (как и из прошлого вопроса), дизайн «наколенчатый», но то, что вы делаете, помогает вам понять, что вы хотите получить в итоге. Поэтому с этим вариантом можете обратиться уже к проф. дизайнерам и верстальщикам. А еще порекомендовал бы поработать над текстами (сравните: «чтобы начать обучение, напишите ЗПТ как Вас зовут, и как с Вами связаться» и «Для начала обучения достаточно представиться и сообщить о предпочтительном способе связи», а еще лучше, самим представить все виды связи, по которым с вами могут связаться: телефон, почта, скайп, форма обратной связи и тд и тп, и чтобы все эти кнопочки вели к запуску скайпа, почтового клиента, звонка) И почему я не могу скопировать телефон, чтобы скопировать его в смартфоне, и почту, чтобы отправить вам письмо?

Stan Ezersky

24 апреля 2018, 23:35

Дело не в «другом продукте», а в качестве подачи информации.

Ольга

24 апреля 2018, 23:37

Отредактировала кое-что. Добавила теги в первых нескольких блоках:

max-width: 100%;
       max-height: 100%;
       background-position: center center;   
  background-attachment: fixed;  
  background-size: cover;

Изменила размер шрифта на 3vw и 2vw, добавила height 10vh.
Постаралась выравнять положение кнопки тегами margin-top/margin-bottom, не знаю, получилось или нет.
В очередной раз благодарю за здравую критику!!! Без вас я ничто.

Stanislavsky

25 апреля 2018, 12:39

Единицы vh и vw на iphone 5,5S,SE не работают. Вроде как.На моем телефоне не работали. Вообще, если Вы хотите, чтобы все было кроссбраузерно, то гуглите сайт caniuse.Кроссбраузерность Вам еще пригодится.

Stan Ezersky

24 апреля 2018, 23:46

front-end'еры, отзовитесь

Посмотрел я Ctrl+U, ужаснулся…

Извините, я обычно не выражаюсь, но это п*ц, товарищи…
И это справедливо. Это не фронтенд, это каша из всего, что можно взять с другого сайта и воткнуть, куда придётся. Наобум, лишь бы было. А что и куда, зачем вникать...

Ольга

25 апреля 2018, 00:12

Неправда, с других сайтов я ничего не воровала. :(
Я пытаюсь создать дизайн сама.
Вы, наверное, спросите, почему я не могу нанять дизайнера?
Все логично. Во-первых, хочу научиться сама. Во-вторых, настоящие верстальщики делают сайты по сотне десятков за год. А мой сайт любимый, выстраданный, я принципиально не хочу отдавать его переделывать, так как это будет очередная работа уставшего веб-дизайнера, у которого мой сайт 1000-ный по счету.
А персонализированное отношение будет стоить слишком дорого. Я не потяну сумму, которую попросят верстальщики и дизайнеры за работой только над моим проектом в течение полугода.
Конечно, веб-дизайн не моя профессия. Это оправдывает мои жалкие попытки что-то создать. :)

Михаил

25 апреля 2018, 05:27

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

snyadanak

25 апреля 2018, 00:11

Честно говоря, хочется что-то порекомендовать или предложить, но глядя на сайт и его код — просто теряешься в том, с чего начать. Поэтому просто посоветую посмотреть видеоуроки по основам основ HTML, CSS, научиться писать его красиво и аккуратно (собирая css и js в одном месте, а не разбрасывая по всей странице непонятно зачем)

Не знаю, имеет ли смысл взять готовый шаблон и попробовать «разобрать его» и попробовать что-то добавить. Ведь, судя по сайту, вы не поймёте где хороший шаблон, а где издевательство над людьми

В общем суть в том, что Вы пытаетесь сделать сразу конфетку, не владея нужными навыками, и вытягивая куски кода непонятно откуда, но так делать не надо. Самое главное — основа, фундамент сайта, чистота и красота в коде, а уже потом сам дизайн. Хотя по дизайну тоже отдельный и очень долгий разговор

Ольга

25 апреля 2018, 00:16

Приятно, что вы говорите на профессиональном языке. Но я не гонюсь за чистотой кода. Мне нужен более-менее работающий сайт. У меня никогда не будет столько клиентов, как у busuu и duolingo, и я за этим не гонюсь.
Я не собираюсь заработать миллионов с моим сайтом. Привлечь одно-двух клиентов уже будет удачей. :)

snyadanak

25 апреля 2018, 00:19

Даже одному-двум клиентам хочется заходить на качественный сайт

Если ищете простой вариант — то посмотрите в сторону bootstrap

Дмитрий

25 апреля 2018, 00:13

Ольга, вы преподаете английский.
Люди здесь, по большей части, программируют. И вряд ли программисты будут учить кого-то английскому с профессиональным подходом, и точно так же наоборот — вы без полного погружения в тему не сможете сделать хороший продающий дизайн сайта (сорян за мою грамотность и пунктуацию, я ведь не лингвист :) ). Так вот. Действительно, лучшим решением для вас будет заказать дизайн у профессионалов.
Если хотите, я могу помочь с этим. У меня есть профессиональный дизайнер, который будет рад за небольшие деньги (его час работы в два раза дешевле, чем занятие у вас), сделать вам хороший дизайн-макет. А дальше вы решите — верстать его самостоятельно, либо отдать опять же, профи. Пытаться усидеть на всех стульях сразу — практика сомнительная. Профессионалы занимаются одним делом, но делают это хорошо.

Ольга

25 апреля 2018, 00:19

Дело в том, что меня уже однажды кинули на деньги… Я заплатила дизайнеру около 10 тыс, а он просто пропал потом. Перенес мой сайт на свой сервер и пропал.
Боюсь кому-нибудь доверять после этого. Официальный компании берут очень дорого (по 50-100 тыс руб), а частников я побаиваюсь после того кидалова. :( :( :(

snyadanak

25 апреля 2018, 00:21

Напишите мне в telegram, помогу бесплатно. @aleksyrom

Ольга

25 апреля 2018, 00:26

Попробую вам написать. Не уверена, что это бесплатно, сейчас все стоит деньги. Но тем не менее. Сейчас установлю telegram.

snyadanak

25 апреля 2018, 00:28

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

Pavel Zarubin

25 апреля 2018, 00:46

Вы собираетесь продавать услуги техническим специалистам, но при этом в техническом (да и в визуальном плане) сайт пробивает дно…
Интересно вы подходите к созданию бизнеса, в среднем дизайн сейчас стоит 150-250$ в России (все что дешевле — так себе дизайнеры, дороже — вам врятли нужно). А теперь считаем: час урока у вас стоит 13$, т.е. чтобы окупить дизайн вам необходимо около 12-20 часов работы, а для этого явно хватит ОДНОГО клиента. Я думаю не стоит говорить что адекватный дизайн или хотя бы читаемый текст вам принесет гораздо больше клиентов, чем 1. А ткущий дизайн не то что технических специалистов не способен привлечь, но я думаю и посетителей одноклассников отпугнет.
P.s. говорю как ваш потенциальный клиент, дизайном вообще не занимаюсь

Pavel Zarubin

25 апреля 2018, 00:49

Как и в любом другом бизнесе важно понимать, что клиент оценивает внешний вид в первую очередь, именно по внешнему виду можно понять насколько серьезен ваш бизнес (если вы вкладываетесь в его развитие, значит уже хотя бы не компания — однодневка)

Ольга

25 апреля 2018, 01:13

13$ это на двоих с носителем. Т.е. мне 7.5$ и носителю 7.5$. А без носителя я беру 500 руб за 90 минут.
И согласитесь, когда клиентов нет вообще, тут особо не разгуляешься.
Как я говорила, я просто учитель, я не дизайнер.
Давно бы наняла верстальщика, если бы сразу нашелся хороший человечек. Ну, сейчас думаю это решится.

Pavel Zarubin

25 апреля 2018, 01:25

Важно еще понимать, что сайт — не панацея, сделав сайт нужно еще вложиться и в его рекламу, где бюджеты в десятки раз больше, чем затраты на дизайн, всем своим друзьям всегда говорю что бизнес надо начинать не с сайта, а с клиентов, к примеру я занимаюсь в основном интернет — магазинами, так вот 90% успешных клиентов начинали продавать товар в инстаграмме/вк/авито и прочих площадках и когда уже появилась финансовая стабильность, только тогда решались делать сайт. И я знаю только двух людей, у которых бизнес начался сразу с сайта, но у них были достаточные бюджеты чтобы сразу и сайт оплатить и рекламу заказать чуть ли не с первого дня.
Да и взять тех же программистов, я думаю тут больше половины не имеют собственных сайтов т.к. у них клиентов и без своего сайта хватает, хотя казалось бы, сапожник без сапог

Pavel Zarubin

25 апреля 2018, 01:28

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

Ольга

25 апреля 2018, 01:54

В чем-то согласна, в чем-то нет.
Я считаю, что меня продвигает только сарафанное радио. Человеку понравились мои уроки, или уроки моего носителя, или вместе, он потом рекомендует, и так пошла реклама -заработало. От одного ученика к другому передаются рекомендации о хорошей услуге. Поэтому я стараюсь работать на совесть, чтобы никто не остался недоволен, или хотя бы не смог сказать что-то плохое о нас, как о преподавателях.
А сайт мне нужен просто для того, чтобы моим будущим ученикам было где посмотреть обо мне. Кинули ссылку -и сразу все понятно.
Вот сюда, кстати, я установила образовательную систему moodle с классной комнатой и доской: en.vussr.ru. А это мой самый первый сайт, который должен работать хорошо на всех устройствах: vussr.ru. Но landing page по прежнему моя мечта.

Pavel Zarubin

25 апреля 2018, 02:01

Так хорошо работает сарафанное радио, что клиентов нет? :) (вопрос риторический)

И согласитесь, когда клиентов нет вообще, тут особо не разгуляешься.

Ну собственно это все демогогия не по теме, понятное дело что вам лучше знать как вести ваш бизнес, просто меня удивил подход, вот я и зацепился, доброй вам ночи :)

Ольга

25 апреля 2018, 02:06

Я начала работать совсем недавно :)
Первые пару лет втопку. Тестовый период это был. :)
У меня нормальная работа началась только месяц назад. Первые успехи, первые клиенты.

Максим Кузнецов

25 апреля 2018, 02:23

На мой скромный взгляд, вы подходите к задаче не с той стороны.

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

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

Что же до самого сайта, из того, что сразу бросается в глаза:
— скрипты, подключаемые с google fonts, можно склеить в один запрос (примерно так):

<link href='http://fonts.googleapis.com/css?family=East+Sea+Dokdo|Oswald|=Open+Sans+Condensed:300|Amatic+SC&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

— без оглядки на небольшую эффективность тега keywords, его максимально допустимая длина — 250 символов (лучше уложиться в 150).
— иконку для сайта (favicon) можно сгенерировать детальнее для разных устройств — https://realfavicongenerator.net/
— для минимизации количества запросов, шрифты и стили лучше склеивать и минифицировать. Не углубляясь в детали, для вашего текущего уровня знаний подойдет MinifyX
— код, указанный ниже, не работает, т.к. он вызван до инициализации jQuery (вообще рекомендую при разработке почаще заглядывать в консоль браузера на наличие ошибок):

<script type="text/javascript">
$(document).ready(function()  {   
$("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

— при помощи плагина на событие OnWebPagePrerender можно реализовать сжатие html, что позитивно оценивается поисковыми системами.

case 'OnWebPagePrerender':
	$html = $modx->resource->_output;
	$html = preg_replace('|\s+|', ' ', $html);
	$modx->resource->_output = $html;

Sergey Leleko

25 апреля 2018, 07:47

Мои 5 копеек:
1) Шрифты все вообще замените
2) первые экраны ( то что сверху) обратите внимание что у вас текст прилепает к правому краю ( на 1920пикселей ширина, другие не смотрел).
3) Кнопка «ОК» замените ее на прямоугольную со скругленными углами, анимацию нужно переделать и уменьшить время работы эффекта
4) Поработайте с размерами шрифтов, межстрочным интвервалом везде по сайту.
5) Шапка и подвал — можно считать что их нету. Наверно не доделали?
6) Форма заказа обратной связи, в placeholder не должно быть столько много текста да и саму форму надо переделать, про кнопку говорил в пунке 3.
7) Для многих этих пунктов я бы советовал вообще лучше bootstrap использовать и заменить то что нужно под ваши нужны на свое. Кстати как вариант есть еще mdboostrap.com (не сочтите за рекламу, просто как альтернативу предлагаю)

Ольга

25 апреля 2018, 14:23

Большо спасибо за комментарии!
Хочу сразу объясниться: я занимаюсь сайтом сама не потому, что экономолю деньги (хотя хорошая дизайнерская работа стоит дорого), а потому, что я обожаю изучать скрипты\коды\теги на практике. Я получаю от этого удовольствие. Мне нравится до ночи копаться в новых тегах, хотя, я понимаю, что это мне все только портит.
У меня две вещи в жизни, которые я обожаю: преподавание английского и front-ending. Английский и преподавание обожаю со студенческой скамьи, могу всю ночь просидеть за компьютером, выбирая материалы для клиентов, подходящие по возрасту/уровню/интересам/разбросу по навыкам/величине словарного запаса/проблемных в точках в грамматике/аудировании/произношении. Потом еще часа три загружаю эти материалы в классную комнату, сжимаю размер, чтобы потом можно было отправить на любое устройство ученику, ну и конечно, split/merge/rotate/convert, чтобы материалы были максимально адаптированны для использования.
Так же я обожаю и верстку, но, как видите, пока успехи средние.
Насчет шаблонов: когда был блог на вордпресс, покупала два дорогих шаблона для сайта, но они оказались очень тяжеловесными, и очень медленно загружались, хотя с эстетической точки зрения были великолепными. Не знаю, может это свойство вордпресс. Заказывала шаблоны на сайте market.envato.com
Благодаря сообществу MODX я нашла профессионала, и надеюсь у нас все получится. :)

Stan Ezersky

25 апреля 2018, 20:55

Вы уж извините, но то, что вы скреативили, никоим образом к фронтенду не относится. Фронтенд — это видимая часть сайта, с которой взаимодействует пользователь. У вас обычная разметка страницы, выполненная с ошибками…

Ольга

25 апреля 2018, 21:47

Была не права. Исправлюсь. :)
А как называется правильно дизайн сайта? Верстка или как-то по-другому?

Raimei

25 апреля 2018, 22:04

Код сайта это верстка (HTML, CSS).

Ого, как вы открыто. Если понадобится помощь с версткой (безвозмездно), то отправьте сообщение на страничке моего профиля. Последую примеру товарища.

Ольга

25 апреля 2018, 23:25

Спасибо! Возможно, обращусь. Сейчас уже один человечек мне помогает. Но если нужна будет помощь с другим сайтом (где у меня классная комната, конференц связь и классная доска), то обязательно вам напишу.

Николай

25 апреля 2018, 23:56

Я бы вам посоветовал зайти на какой-нибудь конструктор, и попытаться сделать что-нибудь там. Например, tilda.cc — очень неплох. Вы можете набросать на нём сайт за пару часов с красивым чистым дизайном и хорошей типографикой. И даже выгрузить код потом к себе на хостинг. Получится что-то вроде этого — togdazine.ru/project/hooligany/ И не надо мучиться. А насчёт кодинга… когда-то мне тоже было интересно им заниматься. А сейчас понимаю, что просидеть кучу времени за монитором должно стоить того по деньгам. А если этим не зарабатываешь, то какой смысл забивать голову и портить себе здоровье...? Всё равно любые полученные знания вебразработки очень быстро устаревают, т.к. это чисто прикладные технологии. Это не физика, химия, или история, которые в целом постоянны. Хотя, кому что.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Нужна справедливая критика (front-end'еры, отзовитесь)

Комментарии: 38

Здесь упомянуты