bhuff85

Is there anyone here using Dreamweaver's jQuery mobile builder? Or, are you building out separate web pages (just like you would a standard website) and linking those together?

I'm getting frustrated with Dreamweaver, as it uses jQuery and keeps the code all on one page with <div> layouts. The only problem is, when I select one of my menu options and hit the "back" button, the top half of my code is getting cut off.

So, my question is - should I just build the sites as individual pages instead, with a back button in my header/nav bar at the top? Would this be easier? I do like the smooth page transition with the jQuery mobile, though - however, I'm tired of the top half continually cutting itself off and me having to reload the main page each time it happens.

Appreciate the help in advance guys.

WillR

If jquery means that the visitor to your website is, in essence, loading the whole site behind the scenes when they come to your homepage then I would recommend against it. It's the same reason I recommend against those drop-down accordion style menus. The problem with these is the user ends up downloading the whole site when they visit just the homepage or any other page. This slows things down and is not needed. Each page should be it's own page just like on a regular website. You need to remember that mobile users are generally paying for each and every bit of data they use - you won't win many friends by making them download a whole lot of information they never wanted.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

bhuff85

Hey Will - thanks for the feedback. You've been a big help these past few days. Just picked up your WSO with your mobile templates and have already started to work on a few mock-ups for a couple friends that own their own businesses.

Just plugged your script into Dreamweaver and essentially redesigned the entire previous mock-up I had using jQuery. In fact, I made it look damn near close to what it looked like too, so that helps. There is a lot of different ways you can expand on it, that's for sure. Definitely helps set the skeleton so to speak.

Thanks again for your help though man. Can't wait til I start landing some of these local clients!

JBroyer44

I have been playing with jquery mobile as well and was planning on merging it with Will's template too. The sites do look slick in jquery with the ajax transitions and all but it is finicky. Been trying to use the photslide slide show plugin for my pool site and it is a pain to get working right.

I am not sure I would bother using jquery for clients yet. My other problem is getting the damn contact form to work in jquery but thats another story

"The force is strong with this one"
Facebook Ad Services: http://sellabletraffic.com

arty49

Hi J
If you actually spend the time to read the manual and play with the jquery framework you too will fall in love with it like me.

It is so simple to turn off the ajax so the mobi user only downloads the page they are requesting, so no real biggy there.

I wouldn't want to merge Will's templates with jquery as they are two totally different platforms.

If you can code html then a little learning curve to use html5 and css4 is well worth the time spent. Plus jquerymobile give you everything on a platter and it is totally free. You design your own pages and templates from their easy to follow code.

There contact form is amazing simple to implement using some basic php.
PM me with your contact email and I'll send you the code over. AND I have a gallery using transitions working on my site. It's free code so I'll point ya in the right direction there as well.


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

Peter Burke

Hi Bhuff

I'm now building all my mobile sites using jquery mobile.

When using DW5.5 make sure you update the library in the config file otherwise when you set up the template you won't have the latest version.

I don't fully agree with Will, as the load up time with any decent connectivity (3G) is only different by milliseconds.

You only have to do the java call once when using the single page format rather than having multiple pages with numerous java calls in which case I agree with Will.

The only drawback with everything on the one page is the amount of script in the head section, although I have found you can put some of it in a js folder and access it from there

Furthermore, you can do a lot more with Jquery, especially as far onsite interaction is concerned. It also looks and feels better too.

I have no problems with the code on one page, that's the whole idea of it.

Hope this helps a bit..

Neil B

I guess this will come down to personal preference really...I agree with Peter in that download time differences will be minimal with any decent 3G connection and that goes for images too!

Personally I build all my clients mobile sites as standalone HTML/CSS versions of the desktop website hosted on their own sud-domains. FOr me I find this gives me more control and a much better chance at getting some Google mobile browny points

Neil ;-)

dollarware

bhuff85
Hi, I'm using DW 5.5 and jQuery Mobile. I have been using it for about a month, now on and off and like it very much when compared to the other mobile builders that I have used.

It does take a little bouncing around on the jQuerymobile.com to get a handle on how to use everything, but DW makes it a lot easier.

JQM recommends that you build your mobile pages each as its own .html document.
Then when you link to another internal page, the "back" icon is automatically added in the header of the page to which you went. It seems to work great for me.

I have not experienced any pages being cut-off.

