100% ширины экрана

Обратите внимание, тестирую обновленный дизайн для страничек игр. Вот, например, страница игры The Escapist. Теперь контент занимает 100% ширины экрана. Владельцы широких мониторов - посмотрите, стало ли удобнее? По-моему стало.

Плюсы

• В основное меню можно добавить много пунктов, при горизонтальном меню с этим уже были проблемы.
• VK-чат теперь не перекрывает основной контент.
• Элементы в сайдбарах следуют за пользователем при вертикальном скроллинге.

Минусы

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

Идея

Как считаете, может весь Игротоп перевести на 100% ширину + добавить справа общий VK-чат? Т.е. внутри каждой игры будет свой чат, в остальном же - единый чат, для "поговорить".

UPDATE 1:
Убрал ВК-чат справа (вернул пока старый, который можно скрыть) + добавил ПАФОСА на фоне.
Потыкайте игры из Топа лучших игр, там практически в каждой есть фон, довольно-таки красиво получилось. Либо вот тема Наводим красоту на страницах игр.

UPDATE 2:
Снова немного изменил.
• ~~Отцентровал название игры~~;
• к иконке добавил рамку;
• вернул инфу сверху, по совету Cherenkov'а сделал её прозрачной, а при наведении мыши - обычной;
• добавил голосовалку справа, в шапку, так что голосовать теперь можно из любого раздела игры;

UPDATE 3:
Совсем убрал сверху инфу об игре. И лого убрал из меню, чтоб место вертикальное не занимало по чем зря. Перенес всё на главную.

Кстати, прошлые варианты можно глянуть, добавив ?fs= от 0 до 2.
Т.е., например:
• http://igrotop.com/games/the_escapists?fs=0 - первоначальный вариант, горизонтальное меню;
• http://igrotop.com/games/the_escapists?fs=1 - первый апдейт;
• http://igrotop.com/games/the_escapists?fs=2 - второй апдейт;
• http://igrotop.com/games/the_escapists - текущий вариант.

Комментарии

3Avex | 30 января 2015 г.

Удалить чат. И ВК закрыть.
2Cherenkov | 30 января 2015 г.

ВК-чат - это вообще беда, он вот лично меня вообще выносит.

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

P.S. частенько контент страниц залезает на футер.
- 0iXy | 30 января 2015 г.
  
  Футер подправлю, в постах правый сайдбар убрал совсем.
  По поводу пафоса тоже примерно понял о чем речь) Прикину, что к чему...
- 0SAXAHOID | 30 января 2015 г.
  
  Можешь показать, где залезает?
  Мне кажется, это проблема какого-то одного браузера (т.к. повторить не могу)
  - 0Cherenkov | 30 января 2015 г.
    
    Картинка.
    
    Да, может быть и такое. Браузер - хром.
    - 0SAXAHOID | 30 января 2015 г.
      
      Нет, в огнелисе нет ничего такого...
1elk | 30 января 2015 г.

iXy, а как насчет создать внутрисайтовый чат (и поместить вместо ВК, например), чтобы пользователи могли переписываться с любой страницы?
- 0Hijikili | 31 января 2015 г.
  
  Интересное предложение, было бы неплохо.
  - 0Popoli | 9 февраля 2015 г.
    
    http://igrotop.com/site/irc вниз страницы пролистайте (в самый низ), есть ссылка на чат.
1iXy | 30 января 2015 г.

Внимание! Посмотрите еще раз. В данный момент - убрал ВК-чат справа (вернул пока старый, который можно скрыть) + добавил ПАФОСА на фоне.
- 1SAXAHOID | 30 января 2015 г.
  
  Мне не очень нравится эффект, хотя не могу пояснить, почему. Сбивает вроде как... Не знаю o_O
  - 1Cherenkov | 30 января 2015 г.
    
    Твоя правда. Только мне не по себе из-за впечатления от дизайна...
  - 0almarc | 30 января 2015 г.
    
    Я.. один ничего не замечаю?
- 0almarc | 30 января 2015 г.
  
  Кнопочка отправить все равно в копирайте, зайди в пост без комментариев заметишь!
  - 0iXy | 30 января 2015 г.
    
    Это я ща подправлю.
