С чего начинается стартап? Для вас с мега-супер-крутейшей идеи, а для ваших первых посетителей — с сайта-заглушки или посадочной страницы. Множество копий сломано на тему их дизайна и функционала, но в итоге страницу надо технически разработать и запустить. Можно сделать велосипед, можно взять Wordpress, а можно воспользоваться готовым сервисом. Мы выбрали Launchrock, который, однако, “из коробки” абсолютно нерабочий для любых языков помимо английского. Поделюсь с вами своим опытом доработки напильником под русский язык.
Почему Launchrock? Есть множество вариантов и сервисов, например вот полезное обсуждение на Кворе. Пара из них уже давно склонированы и доступны на русском. Для меня аргументов было два — сервис делает абсолютно все, что нужно мне. И он тотально и без вариантов бесплатен, без рекламы и смс.
Русификация
Все шаманские действия будем производить в админке нашего проекта, в частности с помощью магической кнопки в правом нижнем углу:
Тексты самой страницы — какая-то часть текстов правится в админке, но в html нужно руками исправлять все забитые в поля ввода тексты по умолчанию и названия кнопок. Ничего сложного, просто надо не забыть прошерстить все опции, их там много.
Русификация email, которые приходят пользователю после записи, и которые приходят его друзьям после приглашения — вот это самый серьезный вызов. Проблема стандартная: как истинные американцы, разработчики не в курсе существования иных языков и кодировок. Все письма безвозвратно коверкаются. Но выход есть, курим доки как устроен email в нашем мире и исправляем.
Тема письма
Тема вашего письма будет выглядеть так:
Магический формат =?charset?encoding?encoded text?= описан здесь: en.wikipedia.org/wiki/MIME#Encoded-Word
Странные значки типа =D1=81 это Quoted-printable кодировка en.wikipedia.org/wiki/Quoted-printable, онлайн кодировщик доступен, например, здесь.
Берете вашу тему письма, кодируете ее в Q-p, вставляете в шаблон =?utf-8?Q? тут_QP_закодированная_тема?= и пишете ее в админку. Все, тема теперь отображается на русском. Тут есть косяк, с которым я уже сталкивался, когда делал рассылки через американские сервисы, и который пока не знаю точно как побороть — расскажите в комментах, если решение все-таки есть. По стандарту строки заголовка email имеют максимальную длину, и некоторые почтовые клиенты некорректно читают длинные заголовки в описанном выше формате, получается:
Железное решение — делать тему письма короткой, 2-3 слова :)
Текст письма
С текстом также придется пошаманить. Во-первых учтите, что если в тексте письма есть не-латиница, то вы будете получать в письме не тот текст, что ввели в админке! Почему Launchrock так устроен — я понятия не имею :) В тексте не должно быть ни одного символа кириллицы — значит, ее надо замаскировать.
Конвертеров в интернете полно, например вот этот. Аналогично не забудьте исправить не только подтверждение записи на бету, но и реферральное письмо, которое отправится при шаринге друзьям по email — оно в закладке “Sharing Page”, а не “Email confirmation”!
Еще одна засада — по умолчанию у пользователя есть поле ввода своей темы и текста письма, и этот текст будет отображаться в письме. Разумеется, в кракозябрах. Это не лечится, так что поля прячем полностью:
И обнуляем тег textarea, где пользователь мог ввести свой текст:
Все, теперь все письма будут приходить на русском без проблем.
Работа напильником
Еще пара хаков, которые сделают страничку лучше. Например, после записи на бету появляется виральная страничка с разными методами шаринга. По умолчанию на кнопке твиттера не будет названия вашего продукта — потому что название не отображается, если кнопка рендерится в невидимом элементе. Фиксим, отключая в админке стандартную кнопку и вставляя свою на событие переключения страницы:
Код кнопки твиттера
container.find( ".LR-connect-share-links" )
.append('
');В этом же блоке можно работать со страничкой — например, сделать выезжающим блок с вводом email, как сделали мы:
Хотите вставить кнопку Вконтакте? Без проблем — в head скрипты и теги где нужна кнопка. А лучше поставить их две — на стартовую страницу и на подтверждение записи, vk_like и vk_like2 в нашем случае.
Для желающих — под спойлером полный код нашей допиленной sign-up страницы для Launchrock, берите и пользуйтесь:
HTML, CSS и JS
<!DOCTYPE html> <head> <script type="text/javascript"> window.vkAsyncInit = function() { VK.init({apiId: 3861954, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "mini", height: 20, width:145, pageUrl:"http://www.duskrift.ru"}); VK.Widgets.Like("vk_like2", {type: "mini", height: 20, width:145, pageUrl:"http://www.duskrift.ru"}); $( "#vk_like, #vk_like2" ).css({ clear:"auto", display:"inline-block", width:"145px" }); }; setTimeout(function() { var el = document.createElement("script"); el.type = "text/javascript"; el.src = "http://vk.com/js/api/openapi.js"; el.async = true; document.getElementById("vk_api_transport").appendChild(el); }, 0); </script> </head> <body style="overflow:hidden; margin:0;"> <div id="vk_api_transport"></div> <div id="content" class="LR-content LR-site-bg-color-container"><!-- LR-sharing-page LR-stats LR-lx --> <div class="LR-announcement-bar LR-announcement-bg-color-container"> <h4 class="LR-announcement">Special Announcement About Important Things!</h4> </div><!-- .announcementBar --> <div class="LR-bg-img LR-site-bg-image-container LR-site-show-on-bg-image"></div> <div class="LR-box-wrapper" style="margin-top:-1000px"> <div class="LR-box"> <div class="LR-box-container LR-clearfix"> <div class="LR-box-inner"> <!--<h1 class="LR-site-title">Site Title</h1>--> <!--<div class="LR-site-logo"><img src="js/ignition/themes/classic/img/logo.png" alt="Site Logo"/></div><!-- .site-logo --> <div class="LR-sign-up"> <h2 class="LR-site-tagline montserrat">We Get Users</h2> <div class="LR-site-description"> <p>Set up a "launching soon" page in minutes. Collect interest, increase sharing, and build your audience.</p> </div><!-- .site-description --> <span class="LR-sign-up-label">Invite people to signup by entering their e-mail address:</span> <div class="LR-sign-up-container"> <div class="LR-sign-up-container-inner LR-clearfix"> <input type="email" class="LR-sign-up-input signup-email" placeholder="Твой e-mail, на который придет ключ"> <input type="submit" name="submit" title="SIGN UP" value="ХОЧУ!" class="LR-sign-up-submit"> </div><!-- .sign-up-container-inner --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.1378258117.html#_=1378363174496&dnt=true&id=twitter-widget-16&lang=ru&preview=true&screen_name=DuskRift_RU&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 150px; height: 20px;"></iframe> <iframe scrolling="no" style="border: none; overflow: hidden; height: 20px; width: 120px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=255930487765390&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df3c6e3498c%26domain%3Dsignup.duskrift.ru%26origin%3Dhttp%253A%252F%252Fsignup.duskrift.ru%252Ffaad92b74%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&href=http%3A%2F%2Fsignup.duskrift.ru&layout=button_count&locale=ru_RU&node_type=link&sdk=joey&show_faces=false&width=120"></iframe> <div id="vk_like"></div> </div><!-- .sign-up-container --> </div> </div> <div class="LR-site-share"> <div class="LR-site-incentive"> <p>Relationships are a two way street. You are asking people to give you their recommendation, so what are you giving them?</p> </div><!-- .site-incentive --> <div class="LR-site-share-container"> <div class="LR-site-share-inner"> <div class="LR-site-social-share"> <ul class="LR-clearfix"> <li class="LR-share-facebook-like"></li> <li class="LR-share-facebook-send"></li> <li class="LR-share-tweet"></li> <li><div id="vk_like2"></div></li> </ul> </div><!-- .site-social-share --> <div class="LR-site-share-email"> <div class="LR-share-label">Расскажи друзьям по e-mail:</div> <div class="LR-share-email-inner"> <div class="LR-email-wrapper"> <input type="email" class="LR-share-email-emails" placeholder="вводи e-mail адреса через запятую"> <div class="LR-share-email-import">поиск</div> </div> <div class="LR-share-email-hide"> <input type="text" class="LR-share-email-subject" placeholder="Рекомендую новую игру Dusk Rift!"> <textarea class="LR-share-email-message" rows="4"></textarea> <input type="submit" name="submit" title="Пригласить друзей" value="Пригласить друзей" class="LR-share-email-send"> </div><!-- .share-email-hide --> </div><!-- .share-email-inner --> </div><!-- .site-share-email --> <div class="LR-site-share-link"> <span class="LR-share-label">Делись:</span> <input type="text" class="LR-share-link" placeholder="" value=""> </div><!-- .site-share-link --> </div><!-- .site-share-inner --> </div><!-- .site-share-container --> <div class="LR-site-live-stats LR-clearfix"> <div class="LR-site-live-stats-container"> <span class="LR-share-label">Your live stats:</span> <div class="LR-live-stats-data"> <div class="LR-stats-clicks"></div> clicks </div> <div class="LR-live-stats-data signups"> <div class="LR-stats-signups"></div> signups </div> </div><!-- .site-live-stats-container --> </div><!-- .site-live-stats --> <div class="LR-site-connect"> <span class="LR-share-label">Общайся:</span> <ul class="LR-connect-share-links LR-clearfix"> <li><a href="#" class="LR-connect-icon connect-facebook" title="Заходи на страницу Dusk Rift в Facebook">DuskRift</a></li> <li><a href="http://vk.com/duskrift" class="LR-connect-icon connect-vk" title="Заходи на страницу Dusk Rift вКонтакте" target="_blank">DuskRift</a></li> </ul> </div><!-- .site-connect --> </div><!-- .site-share --> </div><!-- .box-container --> </div><!-- .box --> </div><!-- .box-wrapper --> <div class="LR-pwd-lr"> <a target="_blank" href="http://discover.launchrock.com?ref=hm"></a> </div> </div><!-- #content --> </body>
/* Insert CSS overrides here */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Insert mobile CSS overrides here */ input[type="email"].LR-sign-up-input { max-width: 134px; } .LR-box-wrapper { max-width: 290px; } .LR-site-share-email input[type="email"], .LR-site-share-email textarea, input[type="text"].LR-share-link { width: 164px; } } .LR-bg-img { background-attachment:scroll; } input[type="email"].LR-sign-up-input { width: 296px; } input[type="submit"].LR-sign-up-submit{ min-width: 97px; } .LR-box-wrapper { width: 500px; position: absolute; /* width:auto;*/ } .LR-site-social-share ul li { float: none; display: inline-block; height: 16px; } .LR-content { font-size: 16px; } input.LR-share-link { width: 72%; } .LR-sign-up-container { margin: 10px auto; } .LR-connect-share-links li { float: left; margin-left:10px; } .LR-connect-icon.connect-facebook { padding-left: 20px; line-height: 16px; color: white; font-size: 14px; width: 54px; text-decoration: none; } .LR-connect-icon.connect-vk { padding-left: 20px; line-height: 16px; color: white; font-size: 14px; width: 54px; text-decoration: none; background: url('http://vk.com/images/faviconnew.ico') 0 0 no-repeat; } input.LR-share-email-emails[type="email"] { padding-right: 45px; } .LR-connect-share-links { width:480px; } .LR-box-inner { margin: 10px 2% 0; } .LR-site-share .LR-site-share-container { padding:0; } .LR-site-share-email { padding-bottom:0; margin: 0; } .LR-site-description { font-size: 28px; } input[type="submit"].LR-sign-up-submit { background: #ffb000; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc440), color-stop(4%, #ffc440), color-stop(4%, #ffb000), color-stop(100%, #ff8f00)); background: -webkit-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: -moz-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: -o-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); } input[type="submit"].LR-sign-up-submit:hover { background: #ff8800; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffa325), color-stop(4%, #ffa325), color-stop(4%, #ff8800), color-stop(100%, #ff6200)); background: -webkit-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: -moz-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: -o-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); } .LR-site-share-inner { padding-bottom: 20px; } .LR-site-incentive { margin: 20px 2%; } .LR-site-share-container { padding-top: 10px; } .LR-share-email-subject, .LR-share-email-message { display:none; }
window.lrignition.themesJS.customTheme = function() { /* DO NOT MODIFY ABOVE THIS LINE UNLESS YOU KNOW WHAT YOU ARE DOING */ this.init.push(function() { /* Your code here to run on initialization */ //var container = ignition.getContainer(); // jQuery setTimeout(function(){$( ".LR-box-wrapper" ).css({"margin-left":"-1000px","margin-top":"70px",display:"block"}).animate({"margin-left":"40px"}, 700);}, 3000); }); // Uncomment to override default mode set behavior this.setMode = function( ignition, mode ) { var container = ignition.getContainer(); // jQuery if( mode === "main" ) { container.find( ".LR-content" ).removeClass( "LR-sharing-page" ); container.find( ".LR-site-share" ).hide(); container.find( ".LR-sign-up-container" ).show(); } else if( mode === "postsignup" ) { container.find( ".LR-content" ).addClass( "LR-sharing-page" ); container.find( ".LR-sign-up-container" ).hide(); container.find( ".LR-site-share" ).show(); container.find( ".LR-connect-share-links" ).append('<li><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.1378258117.html#_=1378363174496&dnt=true&id=twitter-widget-16&lang=en&preview=true&screen_name=DuskRift_RU&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 150px; height: 20px;"></iframe></li>'); container.find( ".LR-share-email-send" ).attr({"value":"Пригласить друзей!"}); } }; /* DO NOT MODIFY BELOW THIS LINE UNLESS YOU KNOW WHAT YOU ARE DOING */ }; window.lrignition.themesJS.customTheme.prototype = new ( window.lrignition.themesJS.classic || window.lrignition.themesJS.common )( "customTheme" );
Резюме
После доработки напильником из Launchrock получается отличный и абсолютно бесплатный сервис для посадочных страниц и сайтов-заглушек, с виралкой, аналитикой и почтовыми рассылками. Стартаперы, пользуйтесь :)
