Web Design tips for iPhone

Welcome to our Community
Wanting to join the rest of our members? Feel free to sign up today.
Sign up
Jun 25, 2007
4
0
0
#6
For people in the web design/development community, are we really going to have to start designing with the iPhone in mind?

Wow.....
 

kdarling

New Member
Bronze
Jun 20, 2007
425
1
0
NJ, NC, CO
#7
For people in the web design/development community, are we really going to have to start designing with the iPhone in mind?

Wow.....
Yes, and of course web apps for the iPhone will have to be kept to small sizes to look like internal apps.

Oh wait, that means we have to write for the "mobile internet", not the "real internet".

Uh huh. That's why there are websites dedicated to tiny mobile device screens, and the "real internet" is for the big screens.

The smoke and mirrors around this thing is just incredible. If Apple would just own up and say, okay, it's gonna be a bit slow on EDGE, and yes you should write web apps that have smaller graphics to save on download time, and yes scrolling sideways on an app will look stupid, and... etc... it would be like a breath of fresh air.
 

wjp09

Zealot
Gold
Feb 25, 2007
2,559
25
48
NJ
#8
How exactly would we get started making apps I have some ideas and tons of free time. I would like to get into this.
 

Spin This!

New Member
Silver
May 4, 2007
504
0
0
#9
For people in the web design/development community, are we really going to have to start designing with the iPhone in mind.
I hope not. While Apple's decision (at this time) to limit developers to web pages, I hope these web pages are able to be saved on the iPhone. (Say in a "package archive" format, like a widget).

The whole purpose of the Internet is the ability to access it on any device—after all, it's the content, not the way it's presented that matters. I really depise this old idea of creating another set of pages (WAP) just for mobile devices.

If Apple would just own up ....
Agreed! I really hate the way Apple is spinning developers on this trying to pawn off web applications for "real" iPhone applications that can take advantage of the cool technologies the iPhone includes, such as the Accelerometer, Bluetooth, etc.

While the documentation is still forthcoming from Apple, it would be cool if the iPhone could switch between various stylesheets automatically. The basic web page (html) code/content would stay the same so people could access the page as normal, but special iPhone apps might have special hooks to optimize it to display it.

The last thing we need is to jet back to 1996 and start browser sniffing again, creating pages that only work on certain devices, etc.
 

joe

New Member
Gold
May 5, 2007
1,113
0
0
#10
I think the point of the article was for developing web apps for the iPhone. Standard web design and pages should be just fine on the iPhone.
 

thinkart

New Member
Bronze
Jun 16, 2007
212
0
0
Mid-MO
#11
no i don't think anyone will need to redesign all sites to work on iPhone. i was created to view the web the way it is now. however, if you have an iPhone site or your frequent users visit using the iPhone...it would be smart to keep this info handy.
 

kdarling

New Member
Bronze
Jun 20, 2007
425
1
0
NJ, NC, CO
#12
I think the point of the article was for developing web apps for the iPhone. Standard web design and pages should be just fine on the iPhone.
Yes for the first. Yes and no for the second, I'd say.

If you've ever used one of the "real internet" mobile browsers before, you'll know how painful it is to scroll left/right to read a column of text that's wider than the screen. And that happens a lot.

Heck look at this textarea I'm typing in right now. Glancing at this page, it has:
style="width:540px; height:250px"
which just ain't going be pretty on an iPhone.

Small screens are small screens, whether you get a big overview or not. That's just the way it is, no matter how much any company tries to claim otherwise. Just watch the demos whenever they bring up a page with width too wide to read... they always stop or just click a link to run away.

To keep an audience, websites that cater to iPhone will either need to whip themselves into shape whenever they sniff an iPhone, or at least rewrite themselves to be a lot more width agnostic.

Been there, done that, for years on handhelds.

Regards, Kev
 

joe

New Member
Gold
May 5, 2007
1,113
0
0
#13
Yes for the first. Yes and no for the second, I'd say.

If you've ever used one of the "real internet" mobile browsers before, you'll know how painful it is to scroll left/right to read a column of text that's wider than the screen. And that happens a lot.

Heck look at this textarea I'm typing in right now. Glancing at this page, it has:
style="width:540px; height:250px"
which just ain't going be pretty on an iPhone.

Small screens are small screens, whether you get a big overview or not. That's just the way it is, no matter how much any company tries to claim otherwise. Just watch the demos whenever they bring up a page with width too wide to read... they always stop or just click a link to run away.

To keep an audience, websites that cater to iPhone will either need to whip themselves into shape whenever they sniff an iPhone, or at least rewrite themselves to be a lot more width agnostic.

Been there, done that, for years on handhelds.
I'm not sure those handheld browser issues apply to the iPhone. Pages are scaled to fit the width of the screen. So now it looks small, but you can clearly see (160 ppi) the different elements. Then you tap to zoom in on an element. Using this method zooms in so the element fits the width. Your example of this text area is that zoming in on this element would cause the textarea to fit the width of the screen and "just work."

I think this is going to change your impression of viewing the web on small devices. :)
 

joe

New Member
Gold
May 5, 2007
1,113
0
0
#15
One I might change on new sites is setting the jpg resolution to 160 instead of 96 or 72. That would make the images look even better on an iPhone than on other computers.
 

kdarling

New Member
Bronze
Jun 20, 2007
425
1
0
NJ, NC, CO
#16
I'm not sure those handheld browser issues apply to the iPhone. Pages are scaled to fit the width of the screen. So now it looks small, but you can clearly see (160 ppi) the different elements. Then you tap to zoom in on an element. Using this method zooms in so the element fits the width. Your example of this text area is that zoming in on this element would cause the textarea to fit the width of the screen and "just work."
Umm, my apologies, I'm not sure what you mean. I'm saying it does NOT work. The text will overflow the screen width when you zoom.

See the demo where they bring up a Google search page, and then go to Wikipedia. Note in both cases that the text goes off the screen. Even when they zoom into the Google search results.

It's apparently not designed to collapse the text down to screen width.

So pages need to be designed to not end up with side-scrolling, because that makes reading a paragraph a lesson in torture. That is, pages should not be hardcoded in width at all, because you don't know if the user is in portrait or landscape mode.

Make sense?