- 0iXy | 30 января 2015 г.
  
  Накидаю немножко игро-страничек, для ознакомления:
  
  • http://igrotop.com/games/rock_simulator_rock_and_roll
  • http://igrotop.com/games/elder_scrolls_5_skyrim
  • http://igrotop.com/games/half_life
  • http://igrotop.com/games/terraria
  • http://igrotop.com/games/half_life_2
  
  По моему - достойно...
  - 0Cherenkov | 30 января 2015 г.
    
    Я вот что предлагаю.. Это просто мне кажется, но может действительно лучше будет: что если все данные об игре попробовать убрать в левый сайдбар (я без понятия как)? Тогда не будет этого немного странного прямоугольника и полностью откроется картинка.
    
    Мне кажется, это привнесёт в дизайн больше дзена.
    - 0iXy | 30 января 2015 г.
      
      Данные о игре переедут на главную, а в сайдбаре должно быть что-то, что нужно всегда под рукой. В этот большой квадрат тоже поместим какие-то полезняшки по углам, типа оценок, подписок и т.п.
1iXy | 31 января 2015 г.

Ща покажу новый вариант, вроде нормальный) Прошлый всё-таки не давал покоя.
- 1Arhangel_heart | 31 января 2015 г.
  
  Отлично. Теперь у меня кнопка ответить залезла вниз за логи и песочницу, и мне приходится отправлять сообщение через ctrl+enter
  - 0SAXAHOID | 31 января 2015 г.
    
    ~~Говоришь приходится, будто это что-то плохое~~
    ~~Ну у вас и браузеры~~
    Мда.
    - 0Arhangel_heart | 31 января 2015 г.
      
      Ну, это зависит от того как я сижу. Иногда обе руки на клавиатуре - тогда нормально. А когда одна рука на мышке, а вторая просто лежит, то приходится тянуться :D
      - 0SAXAHOID | 2 февраля 2015 г.
        
        Эээм.
        Контрол есть ещё один возле энтера.
        
        0Arhangel_heart | 2 февраля 2015 г.
        
        really?!
        Я имею ввиду, что либо обе руки на клавиатуре, без использования мышки.
        Или одна рука только на мышке.
        
        0SAXAHOID | 2 февраля 2015 г.
        
        Так вторую перенести... Большой палец на контрол, указательный на энтер. Всю жизнь так делаю. Мышкой мне дольше...
        
        0SAXAHOID | 2 февраля 2015 г.
        
        Вторую — в смысле ту, что не на мышке.
        
        0Arhangel_heart | 2 февраля 2015 г.
        
        Я понял. Но для этого её нужно поднимать. ;D
        
        0SAXAHOID | 2 февраля 2015 г.
        
        Но ведь быстрее >.<
        
        0Arhangel_heart | 2 февраля 2015 г.
        
        Если бы не этот глюк, то быстрее бы было щёлкнуть мышкой, а не тянуться руклй
        
        0SAXAHOID | 2 февраля 2015 г.
        
        ~~Может ты и зерглингов спавнить мышкой предложишь~~ Окей, как знаешь
        
        Свернуть ветку
- 0Shaggy | 31 января 2015 г.
  
  Этот мне нравится больше за счёт более целостного распределения элементов. С добавлением ещё одного (или расширением существующего) левого сайдбара это станет смотреться ещё лучше. И ещё некоторые шапки стали смотреться в разы лучше чем до этого.
  
  Но всё-таки, на мой взгляд, большинство шапок без каких-либо надписей стали выглядеть "голыми". Возможно, стоит вернуть основную информацию об игре, она, думаю, никому не мешала, и смотрелась отлично. Кроме того, наличие ссылок в шапке очень удобно. Лично пользовался несколько раз. Только если возвращать инфу в прежнем виде, затенением, наверное, стоит покрыть всю фоновую картинку, чтобы не возникали яркие кричащие обрывки изображения, сбивающие с толку.
  
  Кстати, если есть возможность, то можно зарезервировать левый верхний угол шапки для указания цены в том же стиме, а во время скидок - суммы скидки и времени до окончания действия акции. Правда не знаю, позволяет ли это делать ентот ихний API. И есть ли вапче партнёрская программа, что пришлось бы кстати.
  
  Ммм... не знаю, куда лучше это воткнуть, и стоит ли это делать, но думаю, можно ещё сделать раздел с цитатами для каждой игры, куда можно заносить цитаты из самой игры и о ней - профессионального сообщества и самих разработчиков. Порою такие короткие фразы становятся куда интереснее целого полотна текста. Их, кстати, можно выводить в случайном порядке при отображении поста об игре, что может придать авторскому тексту некую изюминку, особенно на контрасте мнений.
  - 0iXy | 1 февраля 2015 г.
    
    Зато твой Диззи во всей красе теперь)
    Цена разная по регионам, да и источников для покупки может быть море. Кнопка "Купить игру" обязательно появится.
    В целом же, еще думаю над усовершенствованиями, этот вариант явно лучше прошлого.
    - 0almarc | 1 февраля 2015 г.
      
      Весьма красиво, однако стоит сделать верхнюю картинку побольше, чтобы граничила с описанием!
      - 0almarc | 1 февраля 2015 г.
        
        А нет, все хорошо! Просто диззи сделать по другому.
    - 0Arhangel_heart | 1 февраля 2015 г.
      
      iXy, вопрос - а сколько кадров шапка выдерживает? Для анимации всмысле?
      - 0SAXAHOID | 1 февраля 2015 г.
        
        Берусь предположить, что сколько влезет, лишь бы размер не превышало. Это же гифка обычная.
