Catering for mobile devices

[Morrile]

Hello,

Rather than having to rebuild my website completely in Jquery, I had the idea of just modifying the existing website just for mobile devices; so far so good. However, I have no idea how to achieve this. I understand that all modern mobile devices can handle Jquery, so it's a possible working solution.

Being very green when it comes to Jquery, I need help

Morrile

[Stevie D]

While many modern phones can handle jQuery, I really wouldn't recommend using it for mobile sites. It's bad enough on a PC, but on most mobiles anything that requires a lot of client-side processing is going to be slow and is going to eat huge chunks of battery. Basically, any Javascript is bad, but jQuery is worse because it is so bloated and inefficient.

And that assumes that everyone is using a supporting device. There are a lot of people out there with phones that are older and less capable but who still use the internet. Relying on Javascript is not, and never has been, an acceptable solution.

The question is ... what do you want to get out of this? Is there a problem with using your existing site on mobiles? If so, what is the problem? Before setting off on a project like this, you need to know what your end goal is, otherwise you're likely to get side-tracked down routes that really aren't relevant.

[Morrile]

Hello Stevie,

I have a large left-hand menu which doesn't look great on mobile devices, ergo the desire; but not the knowledge, to change it. Lobsangrampa.org is my website, it's a work of love and never created to be for profit, but it does need bringing up to date in various ways.

What do you suggest?

Morrile

[ralph.m]

I have a large left-hand menu which doesn't look great on mobile devices

It actually look fine in my phone's browser. What are you seeing that you don't like? There are various ways to change a site's layout on mobile, from a simple meta element to make the full width of the page appear by default, to CSS media queries which allow for a different layout on different screen sizes.

[Stevie D]

I have a large left-hand menu which doesn't look great on mobile devices, ergo the desire; but not the knowledge, to change it. Lobsangrampa.org is my website, it's a work of love and never created to be for profit, but it does need bringing up to date in various ways.

On my phone, it looks fine (running Windows 7.5). The site is fairly text-heavy and has long pages, so the long menu doesn't look out of place. How would you prefer the menu to be structured for mobiles?

[Morrile]

Guys,

I used Dreamweaver to create the site before Fluid Grid Layout came out, so I have a media.css file to control things. I was wondering if a collapsible accordion would be more suitable for mobiles?

Long term I would like to have accessibility for colour-blind impaired people; I know it's just various .css files but what does the actual switching in real time without having to learn PHP? I understand how to offer the font changing option, but not the former.

I also host free books and another idea was to have a means which any visitor could listen to them online; perhaps asking too much LOL

Morrile

[benbob]

As always, it all depends. I've started off with my site following the principle of "less is more" and fluid/elastic design, whilst using as little of java/jquery etc as possible. It requires very little effort to work it so that it all displays well over various platforms and sizes this way.

[StevenHu]

The Zurb Foundation is doing some really neat work on mobile. Take a look at what they're doing with mobile navigation:
http://foundation.zurb.com/docs/navigation.php