I found in the JQM site starter code for both the multi-page (where all the code is in one html document) and the single page (where each mobile page is its own .html document.)

John

Why a Zagat Score is More Important to Your Business in Mobile Search.

http://internet-local.com/getting-a-...ore-important/

eurotunes

I'm still building regular xhtml sites, but like jQuery Mobile because it's just looking awesome. The only reason that I'm not using it yet, is because I read a lot that it would be horror regarding seo. Many experts seem to have different opinions on this though. So I'm still unsure whether to use it or not. Any opinions here?

Mobile Web Publishing
Win on the Go!

WillR

Yes, jquery looks good but it's not great for SEO, page loading times, all the unnecessary scripts it uses, etc. You can still achieve a very close looking site using a much more streamlined XHTML mobile site.

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

arty49

SEO using jquerymobile is no more difficult than doing seo for any other web page.
Remember it is using the meta tags in the header that determines whether your page gets indexed on the1st page or millionth page.

Jquerymobile itself does not and is not the part of your web site that gets indexed by the search engines. The part that gets SEO'd for indexing is the meta tags in your header and how relevant your text in the page is to the title, keywords and description.

So unless you actually have tried getting a web page, [note i said web page], indexed by any of the search engines it is misleading to state that "jquery looks good but it's not great for SEO" when in fact you have no idea.

I have several sites that I have coded in jquerymobile and have been indexed on page 1 of Google for the term "Local Mobile Templates" which only took 2 days to get there.

First page, listed number 4 and it is a site coded using the jquerymobile framework.

BUT remember this.... that jquerymobile is not the language being parsed to show what's on the page/s. It is text, html, php, asp or any other text reading language you use to code your page in and jquery and css are used to enhance the sight, feel and interactivity of the page nothing more.

Here's the search query created by Google Search:
Local Mobile Templates - Google Search

How did I do it? Just followed some real simple instructions from Google on how to get my site indexed correctly. There aint no rocket science involved.


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

WillR

Ron,

No one ever said you could not get your page listed in the search engines when using jquery - even crappy flash sites can get listed in the search engines. We are talking about good SEO. As far as I am aware jquery means your pages are not all separate like on a traditional website. This means when someone loads your homepage they are also loading the rest of your site behind the scenes. This means in regards to the search engines, your site has one page whereas a mobile site I create using regular xhtml will have separate pages - one for opening hours, one for contact us, one for menu, etc, etc. This means I am able to SEO and rank those different pages for different search terms.

Maybe I am wrong but all the jquery sites I have seen so far have not had separate urls for each page. Maybe the examples I have seen thus far have been using it incorrectly?

Also the mobile page in your signature (which I assume has been built using jquery?) scores a very small 37% on the official W3C mobile validator. The homepage alone is over 100kb in size. I don't see why I would want to use jquery when I can have nice looking site coded well that are nothing over 30kb in size and score over 95% on the validator. What's the advantage of jquery to my users apart from adding a bunch of unnecessary code?

.

➨ Here's How to Make Your First $177 Online
This Week Using the Piggyback Method...

.

arty49

Yes all my sites are coded as individual pages. And no one is loading more than the page they are viewing and yes just like any browser the pages viewed are cached which we all know and understand helps with loading of the site at a later date.

I'm not knocking anyone's templates or mobile builders.

I see that you haven't taken the time to read any of the docs from jquerymobile and to infer that they have anything less than good code is amazing. Yes I could make the site smaller by using lower resolution images but WHY?

Everyone that has seen the designs and more importantly my clients have had no problems in viewing their web sites or in load time.

Now with jquerymobile they have done something that no-one else has done with their framework and that is ensure that a wide range of mobi devices can render their code and if they can't use javascript or even css they still view a great web site.

I see no point in asking my clients to put up with a site that is less than up to date and modern. Only to have to go back and keep updating their site as technology moves ahead.

So I'd rather give them the option of using the up to date modern framework or just a plain jane that keeps them under 30kbs and unable to display what they want to their clients. After all they know what they want to sell or display.

It is up to us to give them the best solution and not dictate how big or small their site should be.

If you had read and studied the doco's on jquerymobile.com, you wouldn't be asking me this question.

All I have to say is it's not about your users, if you mean the ones you've sold too.

It's about your clients needs and if as a client you don't need nor even want to understand how jquerymobile would be beneficial to you then... guess what. It is your prerogative not to use it or even get involved.