- 0Cherenkov | 31 января 2015 г.
  
  Лично мне этот нравится.
1iXy | 2 февраля 2015 г.

UPDATE 2 Немного изменил снова, вроде норм) Почитайте в шапке.
- 0Cherenkov | 2 февраля 2015 г.
  
  Текущий лучше всего, но иконку с названием лучше вернуть в левую сторону)) И можно было бы еще, как вариант, совместить текущий вариант со вторым: чтобы окошка с инфой была почти прозрачная, когда заходишь на страницу, а при наведении мышки становилось такой, как сейчас.
- 0Shaggy | 2 февраля 2015 г.
  
  Да, текущий вариант определённо хорош. Иконка с названием тоже лучше в левой стороне. Тёмное окошко с инфой смотрится отлично. Разве что там не хватает какого-то заголовка. Так как имя игры написано ниже, то можно просто использовать что-то вроде "Инфа об игре:". Сильно большим заголовок делать, наверное, не стоит, но покрупнее чем основной шрифт - да.
1iXy | 4 февраля 2015 г.

Update 3)
- 0Shaggy | 4 февраля 2015 г.
  
  Мне одному кажется, что на надписях и ссылках в шапке глаз останавливается, а ту же информацию в основном теле хочется пропустить?
  - 0Cherenkov | 4 февраля 2015 г.
    
    По-моему, нет. Всё нормально.
    
    Такой вопрос. По-моему лого в левом сайдбаре более гармонично смотрелось, не? Может его туда вернуть, а инфо оставить на месте?
    - 0iXy | 4 февраля 2015 г.
      
      Можно попробовать, пока экспериментирую...
  - 0iXy | 5 февраля 2015 г.
    
    Сделал характеристики полосатой табличкой, чтоб обратить на себя внимание.
    - 1Shaggy | 5 февраля 2015 г.
      
      Спасибо, теперь глаз задерживается на данной инфе. Кстати, если нажать там на ссылку "n изданий", переходишь не на страничку с релизами данной игры, а на страничку с изданиями всех игр, что выглядит несколько странно.
      
      И да, на мой вкус, логотип игры в левом сайдбаре смотрится в тему. Без него тоже хорошо, но с лого получается более атмосфернее, что-ли?
      - 0Rogamol | 5 февраля 2015 г.
        
        И не вышедшие (запланированные) издания теперь совсем не отображаются...
0SAXAHOID | 30 января 2015 г.

Весь игротоп — да.
Чат — нетъ.
И сделать возможность поскрывать сайдбары по максимуму, чтобы текст был центрованным и во весь экран.
Люблю скейлящиеся под вайдскрин сайты ^_^
- 0iXy | 30 января 2015 г.
  
  Надо же что-то в правый сайдбар добавить) Конечно, кому чат не нужен, можно будет скрыть.
  - 0SAXAHOID | 30 января 2015 г.
    
    Почему бы ленту последних комментов туда не кинуть?
    Или вон отзывы к играм, или табличку ВАП...
    Хм.
    Можно же сделать возможность юзеру выбрать, что он хочет там видеть.
    - 0iXy | 30 января 2015 г.
      
      Кстати да, можно кастомизировать. Пораскину мозгами) Кстати, не забываем, можно втютюхать 2 сайдбара по бокам, слева и справа. Если оба кастомизировать, будет ниче так...
0almarc | 30 января 2015 г.

Чат не нужен, никому не нужен...
Лучше растянуть сетки комментариев!
- 0almarc | 30 января 2015 г.
  
  Из-за этого чата читать просто невозможно!
  - 0SAXAHOID | 30 января 2015 г.
    
    Его можно убить с помощью либо adblock, либо noscript, либо ghostery, на выбор.
    Думаю, ещё есть способы (типа плагинов, подменяющих сайту css на кастомный), но этих троих должно хватить в качестве экстренной меры.
    - 0Usernm | 30 января 2015 г.
      
      Вот именно это я и сделал adblock'ом, когда увидел это п...ц. Не надо так.
