- Sites for iPhone
- Specific programming features
- Sites for BlackBerry
- Specific buttons
Tips for developing a site for an iPhone or for a BlackBerry
WEBDEV allows you to develop sites for all types of devices: iPhone, BlackBerry, ... This page presents tips for optimizing the development of these sites.
By default, the iPhone shows the sites in zoom-out mode to provide an overall view of the page. A page with standard dimensions looks like a stamp.
The size of the iPhone screen is 320 x 480. The useful size available for the applications is 320 x 256. The rest is used by the system menus.
To help you develop sites corresponding to the size of the screen:
- Several options are available in the page description window, "UI" tab, "Display on mobile devices" section:
- Display page at 100%. It may overflow the screen.
In this case, you can specify if the user can change the zoom. You can also specify the maximum and minimum zoom values.
- Adjust zoom so that the page fits the screen (horizontally)
In this case, zoom will be automatically set according to the size of the mobile device
- If necessary, also configure the iPhone features ("iOS WebApps" area):
- Hide address bar: Allows you to hide or show the address bar.
- Full screen: Allows you to indicate that a page of a site must be displayed in full screen on the iPhone.
In this case, you have the ability to choose the display mode of the status bar of Safari (bar found at the top of the screen indicating the battery load, the time, etc.). The available options are as follows:
- "Default": the bar is displayed with the default color
- "Black": the bar is displayed with a black background
- "Translucent black": the bar is displayed with a black background and a reduced opacity, the site is visible through the bar.
- Application icon: Used to specify an icon, if a shortcut to the site is created on the iPhone home screen.
- Splash screen: Used to specify the image used for the splash screen. This option is taken into account if a shortcut to the site is created on the iPhone home screen. This image must be 320 by 460 pixels in size to be taken into account by the phone.
Specific programming features
The method for developing a site for iPhone is identical to the method for developing a standard site. Some programming features are specific to the development for iPhone.
You have the ability to make a phone call directly from a site: in the URL of the link used to make the phone call, specify "tel:" and the phone number.
MAP_PHONE.URL = "phone:" + CUSTOMER.Phone
You also have the ability to display the Google Maps corresponding to the address of the customer directly from his form: in the URL of the link, specify "http://maps.google.com/maps?q=" followed by the address of the customer.
MAP_TGMAP.URL = "http://maps.google.com/maps?q=" + ...
URLEncode(Customer.Address + " " + Customer.City + ", " + Customer.Country)
- Use iPhone-specific page templates.
- Reduce as much as possible the weight of the images on the site. Large images, Flash animations or videos may slow down the page loading time.
- Use anchors to manage the different orientations of the iPhone.
The BlackBerry is also a mobile phone allowing you to manage your emails among other things. It also allows you to access the Web pages. Websites for BlackBerry are mainly intended to be consulted and to display basic forms. BlackBerry's browser is designed for low bandwidth use and therefore imposes certain constraints.
The BlackBerry does not directly apply the page layout defined in the project.
When displayed on a BlackBerry, controls are automatically resized and aligned below each other at the edge of the page to allow vertical navigation adapted to this type of device.
Therefore, we advise you to design "vertical" pages in order to respect the operating mode of the browser.
In order for the buttons to have a standard operating mode on a browser:
- Open the page description.
- Go to the "Advanced" tab.
- Check "Generate for BlackBerry (compatibility of native text buttons)".
The sites for BlackBerry can have a single button per page and this button must be a "submit" button: it returns a value to the server.
The controls supported by the BlackBerry are as follows:
- some buttons (text buttons recommended).
Caution: "Native border added by the browser" must be unchecked in the "Style" tab of the control description window ("Button (CSS)").
- Static controls,
- check boxes,
- radio buttons,
- list boxes and combo boxes,
- edit controls.