Заработок на монетизации. Пять рабочих схем монетизации стартапов

Интернет всё больше становиться мобильным. Уже сейчас на некоторых моих сайтах доля мобильного трафика превышает 40%. К тому же Гугл и даже Яндекс заявляли, что в мобильной выдаче предпочтение отдают тем сайтам, которые правильно отображаются на мобильных устройствах. Так что если кто этого ещё не сделал самое время задуматься над удобством пользования вашим сайтом для данной аудитории. Именно поэтому я решил сделать адаптивный шаблон для данного блога — сайт, но при этом не менять его совсем, а просто максимально быстро и просто переделать уже существующий. Заодно и проверим даст ли это рост трафика. Как оказалось это сделать совсем не сложно, достаточно внести мелкие изменения в код и всё доступно прямо из админки WordPress.

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

Приступим…

Секреты адаптивной вёрстки

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

1

Это прописываем в шапке сайта, в нашем случае это файл header.php, найти который мы можем в админке, пункты меню Внешний вид => Редактор.


Дальше практически все основные элементы сайта с конкретно заданной шириной делаем резиновыми, то есть ширину лучше задавать процентах. Хотя, конечно, можно прописывать конкретную ширину блока для конкретной ширины экрана. В этом нам поможет правило @media . Оно позволяет прописывать в css-файле отдельные стили одному и тому же элементу при разной ширине экрана. Я решил совместить: полностью десктопную версию не менять, а для конкретных экранов задать ширину блоков в процентах.
Например, ширина сайта у меня по умолчанию 1180 пикселей. И я в конце css-файла стилей (редактировать который можно также через админку, как и предыдущий) я дописал правило:

1 2 3 4 5 6

