Новая тема оформления сайта

Новая тема оформления сайта | n-wp.ru
Изменения на сайте - новая тема оформления, упрощенная навигация, расширенный профиль пользователей.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Ничто не вечно под этим небом, в том числе и вкусы. Предпочтения в дизайне со временем у меня меняются, появляются новые технологии, приемы и модные тренды, которые предъявляют свои требования — все это подвигло меня обновить тему оформления сайта n-wp.ru.

Знаю, что предыдущая тема многим нравилась, но она имела некоторые особенности, не отвечающие вызовам современности:

  • Фиксированная ширина не позволяла просматривать сайт на телефонах, смартфонах и планшетах с небольшим разрешением экрана.
  • Используемые шрифты были привязаны к системным, поэтому в разных операционных системах сайт выглядел тоже по-разному.
  • Размер шрифтов не позволял удобно работать с сайтом на активных экранах, то есть не приспособлен для управления пальцами.
  • Некоторые функции блога были жестко привязаны к конфигурации файлов движка, что создавало проблемы при обновлении WordPress.

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

Адаптивный дизайн

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

Векторные шрифты

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

Веб-шрифты

Веб-шрифты вместо стандартных позволяют контенту выглядеть одинаково во всех браузерах. Используется свободно распространяемое семейство шрифтов Open Sans.

CSS3 и HTML5

Вместо визуальных эффектов, создаваемых js-скриптами, используются красивые плюшки CSS3 и HTML5.

Современный дизайн

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

Юзабилити

В связи с внедрением новой темы я внес некоторые изменения в юзабилити, упрощающие, как мне кажется, работу с сайтом:

  • Теперь вся навигация по сайту сосредоточена в одном месте — нажмите значок поиска, и вы получите и поиск, и категории, и метки.
  • Зарегистрированные пользователи имеют свой вход в административную часть, в которой можно публиковать посты, редактировать черновики, просматривать свои посты и комментарии к своим постам, редактировать профиль. Все сделано стандартными средствами движка.
  • Социальные сервисы, в которые можно отправить пост, сокращены до трех основных — Facebook, Google Plus и Twitter.
  • Так же посты можно добавлять в список избранных. Добавлять посты в избранные можно не только со страницы поста, но и со страницы блога. Страница избранных постов полностью переделана — изменен стиль вывода постов, добавленная постраничная навигация.
  • Я отказался от всех всплывающих элементов, заменив их отдельными информационными страницами. Исключением являются только изображения — при клике на картинке откроется ее оригинал, отображаемый поверх содержимого. Логика такова: если это отдельное изображение, то оно откроется в виде одной картинки, если же это изображение из галереи, то оно откроется с навигационными элементами, с помощью которых можно в слайдере просмотреть все картинки их текущей галереи. Выводимые оверлеем изображения так же являются адаптивными.

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. aklimatizirovanie_raki_v_atake

    мне старый больше нравился =(

    Ответить
    1. tiaurus автор

      А что именно нравилось в старом дизайне больше?

      Ответить
      1. DimaDodonov

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

        Ответить
  2. Mixik3

    Любил полистать этот блог, но сейчас он для меня умер, так как ужасные шрифтовые решения РАЗМЕР, контраст, юзабилити отдельных элементов, доставшие иконки с фонт осом… печаль, через себя удаляю с закладок(

    Ответить
    1. tiaurus автор

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

      Ответить
      1. Mixik3

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

        Ответить
        1. tiaurus автор

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

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

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

          Ответить
          1. Mixik3

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

            Ответить
            1. tiaurus автор

              Значит не можете показать сайты, которые сделали лично? Я не готов к конструктивной дискуссии с тем, кто учит других в том, в чем сам ничего не понимает. Я готов учиться у профессионалов.

              Я тоже прямой пользователь, и не понимаю, что непонятного в трех знаках в шапке сайта? И если вам не удобно читать длинный шрифт (не совсем понял, что это значит), и лень, то вам нужен Твиттер, а не этот сайт — там правит бал сестра таланта краткость.

              Еще раз напомню, что сайт я делал для себя, о чем пишу с самого первого поста. Это не социальная сеть, не коммерческий проект, это мой личный эксперимент. Если профессионал мне скажет, что он считает нужным поправить, я прислушаюсь. Если диванный мастер начнет мне указывать, что и как нужно делать, то ответ у меня один: не нравится — не пользуйтесь. Поддерживать дальше обсуждение на уровне «шрифты говно, все сделано не по стандартам, и я не отличаю ссылки от заголовков» я не буду.

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

              Ответить
              1. Mixik3

                Как я уже говорил не о бо мне сейчас разгавор и не доказывать свою правоту или кого-либо некомпетентность я сюда пришел, если вам не интересно и вы не видите здравого смысла в том что я пишу — ето не мои проблемы. Я не кидаю в вас какашками и вы пожалуйста не делайте етого в мою сторону. Не в моих силах вам помочь разобраться в себе. Относительно иконок в хедере прочитайте значение слова афорданс (приймите тот факт что вы завуалированы так как ето ваше детище, и тут какбы ничего плохого нету, просто ето искривляет ваше восприятие сайта как продукта), под «длинным текстом» возможно не совсем понятно выразился — имею ввиду что длинные строчки использовать не комильфо так как человек ленивая особь и такой подход воспринимается хуже чем колонка текста поуже, хоть и читается быстрее, ето протестировано до нас обоих рядом исследований еще для печатных продуктов. И ето не моя концепция ето принципы проектирования которые формовались много лет.

                Ответить
                1. Mixik3

                  и будьте добры прочтите значение слова хейтер рас уж так кидаетесь им, и если вы всеже внезапно увидили в моих словах хоть долю ненависти, простите пожалуйста не хотел вас задеть…

                  Ответить
  3. gelez

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

    Ответить
    1. tiaurus автор

      Посмотрите этот скрипт: Cycling a background image with jQuery. У меня что-то похожее, только изображения я перевел в base64-код.

      Ответить
      1. gelez

        нето ( картинка поджимается, когда браузер суживается, в демке даже видно, хотя у себя тоже проверил. Вот хотелось бы как здесь konaworld.ru

        Ответить
        1. tiaurus автор

          How do I make this work on a responsive design?

          This is fairly straightforward. If we set the images as div background, and then cycle the divs, we can use background-size:cover to ensure the image fits as best as possible. This works fine in IE9+. Have a look at this demo to see it working.

          Если использовать background-size:cover, то картинка сохраняет пропорции и не поджимается по высоте. Посмотрите демо, поэкспериментируйте с шириной браузера, убедитесь, что это работает.

          Ответить
          1. gelez

            ураа, работает, спасибо. Пришлось только с их демо код стянуть, он там по структуре отличается, и позиционирование не фиксированное, ну то мелочи, еще раз спасибо.

            Ответить
  4. gelez

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

    Ответить
    1. tiaurus автор

      Хорошая мысль. Спасибо, попробую что-т о подобное реализовать.

      Ответить