Register Advertise with usHelp Desk Today's Posts Search

Closed Thread
Thread Tools Search this Thread
Unread 13th Aug 2012, 02:37 AM   #1
HyperActive Warrior
War Room Member
 
Dan Hower's Avatar
 
Join Date: 2011
Location: Avalon NSW
Posts: 191
Thanks: 77
Thanked 38 Times in 34 Posts
Default
How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
Dan Hower is offline  
Unread 13th Aug 2012, 03:26 AM   #2
Web Marketing For Profit
War Room Member
 
Quentin's Avatar
 
Join Date: 2002
Location: Brisbane
Posts: 2,895
Thanks: 8
Thanked 1,162 Times in 528 Posts
Blog Entries: 10
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

To do this you need to move to html5 DTM

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

Q

Quentin is offline  
The Following 2 Users Say Thank You to Quentin For This Useful Post:
Unread 13th Aug 2012, 04:10 AM   #3
HyperActive Warrior
War Room Member
 
Dan Hower's Avatar
 
Join Date: 2011
Location: Avalon NSW
Posts: 191
Thanks: 77
Thanked 38 Times in 34 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Thanks Quentin, I will do that. Of course it would be easier if you had a WSO with ready to use code...
Dan Hower is offline  
Unread 13th Aug 2012, 05:16 AM   #4
Digital Marketer
War Room Member
 
WillR's Avatar
 
Join Date: 2010
Location: Australia
Posts: 12,475
Thanks: 1,984
Thanked 8,187 Times in 4,079 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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.

WillR is offline  
The Following 2 Users Say Thank You to WillR For This Useful Post:
Unread 13th Aug 2012, 05:22 AM   #5
HyperActive Warrior
War Room Member
 
Dan Hower's Avatar
 
Join Date: 2011
Location: Avalon NSW
Posts: 191
Thanks: 77
Thanked 38 Times in 34 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
Dan Hower is offline  
The Following User Says Thank You to Dan Hower For This Useful Post:
Unread 13th Aug 2012, 10:21 AM   #6
Warrior Member
 
Join Date: 2012
Posts: 16
Thanks: 2
Thanked 3 Times in 3 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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.
tprinty2 is offline  
The Following User Says Thank You to tprinty2 For This Useful Post:
Unread 13th Aug 2012, 11:05 AM   #7
Mobile+WP = JumpMobi.com
War Room Member
 
Jay Moreno's Avatar
 
Join Date: 2009
Location: San Antonio, Tx
Posts: 1,270
Thanks: 301
Thanked 449 Times in 309 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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!
Jay Moreno is offline  
The Following User Says Thank You to Jay Moreno For This Useful Post:
Unread 13th Aug 2012, 11:10 AM   #8
Mobile+WP = JumpMobi.com
War Room Member
 
Jay Moreno's Avatar
 
Join Date: 2009
Location: San Antonio, Tx
Posts: 1,270
Thanks: 301
Thanked 449 Times in 309 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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!
Jay Moreno is offline  
The Following User Says Thank You to Jay Moreno For This Useful Post:
Unread 13th Aug 2012, 02:26 PM   #9
HyperActive Warrior
 
Join Date: 2002
Location: Florida , USA.
Posts: 126
Thanks: 9
Thanked 9 Times in 5 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

You could also use this :

iUI - Mobile web framework for high-end devices

Craig
Craig Kaiser is offline  
The Following 2 Users Say Thank You to Craig Kaiser For This Useful Post:
Unread 13th Aug 2012, 02:56 PM   #10
Active Warrior
 
Join Date: 2011
Posts: 34
Thanks: 0
Thanked 3 Times in 3 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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


billpullman is offline  
The Following User Says Thank You to billpullman For This Useful Post:
Unread 13th Aug 2012, 05:28 PM   #11
HyperActive Warrior
War Room Member
 
dominodivine's Avatar
 
Join Date: 2008
Location: Cary, NC And Brooklyn NY
Posts: 119
Thanks: 81
Thanked 35 Times in 29 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
dominodivine is offline  
The Following User Says Thank You to dominodivine For This Useful Post:
Unread 13th Aug 2012, 06:24 PM   #12
HyperActive Warrior
War Room Member
 
John Ayling's Avatar
 
Join Date: 2009
Location: Australia
Posts: 225
Thanks: 41
Thanked 47 Times in 36 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Originally Posted by dominodivine View Post

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.

Software Marketing & Licensing System for WordPress Plugins, Themes & .NET Software
>> 72 Hour Special <<
John Ayling is offline  
The Following 2 Users Say Thank You to John Ayling For This Useful Post:
Unread 14th Aug 2012, 04:53 AM   #13
HyperActive Warrior
War Room Member
 
Dan Hower's Avatar
 
Join Date: 2011
Location: Avalon NSW
Posts: 191
Thanks: 77
Thanked 38 Times in 34 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Originally Posted by Jay Moreno View Post

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
Dan Hower is offline  
Unread 14th Aug 2012, 05:56 PM   #14
Mobile+WP = JumpMobi.com
War Room Member
 
Jay Moreno's Avatar
 
Join Date: 2009
Location: San Antonio, Tx
Posts: 1,270
Thanks: 301
Thanked 449 Times in 309 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Originally Posted by dtm View Post

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

Sorry, I am too busy helping people to think of a cool signature!
Jay Moreno is offline  
Unread 15th Aug 2012, 11:06 PM   #15
HyperActive Warrior
War Room Member
 
peter_act's Avatar
 
Join Date: 2003
Location: Gold Coast, Queensland, Australia
Posts: 296
Thanks: 21
Thanked 141 Times in 93 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
How to make a mobile website look like an app?-index.jpg  

Cheap websites for small businesses: Affordable mobile websites
Get a free autoresponder here: Money Making Opportunities
peter_act is offline  
Unread 16th Aug 2012, 02:21 AM   #16
HyperActive Warrior
War Room Member
 
Dan Hower's Avatar
 
Join Date: 2011
Location: Avalon NSW
Posts: 191
Thanks: 77
Thanked 38 Times in 34 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Originally Posted by peter_act View Post

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
Dan Hower is offline  
Unread 6th Nov 2012, 06:39 PM   #17
Warrior Member
 
Join Date: 2009
Posts: 3
Thanks: 0
Thanked 2 Times in 2 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
Deante Section is offline  
Unread 7th Nov 2012, 07:57 AM   #18
Active Warrior
War Room Member
 
Join Date: 2004
Location: Florida
Posts: 68
Thanks: 21
Thanked 20 Times in 16 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

Originally Posted by Deante Section View Post

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
Ken Shorey is offline  
Unread 7th Nov 2012, 03:13 PM   #19
Expat in Medellin
War Room Member
 
Caleb Spilchen's Avatar
 
Join Date: 2010
Location: Canada
Posts: 2,903
Thanks: 931
Thanked 888 Times in 520 Posts
Blog Entries: 3
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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 &mdash; Apple News, Tips and Reviews is what I found.

To Your Success,

Caleb

Canadian Expat Living in Medellin, Colombia
Caleb Spilchen is offline  
Unread 13th Feb 2013, 05:17 PM   #20
Col
 
colzinfobiz's Avatar
 
Join Date: 2009
Location: Australia
Posts: 75
Thanks: 24
Thanked 19 Times in 15 Posts
Default
Re: How to make a mobile website look like an app?
Share on: 
fb share twitter share gplus share more share

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
colzinfobiz is offline  
Closed Thread


Bookmarks

Tags
app, make, mobile, website


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 02:59 AM.