This page is not complete.
There are many considerations to ponder before designing your web app.
Device support and design emulation
Gestures vs. simple touch events
Basic app design principles
Regardless of the specific devices you plan to support, there are a few basic principles which should be obeyed when creating web applications:
- Avoid pixel-based widths when designing for multiple devices and/or multiple orientations
- Use vector graphics so that their dimensions may be elegantly adjusted between devices
- Don't assume features on any device; feature detection is still important
- The more flexible the app design, the more portable it will be when considering broader device support
The design of our app will be very typical, with two panes. The first pane will provide a search box for field for entering the user's location, as well as a list of previous location searches. The second pane will simply show a list of tweets from Twitter. Each pane will use a standard heading.
Our app will also be dynamic in that it will lay out properly in both landscape and portrait orientation, respond to a simple swipe gesture, and display reasonably on desktop and mobile devices. The file structure of the app will look like this:
- app - app.css - app.manifest - app.js - images/ - icon-16.png - icon-48.png - icon-128.png - index.html
The structure of your application may vary. Since this is a small sample application, there's no need for more specific directory structures. The images are provided in different sizes for different devices. For example, the
icon-128.png file will be used for Mac OS X desktop installations.