BUT to decide for your clients without giving them the benefit of the doubt is not doing them or yourself any favors and could lead them to wondering why? And hopping the fence with someone that actually showed them or told them the difference and let them as the client decide which framework they wanted used.

As an Offline Mobile Consultant I must be prepared to offer the best solution for my client without prejudice towards or against any mobile framework available.

When developing with jquerymobile, it makes me more conscious about what I put on my PC web site so to speak as I don't want to bore people with the crud that normally goes along with a 96 page sales letter currently being used. Less is going to be more even on PC, tablet and laptop devices.

The one thing I really like about the jquerymobile framework is I no longer need to code 2 or more different sites for my targeted audience. When soemone views my site on a PC they get to view it in full screen. When someone visits on a mobile device they see it in full screen.

Now if your client has an existing web site then sure you need to work in the re-direct scripts.

So Will I am not trying to convince you or anyone else to stop using whatever they are using. All I am saying is we must at the minimum do our due diligence so we can speak with authority on whatever framework that is available and be accountable to our clients that at least we are willing to investigate and learn more as new technologies and frameworks become available.

We must at all times remember that is is the clients WIIFM we should be attuned to and not our own. to not offer another framework because it creates a site larger than 30kbs is ridiculous.

BTW, I do have clients sites that are 30kbs and under. It just depends on what you want to make available to your user/surfer or whether you are going to let them go elsewhere because you ran over 30kbs and couldn't put enough info on your mobile site to help them make a decision.

I'd love to see what my restauranteurs would say about limiting their mobile sites to under 30kbs.

If you are going to mCommerce a mobile website you are going to exceed the 30kbs without even blinking an eye.


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

madison_avenue

Hi arty, so you are using the sites you code in jquery to be used as the main PC site as well as the mobile site? Are mobile sites aesthetically suitable to be used on a full screen PC, don't they look odd?

dms321

In terms of the tread discussion, I agree with WillR.

As for building mobile sites myself, I prefer HTML/CSS method. Sites are simple and could be quickly downloaded on new and old phones (which I think is important).

You can always complicate things later...

WSO - TUBERMINATOR: 1st Page Video Ranking
Collection Of 100 Unrestricted-Giveaway PLR Products
WSO - Monster Audio And Video PLR Crusher (more than 26 GB and growing)
WSO - Monster Audio PLR Crusher (4+26=30 hours of Royalty Free Music)

arty49

When I code a mobile site I am always keeping in mind what it would look like on a PC.

Why? Because no matter what framework you use anyone can view a mobile site on their PC and yes normally it looks crap.

BUT jquerymobile have alleviated that problem in so much that a web designer can if they wish too code the mobile site so when it does get viewed on a PC it is still atheistically appealing to the eye.

You just have to view their web site on a PC and then view it on a mobile device.

I will add some links to web sites I have created soon. However if you click the link in my signature you will find that it looks great on a PC. Now enter the same url in your mobile device and it looks brilliant.


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

arty49

Using the jquerymobile framework unleashes the awesome power of html5 and css4 and is backward compatible. So if the mobile device can not handle html5 and css4 they will still view a very functional web site but without all the glory that html5 and css4 has to offer.

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

flyinghammers

I have never heard of anyone using CSS 4. Do mobile browsers support it?

The only thing I know about jquery mobile is that it replicates the behavior and functionality of native apps, but it creates excessive overhead if you don't need them. Could you let us know more about jquery mobile.

I do think you have to take into consideration the size of each individual mobile page. It seems that around 25 kb is the magic number. Here is a graphic from Google's new mobile site:

arty49

I'd like to take this time to mention that although not everyone knows about jquerymobile or even wants to acknowledge the power of using this framework; Adobe has gotten involved and that in itself speaks volumes for what is going to become the standard and norm of mobile web site development. If not already the norm despite the outcries and poo hooers

So whether you want to stick your head in sand hoping it never happens or you sit on the side line waiting for the opportune time to start getting involved.
The movement is already in full swing.

You can either make it happen - learn now and start implementing
You can watch it happen - be a nah Sayer and put your blinkers on
You can wonder what happened - blame everyone else for not making you make it happen

You may find the following links very informative.

Customizable starter design for jQuery Mobile | Adobe Developer Connection

Adobe & jQuery

Getting started with jQuery Mobile | Adobe Developer Connection


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

arty49

Hi John

