Предложения по изменению дизайна сайта

[yozhik]

оесть моб версии быстрые и легкие я бы поставил на 1ое место.

вот ничего не поняла - вам главное мобильность, но ставите вы мобильные версии на 10 - е место?!
Да 60% трафика в Инете приходится на mobile, не на web. Всё, постепенно компьютеры уступают место смартфонам, планшетам и прочим мобильным и вседоступным с любой точки вещам.

 

[Yelena]

вот ничего не поняла - вам главное мобильность, но ставите вы мобильные версии на 10 - е место?!.

Я тоже так прочла потом поняла, что, видимо, товарищ первОЕ так написал
Быть понятым - не суть важно, главное - самовыразиться

 

[Степан Бабкин]

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

Не могу. Гугл ругает за мелкий шрифт и пессимизирует сайт в выдаче.

Ты можешь просто нажать Ctrl(или Strg) и "-" и уменьшить насколько тебе надо для комфорта.

Комменты на главную добавил, внизу страницы

 

[yozhik]

Шрифт, битте, шрифт...

Это вообще очень интересная тема. Можно даже сказать - основная тема.
Не стану кидать сюда все ссылки на статьи, которые описывают модные тенденции в шрифтах и типографике, потому что все они на английском и специализированные и там куча лишнего и их много, но вот интересное исследование по тенденциям (хотя проводилось в 2013, но до сих пор на него ориентируются специалисты) Если вкратце отписать, то:
На данный момент (опираясь на 2 основных течения веб-дизайна Flat и Material ) типографика выходит на первый план в восприятии интерфейсов. Более того, определить сколько лет назад создан сайт, насколько он продуман, можно именно по типографике и подбору шрифтов. Есть сайты, которые выходят на первые позиции и получают высочайшие номинации вообще не использующие какой либо контент и виджеты, кроме фона, шрифта и простой анимации на первом экране.
Почему первый экран важен? Потому что 80% пользователей просматривают только его. И только 6 секунд (или от 3 до 5 - по разным данным), согласно статистике. И потом решают - стоит ли оставаться на этом сайте или бежать дальше.
Поэтому, принцип "F-паттерна" так важен - основное внимание пользователя концентрируется на левом верхнем углу. Ну, это прописные истины, я думаю. И поэтому расположение контекстной рекламы на 1 экране в верхнем углу слева и оплачивается лучше всего. Но тут уже встает второй вопрос - что владельцу сайта важнее и чем он может поступиться?
По поводу шрифтов. В названии сайта используется Georgia. Шрифт с засечками. И он наиболее часто применяется на сайтах. Однако, он слишком традиционен. На сегодня лучше использовать шрифты в заголовках без засечек. А засечки оставить солидным газетным изданиям типа Нью-Йорк Таймс и т.п. Но в принципе, почти половина владельцев сайтов используют и шрифты с засечками, но для мелких размеров шрифта и чаще всего, для Основного текста. Однако, в таком случае, лучше использовать шрифты современные, например, Born - современная альтернатива Georgia И вообще шрифтов масса и с засечками и без засечек. Подобрать те, что поддерживают кириллицу проще простого. На любой вкус и цвет...
Но при этом важно не забывать, что некоторые шрифты в разных системах могут заменяться на подобные им из их семейств fontfamily.io
Также рекомендации по методам подбора шрифта (оч хор)
Шрифты для моби (рекомендации)

 

[Степан Бабкин]

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

По шрифтам... Я, к сожалению, дуб в дизайне вообще и в шрифтах в частности. Моё чувство прекрасного сгинуло лет 16 назад, решив, что исполнило свой долг, когда я выбрал себе супругу

Так что если Йожик возьмёт на себя смелость сказать - бери вот эту вот цепочку шрифтов и это хорошо, то я её просто возьму.

До этого на сайте был Arial и это было ужасно как с эстетической (на это ругался гугл - плохо читаемый шрифт), так и с практической точки зрения (слишком узкий шрифт сокращал рекламные площади ). Я его заменил на Georgia, подсмотрев хорошо читаемые сайты, а потом спросил мнения у народа, и она мне сказало, что это сойдёт.

В общем я готов на любой шрифт, который проходит через pagespeed утилиту без замечаний и не вызывает у меня идиосинкразии.

 

[yozhik]

идиосинкразии.

пойду почитаю, что ЭТО там такое может с вами произойтить, если вдруг что ))
П.С. ок, я за выходные (или максимум в начале недели) что-то подберу из стоящего, может быть, вам что-то понравится.

 

[yozhik]

любой шрифт, который проходит через pagespeed утилиту без замечаний

Степан, уточните, пожалуйста, под pagespeed вы имели ввиду PageSpeed Insights 2011 года от гугл?

 

[Степан Бабкин]

Степан, уточните, пожалуйста, под pagespeed вы имели ввиду PageSpeed Insights 2011 года от гугл?

Я имел ввиду вот эту вот тулзу PageSpeed Insights

Там воодишь урл сайта или страницы любой на сайте и смотришь, какие есть нарекания.

