Mobile app version of vmapp.org
Login or Join
Heady304

: Difference between Android, iPhone and BlackBerry From the point of view of a graphical designer, which are the differences in developing for iPhone, Android and Blackberry. Is it possible to

@Heady304

Posted in: #CrossPlatform #InterfaceDesign

From the point of view of a graphical designer, which are the differences in developing for iPhone, Android and Blackberry. Is it possible to design for one platform and to use that work on the others? What are the constraints when implementing the same graphical interface to all of the above mentioned platforms?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Heady304

2 Comments

Sorted by latest first Latest Oldest Best

 

@Shelley591

We need more information to fully understand what you are designing, but if I were to assume you are designing web sites, then yes, you can design for any device.

That's pretty much my day job...design and develop a mobile web application that supports iOS, Android, BlackBerry and (groan) Symbian.

In terms of visual design, each OS has it's own native UI, but as a web app, you'd be designing a UI just for the web app. This is the standard approach for a lot of the UI libraries out there such as jQuery UI and Sencha Touch.

In terms of hardware, iOS is touch-only. Android is mostly touch. BlackBerry is mostly keyboard.

In terms of software, iOS, Android, and BlackBerry OS 6+ are all running a Webkit browser. Which is nice. Alas, Android and BlackBerry's browsers have plenty of bugs.

Avoid styling native form elements if you can...each OS likes to do things differently with default sizing of those.

UPDATE:

I should also note that one area where you may NOT want to use a universal UI is the split between keyboard and touch devices. This is tricky, as some operating systems have both devices available (such as blackberry) and even more tricky, some devices are both touch screen AND keyboard enabled.

The problem is that they are really two different ways to interact with a screen. Touch is happy to be scrolling with big icons and swipes. Keyboards need a very compact screen and probably prefers pagination over scrolling.

The challenge is that it's really hard to design for both equally. Right now, we mainly target touch, and one can still use the site with a keyboard, but we're not optimizing for keyboard.

In hindsight, it would have been great for mobile browsers to some how detect when a page is being interacted via touch vs. keyboard.

10% popularity Vote Up Vote Down


 

@Gail6891361

This answer only deals with iOS and Android, Blackberry exceeds my knowledge



Resolution

In iOS you have three screen resolutions to consider


480*320 (iPhone3)
960*640 (iPhone4)
1024*768 (iPad)


In Android there are 4 resolutions, to cover at least:


xlarge for screens that are at least 960dp x 720dp
large for screens that are at least 640dp x 480dp
normal for screens that are at least 470dp x 320dp
small for screens that are at least 426dp x 320dp




Guidelines

In iOS there are some standerd UI-elements to work with like the tab bar, pickers, status bar etc. See this psd for more Detail.

And you can find even more detailed information in the iOS human interface guidelines

In Android there are less UI standards but since Android 4 it has some usable design guidelines



Differences

Android has its "hardware buttons". Menus and navigation are often at top of the screen. Buttons orientate on the default android buttons and UI. The bottom is often filled with the actual content and overlaid with the hardware menu.

iOS splits the menus and navigation in two parts. At top is the Navigation like back button, title, ok and cancel. At bottom there is navigation like the tab bar to switch between views.


Some apps simply use the same UI layout for both systems with some minor changes, like the use of the menu button from android. Path is an example for iOS and Android

Blackberry has its own design guidelines but there ends my knowledge.
Here is a good collection of UI guidelines for further reading ;)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme