№2 | Эффективные инструменты для бизнеса в интернет

 RuBizSiteHelp —
Уникальное фиксированное меню-помощь для любого сайта.

А Вы уже запустили свой(-ю) видеопродажник/продающую страницу в свет? В таком случае, есть хорошая новость для Вас...

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

Тема получилась длинной, поэтому для нее я выделил отдельную статью: RuBizSiteHelp — Уникальное фиксированное меню-помощь для любого сайта.
Обязательно вернитесь, чтобы дочитать выпуск 😉

Важные Meta-теги для правильной поисковой оптимизации Вашего сайта.

Поверьте, это ОЧЕНЬ важная статья. Даже если Вы чайничек/новичок в таких делах, Вы научитесь оптимизировать свой сайт под социальные сети, под поисковики и даже под мобильные устройства (частично, поскольку адаптация под моб.устройства требует еще и знания  CSS)...

На мета-теги я стал серьезно обращать внимание, когда решил впервые адаптировать сайт под мобильные устройства. До этого мои действия с ними были машинальными:. описание, ключевые слова и авторство...можно добавить еще и мета для кодировки utf-8. Не волновало это меня и даже не думал, что будет... Но время шло, и простой каприз превратился в необходимость — пришлось нырять во все эти мета-теги и разбираться, черт их побери, какой отвечает за показ специфичной картинки в соц.сетях, какой помогает с адаптацией к яблочным устройствам...и др.
Найти теги просто, не спорю, но... есть условные ограничения и различные вариации, о которых обычно не говорят…

Постарался записать видео и рассказать о самых важных тегах, которые должны быть встроены в Ваш сайт. Даже PDF-шпаргалку приготовил. Все на примерах!

Как провести тур по вашему сайту при помощи нескольких кликов.| RuHopscotch

Не скажу, что в этот раз мы обойдемся лишь «copy-paste», но и ничего сложного в установке такого скрипта не будет...
Очень интересная разработка. Будет полезна тем, кто стремится донести информацию до посетителя веб-сайта как можно более точно, а также в той последовательности, в которой сам автор задумал. Допустим, это продающая страница, где информации очень много, но Вам ОЧЕНЬ важно, чтобы потенциальный покупатель ознакомился с важными деталями, или еще раз обратил на них свое внимание.

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

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

Автор скрипта (нашел его в файле json) — Gordon Koo...Также есть сайт, а еще я в скрипте нашел «Copyright 2013 LinkedIn Corp.»...В любом случае, обратите внимание и на Apache License 2.0.

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

Продолжение… Убыстряем загрузку сайта
[Сжимаем графику при помощи ImageOptim или FileOptimizer].

В прошлом выпуске я упоминал сайт, на котором можно простым перетаскиванием сжимать PNG-картинки, а потом прямиком сохранять их на свой любимый и родной компьютер. Конечно, есть еще и JPG-картинки...и GIF-ы. И так надоедает все картинки оптимизировать в этом фотошопе.

Слава хорошим людям, которые по доброй воле желают облегчить и сократить процесс оптимизации изображений...Для нас стараются. Как и обычно — все просто! Скачал программу, потом открыл ее, затем схватил охапку изображений (jpg/gif/png) и «кинул» в программу, а она тебе на выходе уже тепленькие пирожки в виде оптимизированных (сжатых) изображений. Смотрите видеоинструкцию ниже, поскольку в ней я все покажу на примере.

Единственный минус — это только для Mac OS X. Зато есть альтернатива для Windows, которая этой совсем не уступает — FileOptimizer для Windows. FileOptimizer даже может работать с архивами, документами Microsoft Office, PDF файлами и т.д. 

Обе программы сжимают (оптимизируют) файлы без потери качества.

Обе программы просты: перетащите изображения в окно программы, выберите «Optimize» — и все, даже не нужно ничего сохранять отдельно — все сохраняется автоматически!

Нужны короткие и быстрые скринкасты?
Вам поможет “Recordit" (Mac OS X и Windows)

Начну с минусов:
1) Пока только для Mac OS X 10.8+
2) Лимит записи до 5 мин.
3) Нет поддержки аудио. Оно и ясно, ведь файл сохраняется в gif формат.

