↓
 ↑
Регистрация
Имя/email

Пароль

 
Войти при помощи
Временно не работает,
как войти читайте здесь!

Новый (адаптивный) дизайн сайта

21 ноября 2018

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

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

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




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

Просмотров: 5689+2

48 комментариев из 223 (показать все)
2 декабря 2018
Попробовал переключиться на новый дизайн, ну в целом свою функцию он вроде выполняет с адаптивностью, на смартфоне теперь все же комфортнее пользоваться.
Выглядит правда несколько блекло и уныло, кастомизация фонов (даже просто белый/черный) и шрифтов хоть парочку на выбор (например по паре...тройке вариаций тeх же Roboto/Droid/San Francisco если уж это для смартфонов делается) ну и размеров шрифтов под пользователя зашла бы к месту (а может она и есть и это я туповат и не разобрался до конца, в самих текстах то и так можно было +/- уменьшать и фон менять на темный).
Для смартфона довольно мелкие тексты и размер элементов, кому то может оказаться и сложновато, для меня норм но у меня руки маленькие и читать со смартфона попривык уже, хотя в маршрутке например... не знаю в общем.
Поиск фиков - пока как-то коряво выглядит, странновато.
Я по правде в основном с нормального ПК прихожу, на нем в старом дизайне как-то более комфортно, если останется возможность переключаться - буду рад.
3 декабря 2018
Всплывающее окно скрыта/ЧС: https://www.pichome.ru/images/2018/12/03/Uwd0z3QxV.png

В этом же окне почему-то сломана инерционная прокрутка.
ReFeRy Онлайн
3 декабря 2018
Styx
Вернуть - исправил. А на счет прокрутки не понял.
3 декабря 2018
ReFeRy, инерционная прокрутка — это когда ты пальцем смахиваешь вверх/вниз, и контент продолжает скроллиться, постепенно замедляясь. Вот в этом окне это почему-то ломается.
ReFeRy Онлайн
3 декабря 2018
Styx
Во всех модальных окнах так. Предполагаю, что это поведение надо дополнительно эмулировать. Я использовал чужой скрипт модальных окон, видимо, там этого нет.
3 декабря 2018
Цитата сообщения ReFeRy от 03.12.2018 в 15:13
Styx
Во всех модальных окнах так. Предполагаю, что это поведение надо дополнительно эмулировать. Я использовал чужой скрипт модальных окон, видимо, там этого нет.

Оу, видимо, это было единственное модальное окно, которое я когда-либо открывал (на телефоне) :)
Штука не в том, что там «этого нет», штука в том, что там это явно запрещается (меняется стандартное поведение мобильного браузера).
ReFeRy Онлайн
3 декабря 2018
Styx
Неа. Стандартное поведение просто остаётся на основном содержимом страницы, а не переносится на модальное окно. Если присмотреться, на фоне всё видно.
3 декабря 2018
ReFeRy, стандартное поведение браузера — инерционный скролл. В этом окне он специально отключается. Я сейчас даже точно скажу, как именно.

Упд: был неправ. Инерционный скроллинг — стандартное поведение только для документа. Для fixed/absolute его нужно специально включать:
#modalBody, .arcticmodal-container_i {
-webkit-overflow-scrolling: touch;
}

Результат: https://cl.ly/531857a25361 (видео, ≈8.3МБ)

