1. Ссылки покупок

    Стратегия на турбо опционы

    Обучение по Бинарным Опционам.

    Бизнес по рецепту. продажа женских товаров

    Мануал по добыче бесплатного трафика с поисковика Bing (2016)

    От 6к уникальных посетителей на страницу ВК

    Facebook

    Стратегия Лайв Профит - ставки на футбол

    [Ирина Шмидт] - Церебро Таргет 2016

    Новый дорген.

    Стратегия на спорт.

    Двойной арбитражник по бесплатному трафику (2016)

    Подробная инструкция по Созданию интернет магазина чая с нуля (2016)

    Чертежи солнечного био-вегетария площадью 1200 кв.м. (СБВ-Профи)

    Адский стрим по копирайтингу: то чувство, когда подглядывать - хорошо!

    Видео-Курс - Tехнология быстрого старта в email рассылках (2016)

    Продвижение партнерских программ в одноклассниках (2016)

    Научу грести трафик. Только успевай сервера покупать!

    Трафик из ВК (Схема + Кейсы)

    Пассивный доход со стабильными выплатами.Схема добычи трафика.

    Секрет создания аккаунта яндекс директ без НДС

    Система ставок от проверенного каппера

    Государственный и банковский конфискат +VIP блок (2016)

    Как работать и зарабатывать деньги на продвижении своих проектов (2016)

    Секреты бесплатной рекламы от бывшего сотрудника Вконтакте

    Mobile Арбитраж - Арбитраж мобильного трафика (2016)

    BUSINESS MANUAL - Безопасные схемы заработка

    Как получать 1000-и заказов из CPA сетей (Дм.Ковпак)

    Как зарабатывать удаленно 100 тыс. руб на продвижении в Инстаграме без вложений и жить в Тайланде

    Самонаполняемые Видео-сайты!

    Прибыльная стратегия для бинарных опционов, первый доход через считанные дни + бонус!

    Траф с Вк за копейки

    Профит на онлайн теме от 30к до Неизвестно в месяц

    Легальный высокодоходный бизнес в реале

Личный сайт Гарри | Размер шрифта и скрытые нюансы адаптивного дизайна

  1. [Личный сайт Гарри]
    Преамбула:

    Начнем с того, что я - не дизайнер. Я никогда не позиционировал себя как дизайнер. Тем не менее, раз уж я обещал написать статью на эту тему... в общем читайте мой высер и включайте логику. Приветствуются любые комментарии к моим выводам. При комментировании используйте тег <blockquote>

    чтобы выделить цитируемый участок вот так​
    [​IMG]

    КиШ - Месть Гарри


    Основная часть:

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

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

    Что-же касается шрифтов, то в этом плане мнения вебмастеров сильно разнятся. Кто-то говорит, что вполне читабельным является шрифт размером 11 пикселей, кто-то жалуется на плохую читабельность таких сайтов и на то, что они портят зрение. Кто-то защищает шрифт размером 14 пикселей, утверждая что это - идеальный вариант для статейника. Я придерживаюсь 14 пикселей, потому что, да, 11 - слишком мало. Конкретно на этом блоге в css вписан такой код:


    body{
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 14px;
    }

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

    Для начала давайте проанализируем размеры экранов у мобильных устройств. Это можно сделать тут: viewportsizes.com

    Нас интересует ширина экрана, то есть Landscape\Portrait Width. Вбиваем в строку поиска на указанном выше сайте слово "Nokia", к примеру. Тут мы видим весь диапазон разрешений, как вы видите ширина экрана изменяется в широком пределе: от 800px до 234. Прикидываем серединку. Думаю это будет 640px; Теперь давайте определимся в каком блоке будем увеличивать размер шрифта. Для этого открываем webmaster-tools в хроме и ищем блок основного содержимого статьи.

    [​IMG]

    В нашем случае путь до блока с содержимым будет выглядеть так: .content>.content-wrap

    После чего пишем такой скрипт(используется jQuery):

    var ptb = $(".content>.content-wrap");
    if(window.screen.availWidth <= 640){
    ptb.css('font-size','16px');
    }

    Все. Теперь размер шрифта в указанном блоке для мобильников будет больше. Да, теперь этот скрипт используется на моем сайте.

    Протестировать работу этой шняги можно переключив Chrome Webmaster Tools в режим мобильного.

    [​IMG]

    Но это отнюдь не последний способ подгонки сайта под мобильные телефоны. К примеру можно в корне перекроить шаблон темы и реализовать код, приведенный выше средствами PHP. Для этого воспользуемся библиотекой mobiledetect, которая по User-Agent'у определяет девайс посетителя.

    Качаем исходник библиотеки и суем его в папку шаблона. После чего пишем такой код:

    <?php
    #В самом начале файла шаблона проводим инициализацию библиотеки
    require_once 'Mobile_Detect.php';
    $detect = new Mobile_Detect();
    ?>
    /**
    *
    * html код страницы
    *
    */
    <div class="content"><div class="content-wrap" <?php if($detect->isMobile()) echo "style='font-size:16px;'" ?> >
    /**
    *
    * html код страницы
    *
    */

    Мотайте на ус, уважаемые читатели.

    Обсудить
     

Поделиться этой страницей