Designing for the iPod/mobile

HTML & CSS
1

Does anyone have any experience in designing for the iPod/mobile devices?

I have started this:

http://collegefootballrankings.us/mdev/

But I can’t figure out how to remove all the gray areas to the left and right. Anyone have any idea what I can do?

Thanks,
Andy

2

Where do people pick up this myth from?

Tables are absolutely great if you are working with tabular data. If you have tabular data, you should use a table, nothing else will do.

Tables used to lay out an entire page are evil and should not be used, because that is not tabular data.

3

I see the problem you’re getting (I just checked on my iPhone4), essentially you want to have the page scale at the proper width rather than at the shrunken one.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

The above code should help you to that goal, you can adjust the scale as required, it will override the iPod / iPad / iPhone’s default settings.

I sensed that’s what might have been going on, and as has been said above it’s a complete myth. There is a reason why tables have not been deprecated from the W3C specifications and that’s because tables are NOT a bad thing (if used correctly). If you are presenting a table of data, you should be using a table. Where table usage has been made taboo is when people produce table based layouts (where the sites content is patched together using tables rather than proper code and CSS). Your content is meant to be a table of results, therefore it’s appropriate to use a table - and it’ll be better for your users in that format. :slight_smile:

4

Thanks for the response. I was going to remove the gray area because when you pull the site up in portrait mode the actual content is very very small, is there a way to force it to zoom in more? Good point on landscape mode, never thought of that.

Also, I thought tables were taboo.

Thanks again,
Andy

5

Why do you want to remove the grey on either side? I would be worried that if someone tips their iPhone on it’s side into orientate mode that you need the balance of grey on either side to be equal in preference to a bunch of whitespace to the right hand side. It would be even worse on an iPad. My advice would be to center align the whole chart to allow for screens in landscape. In addition, you should NOT be using lists to show the results, you should be using a table. :slight_smile: