Designing dynamic pages for hand held devices

[irbk]

I'm going to develop a web page that is very hand held device friendly. This would be the first time I've created a site with hand held devices in mind. These devices would be things like smart phones that have an internet connection. The user would be taking mesurments outside the office, and through accessing a secure web page on the device, be able to enter these mesurments into a MySQL database.
Here is the question. What things do I want to keep in mind when developing the site? Like, do I really need to do the site in CSS to make it look good on both a hand held device and through a regular browser? Like I said, I've never done a site where I know it will need to be accessed on a hand held device so I'm not sure what gotcha's are waiting for me.

Thanks in advance.

 

[TamedTech]

I'd say CSS is the best way to go with every form of design.

I looked into working with Mobile formats a while back and found this article very interesting.

http://www.alistapart.com/articles/pocket/

Hope that helps,

Rob

 

[irbk]

I was afarid of someone saying CSS for everything. I don't know what it is about CSS but the two of us just don't get along. I've tried a few times to get CSS to work for me but every time I do I just find that it takes me several times longer to accomplish something that I could have done easily in table format. Eventually, I just give up on the CSS and redo it in a table format. I know CSS is the "wave of the future". Guess it's time to bite the bullet and pick up a book on it.

Thanks for the article, I'll take a look at it right away!

 

[TamedTech]

Dont worry about CSS being a bit of a monster, it took me quite a while to get my head around it, but trust me, once you've learnt how to utilize it is by far the most efficient way of coding a site.

Its all down to learning proferance but i didnt find reading books to be all that helpfull, there are SO many template example sites around to pick apart and learn how they work.

Just google for 'css layout templates' and you'll find stacks of layout examples.

Also check out

http://www.csszengarden.com

for some excelent examples of how CSS can be used to style the page.

Click the 'show all templates' button on the right hand side to see them all. Keep in mind that all the designs on that site use the exact same HTML, they just use a different styles sheet, that is what makes them so vastly different.

Hope that helps,

Rob

 

[irbk]

I'm familar with csszengarden. I will admit, that it's really cool what can be done with CSS. If only I could figure it out myself

 

[GUJUm0deL]

I'd assume the browsers on hand-held devices are different then those from desktop/laptops. So when you use CSS make sure the outcome looks decent.

You can also do a google search on CSS styles to see some examples and other usage.

____________________________________
Just Imagine.

http://www.imajinarts.com

 

[johnwm]

Also check out the CSS Media types. There is a start here:

http://www.w3schools.com/css/css_mediatypes.asp

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[ChrisHunt]

Tables vs. CSS-for-layout only really comes into play when you're arranging stuff into multiple columns. That's unlikely to be an issue on a site going to a tiny mobile phone screen.

Just keep your pages ultra-simple, with the bare minimum of markup: A header, some navigation, a form. I suspect your users will prefer pages that load fast over slow phone connections to slow ones with more elaborate layouts.

If you were designing a page to work on both handhelds and regular monitors, CSS would be way out in front - because you can ues its @media rules to hide extraneous bits of the page from mobiles which can't handle them. But I think seperate mobile-only pages are a better bet.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[irbk]

Thanks for all the input!