How to make a mobile website look like an app?

Dan Hower · 13th Aug 2012, 02:37 AM

Hi,

I bought Will's and Quentin's scripts some time ago, which are both very useful.

I use them as base and am working on developing my own design.

Instead of the buttons that go over the full width of the mobile screen I would like to use buttons like in apps. So that depending on the actual width of the screen I would have 3 buttons in a row, if the device has a wider screen maybe 4 buttons in a row.

How could I get that working? Or is there another WSO which I could buy which teaches that?

Thanks
dtm

Quentin · 13th Aug 2012, 03:26 AM

To do this you need to move to html5 DTM

http://www.w3schools.com/html5/default.asp

Q

Dan Hower · 13th Aug 2012, 04:10 AM

Thanks Quentin, I will do that. Of course it would be easier if you had a WSO with ready to use code...

WillR · 13th Aug 2012, 05:16 AM

DTM,

There is a post in our members forum that shows you exactly how to do that with my template. One of our members created it.

I can't speak for other people's products but you did mention you had mine so just wanted to point that out.

If you have any further questions then please email me directly.

Dan Hower · 13th Aug 2012, 05:22 AM

Thanks Will, I will see if I find my access info to your forum. I'm travelling in Europe right now, and when I bought you WSO I was in Oz and it is probably there on my PC. If I can't find it I will get in contact with you.
cheers
dtm

tprinty2 · 13th Aug 2012, 10:21 AM

You could use phonegap and templates that you have. This might give you what you are looking for. I am in the process of building a phonegap app for a client now.

Jay Moreno · 13th Aug 2012, 11:05 AM

you can do this with very simple html & css nothing complicated needed:

this would be your html

Code:

<div id="nav">
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
<li class="icon"></li>
</div>

This would be your css:

Code:

<style type="text/css">

#nav{

    width:100%;                    
    /* makes width full screen width */

    height:auto;                
     /* height changes with icon rows */

    text-align:center;            
     /* keeps icon centered */

    background-color:#dbdbdb;    
     /* added for decoration */

    border-radius: 8px;            
     /* added for decoration */
}

.icon{

    width: 50px;                
     /* width of icon */

    height: 50px;                
    /* height of icon */

    display: inline-block;        
    /* keeps icon inline */

    margin: 5px;                
    /* adds spacing around icons */    

    background-color:#1f8ba7;  
    /* added for decoration */
  
    border-radius: 4px;            
    /* added for decoration */
    
    /* anything inside these type of tags are just notes you can delete them :) */
}

</style>

to add icons in between the <li> </li> tags you would add the following:

Code:

<a href="yoururl.html">

<img src="yourimage.jpg">

</a>

this is early morning and am just having my breakfast coffee but give it a try - this is in its very simplest form that i can think of

hth

jay

Jay Moreno · 13th Aug 2012, 11:10 AM

just added a demo for you

WF icon demo

resize your browser and you will see the icons increase or decrease or if your on your phone just rotate your screen

hth

jay

Craig Kaiser · 13th Aug 2012, 02:26 PM

You could also use this :

iUI - Mobile web framework for high-end devices

Craig

billpullman · 13th Aug 2012, 02:56 PM

i came across this video and i think this will be a great tuturial for you to see how to make the webpage look like an app

How to make websites look like app icons on the...

dominodivine · 13th Aug 2012, 05:28 PM

The best way to get a mobile site to look like application is to build it using Jquery mobile.

There is a guy selling some templates and forum for jquerymobile base template but he is kind of expensive $97 dollars.

He had a WSO but now it is closed...

http://www.warriorforum.com/warrior-...s-minutes.html

John Ayling · 13th Aug 2012, 06:24 PM

Originally Posted by dominodivine

The best way to get a mobile site to look like application is to build it using Jquery mobile.

There is a guy selling some templates and forum for jquerymobile base template but he is kind of expensive $97 dollars.

He had a WSO but now it is closed...

http://www.warriorforum.com/warrior-...s-minutes.html

+1 for using jQuery Mobile to make sites that look and behave like apps.

Dan Hower · 14th Aug 2012, 04:53 AM

Originally Posted by Jay Moreno

just added a demo for you

WF icon demo

resize your browser and you will see the icons increase or decrease or if your on your phone just rotate your screen

hth

jay

Thanks very much; Jay,

that is a big help. I will try it out when I get back to a desktop PC on Thursday.

cheers, dtm

Jay Moreno · 14th Aug 2012, 05:56 PM

Originally Posted by dtm

Thanks very much; Jay,

