Home > Mobile >

How to Build a Landing Page that Works for any Mobile device or Browser (23)

10-18-2014 06:13 PM #1 subzer0 (Member)
How to Build a Landing Page that Works for any Mobile device or Browser

Hello Fellow STMr's

Today i am going to show you how to make a Landing page that is not only responsive but also loads faster.

Coming straight to the point.

Step 1: We will need a HTML 5/CSS3 Framework

There are 2 best frameworks available

Bootstrap ==>> getbootstrap.com

OR

Foundation ==>>http://foundation.zurb.com/

In this example i will be using Foundation so lets download it.
Step 1:

Click on Download

Step 2:
Click on download Everything

Step 3:
Unzip the File that you get, you will see files like following

Now you will find this amazing that the page is already responsive and can fit itself in any resolution so now we just need to update the content of the page as per our needs.

Lets Check that out if it is working or not.

To test the mobile lander you dont need a mobile to browse that, there is another way round . For that you will need to have Firefox installed

Now open the index.html in firefox.

If you are a windows user then press Ctrl+Shift+m
if you are a mac lover (like me :P) then press command+option+m

Now you see that we can test any resolution by using this method and the page is already responsive.

Desktop View :

Mobile View:

Step 4:
Now Lets start editing the lander as per our need.

>Create a new File name lander.html in the same folder

>paste the following code into it.

HTML Code:

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PAGE TITLE GOES HERE</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <script src="js/vendor/modernizr.js"></script>
</head>
<body>

  <div class="row">
    <div class="large-12 columns">
      <h1 align="center">LANDER HEADING GOES HERE</h1>
    </div>
  </div>

  <div class="row">
    <div class="large-12 columns">
     <div class="panel">
       <h3 align="center">We&rsquo;re stoked you want to try Foundation! </h3>
       <center><img src="http://i.imgur.com/qXxfAQJ.jpg" ></center>
       <p>Your Cntent Goes here</p>
       <p>Your Cntent Goes here</p>
       <div class="row">
        <div class="large-4 medium-4 columns">
         <p><a href="#">TITLE</a><br />Your Cntent Goes here</p>
       </div>
       <div class="large-4 medium-4 columns">
         <p><a href="#">TITLE</a><br />Your Cntent Goes here</p>
       </div>
       <div class="large-4 medium-4 columns">
         <p><a href="#">TIELE</a><br />Your Cntent Goes here</p>
       </div> 

     </div>
     <div class="row" align="center"><a class="medium round button" href="http://foundation.zurb.com/docs/">CALL TO ACTION BUTTON</a></div>
     
   </div>
 </div>
</div>



<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
</body>
</html>

Check the image size while viewing on desktop and while viewing on mobile screen it will automatically adjust the image.
Desktop:

Click image for larger version.

Name: Screen Shot 2014-10-18 at 11.29.06 pm.png
Views: 475
Size: 188.6 KB
ID: 3953

Mobile:

Click image for larger version.

Name: Screen Shot 2014-10-07 at 23.30.45.png
Views: 423
Size: 185.5 KB
ID: 3954

Step 5 :
Put your content in the HTML and you are ready to Rock and ROll

Upload the folder to you server after deleting index.html and renaming lander.html file to index.html

You have created a landing page that will work on any mobile device easily and will not look bad.

You can refer Foundation / Bootstrap Docs if you want to modify the default look and it is very easy to modify the look .

Hope you guys like this tutorial

Quick tip : Always host your images on CDN or IMGUR as it also increases Load speed.

Thanks
Subzer0

10-18-2014 09:36 PM #2 bbrock32 (Administrator)

Great tutorial mate, thanks for sharing!

I am sure it will help many non technical members on creating their first mobile landers.

10-19-2014 01:59 AM #3 fanatic4k (Member)

Bookmarked!

Thanks fella, this will surely help me and many others out

10-19-2014 05:07 AM #4 subzer0 (Member)

Originally Posted by bbrock32

Great tutorial mate, thanks for sharing!

I am sure it will help many non technical members on creating their first mobile landers.

Any suggestions for improving the tutorial most welcome.
Coz i am going to post 1 tutorial every day..

10-19-2014 07:54 AM #5 zeno (Administrator)

Bootstraps are nice but they can be a bit heavy for simple mobile landers. Not so bad if you are running volume and using across multiple campaigns so that caching helps out.

What about Pure? It seems to be even lighter than this.

10-19-2014 08:39 AM #6 adrianegerrard (Member)

