Making a site mobile friendly

uck51js9zml2yt

I'm doing a project for college using HTML5 and CSS3 but want to be able to view the website on both a browser and a mobile device.

I'll be using Javascript and maybe JQuery and some local storage

How easy is this to do? What do I need to do.

thanks

aidan_walsh

Have a look at Responsive Design using media queries.

py2006

aidan_walsh wrote: »

Have a look at Responsive Design using media queries.

+1 This is the way to go. See Ethan Marcottes book.

See also, this article by Ethan.

Giblet

Don't use jQuery on a mobile device. Especially considering you are targeting CSS3 and HTML5 devices.

KylieWyley

Why?

jQuery has a mobile library specifically for this purpose

uck51js9zml2yt

thanks for the responses

i downloaded Ethans 2 books...now all I need to do is read them:D

Giblet

KylieWyley wrote: »

Why?

jQuery has a mobile library specifically for this purpose

No it doesn't.
It has yet another library that sits along side jQuery which fakes a bunch of UI stuff. Adding yet more overhead (83k on disk minified which along with jQuery is over 170k of script before you have even started), and it's dog slow. It was unbearable on an iPhone 3g the last time I used it.

You don't need it, especially if you are targeting new HTML5 and ECMA5 API features.

S.M.B.

I've been building a mobile version of our sites the past few weeks and have been happily using the standard jquery library (albeit selectively) without losing much in terms of performance.

I really don't see any issues with using it (sparingly).

smash

There's no issues with jQuery on a mobile device that I've encountered.

Giblet

smash wrote: »

There's no issues with jQuery on a mobile device that I've encountered.

Well that settles that then!

What kind of development were you doing? What phones/devices?

What did you need jQuery for, what connection were you on?

Giblet

S.M.B. wrote: »

I've been building a mobile version of our sites the past few weeks and have been happily using the standard jquery library (albeit selectively) without losing much in terms of performance.

I really don't see any issues with using it (sparingly).

The first performance hitch being downloading it of course, along with any plugins you may use.

Get your blackberry curve out and tell me how responsive it is.

smash

Giblet wrote: »

The first performance hitch being downloading it of course, along with any plugins you may use.

Get your blackberry curve out and tell me how responsive it is.

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

Giblet

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.

smash

Giblet wrote: »

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.

I define my audience based on my mobile stats and blackberry barely even features in the list of devices that access the sites I manage.

Giblet

I define my audience as everyone, past and future. I'm such a nice guy!

That aside,

What is the most common use of jQuery in your scripting?

smash

Giblet wrote: »

I define my audience as everyone, past and future. I'm such a nice guy!

That aside,

What is the most common use of jQuery in your scripting?

For mobile? Very little at the moment. Just image gallery swipes, some tabbing and some form actions. Although we've just developed a new site using jQuery mobile in full.

Giblet

Try an iPhone 3g if you have one, then after you try it, comment out the script include for jQuery Mobile and load the page. Compare the difference.

smash

Giblet wrote: »

Try an iPhone 3g if you have one, then after you try it, comment out the script include for jQuery Mobile and load the page. Compare the difference.

We have 6/7 devices which we test on. If you're testing on a 3g. Upgrade your iOs.

Giblet

3g is capped at 4.2.1

I have about 12 devices in front of me.

smash

Stripping your sites down to cater for the lowest end mobile user is like designing your websites to run on IE5 on a Windows 98 machine with 125mb of ram and an integrated graphics card.

You can try and cater for everyone but it will never happen. So it might run a bit slower on a 3g but it will still work.

S.M.B.

Giblet wrote: »

The first performance hitch being downloading it of course, along with any plugins you may use.

Get your blackberry curve out and tell me how responsive it is.

I've currently got my Blackberry 9300 Simulator open at it seems quite responsive.

jQuery and the one or two plugins used will be added to the appcache at a later date which should the downloading issue.

Our plan is to use device detection to divert mobile traffic to our mobile site so we aim in targeting blackberry devices with OS 6 and greater.

Giblet

Not my point at all. You deliver content based on context, you enhance with all the bells and whistles you want, and take that stuff away for older browsers. Stuff like not relying on ajax navigation for a start. IE5 isn't the problem, it's the unknown in the future. You design something that works, then develop on top of that to add the additional functionality. The problem here is that people then think "Ah! jQuery!" Well if you are running something on an iOS 5 device, why not use CSS3 and pure JavaScript? The DOM API has improved so much on these new devices, you can easily do what you want without bogging the user down with 200k of script. An iPhone 4s will still use Edge in some areas with some carriers in Dublin, I know this because I had a big issue with this just yesterday. Most people use jQuery for selectors, for stupid crap like checking checkboxes and binding events. More involved stuff like touch gallerys would get better performance by just leveraging the 3D acceleration of the devices and doing something simple like detecting a proprietary style (easily done) and applying the transformation directly to the dom element. You can do this with using document.querySelector and binding the appropriate events and delegating correctly. If you are a front end developer this should be no problem!

smash

Giblet if you're worried about the 3g performance why don't you use a cache manifest for repeat users?

Giblet

S.M.B. wrote: »

I've currently got my Blackberry 9300 Simulator open at it seems quite responsive.

jQuery and the one or two plugins used will be added to the appcache at a later date which should the downloading issue.

Our plan is to use device detection to divert mobile traffic to our mobile site so we aim in targeting blackberry devices with OS 6 and greater.

SIMULATOR?! Jesus christ.

What website will you redirect to for watch browsers? The curve in front of me is OS5

Giblet

smash wrote: »

Giblet if you're worried about the 3g performance why don't you use a cache manifest for repeat users?

First use is most important.

smash

Giblet wrote: »

First use is most important.

Yes, but you can still improve performance for repeat users

S.M.B.

Giblet wrote: »

SIMULATOR?! Jesus christ.

What website will you redirect to for watch browsers? The curve in front of me is OS5

Yeah, unfortunately I don't have access to a suite of devices. Hope to get something sorted out in the near future. Simulators will have to do for now.

What do you mean by watch browsers?

smash

I think he meant which browsers

Giblet

I don't have any issues with how I've set up my cache. The problem yesterday was client images, but highlighted that people use EDGE on modern devices.

Giblet

S.M.B. wrote: »

Yeah, unfortunately I don't have access to a suite of devices. Hope to get something sorted out in the near future. Simulators will have to do for now.

What do you mean by watch browsers?

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

Giblet

smash wrote: »

I think he meant which browsers

W.A.T.C.H

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/