favorite web site designs for mobile touch screens?

25 Sep 2008 - 10:32am
5 years ago
3 replies
962 reads
Barbara Ballard
2005

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

Comments

25 Sep 2008 - 11:07am
Jarod Tang
2007

Hi Barbara,

http://www.welie.com/patterns/ , http://designinginterfaces.com/ you
may interested in.

Cheers,
-- Jarod

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
>

--
http://designforuse.blogspot.com/

25 Sep 2008 - 2:50pm
djetsa
2008

Hi Barbara,

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
and UX.

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
interface.

- 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

- do not use javascript
again, other phones don't cope with javascript so avoid using it,
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
mobilizer (http://www.google.com/gwt/n)

- 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:
http://poolga.com/en
http://www.signalnoise.com/gallery/

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-
promotion)

Cheers

Ricardo

27 Sep 2008 - 10:30am
rseiji
2008

Hi Barbara,

Devices using Symbian S60 has a browser based on WebKit and support most of
all technical features from full browsers.
This enables you use Javascript and AJAX (and most of api like jQuery and
Prototype).

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
drop-down menus.

BR,
--
R. Seiji Sato
Interface Designer
http://www.rseiji.com
+55 11 8297-2930
São Paulo, Brasil

Syndicate content Get the feed