Mobile App Considerations

With mobile apps becoming ever more popular and the need for websites and online shops to work on all mobile platforms I’ll be looking at key factors to consider when creating your app.

Navigation

Navigation is key on any mobile app as you are limited in the amount of space available. A mistake would be to have a full navigation bar on every page, the best way to utilize the space available is to use pull down menus allowing the user to select where they want to go without having to go through a number of screens.

Screen Resolution

Just like designing websites we need to consider the screen resolution for different devices, but we also need to look at the orientation. A solution would be to use more fluid layouts allowing you to adjust column widths and automatically resizing images depending on the screen resolution and orientation of the screen. Using the max-width property for images is the most commonly used solution, if you set the image to max-width:100% then this allows the image to resize proportionally and to the maximum width of the column it is in.

CSS3 Media Queries

CSS3 allows for more media elements to be used, which are targeted at devices such as device-width and orientation. These device targeted CSS3 media queries will be ignored by any browser that do not support CSS3 but will work on any new device brought out after CSS3 was developed. For a better understanding on how to use the device-width, min-device-width feature in CSS3 take a look at ‘The Orientation Media Query’by Peter Paul Koch where he discusses why it’s better to use device-width rather than orientation.

The best way to use media queries is to have them all in one style sheet so when multiple requests are made they are all done from one stylesheet. Below are a couple of examples of how you would use the max-width and min-width in media queries, however these do not work for IPhones.

@media screen and (max-width:320px) {

.class1{
	float:left;
	width:30%;
	}
}

@media screen and (min-width:600px) {

.class2{
	float:left;
	font-size:1.2em;
	}
}

The max-width media query will only run on devices which are no wider than 320px and the min-width will only run on devices wider than 600px.

There are media queries specifically targeted at particular devices which would look like this:

@media screen and (max-device-width:320px {
	.device-specific{
		font-size.1.2em;
		float:left;
	}
}

and for orientation (only works for IPad)

@media screen and (orientation: landscape) {
     .landscape {
          width: 50%;
     }
}

More…

Creating a mobile app is no small task and there are many things to consider before going ahead with it, make sure you research whether an app is what you need or if your better off with a mobile website, as well as usability and responsive design.

If your looking for a bit of help check out this mobile web design company.

Last updated by Anneka at October 21, 2011.