best practices for iOS or mobile web apps?

Good morning!

I am starting a mobile web app project and while I have experience now working with WebEdition for regular browsers I’ve not done anything that worked properly in a mobile device yet. I expected there to be a sort of white paper or at least a blog entry somewhere that had a list of tricks, tips and info necessary to make things work properly, catch orientation changes and such but I can’t find such a thing.

Has anyone put together such a list of links or ideas? I would greatly appreciate any info on best practices for mobile web app development. iOS and Android if it’s possible to do both at once gracefully.

Thank you

Ditto.

I don’t know if this is what you are looking for, but I use a template for my web apps, which is very useful for developing apps for desktop, iPad and iPhone.

You can get it here: WebTemplate.xojo_binary_project

In the last few weeks I was working on some apps for desktop/mobile and gathered some experience.
If you find it useful and have questions, just ask …

I did do a webinar on this last year.

Designing a Mobile App

There is also a (very) short section on this in User Guide Book 4: Development, Chapter 3: Web Development, Section 3: Mobile Support.

And the EEWeb example is an example of a mobile web app:

Examples/Sample Applications/EddiesElectronics

Lastly, the the blog post Running web apps from the iOS Home screen might be helpful.

I recently developed a web site geared toward portable devices, and after working with iOS Xojo for a couple month, I was sensitized to the particular issues portable devices create.

Rainer Morgen is already close to what you need, if you assume users will always hold their devices in Portrait mode. Hos template offers screens for most of the devices available, including desktop. By monitoring the screen size in each webpage, you can switch to the appropriate one.

You may also want to design webpages for Landscape mode, still manages in the resized event, so if the user rotates the device, you can present a better layout.

Another thing to think about is if you need data entry, make sure to place textfields and textAreas on top of the screen so when the user taps in the entry fields, the keyboard does not mask them.

Make sure to dimension the buttons and control so they are easy to use with fingers. Some controls are not terribly easy to use with touchscreens, make sure to test on a device.

When you debug, you can access your running application from the phone or tablet by typing the address of the computer on the network. For instance http://192.168.1.55:8080 (instead of http://127.0.0.1:8080). On Windows, you can find that address in the Network center, in Mac, select the Network preferences, then click Advanced, click TCP/IP. The address is the IPv4 address.

Finally, the design of your app can be more familiar to users if you try to emulate the devices interface. The iOS App anatomy page is an interesting read https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Anatomy.html#//apple_ref/doc/uid/TP40006556-CH24-SW1

Using a tab bar with the same kind of icon design as iOS8 can greatly improve the navigability, for instance. On iPad in Landscape mode, you can emulate the regular iOS iPad tab bar with a vertical rectangle alongside the left of the screen.

I made a demo application which shows the use of the template I mentioned before:
mtest.morgen.xyz
(If the link does not work, try this one )

Click one of the items of the segmented control.

When called from desktop or iPAD, you’ll see the html-table with all columns. Open with a iPhone (I only tested it with iPhone5 and iPhone6) in Portrait mode, you will see only the first 4 columns. Switch to Landscape: the horizontal segmented menu disappears, a vertical menu on the left side gets embedded, the html-table now is visible with all six columns.
Back to Portrait the vertical menu gets closed and destroyed, the horziontal menu is visible and the table is rearranged to fit the space. Everything is done in the ChangeView-Method on the iPhone-Page:

[code] dim x As Integer

if bPortrait then
if segMenuV <> NIL then // if it comes back from the landscape view
x = segMenuV.SelectedItem // get the selscted item from the vertical menu
if x >= 0 then
// set the selected item of the horizontal menu without event triggering:
segMenuH.SetSilentSelItem x
segMenuV.Close // remove the embedded vertical menu
segMenuV = NIL // destroy it
end if
end if

// restore the original portrait view :
segMenuH.Visible =True 
cHTML.Left = 10
cHTML.Top = 140
cHTML.Width = 310
cHTML.Height = 370

else // Landscape
segMenuV = new cSegment // create a new instance of a segement menu
x = segMenuH.SelectedItem // get the selected item of the horizontal menu
segMenuH.Visible = False // hide the horizontal menu

segMenuV.Width = 65           // set all necessary properties of the vertical menu
segMenuV.Height = 160
segMenuV.AddSegmentCaption "Item 1"
SegmenuV.AddSegmentCaption "Second"
SegmenuV.AddSegmentCaption "3. choice"
SegmenuV.AddSegmentCaption "Number 4"
segMenuV.ItemCount = 4
 // set the selected item of the hor. menu without triggering an event:
segMenuV.SetSilentSelItem x    
segMenuV.Vertical = True

// add the menu handler for the vertical menu:
AddHandler segMenuV.myAction, AddressOf segMenuV_myAction
// embedd the vertical menu on the left side:
segMenuV.EmbedWithin(self, 10,60,segMenuV.Width, segMenuV.Height)

// move the HTML-Control
cHTML.Left = 85
cHTML.Top = 10
cHTML.Width = 500
cHTML.Height = 310

end if
self.Show // show the page[/code]

@Rainer Morgen

The link to the template no longer works. Do you have an update?