When you look to design inspiration for designing sites for iPhones
and other mobile high-end browsers, which sites do you look to? Which
designs are especially good? Do you have any pet peeves?
barbara at littlespringsdesign.com 1-785-838-3003
http://www.welie.com/patterns/ , http://designinginterfaces.com/ you
may interested in.
On Thu, Sep 25, 2008 at 11:32 PM, Barbara Ballard
<barbara at littlespringsdesign.com> wrote:
> When you look to design inspiration for designing sites for iPhones
> and other mobile high-end browsers, which sites do you look to? Which
> designs are especially good? Do you have any pet peeves?
> Barbara Ballard
> barbara at littlespringsdesign.com 1-785-838-3003
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
I've been developing iPhone interfaces for webapps and applications
for the last couple of months.
A good place to start would be http://www.apple.com/iphone/appstore/
Apple's Developers website also have some docs about iPhone interface
Other points to consider:
- keep your navigation scheme simple
on webpages, a good way to save some space would be showing the
navigation as tabs on top of the pages (on a regular iphone app they
would be at the bottom of the screen). Look at facebook's iphone
- keep your html strict and well formed
the other phones (eg Blackberry) use a very limited browser, so you'll
probably need 2 css files, 1 for the iphone, with fancy graphics,
other for the other phones. Also, the iphone screen resolution is
slightly bigger than other phones, so you'll probably will have to
provide 2 different sets of graphics
specially on key elements like submit buttons.
- test it with google mobilizer
one more time, the other phones are much more limited than the
iphones, so it would be a good idea to test your interface with google
- make links and input fields BIG
on the iphone, users will have to touch the field to activate the
keyboard, so help them making fields and buttons big enough.
- use the right DTD
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.openmobilealliance.org/Tech/DTD/xhtml-mobile12.dtd
- on iphone webapps, keep the content scale fixed:
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0;
user-scalable = no, width = 320">
- on iphone webapps, you may want to "hide" the url input field:
<body onload='setTimeout(scrollTo, 0, 0, 1)'>
Some websites with iphone wallpapers and graphics:
I hope that helps. Feel free to contact me if you need anything else.
Oh, and check out http://rmbrme.com, of course :) (shameless auto-
Devices using Symbian S60 has a browser based on WebKit and support most of
all technical features from full browsers.
http://widsets.mobi/library/ does a simple use of it in the top menu. Mobile
version of Nokia Music Store UK also uses features like slidings and js
R. Seiji Sato
+55 11 8297-2930
São Paulo, Brasil