До моих изменений там было больше технических проблем, но самое важное, там не было решено 4 проблемы с отображением на мобильнике, которые сейчас все решены. Они пониже отображаются технической части анализа. Там были проблема с размером, цветом и читаемостью шрифтов, невидимимы частями страниц и тому подобное. Сейчас они все исправлены.

 

[yozhik]

Я имел ввиду вот эту вот тулзу PageSpeed Insights

Порылась на некоторых ресурсах - не советуют люди так рваться за этими показателями.
У вас на Главной они сейчас высоки, но внешний вид конкретно страдает. Надо бы как то остановиться. Привели основные блоки в нормальное состояние для отображения на мобильных (некоторых) и, по моему, надо стоп.
Иначе есть риск превратить свой сайт в Яндекс, у которого дизайн-капец, зато 98/100 (был по крайней мере) и А.Лебедев доволен, но как бы пользователи тоже люди
В веб-студиях обычно этим занимаются верстальщики, фронтендщики (я имею ввиду баланс между быстротой загрузки, юзабилити для пользователя и приятным интерфейсом), а между Заказчиком и командой бегает менеджер и утрясает все подобные моменты, а тут никого нет. Ситуация тяжелее

Степан, давайте постепенно приводить в порядок Главную. Возьму на себя роль менеджера.)
1. В коде стоит обернуть все заголовки в h1 h2 h3 ... и так до h6. Так как поисковые боты сначала читают заголовки-ашки (h1 h2 и h3) ниже уже не ищут.
2. По дизайну - на странице не нежелательно больше 3 видов шрифтов (причем учитывается их весы - в смысле начертания.) Тогда нет каши из начертаний, шрифтов, цветов и материал воспринимается целостно. Я сейчас только на первом экране (не на всей странице) насчитала 14 (включая и логотипные буковки и замещающий текст в поисковом окне). Надо уменьшать. Я сначала скину пример, если вам понравится, скину все материалы, чтобы не занимать время:

Как вы смотрите на вот такой вариант для Заголовка статей и Текста статьи и (чуть позже скину пример в Названии кнопок меню тоже Lato):
Open Sans - Google Fonts - Google Chrome (233 kb) закачан 17 декабря 2016 г. Joxi ?

И ещё момент, как вы смотрите на то, что название "Жизнь в Германии" сделать не шрифтом, а картинкой? png с прозрачным фоном, естественно ? Я к тому, чтобы не подключать библиотеку со шрифтами (если выбран нестандартный шрифт для названия), а просто нарезать картинку в разных размерах?

 

[Степан Бабкин]

Степан, давайте постепенно приводить в порядок Главную. Возьму на себя роль менеджера.)

Супер!

У вас на Главной они сейчас высоки, но внешний вид конкретно страдает. Надо бы как то остановиться. Привели основные блоки в нормальное состояние для отображения на мобильных (некоторых) и, по моему, надо стоп.

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

В коде стоит обернуть все заголовки в h1 h2 h3 ... и так до h6. Так как поисковые боты сначала читают заголовки-ашки (h1 h2 и h3) ниже уже не ищут.

Исправил. Но h1 на главной нет... Это сильно плохо? Просто я знаю, что несколько H1 - это совсем худо, а там нечего одним H1 пометить...

Как вы смотрите на вот такой вариант для Заголовка статей и Текста статьи и (чуть позже скину пример в Названии кнопок меню тоже Lato):
Open Sans - Google Fonts - Google Chrome (233 kb) закачан 17 декабря 2016 г. Joxi ?

Меня бесполезно спрашивать, я "буратино был тупой" в шрифтах совершенно. Народ надо спрашивать. Мой народ вот сказала: "А есть ещё варианты?"

И ещё момент, как вы смотрите на то, что название "Жизнь в Германии" сделать не шрифтом, а картинкой? png с прозрачным фоном, естественно ? Я к тому, чтобы не подключать библиотеку со шрифтами (если выбран нестандартный шрифт для названия), а просто нарезать картинку в разных размерах?

Это да, можно, проблема ток что надо взять и сделать, я с картинкам работать тоже не мастак, мне это будет долго и запарно. Только если это прям ваще надо-надо...

Порылась на некоторых ресурсах - не советуют люди так рваться за этими показателями.

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

 

[yozhik]

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

Отлично, если вы определились, то можно начать подправлять дизайн.

Это сильно плохо? Просто я знаю, что несколько H1 - это совсем худо, а там нечего одним H1 пометить..

Попозже может найтись - это же не окончательный вариант, правильно? У меня будут к вам некоторые предложения, но это по ходу пьесы позже. Главное, определиться со шрифтами.

Народ надо спрашивать. Мой народ вот сказала: "А есть ещё варианты?"