Hey Zeno. What do you mean by heavy for simple mobile landers? Tq

10-19-2014 10:07 AM #7 zeno (Administrator)

Well, the framework uses modernizr and jquery + a Foudation responsive library, so to use it properly you're looking at ~200 kB of css/js.

You can always remove parts not needed from the CSS, but the framework itself is built to use multiple js files that themselves can be larger than the lightweight landers you might code by hand.

10-19-2014 01:52 PM #8 cmdeal (Veteran Member)

Originally Posted by subzer0

Any suggestions for improving the tutorial most welcome.
Coz i am going to post 1 tutorial every day..

A tutorial a day ... nice!

What is your background and areas of expertise? Based on that, I am sure I can suggest some good tutorial ideas ... although probably not 365!

10-19-2014 04:11 PM #9 mrchow (Member)

Thanks man! there are some tips here, that really help me to build mobile landers

10-19-2014 04:20 PM #10 nickpeplow (AMC Alumnus)

I love me some bootstrap!

it's super important with both bs and foundation to remove any CSS that is not used by the current page, or calls to unused Javascript (JQuery for example). Plenty of tools out there to remove unused bits, I quite like https://unused-css.com . With bootstrap you can also compile a custom download containing just the components you need.

10-19-2014 04:25 PM #11 nefig (Member)

^^ yeah the real question is - how to only include CSS you're *really* using on that page. And just drop it in the header instead of linking out to it. Thats not what you want to do on mobile, ever. Unless on Wifi...

10-19-2014 06:54 PM #12 h0mp (Member)

I guess it works on a lot of devices but not on all.

IMGUR is banned in certain countries. So make sure it's available for your audience.

10-21-2014 08:51 AM #13 subzer0 (Member)

Originally Posted by zeno

We are not using full version of Bootstrap or foundation here so it is light weight and also easy to modify also it loads up faster then then simple code because we are using CDN for the css and js we are not going to host that on our server it load time is in 120 milli seconds when tested on a server with 512 RAM (Digital ocean basic) it is good.

10-21-2014 08:54 AM #14 subzer0 (Member)

Originally Posted by h0mp

I guess it works on a lot of devices but not on all.

IMGUR is banned in certain countries. So make sure it's available for your audience.

We use IMGUR as a CDN for images if you have your person CDN then its Great. images load faster with MAXCDN then
IMGUR

10-21-2014 11:03 AM #15 caurmen (Administrator)

Bootstrap is definitely a bit heavy for mobile landers - but with modification it can be good.

I've been working on a case study on mobile frameworks and their effects on load time and CTR. It got sidetracked slightly by my bot research (actually, my bot research came out of it, because I didn't believe some of the CTRs I was seeing), but I'll be publishing it on STM next month, all being well.

10-21-2014 12:10 PM #16 nickpeplow (AMC Alumnus)

purecss.io is well worth a look if you're just after grids and such like, its the baby brother of bootstrap and foundation - at 4.4KB! <<<

10-21-2014 05:33 PM #17 subzer0 (Member)

Originally Posted by nickpeplow

purecss.io is well worth a look if you're just after grids and such like, its the baby brother of bootstrap and foundation - at 4.4KB! <<<

Yes it is but if you are looking for a great looking landing pages the so called papa's of purecss helps

10-21-2014 06:28 PM #18 thendricksen (Member)

Bootstrap is great is you aren't worried about speed, and want a nice look. This is the one I use most often in general projects. Will make things accessible and nice overall.

Pure is a lot more compact, and for just basic responsive design with a few bells and whistles (forms, buttons, etc.), it works pretty well. (Albeit the styling on the words / letter spacing is a bit weird from the get-go, and may be more difficult for newbies to tweak and get right. )

For a few of the more experienced users, here's a super-compressed framework I use if I just want a responsive scaffolding for pages (no buttons, forms, and bloated markup).

Code:

