CS5.5 & Mobile

[Morrile]

Hello,

I am trying to design an existing HTML5 offline website for additional devices; such as tablets and mobiles, tablets was easy and completed, however mobile is confusing me no end

Please excuse the multiple questions, but you will soon see I am very confused. As I understand it: CS5.5 claims it can do this but how? I know it's possible to create apps from website, but how can I convert an existing website for mobile?

so;

Is it best to create apps rather than convert a website for mobile use?
how does one convert a website for mobile use - excluding apps?
do I have to create a new website and somehow attach that to the existing?

this is on the assumption that the Media Query CSS file manages all this?

I hope your head is not spinning like mine and some clear guidance can be offered. Or am I barking up the wrong tree completely?

Thanks

Morrile

 

[designguy79]

but how can I convert an existing website for mobile?

Hi Morrile,

I have created several "mobile-optimized" web sites from existing sites.

As far as I know, there is not a tool that does it for you because each site is different. Someone has to decide how to trim back the content, navigation, graphics, etc, if you want your mobile visitors to be have a pleasant experience. (because of the limitations of a small screen, probably slow Internet, etc)

Is the site running a content management system, like WordPress, Drupal, etc? If so, there are mobile-optimized "themes" that you can install.

If you want to work on the code by hand and optimize it yourself, take a look at these pages:

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

http://jqtouch.com

HTH,

~ Jeremy

 

[jtara]

The best way today of dealing with optimized presentation on a variety of devices is to use a "framework". This would typically consist of one or more cleverly-designed CSS files, and most likely a Javascript library to go with them. The framework hides differences between devices. (For example, by using different, optimized CSS files for different devices.)

You add your own CSS customization to attain the look and feel you want.

There are quite a number of frameworks available. They range from simple "CSS resets" to very complex Javascript libraries. As an example from the middle of the pack, function and complexity-wise, take a look at JQuery Mobile. It has a particularly nice demo:

http://jquerymobile.com/demos/1.0b3/

Although it's called "mobile", you can see it makes a nice presentation on a desktop as well. Test-fly it on various modern desktop and mobile browsers.

What is beautiful about this approach is that it encourages you to use purely semantic markup. A site using JQM will degrade nicely all the way down to a pure text browser like Lynx (or elinks, links2, etc...) The JQM site itself is perfectly readable in a text browser. I think most websites today would fail the "text browser" test.

So you can have one site that looks great on everything from a text browser to an Android phone or an iPad.

Adobe's tools build on top of and around this approach. What I don't like about their tools is that they hide much from you and so you aren't really learning anything about the underlying capabilities. I'm just not a fan of that approach.

 

[Morrile]

Hello designguy79 & jtara,

You have both offered some clarity to all this, but if I may ask two more questions?

Is it possible to keep an existing website and somehow have a jquery mobile attached to it; just for mobiles? if so how does one achieve this?

I am just getting to learn to all and there is quite a bit beyond my current abilities.

Many thanks,

Morrile

 

[designguy79]

Is it possible to keep an existing website and somehow have a jquery mobile attached to it; just for mobiles? if so how does one achieve this?

Hard to say without knowing how your site is set up. Are you running a CMS? Or is it just regular HTML files?

Are you using tables for the layout, or css positioning?

It sounds like you should hire a web developer to help guide you through this!