А в остальном только плюсы. Тут все ОЧЕНЬ просто. Скачиваете архив, а потом извлекаете из него програмку и сразу же запускаете ее. Когда программа запустится, вам нужно выделить область и нажать на иконку програмки — запись пошла!

Очень интересно то, что после нажатия на «стоп» — ссылка на запись будет автоматически скопирована в буфер обмена, т.е. нажмите «Cmd+V» в строке браузера и «Enter»! Все! Теперь эта запись будет доступна любому, кому Вы пришлете адрес.

Ну а САМОЕ ИНТЕРЕСНОЕ то, что есть вариант «Generate GIF»(Генерировать в GIF), т.е. теперь ваш скринкаст будет доступен в виде отдельного gif файла, который Вы сохраните на свой компьютер.

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

Думаю, что видеообзор програмки Вам будет кстати ↓

Используем разнообразные символы
вместо привычных нам PNG-иконок.

Зачем тратить время на поиск иконок и последующую их обработку?

А что, если на Вашем сайте в списке выгод есть зеленые иконки, а Вы решили изменить их цвет на красный? ... Согласитесь, времени достаточно много займет  все это дело.

Есть другой, самый простой вариант. PNG-иконки можно заменить символами. Самое интересное, что теперь их редактирование упрощается, поскольку цвет и тень устанавливаются в CSS стилях. Теперь, даже, если Вы замените символ, стили останутся теми же и присвоятся новому символу автоматически.

Посмотрите видео и Вам все станет ясно.

Обновление. RuBizModal v1.3
(новое название для Smart Pop-Up) [+ jQuery 1.11.0 & SimpleModal 1.4.4]

Теперь работает с новым jQuery 1.11.0, а также я обновил файл «simplemodal.js» — установил более свежую версию . «Спасибо» Эрику Мартину!

Это окно рекомендуется устанавливать на подписные и продающие страницы. На блогах всплывающие окна только раздражают. Блоги читают часто, и если окно постоянно всплывает (раз в день, либо каждый раз), то это вызовет скорее негативную реакцию. А зачем она нужна?

Конечно, это мое субъективное мнение. Например, мне написали двое людей и поблагодарили за это окно, поскольку оно у них результативно работало на блоге.

В любом случае, толку-то спорить по этому поводу? Настроили — установили — проверили! Не работает? Что ж, бывает... Работает? Класс! Да к тому же оно бесплатное...

Ответы
на вопросы.

Вопросов было немного, но они были. Вот три вопроса на которые я попытался пролить свет:

1) Я открываю .txt, а там крокозябры, почему?

Все дело в кодировке. Я использую кодировку UTF-8, которая является общепринятой. У блокнота Windows другая кодировка, поэтому я рекомендую использовать специальную программу для редактирования файлов — NotePad++

2) Почему письма, которые мне присылают используя RuBizHelper (установленный на моем сайте), очень часто попадают в папку «спам»?

Тут виноват не в RuBizHelper. Причины могут быть разными. Возможно, IP хостера или Ваш в чёрном списке. А может, в письмах было содержание, похожее на спам.
Решение...
Пришлите себе пару раз письмо используя разные e-mail-ы, затем нажмите правой кнопкой на письмо и выберите «не спам», либо «не помечать как спам» и т.д. (все зависит от сервиса, которым вы пользуетесь).

3) Что за конфликт возникает, когда я хочу установить и SmartPop-Up и RuBizHelper на свой сайт? Как это решить?

Когда Вы устанавливаете оба проекта, то Вы подключаете две библиотеки jQuery, где есть и ранняя и поздняя версии. Конфликт возникает именно из-за этого.
Решение...
Оставьте более раннюю версию, именно ту, что у Smart Pop-Up, а у RuBizHelper-а удалите. Есть еще варианты, когда Вы помещаете библиотеку jQuery перед закрытием тега body...Попробуйте один из вариантов — многим помогло.
P.S. В инструкциях проектов упомянуто об этом.
ВАЖНО! Обновление для Smart Pop-Up — теперь RuBizModal (jQuery 1.11.0 и SimpleModal 1.4.4)