PHP Rhopalic Letter Sentence Game Mobile Friendly Tutorial
To make a web application more mobile device friendly, there is the look and the usability to consider. When you consider the look you should try to take into account, very small device widths, as would be applicable for a lot of smartphones. As far as usability goes, one thing we’ve found is that keyboard entry is less friendly than for your laptop, or desktop computer.
This is a huge topic area, but put the spotlight on a tutorial web application from a few days back to see some of the issues … do you remember PHP Rhopalic Letter Sentence Game Primer Tutorial? As a first look through for mobile friendliness, we touched on …
- add functionality so that the choice is there for less keyboard initializing taking place … if all keyboard can happen in one or two places that is better than for lots of textbox places, on mobile devices
- make input type=”text” tiny bit wider
- if down the track you think this will be the innards of a WebView of a mobile application, stop any navigation that takes you to another webpage, else accompany any WebView with “back” and “forward” buttons (whose functionality is most likely neatly encapsulated by easy measures you can take within the IDE you are using)
- use a PHP mail (server-side) method of emailing rather than using an HTML a tag mailto: href value (client-side method, that relies on an email client program) … this is only an issue, if down the line, this may become the innards of a WebView in a mobile application
- at the client (and this is perhaps the better, but not the only (ie. if PHP server-side is involved, it can be done there too, but not the same way … doh!), place to test for it), with Javascript, use a test like …
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// it is a mobile device
}
… great thanks to this link for this advice and idea - use meta tag like …
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
… between <head> and </head> … as you can imagine, there are huge variations in requirements here, and if you want a start at some more R&D, have a read of a Firefox (after all, this is a cross-browser, as well as cross-platform, issue) webpage talking about the viewport meta tag regarding mobile devices
… to, hopefully, improve it as a mobile web application, and hopefully, as a web application generally.
Please tee up a live run with the PHP programming source code rhopalic_letter_sentence.php (changed from a few days ago, to make it more mobile friendly, as per rhopalic_letter_sentence.php).
If this was interesting you may be interested in this too.