@media only screen and (max-width : 1200px ) { #page { margin : 10px auto ; width : 98% ; } }

@media only screen and (max-width: 1200px){ #page { margin: 10px auto; width: 98%; } }

Которое делает, при ширине экрана меньше 1200 пикселей, ширину блога 98%.

Дальше у меня есть две колонки: слева с основным текстом ширина которой 660 пикселей и правая – сайтбар, ширина которого 300 пикселей. Поэтому я тоже добавил правило, которое также делает их резиновыми, но только при ширине монитора меньше 1030 пикселей.

1 2 3 4 5 6 7 8 9

@media only screen and (max-width : 1030px ) { #primary { width : 65% ; } #secondary { width : 32% ; } }

@media only screen and (max-width: 1030px){ #primary { width: 65%; }#secondary { width: 32%; } }

1 2 3 4 5 6 7

@media only screen and (max-width : 760px ) { #primary , #secondary { width : 95% ; float : none ; margin : 10px auto ; } }

@media only screen and (max-width: 760px){ #primary, #secondary { width: 95%; float: none; margin: 10px auto; } }

А для ширины 480 пикселей и меньше пришлось картинки в лентах новостей сместить в центр и также задать их ширину в процентах.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@media only screen and (max-width : 480px ) { .blog .entry-image , .search .entry-image , .archive .entry-image { float : none ; margin : 0px auto ; width : 90% ; } .entry-image img { height : auto ; width : 100% ; } }

@media only screen and (max-width: 480px){.blog .entry-image, .search .entry-image, .archive .entry-image { float: none; margin: 0px auto; width: 90%; }.entry-image img { height: auto; width: 100%; }}

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

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

Адаптивное меню сайта

Так как пунктов меню блога не мало, то показав из всех сразу можно занять ими весь первый экран, что не всегда хорошо. Именно поэтому я решил скрывать его для экранов меньше 480 пикселей и разворачивать в таких случаях уже по клику. Конечно, есть и другие варианты:

• Часть скрывать, а часть показывать;
• Делать выпадающий список;
• Ничего не делать.

Скрыть – это не проблема, просто при данной ширине, для данного блока пишем display: none и всё, но вот чтобы потом показать придётся дописать небольшой скрипт. Таких скриптов в Интернете можно найти море и на javascript и на jquery, я покажу тот, который поставил себе. И вставил так же в header.php:

1 2 3 4 5 6 7 8

< script language= "JavaScript" type= "text/JavaScript" > function showmobmenu() { if (document.getElementById ("mobmenu2" ) .style .display == "block" ) { document.getElementById ("mobmenu2" ) .style .display = "none" } else { document.getElementById ("mobmenu2" ) .style .display = "block" } }

function showmobmenu() { if (document.getElementById("mobmenu2").style.display == "block") {document.getElementById("mobmenu2").style.display = "none"} else {document.getElementById("mobmenu2").style.display = "block"} }

То есть мне пришлось в код сайта, перед меню, ещё вставить ссылку с картинкой, которая по умолчанию скрыта, а при ширине 480 и меньше показывается, ну и при клике по ней раскрывается всё меню.

Png" alt="Мобильное меню">

А также изменить свойство float для пунктов меню:

1 2 3 4 5 6 7 8 9 10

@media only screen and (max-width : 480px ) { #mobmenu2 { display : none ; } #mobmenu { display : block ; } .main-navigation li { float : none ; } }

@media only screen and (max-width: 480px){ #mobmenu2{ display: none; } #mobmenu { display: block; } .main-navigation li { float: none; } }

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

1 2 3 4

@media only screen and (min-width : 481px ) { #mobmenu2 { display : block !important; } }

@media only screen and (min-width: 481px){ #mobmenu2{ display: block !important; } }

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

Ну, вот и всё, теперь уже точно имеем удобный адаптивный дизайн WordPress. Конечно же, эти же правила подойдут для адаптации практически любого сайта на любом движке. Гугл теперь говорит, что данный блог имеет 99 из 100 по удобству пользования для мобильных устройств.


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

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

Запилили мне шаблон под wordpress. Да не простой, а с лендингом на главной. Да ещё и адаптивно всё.

Старый лендинг

До этого стоял у меня простой статический лендос, который я спиздил с какого-то сайта c предложением услуг копирайтинга. Конечно, не совсем спиздил, я его переделал. Цвета, блоки, меню, и т. д. Но всё это делалось на коленке. Ибо дизайнер из меня никакой. Так, html код в трех местах поправить могу конечно.

Вот так это выглядело:

Форма заказа это уже новая, через wp, вставленная. Была красивая, но она как-то перестала работать. Причем, обнаружилось, что она не пашет, только через пару месяцев. Это летом было. Я пиздец негодовал тогда — два месяца люди не могли написать мне и заказать услуги потому что я нормально не протестировал форму заказа! Были заказы через скайп, напрямую в почту, в личках на форумах. А вот с лендинга внезапно перестали приходить заявки.

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

А в сентябре я решил запустить таки этот бложек. Конечно же на wordpress. А на главную прилепил свой лендинг .

Ну и недавно уже вернул форму заявок через плагин встроил в этот лендос.

Но это всё как-то несерьёзно.

Где взял бабки на новый дизайн?

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

По цене было адекватное предложение в 4000 рублей, и 4 дня работы. На что я немедля согласился. Как оказалось, вёрстка действительно дело непростое. Было пару десятков замечаний и правок, которые в течение двух суток терпеливо допиливались.

В результате получилось то что получилось, и что вы можете видеть теперь на этом сайте. Итого, обошлось всё дизайн+верстка шаблона в сумме в 8000 рублей. Как вам шаб? Да и вообще, это нормальные цены? Может быть я не прав, и такая верстка реально 10к рублей стоит, а я просто жмот?)

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

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

Как же быть тем, у кого старые сайты с фиксированной статичной версткой?

Увы, но рано или поздно придется менять верстку, если хотите оставаться на плаву. В WordPress проблема, казалось бы, решается обычной сменой шаблона — благо все новые темы для wp сейчас делаются адаптивными.

Но у такого решения есть несколько серьезных недостатков:

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

Если это вас не напугало, то вперед) Однако, как по мне, после смены шаблона работы будет куда больше, чем если просто адаптировать старый шаблон под мобильные системы.

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

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

Теперь же блог сайт может похвастаться собственной адаптивной версткой, удобной для чтения с мобильников, без всяких плагинов и велосипедов на костылях. Понадобился всего лишь фреймворк Bootstrap 3. А так же пару бессонных ночей, и конечно знание и CSS.

У моего сайта теперь с адаптивностью порядок

Как происходит замена старой верстки сайта на адаптивную

Сразу хочу предупредить — если у вас нет хотя бы среднего уровня знаний CSS и вы плохо ориентируетесь во внутренностях Вордпресса, то не советую лезть в такие дебри. Скорей всего вы только изуродуете верстку своего сайта.

Лучше потратить пару тысяч, заплатив фрилансеру, чем потерять кучу нервов и времени, а в результате положить сайт.

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

Редактировать нужно не только шаблон главной, но и шаблоны страниц записей single.php, страницы вида page.php, sidebar.php, страницы результатов поиска, страницы с архивами (рубрики, метки), и прочую таксономию. В зависимости от вашей темы оформления вордпресса набор может меняться. Однако во многих файлах блоки будут повторяться, поэтому достаточно просто скопировать их.

Как работать с Bootstrap

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

Все содержимое сайта внутри body должно оборачиваться в специальный блок div с классом .container (либо .container-fluid для резиновой верстки ). Далее внутри этого контейнера весь контент оборачивается в колонки div с классом.col- , размер которых варьируется для 4-х диапазонов разрешений устройств и обозначаются префиксами.col-lg- .col-md- .col-sm- .col-xs-:

После префикса мы добавляем цифру от 1 до 12, в зависимости от того, сколько «колонок» должен занимать наш элемент по размерам. Меняя префиксы у класса col мы задаем размеры и позиционируем элемент для разных разрешений без какого-либо вмешательства в CSS.

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

Когда вы видите такой код, то класс col-md-4 расшифровывается следующим образом: блок для отображения на средних устройствах с разрешением экрана ≥992px занимающий 4/12 части родительского элемента.

Для примера покажу на своем сайте. Редактирую страницу index.php для главной, добавляю блок сразу после обертки

Таким образом я выделяю под контент 8/12 части рабочей области сайта. Остальные же 4/12 приходятся на сайдбар

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

При этом между колонками идет стандартный padding, так что блоки не «слипаются». И да, не забудем поставить закрывающие тэги для наших div’ов. Причем хочу сразу заметить, в некоторых шаблонах открытие дива и закрытие может находится в разных php файлах.

При желании можно скрыть ненужные блоки на выбранном вами разрешении, добавив класс .hidden- с префиксом нужного вам разрешения, на котором нужно скрыть блок.

Там на самом деле хватает своих нюансов и моментов. Подробнее вы можете почитать о бутстрапе тут или же найти в сети обучающие видео уроки и статьи, коих предостаточно. Для изучения, конечно, придется потратить время. И не забудьте предварительно сделать полный бэкап сайта, прежде чем перейти к практическим занятиям 🙂

Важно! Могут возникать конфликты старых CSS-стилей сайта и стилей bootstrap. Что бы исправить их возможны следующие действия:

Убирать фиксированные размеры (в основном width ) у элементов сайта в таблицах стилей

Некоторые id и class’ы придется заменить бутстраповскими, или удалять мешающие стили вручную

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

Если на сайте есть большие таблицы, то придется повозиться с ними

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

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

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