I totally agree with your comments above and yes I do try to keep individual pages to a minimum. The pages themselves are 6kb and below without graphics.

It is the graphics that can make the site larger. So I have tested in 3 different mobi devices my restaurant theme using png and then jpg compressed images.

The result was so minimum in loading time that to my naked eye I could not even tell the difference. And yet the appearance of the images were vastly different. The compressed .jpg images looked crap compared to the .png.

So it is really upto the individual as to what they use. .jpg, .gif [i don't ever use] or png which gives the best results and you do not have to play around with background colors to match your web page background.

I could stand corrected I think it is CSS3 not 4 and yes there is a wide range of mobi devices that have been thoroughly tested against using the jquerymobile framework.

You can get the full list of supported platforms here:
jQuery Mobile Docs - Supported platforms
or read them below lol

A-grade - Full enhanced experience with Ajax-based animated page transitions.

• Apple iOS 3.2-5.0 beta - Tested on the original iPad (3.2 / 4.3), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0 beta)
• Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
• Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1
• Windows Phone 7 - Tested on the HTC 7 Surround
• Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
• Blackberry 7 - Tested on BlackBerry® Torch 9810
• Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5
• Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 - Tested on HP TouchPad
• Firebox Mobile (Beta) - Tested on Android 2.2
• Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)
• Meego 1.2 - Tested on Nokia 950
• Kindle 3: Tested on the built-in WebKit browser included in the Kindle 3 device
• Chrome Desktop 11-13 - Tested on OS X 10.6.7 and Windows 7
• Firefox Desktop 3.6-4.0 - Tested on OS X 10.6.7 and Windows 7
• Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)
• Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

B-grade - Enhanced experience except without Ajax navigation features.

• Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
• Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3
• Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade - Basic, non-enhanced HTML experience that is still functional

• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo (WInMo 5.2)
• All older smartphone platforms and featurephones - Any device that doesn't support media queries will receive the basic, C grade experience

Not Officially Supported - May work, but haven't been thoroughly tested or debugged

• Samsung Bada - The project doesn't currently have test devices or emulators, but current support is known to be fairly good. Support level undecided for 1.0

Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

flyinghammers

What does jquery add to HTML 5 and CSS?

arty49

That is such a broad question and best answered with... read the doco's found below

jQuery Mobile: Demos and Documentation


Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

eurotunes

Agree! But I also think the 30kbs limit is somewhat outdated by now, because of the wide and increasing 3G coverage and the massive use of WIFI (at home and at local hotspots). Studies even showed that the majority of mobile surfing is done at home! A bit weird imho.

I've done some digging about the pro's and con's on jquery and seo and still find the results inconclusive. Some love it, some hate it (seo wise). I definitely like the awsome looks of it. So I think I'm going to learn some jquery basics and give it a shot with a new site soon

Mobile Web Publishing
Win on the Go!

arty49

To the following users; javarog, dollarware, JBroyer44, madison_avenue and JToneyUK
I am not ignoring your PM's. I don't have 50 posts yet so can not reply to you.

The quickest solution to that is skype or email me

Thanks
Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

Jay Rhome

One thing I've added to my sites is a max width of 550 to 650 px. This way the site also looks good on desktops.

arty49

You need to ensure you are putting your header and footer content into each div or it wont display them.

Jquerymobile multipage is OK IF you only have a very small amount of information to display; otherwise as the team at jquerymobile.com advise it is better to use separate pages. That takes a bit for newbies to get there heads around on how to stop ajax messing up there pages and code.

The following is a very basic outline of the multipage page.
Note that in each div the header and footer is repeated. And of course the content has different information.

The single page is far easier to construct, quicker to load and easier to change, alter or update the information

So you would customize this template to whatever you wanted it for. index.html for instance.

Then you would simply save it as a new page. Change out the information for this page and save it as... about.html for instance.

Just rinse and repeat for whatever number of pages you need for your client.

Hope this helps

Ron

Snazzy Notifier - How to create engagement and interaction with existing and future clients, with special offers, coupons, polls and relevant information using social media

JBroyer44

ya I have realized that going multi page is much better on bigger sites.

I have a bigger project I am on now with lots of pages and lots of info, the customer really does not want to cut down on the amount of info the mobile site has so it will end up being a bigger site.

Loading all pages at once as <div>s would be silly so I am going about making separate html pages with the data-ajax="falsle" modifier

"The force is strong with this one"
Facebook Ad Services: http://sellabletraffic.com