*{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:300;padding:100px 0 50px}a{color:#479ce4}a:hover{color:#2d79ba}img{max-width:100%}.grid{margin-left:-3%;max-width:105%}.unit{display:inline-block;zoom:1;vertical-align:top;margin-left:3%;margin-right:-.25em;overflow:visible}.unit.demo{background-color:#fff8eb;height:3rem;margin-bottom:1.5rem}.span-grid{width:97%}.one-of-two{width:47%}.one-of-three{width:30.36%}.two-of-three{width:63.666666666%}.one-of-four{width:22.05%}.three-of-four{width:72%}.one-of-five{width:17.07%}.two-of-five{width:37%}.three-of-five{width:57%}.four-of-five{width:77%}.alpha,.beta,.p,form,h1,h2,hr,ol,p,pre,table,ul{margin-bottom:1.5rem}.alpha,h1{font-size:3rem;font-weight:700;line-height:1}.beta,h2{font-size:1.5rem;font-weight:400;line-height:2}.gamma,h3{font-size:1rem;font-weight:700}.text-center{text-align:center}@media (max-width:1170px){.container{width:960px}}@media (max-width:960px){.container{width:767px}}@media (max-width:767px){.container{width:auto}.grid{margin-left:0;max-width:none}.unit{width:auto;margin-left:0;display:block}html{font-size:100%}body{padding-top:0}}

Quick example of it in practice http://labancaopzioni.co.it/, which also has 99/100 Google Page Speed (should have 100/100, but funny enough, Google didn't compress the JS in its YouTube HTML5 player enough, so docks me

) on a $10/m shared SSD host with no CDNs. Also, that site has been ranking #2-3 for a year consistently for a 3000 LMS term, with 1 main content page (another sub-page added a few months ago), and without adding a backlink in about 10 months. Page Load Speed is the new way to 'hack' SEO.

10-22-2014 02:20 PM #19 vortex (Senior Moderator)

Originally Posted by subzer0

To test the mobile lander you dont need a mobile to browse that, there is another way round . For that you will need to have Firefox installed

Now open the index.html in firefox.

If you are a windows user then press Ctrl+Shift+m
if you are a mac lover (like me :P) then press command+option+m

Now you see that we can test any resolution by using this method and the page is already responsive.

This is brilliant! Thanks so much subzer0 for recommending this tool!

Up until now, to avoid having to take out a browserstack subscription, I've been using HMA to change my IP every time I reached the daily "free" limit. Now I don't have to do that anymore!

All I had to do was take the dimensions of the most popular android and ios devices from browserstack, and used "Add Preset" to load all the dimensions into firefox. Now I can view my mobile lander in different dimensions in real-time - no more waiting for browserstack to generate thumbnails!

Here is a list of the most popular ios and android devices and their dimensions. You vets probably have a much more comprehensive list.

Amazon Kindle Fire 2 600x1024
iPad Mini 768x1024
iPad 3rd (6.0) 768x1024
iPad 3rd 768x1024
iPad 2 (5.0) 768x1024
iPad Mini 2 768x1024
iPad 4th 768x1024
iPad Air 768x1024
Samsung Galaxy Note 800x1198
Samsung Galaxy S2 800x1231
Samsung Galaxy S3 720x1280
Samsung Galaxy Note 2 720x1280
Motorola Razr Maxx HD 720x1280
HTC One X 720x1280
Google Nexus 720x1280
Google Nexus 4 768x1280
Samsung Galaxy Tab 2 10.1 800x1280
Samsung Galaxy Note 10.1 800x1280
Samsung Galaxy Tab 4 10.1 800x1280
Google Nexus 7 800x1280
Motorola Droid Razr 800x1333
Samsung Galaxy S4 1080x1920
Samsung Galaxy Note 3 1080x1920
Amazon Kindle Fire HD 8.9 1200x1920
Amazon Kindle Fire HDX 7 1200x1920
iPhone 4s (6.0) 320x480
iPhone 4s 320x480
Sony Xperia 320x480
iPhone 5 320x568
iPhone 6 320x568
iPhone 6 Plus 320x568
iPhone 5s 320x568
HTC One M8 360x592
Google Nexus 5 360x592
Samsung Galaxy S5 360x640
Samsung Galaxy S5 Mini 360x640
HTC Wildfire 800x964
Motorola Razr 540x965

BTW - these 2 related threads practically saved my life (OK - at least my sanity). Caurmen makes the best tutorials!

http://stmforum.com/forum/showthread...Actually-Works

http://stmforum.com/forum/showthread...With-Any-Phone

07-01-2015 11:18 AM #20 feralcreation (Member)

Thanks Subzero for the contribution!

07-02-2015 07:32 PM #21 yussef (AMC Alumnus)

Super easy. Thanks.

07-24-2015 07:41 PM #22 eazyg714 (Member)

Thanks for the tutorial!

08-23-2015 05:22 PM #23 zul0x1 (Member)

Thnx man! appreciate it!

Home > Mobile >