Home > Design - Imagery, Banners & Landers >

Fully Working Mobile Adult Lander With Javascript Quiz Code - FREE (20)

06-07-2013 01:12 PM #1 caurmen (Administrator)
Fully Working Mobile Adult Lander With Javascript Quiz Code - FREE

So, as promised, I've taken Outline2Design's fantastic mobile adult lander design and converted it to a fully-working HTML version for everyone to use and split-test!

Features include:

Responsive design with auto-resizing images
Javascript quiz function with 2 questions so far
Most text now HTML for rapid loading times and easy editing

Here it is - enjoy!

Notes:

You can add additional questions easily - just assign an ID of "question3", say, and then call the "quiz" function in the onclick of your "yes" answer link.
You'll still need to check this on BrowserStack for phones you're interested in - there are no @media queries currently on the lander. Read my tutorial on media queries for more about that.
The title attribute isn't set yet, so set it to what you want for your campaign!
Test is set to absolute not relative sizes - again, you may need to fiddle with this or adjust using media queries for specific phone models.
If you want to change the headers or image, you can do that by exporting them from the original .PSD, which you can find at this link here.

Thanks very much to Outline2Design for the great design to work from!

Hope that's useful for everyone! If you have any comments or suggestions please do let me know below!

06-07-2013 01:31 PM #2 sean3 (Member)

thanx Caurmen, That Just gave me a kick start !! Thank You so much !!

06-07-2013 04:00 PM #3 francis (Member)

Damn this is sick thanks!

06-11-2013 06:13 PM #4 timtetra ()

Thanks for the share dude, 1 question -- what settings do you use when you save all the individual pieces of the lander? I turn off everything but the piece usually, save for web, then which settings do you use? What size etc?

06-12-2013 10:45 AM #5 caurmen (Administrator)

Good question! Should have mentioned that.

I use different settings for different pieces: 8-bit PNG with around 32 colours for the text elements (as few colours as I can get away with and still have it look OK) and JPG set to about Quality 33 for the picture of the girl.

06-12-2013 11:15 PM #6 peteperclick (Member)

Thanks for the share!!

Can I ask you what font you used? I like how much text you can fit because of its small width. I tried various helveticas but the font you used still looks different for me.

06-12-2013 11:51 PM #7 zeno (Administrator)

Originally Posted by peteperclick

Thanks for the share!!

Can I ask you what font you used? I like how much text you can fit because of its small width. I tried various helveticas but the font you used still looks different for me.

Which font do you mean? All the real text is in Helvetica. The title font in the image is BebasNeue and is available in the original lander archive.

04-05-2014 09:29 PM #8 mrclifton_ (AMC Alumnus)

Awesome share! Thanks!

For some reason some pics doesn't load when made a few tweaks and uploaded this lander on my server.

I've also uploaded the original as it is, and the question1_14.png and the Girl-Image_04 doesn't load. Can't get my head around this. Extremely frustrating. How is this even possible?

Would really appreciate some guidance here.

04-05-2014 10:05 PM #9 panicore (Member)

Check the code and you will find out why I'm not a coder myself but if you put some effort into it you will find your answer at the bottom of the javascript part.

04-09-2014 05:10 AM #10 bjmaks (Member)

Originally Posted by mrclifton_

A few of the filenames in the images directory are Capitalized. Change them to lowercase and you should be good to go.

09-05-2016 10:09 AM #11 evy123 (AMC Alumnus)

Originally Posted by caurmen

So, as promised, I've taken Outline2Design's fantastic mobile adult lander design and converted it to a fully-working HTML version for everyone to use and split-test!

Thanks Caruman! Which tool do you use in order to optimize it for mobile?

09-05-2016 10:27 AM #12 caurmen (Administrator)

@evy123 - Editpad, I think!

Although these days I usually recommend Visual Studio Code as my HTML editor of choice - here's my tutorial on that.

09-05-2016 12:24 PM #13 evy123 (AMC Alumnus)

Thanks Carumen!

If you want to change the headers or image, you can do that by exporting them from the original .PSD, which you can find at this link here.

any chance to get that link working again? trying to get the images in PSD.

09-05-2016 02:28 PM #14 jasclick (Member)

Originally Posted by evy123

Thanks Carumen!

any chance to get that link working again? trying to get the images in PSD.

Same here

09-05-2016 03:17 PM #15 davidep (Member)

Great! I find this lander long and could never fit in a screen without scrolling down. In this case this shouldn't affect conversions since it implies the user to see the rest and the quiz at the bottom is supposed to do the job the tha CTA button. Correct?

09-06-2016 10:36 AM #16 evy123 (AMC Alumnus)

Originally Posted by evy123

Thanks Carumen!

any chance to get that link working again? trying to get the images in PSD.

What do you say Carumen? I'll name my fifth kid after you...

09-06-2016 10:56 AM #17 caurmen (Administrator)

@davidep - test it and see! It is long, but sometimes that works out, and it's a well-designed lander.

@evy123, @jasclick - Yup, I'm working on getting that back online. Stay tuned!

09-06-2016 11:35 AM #18 caurmen (Administrator)

And here it is!

https://www.dropbox.com/s/s0y79gp5d0...liced.psd?dl=0

09-06-2016 05:27 PM #19 evy123 (AMC Alumnus)

you rock man! cheers

09-07-2016 01:44 PM #20 jasclick (Member)

Originally Posted by caurmen

And here it is!

https://www.dropbox.com/s/s0y79gp5d0...liced.psd?dl=0

You are a living legend, thanks

Home > Design - Imagery, Banners & Landers >