0janna070 | 30 января 2015 г.

Сам пост и комментарии удобнее сделать чуть пошире(не узкой колонкой),так удобнее читать будет. :)
0dred1792 | 30 января 2015 г.

Короткие описания от кураторов к играм слетели.
- 0iXy | 30 января 2015 г.
  
  Верну куда-нибудь.
0Arhangel_heart | 30 января 2015 г.

Мда... Старались, картинки к фону подбирали, вырезали. А тут на - и все кануло в лету.
- 0Arhangel_heart | 30 января 2015 г.
  
  К шапке всмысле.
  - 0Arhangel_heart | 30 января 2015 г.
    
    + некоторые мои руководство сузились до ужасных размеров...
0vorx | 30 января 2015 г.

Во. сейчас уже лучше стало, теперь текст не ужимает.
- 3Arhangel_heart | 30 января 2015 г.
  
  Кому как...
0almarc | 30 января 2015 г.

Даже без ВК чата хреново смотрится, смысла в этом нет!
Все что нужно и так было как на ладони...
0Nord | 30 января 2015 г.

Вот теперь шикарно. Как ВК убрали - стало лучше.
- 0Nickorsar | 30 января 2015 г.
  
  Странно, но у меня он так и висит.(??)
  - 0SAXAHOID | 30 января 2015 г.
    
    На страницах игр остался; на "постах" убрали
    - 0Nickorsar | 30 января 2015 г.
      
      Все,дошло теперь.
      - 0almarc | 30 января 2015 г.
        
        Кнопка отправить застряла в нижней панели с копирайтом, исправьте!
0Nickorsar | 30 января 2015 г.

Аналогичная ситуация: кнопка "Отправить" влезла в копирайт. На яндекс браузере.
0Cherenkov | 30 января 2015 г.

Ухты. А вот это интересное решение - сделать фоновую картинку сзади этих баров.
0Cherenkov | 31 января 2015 г.

С прозрачным верхним баром выглядит как-то не то, что думаете?
- 0SAXAHOID | 31 января 2015 г.
  
  Ну, это уже меня можешь ругать, прозрачность поручили мне выкрутить так, чтобы глаза не мозолило. Мне хотелось ещё прозрачнее, но...
  Или ты про сам факт прозрачности? По мне классно вышло.
