Home > Design - Imagery, Banners & Landers > Landing Pages

Brief a freelancer to code a mobile lander - TIPS? (17)


08-20-2014 04:22 PM #1 nt2000 (Member)
Brief a freelancer to code a mobile lander - TIPS?

Hi,

Anyone that's aware of my follow along will know I've recently hit landing page issues. Basically I need to test lots of different types and find one that works!

I've read through the guides on STM to make my own landers and was relatively pleased with them but clearly I'm no coder and I realise that so rather than allow that to slow me down I'm thinking to have a freelancer design a template for me.

I've been doing some reading about what makes a good mobile landing page and looking at examples.

Firstly I'm keen to read any other threads on mobile landing page design that others have felt were useful

Secondly, if anyone cares to share examples of mobile landers that convert or have the elements I should be thinking about I'd love to see them - I don't expect people to send their secret sauce - just mainstream ones people have seen. The main things seem to crop up as I read (doesn't mean they are right though) 1. logo 2. Headlines 3. sub-headline 4. Offer 5. Description 6. Confidence builders eg testimonials 7. CTA

Thirdly, Are there any mobile landing page design programs that make this easy I assume there must be!

Forthly, assuming not, I'm going to ask a freelancer to design a template I can amend from offer to offer. Obviously I want some wiggle room to change elements but the whole reason is my html skills are crap.

Apart from:

1. the design being responsive to different handsets and OS.
2. FAST FAST FAST page load speeds - no unnecessary html, small image sizes

What else would you recommend as being important when briefing the freelancer? I'm going to send a wireframe to avoid any confusion.


08-20-2014 04:27 PM #2 sleenirvana (Member)

Yep, i would want to know that as well. Im a little confuse on how to ask my programmer to build the pages


08-20-2014 04:49 PM #3 shakedown (Member)

OK so there are two kinds of responsive landers, fluid layout and media queries. You are going to want to find out which one of those you want. Chances are that fluid layout will work just fine for you.

You have the right idea that it needs to be fast, fast, fast. Nowadays, most freelancers are fond of using jquery and bootstap frameworks when making landers. Now, some people might not agree with me, but I always tell them they are only allowed to use HTML and CSS. I shoot for my landers to be under 10kb, I don't need a 100kb bootstap file ballooning my lander size. Make sure the CTA button is CSS and not an image also. Run your logo through kraken.io for a small size too.

As far as the layout, the simpler the better usually. Even something as simple as logo+heading+subheading+CTA has produced good results for me. Other times logo+heading+subheading+unordered list +CTA has done well for me.

Also, if you suck at HTML/CSS as much as you say you do. I would suggest taking this course http://www.codecademy.com/tracks/web
Its free and in 7 hours you will not suck (nearly as bad). As you mentioned, it is important to know your way around HTML/CSS to be able to edit these templates that freelancers make.


08-20-2014 07:08 PM #4 nt2000 (Member)

Quote Originally Posted by ims2014 View Post
OK so there are two kinds of responsive landers, fluid layout and media queries. You are going to want to find out which one of those you want. Chances are that fluid layout will work just fine for you.

You have the right idea that it needs to be fast, fast, fast. Nowadays, most freelancers are fond of using jquery and bootstap frameworks when making landers. Now, some people might not agree with me, but I always tell them they are only allowed to use HTML and CSS. I shoot for my landers to be under 10kb, I don't need a 100kb bootstap file ballooning my lander size. Make sure the CTA button is CSS and not an image also. Run your logo through kraken.io for a small size too.

As far as the layout, the simpler the better usually. Even something as simple as logo+heading+subheading+CTA has produced good results for me. Other times logo+heading+subheading+unordered list +CTA has done well for me.

Also, if you suck at HTML/CSS as much as you say you do. I would suggest taking this course http://www.codecademy.com/tracks/web
Its free and in 7 hours you will not suck (nearly as bad). As you mentioned, it is important to know your way around HTML/CSS to be able to edit these templates that freelancers make.
Awesome thanks


08-20-2014 08:47 PM #5 keepthecar (Member)

Like ims2014 said, keep it simple. Not only because you don't need fancy scripts for a converting lander but also because need to be able to understand the template.

One tip that I can add: Ask the freelancer to insert as many comments as possible in the CSS and HTML to explain what he did and how the script works.


08-20-2014 09:40 PM #6 nt2000 (Member)

Quote Originally Posted by keepthecar View Post
Like ims2014 said, keep it simple. Not only because you don't need fancy scripts for a converting lander but also because need to be able to understand the template.

One tip that I can add: Ask the freelancer to insert as many comments as possible in the CSS and HTML to explain what he did and how the script works.
Yes very good advice!


08-21-2014 02:43 AM #7 sleenirvana (Member)

Thank you guys. Great advice over here. My programmer has been using bootstrap. I think, its pretty slow. i Guess i will split test a more complex jquery page and the fluid pages. My angles does require some jquery stuff. If this doesn't work out, i will shot for a simple and fast fluid design.


08-21-2014 05:33 AM #8 keepthecar (Member)

Quote Originally Posted by sleenirvana View Post
My angles does require some jquery stuff.
Ask your programmer to write this in Javascript and to ditch the JQuery, there is no need to load a whole jqeury library of 90kb if you're just using one or two functions of it. I'm assuming that you are also talking about a mobile bridge page to an affiliate offer.


08-21-2014 07:37 AM #9 cmdeal (Veteran Member)

A few options:

1. One of the STM members/mods runs www.bannerslanders.com. Although I personally have not used this, the reviews seem to be good, and one of my teams members used them as well (although not more mobile landers) with positive results.

2. If you want to go the Odesk route, you really need to give the work to several people so that you can pick the ones that are good. There are quite a lot of fake profiles and contractor account selling going on at Odesk, so you definitely should not buy services SOLELY on the basis of their profile alone. Just like with people selling Facebook advertising accounts, there are contractors who sell Odesk accounts with a certain reputation level built in. Caveat emptor! If you do find a good contractor at a good price, however, hold on to him or her with your dear life ... they are truly valuable resources.


08-21-2014 07:56 AM #10 nt2000 (Member)

Thanks @cmdeal.

Will check out Bannersandlanders. $40 for a responsive mobile lander seems reasonable if they can do it to my spec. I posted the job on freelancer yesterday and the bids range from $50-473 and taking from 2-15 days for completion!

Agree about holding onto a good freelancer.


08-21-2014 08:57 AM #11 vitalis (AMC Alumnus)

I'm a coder myself and I'm transitioning into a mobile affiliate.

Things you should tell him:
- Use an internal stylesheet (http://www.w3schools.com/css/css_howto.asp) and internal javascript. (Believe me, this is against 'good practices' but improves your loading speed)
- Do NOT use any CSS frameworks
- When you really want to use cool JQuery-stuff, replace it with http://zeptojs.com/
The syntax is the same, but it's only 10KB in size. I've tested it on android/iphone and it works. Good for advanced animations and stuff.
If possible, use plain javascript instead of a framework.
- Create the CTA button with 100% CSS3. No images. Add a variant where you use CSS3 animations to make the button pulse/glow/... (using CSS3 instead of images makes it easier for you to scale to multiple countries, since you can change the call to action text in code).
- AVOID using Google fonts or embedded fonts
- Put all your images through http://www.smushit.com/ysmush.it/ for optimal speed
- Create a fluid layout instead of using media queries


08-21-2014 09:48 AM #12 keepthecar (Member)

- AVOID using Google fonts or embedded fonts
Why do you recommend against this?


08-21-2014 11:23 AM #13 vitalis (AMC Alumnus)

Quote Originally Posted by keepthecar View Post
Why do you recommend against this?
Loading times..


08-22-2014 07:20 PM #14 caurmen (Administrator)

@vitalis - I'd agree with almost all of this! Great points.

Personally I tend to recommend media queries as well once you know what phones make up most of your traffic, just to be sure that things like font size don't trip you up. But it's definitely more work.


08-22-2014 07:28 PM #15 iAmAttila (Veteran Member)

Give bannerslanders.com a go. I know you wont be dissapointed


08-22-2014 07:28 PM #16 stackman (Administrator)

I've been dealing with freelancers for 8 years. The biggest problem is finding 1 guy and working with him longterm.

Find a guy who has been doing freelance for a long time, and has built up some social media around it which should prove he's actually been doing this and cares about his freelance positioning.


08-23-2014 09:57 PM #17 nt2000 (Member)

I've decided to give B&L a chance. Will update you on it when it comes back.


Home > Design - Imagery, Banners & Landers > Landing Pages