Упд2: для Хрома может понадобиться добавить z-index:0 для скроллящегося контента.
4 декабря 2018
Если честно, то новый вид мне не понравился. Это с телефона/смарфона действительно будет удобно, а мне с планшета это как-то малофункционально, что ли. Может я где и не права, но такое вот моё мнение.
4 декабря 2018
На мое мнение, новый вид нормальный, только нужна регулировка размера шрифта. Ну, или я просто ее не заметил, что вполне вероятно ;). Хотя, если будет возможность переключаться между дизайнами — буду рад☕.
5 декабря 2018
Удобно. Но я привыкла читать крупные фанфики монолитным текстом, и в новом дизайне, когда я меняю ориентацию экрана или переключаюсь на другие приложения и вкладки, текст обязательно улетает куда-нибудь вверх или вниз, и мне приходится листать, чтобы найти кусок, на котором я остановилась. И еще заметила. Если у фанфика имеется обложка, при нажатии кнопки "читать" текст шапки становится вертикальным, зажатый обложкой и рекламой.
5 декабря 2018
Пост без комментариев: https://cl.ly/f8b6736861d8
7 декабря 2018
Хотелось бы фон ленты (где надпись FANFICS.ME, фанфики, фандомы и др.) сделать более яркого цвета. Сделать возможной настройку цветов и шрифтов пользователем под себя. По мне, дизайн сайта слишком блеклый, можно сделать и поярче.
11 декабря 2018
А мне старый дизайн так нравится, привычный он, удобный, почти родной) Хорошо бы если бы осталась возможнось читать и со старой версией
14 декабря 2018
Неплохо. Но мне не удобно, что рекомендации из шапки ушли во всплывающее окно. Слишком много кликов. Может сделать какие то фильтры для поиска? И в популярных фандомах слишком мелкий шрифт с планшета, тяжело попадать пальцем. Шрифт в принципе мелковат, для чтения уже лучше, но все же. Отлично было бы если бы можно было его менять хотя бы для чтения.
20 декабря 2018
А в новом дизайне с телефона нет кнопки переключения на пк формат или я ее не нашла просто? Такая кнопочка нужна, очень неудобно пользоваться сайтами, где с мобильной версии на полную нельзя перейти. Если сделать возможность выбора технически не возможно, то лучше оставить старый.
22 декабря 2018
Поддерживаю про ссылку на отзывфест! Попасть туда можно только через тернии, а между тем, это очень важный аспект жизни на фанфиксе! Постоянное обновление интересных фанфиков, как минимум.
Soleil Vert
22 декабря 2018
Тоже хочу баннер/ссылку отзыв-феста, ходить в пост через обсуждения неудобно.
23 декабря 2018
Присоединяюсь к просьбам про отзывфест.
24 декабря 2018
Изменений не так уж много и привыкнуть можно быстро.
25 декабря 2018
А можно я просто спрошу одну вещь, которая объединяет все просьбы, вроде той с отзывофестом, в одно большое недоумение?

_Нахрена_ выкатывать адаптив, суть которого в том, чтобы сделать существующие функции сайта более доступными, если этот адаптив настолько плох, что ради того, чтобы он выглядел адекватно, приходится прятать _реально важные функции_?
27 декабря 2018
Закрепленный топбар не слишком удобен, крадет визуальную область контента, не слишком удобно на смартфонах. В мобильной версии меню лучше сделать сбоку, так более привычнее.
31 декабря 2018
Поправьте права на favicon, он не загружается, ошибка 403.
31 декабря 2018
Hamster
да он с выкатки дизайна не загружается xD
ReFeRy Онлайн
31 декабря 2018
Там симлинк на папку картинок, после переключения дизайна на основной домен, фавикон будет.
31 декабря 2018
С НГ всех в этом чатике
19 января 2019
пока нравится дизайн.
не знаю куда обращаться потому пишу сюда. о том что не получается поставить отметку "прочитано. 2019 год" там в списке 2018 последний год.
21 января 2019
Ну так в 2018 же редизайн выложили на суд. На том как бы летоисчисление и закончилось.
25 января 2019
Прошу оставить возможность, смотреть со старого дизайна. В новом, лично мне, все не привычно. Размер странички слишком маленький, нельзя отрегулировать, в старом из-за большого размера видно все одновременно, и это удобно, мне. Нельзя регулировать размеры шрифтов.
А вообше,спасибо за вашу работу! Самое главное-это начинание и чтобы всем было удобно!
25 января 2019
belochkabibi
Увы, админ не оставит нынешнюю версию. Посмотрите комментарии: все об этом просят. У всех претензии, все просят либо оставить обе версии, либо не вводить новую. Админ же как будто не замечает.
Вот пост на тему: https://fanfics.me/message356680
Soleil Vert
25 января 2019
#дуров_верни_стену
бгг
7 февраля 2019
новый дизайн не дает скачивать документы из сообщений на смарте. даже если зайти с паффина и запросить версию для пк
7 февраля 2019
slyly
Реф писал, что сейчас не настроен редирект, как переедем с теста на основу, так всё заработает.
7 февраля 2019
Maiolika

о спасибо)))
14 февраля 2019
Дизайн хорош, единственное но - при просмотре фанфиков на черном фоне плохо видно надписи в окнах Добавление фанфика в избранное и меню профиля
ReFeRy Онлайн
14 февраля 2019
Kytty
Над ночной темой ещё буду работать.
15 февраля 2019
А в остальном все пучком.
17 февраля 2019
ReFeRy
Я тоже по поводу Ночной версии.
Не видно текста в выпадающем окошке с выбором коллекции, меток и заметки. И нечитабельны цитаты внутри комментариев.
24 февраля 2019
Написал тут про типографику в читалке:
http://fanfics.reformal.ru/proj/?ia=1123174
24 февраля 2019
keymasterr,