- 0Shaggy | 31 января 2015 г.
  
  Как по мне, всё кроме левого сайдбара выглядит... ммм... менее удачно нежели было. Нет единого пространства, элементы не связаны между собой в единое целое, всё пока что выглядит как набор кусков, которые абы как свалили в одну кучу. Чего только стоит эта градиентная граница между верхней частью и белым телом. Но так как у меня не широкоформатник, увы, не могу знать как это выглядит на других мониторах. Может быть и более прилично. А пока что выразить всю полноту и глубину чувств от нового дизайна не позволяют правила приличного общества.
  - 0SAXAHOID | 31 января 2015 г.
    
    Да вроде нормально
    - 0Shaggy | 31 января 2015 г.
      
      Значит, масштабирование странички позволяет поглядеть на то, как это выглядит на широкоформате. Нет, это не нормально. Это ужасно. Все элементы странички должны составлять единое целое. Погляди сам - левый сайдбар отдельно, отдельно от него плашка с затемнением, само-по себе фоном валяется изображение. Градиент, как и положено градиенту, страничку не соединяет, а как бы извиняется: "у нас тут всё не очень, но мы старались как могли". А то что на него залезает тексты, шапки и прочее... ну мы видели пример хорошего перекрытия в посте к PayDay2. Тут можно наблюдать плохой пример.
      
      Увы, я не дизайнер, поэтому сказать (и тем более сделать) как надо — не могу. А как не специалист говорю - это смотрится неподобающе заявленному масштабу игротопа.
      - 0SAXAHOID | 31 января 2015 г.
        
        Нунезнаюнезнаю.
        
        Мне в аналогичном положении кажется нормально...
        
        0Shaggy | 31 января 2015 г.
        
        Плохо то, что у нас тут нет художников, или если они и есть, то не являются активными пользователями. Вот их мнение как спецов было бы очень полезно узнать.
        
        --- Далее идут мысли дилетанта ---
        
        У нас есть некий объект. Книга, например. Она имеет чёткие границы. Рядом с ней стоит канделябр, у которого тоже есть чёткие границы. Единственное что их объединяет - это свет от свечей, который и накладывается на оба объекта. Данная композиция выглядит гармонично.
        
        В нашем случае канделябр торчит прямо из нижней части книги, которая при этом растворяется в столе, а свет от свечей, нарушая законы физики, ложится не на все элементы, на которые он должен лечь исходя из расположения объектов. ИМХО. Элементы хороши, но нет композиции, следовательно и взаимодействия элементов тоже.
        
        0SAXAHOID | 31 января 2015 г.
        
        Мне резало глаза раньше. Глаз видел часть картинки ярко, хотел увидеть её всю, дёргался в центр — а там чернота. Будто слепнешь сразу. Неприятное ощущение.
        Сделали прозрачность выше — теперь это ушло.
        Насчёт остального не скажу — безвкусная я личность, небось.
        
        0Shaggy | 31 января 2015 г.
        
        Раньше был недостаток иного плана. Сделать изображения светлыми было невозможно из-за того, что нельзя было настраивать цвет шрифта в шапке. Из-за чего я просто не мог поставить светлое изображение - белый (и реже синий) шрифт становились нечитабельными.
        
        Теперь изображения в шапке затемнены, и сделать фон светлее невозможно - настройки не сохраняются. Это тоже решение. Но тогда затемнение надо делать тоже равномерным. У меня вышеописанное тобой неудобство сейчас работает на полную мощность: рядом с левым сайдбаром и правой и нижней границах изображение яркое, без фильтра. Чуть в сторону - и чорное пятно, которое режет глаз. Если закрыть всё изображение единым серым фильтром, то резать перестанет, а картинка станет более гармоничной.
        
        Градиент бы я тоже убрал, выделив шапку игры как отдельный элемент. Чем - точно не скажу, но я бы для начала поигрался с чертой в качестве границы - её толщиной и оттенком. Только снизу, по краям и сверху она вроде как не нужна, если затемнение будет равномерно ложиться на всё изображение.
        
        Свернуть ветку
0theSobaken | 31 января 2015 г.

Куда пропала кнопка "ред."?
- 0theSobaken | 31 января 2015 г.
  
  Всё, заметил. Она действительно стала очень неприметной.
  - 0Nord | 31 января 2015 г.
    
    Сам искал с минуту)
0theSobaken | 31 января 2015 г.

Может стоит убрать ограничения по размеру и дать возможность растянуть изображение по всему фону? Растянутая шапка и длиииная вертикальная страница не очень совместимы.Ну или хотя бы добавить возможность выбирать цвет фона.
0theSobaken | 31 января 2015 г.

Кстати, iXy, раз уж ты занялся оформлением страницы, то не мог бы ты сделать округление оценок пользователей до десятых а не до сотых? Серьёзно, смысла в них нет.
- 0iXy | 2 февраля 2015 г.
  
  Когда будет много голосов, по идее будет смысл.
0Nickorsar | 2 февраля 2015 г.

Иконку можно и убрать, т.к. в левом сайдбаре она есть. А название в этот же сайдбар "прилепить".
- 0iXy | 2 февраля 2015 г.
  
  В сайдбаре логотип, я еще подумываю, нужен он там или на главную его перенести.
  - 0Nickorsar | 2 февраля 2015 г.
    
    Можно попробовать убрать логотип, в сайдбар поместить раздел "Видео". С самим "баром" можно что-то еще придумать, для удобства. Ну а "Текущий" дизайн вполне годен(я так думаю :D).
0Nickorsar | 2 февраля 2015 г.

У меня одного такое? http://imgur.com/wVTzKpu
- 0SAXAHOID | 2 февраля 2015 г.
  
  Нет, я тоже наблюдаю
- 0iXy | 2 февраля 2015 г.
  
  Бывает... Подправил)
  - 0Shaggy | 2 февраля 2015 г.
    
    Шрифт смотрится просто шикарно)
0Nord | 5 февраля 2015 г.

Посмотрел все 4 варианта. Стало гораздо лучше. Но как теперь вступить в сообщество игры?
- 0iXy | 5 февраля 2015 г.
  
  Еще не все кнопки в обновленном шаблоне, скоро появится.
0Popoli | 9 февраля 2015 г.

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

100% ширины экрана

Плюсы

Минусы

Идея

Вход на сайт

Восстановление пароля

Быстрая регистрация из соцсетей