that is a big help. I will try it out when I get back to a desktop PC on Thursday.

cheers, dtm

no problem - any questions don't hesitate to ask

i was actually doing something similar when i read the post

peter_act · 15th Aug 2012, 11:06 PM

I may be misunderstanding your question, but if you have Quentin'e script, don't you just need his icon driven template? (It's in his templates folder)
See the attached png file.

Cheers

Dan Hower · 16th Aug 2012, 02:21 AM

Originally Posted by peter_act

I may be misunderstanding your question, but if you have Quentin'e script, don't you just need his icon driven template? (It's in his templates folder)
See the attached png file.

Cheers

Thanks, I missed that. information overload

Deante Section · 6th Nov 2012, 06:39 PM

I'm looking for Quentins mobile WSO everyone is talking about but i can't find it. Does any one have the direct link?

Ken Shorey · 7th Nov 2012, 07:57 AM

Originally Posted by Deante Section

I'm looking for Quentins mobile WSO everyone is talking about but i can't find it. Does any one have the direct link?

http://www.warriorforum.com/warrior-...wordpress.html

Caleb Spilchen · 7th Nov 2012, 03:13 PM

Hey,

The one cool thing I tested when I was working on a project for a client... was turning a simple website into something that looked like a web app. Basically, your website if someone adds it to their home screen, functions like an app, looks like an app... but has no programming involved (and gets the same attention on the home screen).

You basically have to add a bunch of code... I googled around for a better explanation then I could give, How-To: Create an iPhone Web App — Apple News, Tips and Reviews is what I found.

To Your Success,

Caleb

colzinfobiz · 13th Feb 2013, 05:17 PM

This has to be the best thread I have read so far on Web App Production. Especially that I have limited knowledge building Apps. Thanks Everyone

13th Aug 2012, 03:26 AM	#2
Quentin Web Marketing For Profit War Room Member Join Date: 2002 Location: Brisbane Posts: 2,894 Thanks: 8 Thanked 1,162 Times in 528 Posts Blog Entries: 10	Re: How to make a mobile website look like an app? Share on: To do this you need to move to html5 DTM http://www.w3schools.com/html5/default.asp Q
	DIY Product Creation Online Business Training on How To Create Products to sell online Plus Lots More.

13th Aug 2012, 04:10 AM	#3
Dan Hower HyperActive Warrior War Room Member Join Date: 2011 Location: Avalon NSW Posts: 191 Thanks: 77 Thanked 38 Times in 34 Posts	Re: How to make a mobile website look like an app? Share on: Thanks Quentin, I will do that. Of course it would be easier if you had a WSO with ready to use code...

13th Aug 2012, 05:16 AM	#4
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,473 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: How to make a mobile website look like an app? Share on: DTM, There is a post in our members forum that shows you exactly how to do that with my template. One of our members created it. I can't speak for other people's products but you did mention you had mine so just wanted to point that out. If you have any further questions then please email me directly.
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

13th Aug 2012, 05:22 AM	#5
Dan Hower HyperActive Warrior War Room Member Join Date: 2011 Location: Avalon NSW Posts: 191 Thanks: 77 Thanked 38 Times in 34 Posts	Re: How to make a mobile website look like an app? Share on: Thanks Will, I will see if I find my access info to your forum. I'm travelling in Europe right now, and when I bought you WSO I was in Oz and it is probably there on my PC. If I can't find it I will get in contact with you. cheers dtm

13th Aug 2012, 10:21 AM	#6
tprinty2 Warrior Member Join Date: 2012 Posts: 16 Thanks: 2 Thanked 3 Times in 3 Posts	Re: How to make a mobile website look like an app? Share on: You could use phonegap and templates that you have. This might give you what you are looking for. I am in the process of building a phonegap app for a client now.

13th Aug 2012, 02:37 AM	#1
Dan Hower HyperActive Warrior War Room Member Join Date: 2011 Location: Avalon NSW Posts: 191 Thanks: 77 Thanked 38 Times in 34 Posts	How to make a mobile website look like an app? Share on: Hi, I bought Will's and Quentin's scripts some time ago, which are both very useful. I use them as base and am working on developing my own design. Instead of the buttons that go over the full width of the mobile screen I would like to use buttons like in apps. So that depending on the actual width of the screen I would have 3 buttons in a row, if the device has a wider screen maybe 4 buttons in a row. How could I get that working? Or is there another WSO which I could buy which teaches that? Thanks dtm

13th Aug 2012, 11:05 AM	#7
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,271 Thanks: 301 Thanked 449 Times in 309 Posts	Re: How to make a mobile website look like an app? Share on: you can do this with very simple html & css nothing complicated needed: this would be your html Code: <div id="nav"> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> <li class="icon"></li> </div> This would be your css: Code: <style type="text/css"> #nav{ width:100%; /* makes width full screen width / height:auto; / height changes with icon rows / text-align:center; / keeps icon centered / background-color:#dbdbdb; / added for decoration / border-radius: 8px; / added for decoration / } .icon{ width: 50px; / width of icon / height: 50px; / height of icon / display: inline-block; / keeps icon inline / margin: 5px; / adds spacing around icons / background-color:#1f8ba7; / added for decoration / border-radius: 4px; / added for decoration / / anything inside these type of tags are just notes you can delete them :) */ } </style> to add icons in between the <li> </li> tags you would add the following: Code: <a href="yoururl.html"> <img src="yourimage.jpg"> </a> this is early morning and am just having my breakfast coffee but give it a try - this is in its very simplest form that i can think of hth jay
	Sorry, I am too busy helping people to think of a cool signature!

13th Aug 2012, 11:10 AM	#8
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,271 Thanks: 301 Thanked 449 Times in 309 Posts	Re: How to make a mobile website look like an app? Share on: just added a demo for you WF icon demo resize your browser and you will see the icons increase or decrease or if your on your phone just rotate your screen hth jay
	Sorry, I am too busy helping people to think of a cool signature!

13th Aug 2012, 02:26 PM	#9
Craig Kaiser HyperActive Warrior Join Date: 2002 Location: Florida , USA. Posts: 126 Thanks: 9 Thanked 9 Times in 5 Posts	Re: How to make a mobile website look like an app? Share on: You could also use this : iUI - Mobile web framework for high-end devices Craig

13th Aug 2012, 05:28 PM	#11
dominodivine HyperActive Warrior War Room Member Join Date: 2008 Location: Cary, NC And Brooklyn NY Posts: 119 Thanks: 81 Thanked 35 Times in 29 Posts	Re: How to make a mobile website look like an app? Share on: The best way to get a mobile site to look like application is to build it using Jquery mobile. There is a guy selling some templates and forum for jquerymobile base template but he is kind of expensive $97 dollars. He had a WSO but now it is closed... http://www.warriorforum.com/warrior-...s-minutes.html

15th Aug 2012, 11:06 PM	#15
peter_act HyperActive Warrior War Room Member Join Date: 2003 Location: Gold Coast, Queensland, Australia Posts: 296 Thanks: 21 Thanked 141 Times in 93 Posts	Re: How to make a mobile website look like an app? Share on: I may be misunderstanding your question, but if you have Quentin'e script, don't you just need his icon driven template? (It's in his templates folder) See the attached png file. Cheers Attached Thumbnails
	Cheap websites for small businesses: Affordable mobile websites Get a free autoresponder here: Money Making Opportunities

6th Nov 2012, 06:39 PM	#17
Deante Section Warrior Member Join Date: 2009 Posts: 3 Thanks: 0 Thanked 2 Times in 2 Posts	Re: How to make a mobile website look like an app? Share on: I'm looking for Quentins mobile WSO everyone is talking about but i can't find it. Does any one have the direct link?
	Last edited on 6th Nov 2012 at 06:40 PM. Reason: Left out some information

7th Nov 2012, 03:13 PM	#19
Caleb Spilchen Expat in Medellin War Room Member Join Date: 2010 Location: Canada Posts: 2,913 Thanks: 929 Thanked 888 Times in 520 Posts Blog Entries: 3	Re: How to make a mobile website look like an app? Share on: Hey, The one cool thing I tested when I was working on a project for a client... was turning a simple website into something that looked like a web app. Basically, your website if someone adds it to their home screen, functions like an app, looks like an app... but has no programming involved (and gets the same attention on the home screen). You basically have to add a bunch of code... I googled around for a better explanation then I could give, How-To: Create an iPhone Web App — Apple News, Tips and Reviews is what I found. To Your Success, Caleb
	Canadian Expat Living in Medellin, Colombia

13th Feb 2013, 05:17 PM	#20
colzinfobiz Col Join Date: 2009 Location: Australia Posts: 75 Thanks: 24 Thanked 19 Times in 15 Posts	Re: How to make a mobile website look like an app? Share on: This has to be the best thread I have read so far on Web App Production. Especially that I have limited knowledge building Apps. Thanks Everyone
	You can lead a horse to water but you can't make it drink....What if you can't find the water? ;-) Follow my latest blog updates: http://colsbestbizopps.com