по первым двум пунктам: у меня как-то так случайно вышло, что я очень сильно менял свое восприятие за короткие промежутки времени, сильно и резко, нередко с возвращением к прошлым восприятиям. И каждый раз, оставаясь одинаково придирчивым и требовательным к визуальной подаче текста, который читаю по сети, на этом контрасте подмечал, что эти конкретные пункты совершенно не универсальны и как раз зависят от индивидуального восприятия. Сам обычно пишу свои стили для читалок, ибо оригинальные _всегда_ меня не устраивают хотя бы маленьким нюансом визуальной подачи, и во время резких смен восприятий постоянно переписывал одни и те же стили для одних и тех же читалок, потому что сейчас мне удобен средний и "универсальный" отступ, а завтра - даже ну слишком уж большой, по меркам большинства, будет мне казаться малым. Причем, это не какая-то настроенческая фишка, а были прям четкие правила восприятия, из-за чего стили, которые я то и дело переписывал, нередко оказывались _идентичными_ тем, что я писал для тех же читалок в прошлом. Вплоть до точного размера отступов, заголовков/текста и т. д.

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

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

>Нужно иметь возможность хранить настройки для разных устройств независимо.

Вообще-то, проблема тут не в объединении этих настроек для разных девайсов, а в том, что правильная типографика тупо не учитывала различия этих девайсов. Современные веб-тренды рекомендуют сайтам решать подобные проблемы определенным способом, но эти тренды совершенно не подходят для онлайн-читалок, потому что это читалки, а не эти ваши интерфейсы/лендинги и прочее, не требующее особого фокуса на тексте. И решать эту проблему следует не отдельными настройками, а отказом от неподходящих трендовых подходов в пользу подхода типографического.
Показать полностью
24 февраля 2019
Жопожуй Конидзэ,

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

Задача оформления текста в читалке — минимально напрягать человека и не давать ему потерять читаемое место.

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

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

— Персональные настройки — это цветовая схема, ширина абзаца и размер текста. Про ширину абзаца мы уже говорили, её достаточно ограничить сверху (и можно убрать возможность настройки). Цвета и кегль — штуки контекстуальные, не универсальные. Их достаточно хранить в куках или браузерном хранилище — уникально для устройства, а не пользователя в целом.


* * *
Говоря про вкусовщину, переписал пока для себя стили так:

.ReadContent {
width: 100% !important;
}

.ReadContent .chapter {
margin: 0 auto;
font-size: 18px;
max-width: 40em;
}

.ReadContent p {
text-indent: 0;
line-height: 1.5em !important;
word-spacing: -.1ex;
letter-spacing: -.01ex;
}
Показать полностью
24 февраля 2019
keymasterr,

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

2) >Расстояние между словами не должно изменяться от строки к строке просто для внешней красоты блока текста.

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

А в остальном я, вообще, согласен, просто счел полезным уточнить пару моментов на всякий.
Показать полностью
ReFeRy Онлайн
24 февраля 2019
keymasterr
Спасибо. Давно планировал что-нибудь там обновить. Подумаю, какие рекомендации применимы.
28 февраля 2019
фанфик-в-файл в новом дизайне сейчас совершенно не работает с фикбуком - даже те работы, у которых стоит "Уточнять у автора/переводчика" он пишет, что "С сайта ficbook.net текст произведения не загружается. Карточка произведения предназначена только для добавления в коллекции и отслеживания обновлений" Эта функция одна из главных, что я пользуюсь... очень хотелось бы правильной её работы...
25 марта 2019
Цитата сообщения ReFeRy от 22.11.2018 в 15:05
Kisa
Не будет. Ей почти не пользуются, не буду больше её поддерживать.

То-то и оно, что "почти"...
Удобная была функция, всегда ею пользовался - именно через нее предпочитал сохранять фики...
Жаль...
ReFeRy Онлайн
25 марта 2019
Vitalij8408
У нас есть возможность скачать фанфик в html. Откройте скачанный файл, и получите ту самую версию для чтения в браузере.
25 марта 2019
Цитата сообщения ReFeRy от 25.03.2019 в 21:44
У нас есть возможность скачать фанфик в html. Откройте скачанный файл, и получите ту самую версию для чтения в браузере.
Возможная проблема в том, что это не всем очевидно.

Цитата сообщения rational_sith от 22.11.2018
полный текст "Червя" доступен только через версию для печати
Обновление: в новом дизайне текст открывается.

ReFeRy
Кстати, почему в html не указаны беты и предупреждение идёт до саммари?
ReFeRy Онлайн
25 марта 2019
Цитата сообщения rational_sith от 25.03.2019 в 22:04
Возможная проблема в том, что это не всем очевидно.

Что тут поделаешь? Это ведь не в качестве замены версии для печати сделано.
Цитата сообщения rational_sith от 25.03.2019 в 22:04
ReFeRy
Кстати, почему в html не указаны беты и предупреждение идёт до саммари?

Потому что скрипт генерации html-версии для скачивания не обновлялся много лет.
ПОИСК
ФАНФИКОВ









Закрыть
Закрыть
Закрыть