Ну, это как бы нормально - недаром вообще то всё начинается с брифа - документа, - что, как и где нравится и хочется Заказчику.
Поэтому, попросите, пожалуйста, "народ" (Лена, ты слышишь, как я тебя называю? ) показать ссылки на страницы сайтов, в которых шрифт нравится - в Заголовках и в Статьях.
В защиту предложенного варианта скажу, что он один из самых популярных в Омериге. Так как это гугловские шрифты. Кстати, вон иммобилиен вообще не парились - поставили шрифт Open Sens вообще кругом - и на меню, и на Заголовки и на тексты и на рекламу. И отлично читается, смотрится + обслуживается гуглом же + загрузка моментальная, потому что сторонняя гугловская библиотека.
А я пока буду подбирать ещё варианты.

Это да, можно, проблема ток что надо взять и сделать, я с картинкам работать тоже не мастак, мне это будет долго и запарно. Только если это прям ваще надо-надо...

Ладно, подумаем над этим вопросом. Чуть позже попытаюсь показать, как бы хорошо было вам иконок добавить. И со шрифтом для названия сайта можно поварьировать - позже покажу.
(Кстати, в мобильном варианте менюшка "гамбургер" съехала в центр. А его нужно вправо. (Юзабилити - это святое.) Название сайта можно вообще убрать в мобильной варианте, так часто делают, а оставить только кликабельный логотипчик.) Но это по желанию.

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

 

[Лена]

Полина, привет
Мне плохо понятно, как вот это выглядит в кириллице. Сама я не умею программировать, поэтому Стёпа должен "пробовать" применять и мне показывать.

показать ссылки на страницы сайтов, в которых шрифт нравится

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

 

[yozhik]

как вот это выглядит в кириллице

Привет, Лена! Привет, народ
Вот так выглядит в кириллице Без имени-1.psd 100 (Жизнь в Германии, RGB8) (115 kb) закачан 18 декабря 2016 г. Joxi
Но я сейчас ищу другой, раз этот не подходит.

скажем тебе что нам нра

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

 

[Лена]

Шрифт пока оставим как есть, порылись в инете и ничего не понравилось. Может завтра чего найду

 

[Лена]

 

[Лена]

Этот шрифт без засечек? Что это за шрифт? "Тире" выглядит некрасиво, слишком длинно, так будет всегда или это можно исправить?
Как это будет выглядеть в мелком виде на мобильнике?
Этот шрифт похож на тот, что ты вчера предлагала, но тот вчерашний мне сейчас, после просмотра "стописот" страниц вчера и сегодня, кажется красивее.

 

[yozhik]

Этот шрифт без засечек? Что это за шрифт? "Тире" выглядит некрасиво, слишком длинно, так будет всегда или это можно исправить?
Как это будет выглядеть в мелком виде на мобильнике?
Этот шрифт похож на тот, что ты вчера предлагала, но тот вчерашний мне сейчас, после просмотра "стописот" страниц вчера и сегодня, кажется красивее.

Лена, привет. Спасибо, что ты уделила этому время.

Это Open Sans на твоей картинке. Шрифт без засечек. Тот, что я и предлагала для основного текста. И тот же, что у меня на картинке.
Он не красиво смотрится на твоей картинке, так как сверстан не правильно - выравнивание по длине (растянуто) , а не по левому краю. И использовано типографское тире, а не дефис (коротенькое тире). Это просто набор других символов и всё.

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

Просто, в связи с развитием мобильных версий плохочитаемые шрифты с засечками уступили место шрифтам без засечек.
Есть поклонники шрифтов с засечками и ничего тут плохого нет. Они вообще 40 на 60 применяются. Тоесть очень и очень часто. Вопрос только - где. Если только на сайте - то там хоть рукописный выставляй. Всё просмотрится-стерпится-слюбится и т.д.. А если на мобильнике?

Вот смотри это ваш шрифт статей на данный момент (с засечками Джорджия) и ниже Open Sans без засечек на мобильнике - шрифты одинаковых начертаний (регуляр) и одинаковых размеров оба.
В каком абзаце сливается визуально шрифт, а в каком более-менее?
Перевод документов для Голубой Карты ЕС - Google Chrome (113 kb) закачан 19 декабря 2016 г. Joxi
Видишь, к чему это я?

Лен, не настаиваю ни капли. Когда привыкнешь их определять на глаз, то увидишь, что всё таки чаще встречаются шрифты как раз без засечек в Инете. И не даром.
Но Степан уже написал, что вы с другим шрифтом уже определились.
Я завтра тогда отпишусь по нему.

 

[Лена]

Я завтра тогда отпишусь по нему

Alles klar спасибо, Полина

 

[Yelena]

Степан, реплика пользователя:
в данный момент мне дизайн сайта и удобство нравится ОЧЕНЬ
... хотя изначально, признаюсь, я (про себя) бурчала: и чего там менять?.. лучшее - враг хорошего... и т.д.
Старею, однако!..

 

[Степан Бабкин]

Степан, реплика пользователя:
в данный момент мне дизайн сайта и удобство нравится ОЧЕНЬ
... хотя изначально, признаюсь, я (про себя) бурчала: и чего там менять?.. лучшее - враг хорошего... и т.д.
Старею, однако!..

Это Йожыку спасибо! Полина нам нарисовала дизайн, я пока только на определённом этапе воплощения. Ещё много всего надо будет улучшать.

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

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