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