Making a site mobile friendly

Placebo

I was developing a 'mobile site' for GAA/Vodafone around over a year ago because they wernt interested in apps or any other solutions like phone gap
i think they wanted it almost 99% cross platform compatible, so browser based.

I went with Jquery mobile because of some of the effects/feel they wanted [a site that looked like an app] and back then it was very chunky and slow, even the simple slide effects were somewhat glitchy. There was no hackfree way to hide the safari browser url bar, etc

Since then i think its come along way but as Giblet mentioned on the first page, if you have other options, i would definitely consider those first.

S.M.B.

Giblet wrote: »

You should carve that into the tombstone of your mobile site.

Well I'm in a position where I can't force the companies hand to invest in 10-20 mobile devices. I'm not happy at the situation, hence my reliance on emulators.

What's W.A.T.C.H? Not an acronym I've come across.

Giblet

I literally meant browsers on a wristwatch!

S.M.B.

Giblet wrote: »

I literally meant browsers on a wristwatch!

OK, well the long term goal is a fully responsive site. That looks like being a long way away though.

Giblet

Placebo wrote: »

I was developing a 'mobile site' for GAA/Vodafone around over a year ago because they wernt interested in apps or any other solutions like phone gap

PhoneGap was were I first saw issues with jQuery Mobile.
I had it setup to use the camera as a barcode scanner. I thought "Man this is so slow". So I moved the code to a webserver and just browsed it on the phone ie: no phonegap. Still dog slow. Took away jQuery Mobile, was unreal how much it improved.

I ditched phonegap anyway and got hold of a Mac and did a native port anyway! You can't really compete with that!

uck51js9zml2yt

Giblet wrote: »

smash wrote: »

Or use an actual smartphone with a good browser and screen to view a mobile site.

So you define your audience? You wouldn't need jQuery at all then!

It renders absolutely fine, uses webkit, has transitions and transforms, supports html5 tags, just has slow performance with javascript, and it's quite a popular phone.

Op here..Would love to see your site for some inspiration .
Can you pm me the url

Giblet

Not released yet Don't feel comfortable as it would reveal my clients as well.

S.M.B.

Is it a rich media site?

Giblet

Yes. Full eCommerce site for mobile and desktop.

uck51js9zml2yt

Another question for you guys who know more than me..which is a lot

If I want to use fluid layouts, can I use a side navigation bar or am I better off using a horizontal.

I'm looking to make my RIA viewable on a browser and mobile.


Thanks

Giblet

There's a few options. I've used top horizontal nav which turns into row based nav on smaller screens. I've also used row based on the left and content on the right (iPad split view style) which then stacks the nav on top of the content on mobile. Design your desktop version first, then work out the details getting it to display on mobile is my recommendation. Keep the navigation simple though. The less animations and script involved, the better!

uck51js9zml2yt

Are there any good templates available on the web that I can use?

I was hoping to use transformations on the nav bar but cant see it working on the horizontal.

smash

You could create a horizontal menu that compresses into a single icon expandable menu for mobile.

Placebo

http://www.onextrapixel.com/2011/02/04/the-rising-importance-of-flexible-web-layouts/
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
http://unstoppablerobotninja.com/entry/fluid-images
http://phydeaux3.blogspot.com/2006/01/max-width-and-faking-it-for-ie.html
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
http://designmodo.com/responsive-design-examples/


heres few links i saved for flexible designing

Giblet wrote: »

I ditched phonegap anyway and got hold of a Mac and did a native port anyway! You can't really compete with that!

cant compete with native for sure ! http://phonegap.com/ is now acquire by Adobe so looking forward to seeing the advances

Overflow

Check out the Twitter Bootstrap CSS Framework for examples of how to do Responsive web design. Its an amazing framework:

http://twitter.github.com/bootstrap/