Warrior Forum - The #1 Digital Marketing Forum & Marketplace - How to make a mobile website look like an app?

Warrior Forum - The #1 Digital Marketing Forum & Marketplace (https://www.warriorforum.com/)

- Mobile Marketing (https://www.warriorforum.com/mobile-marketing/)

- - How to make a mobile website look like an app? (https://www.warriorforum.com/mobile-marketing/653816-how-make-mobile-website-look-like-app.html)

Dan Hower

13th August 2012 02:37 AM

How to make a mobile website look like an app?

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 August 2012 03:26 AM

Re: How to make a mobile website look like an app?

To do this you need to move to html5 DTM

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

Q

Dan Hower

13th August 2012 04:10 AM

Re: How to make a mobile website look like an app?

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

WillR

13th August 2012 05:16 AM

Re: How to make a mobile website look like an app?

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 August 2012 05:22 AM

Re: How to make a mobile website look like an app?

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 August 2012 10:21 AM

Re: How to make a mobile website look like an app?

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 August 2012 11:05 AM

Re: How to make a mobile website look like an app?

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 August 2012 11:10 AM

Re: How to make a mobile website look like an app?

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 August 2012 02:26 PM

Re: How to make a mobile website look like an app?

You could also use this :

iUI - Mobile web framework for high-end devices

Craig

billpullman

13th August 2012 02:56 PM

Re: How to make a mobile website look like an app?

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 August 2012 05:28 PM

Re: How to make a mobile website look like an app?

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 August 2012 06:24 PM

Re: How to make a mobile website look like an app?

Quote:

Originally Posted by dominodivine (Post 6789862)

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

Dan Hower

14th August 2012 04:53 AM

Re: How to make a mobile website look like an app?

Quote:

Originally Posted by Jay Moreno (Post 6787683)

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 August 2012 05:56 PM

Re: How to make a mobile website look like an app?

Quote:

Originally Posted by dtm (Post 6792419)

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 August 2012 11:06 PM

Re: How to make a mobile website look like an app?

1 Attachment(s)

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 August 2012 02:21 AM

Re: How to make a mobile website look like an app?

Quote:

Originally Posted by peter_act (Post 6804920)

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 November 2012 06:39 PM

Re: How to make a mobile website look like an app?

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 November 2012 07:57 AM

Re: How to make a mobile website look like an app?

Quote:

Originally Posted by Deante Section (Post 7301440)

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 November 2012 03:13 PM

Re: How to make a mobile website look like an app?

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 February 2013 05:17 PM

Re: How to make a mobile website look like an app?

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:)

All times are GMT -6. The time now is 12:33 PM.