Slide 1

A Very Simple How To For Designing Mobile Page Templates Warning: These are not real phones. Yup, theyre fake. :^) These screen shots are taken from the emulator I used to test my designs. Sara Dellinger designs for Azalea Software Cairn Mobile Templates

Slide 2

About This Presentation While Ive titled this presentation as a How To, it is not intended as a step-by-step guide. Its purpose, rather than to instruct, is to show my thought process in designing these mobile page templates (and this PowerPoint as well since, despite it being a different platform, we go about things in a similar fashion). Enjoy. And if you find a bit of humor in here as well, bonus!

Slide 3

link one link two mobile web template Building a web site for cell phone users is different than a site for computer browsers. Keep your pages and images small. Test on your target phones. Then test some more. Create icons and a site map specific to your mobile pages. Etc. etc. etc HTML Start with Some Markup body { background:#585858; font: 95%/150% Tahoma, Geneva, sans-serif; color: #ccc; }.content { padding: 2px 5px 5px 20px; background: #fff url(bg.jpg); margin-top: 0px; } Etc. etc. etc CSS Use a liquid layout to ensure your content is viewable on different screen sizes.

Slide 4

Add Visual Elements Texture: Corrosion Company Logo Texture: Sand, stones Shapes in shades of pink

Slide 5

1. Start with a stock image. 2. PhotoShop it. And, before I forget: 3. Give yourself a hand (ha ha). We need a hand for our demo phones. No problem!

Slide 6

This one is called Beige. Ok, so its not the most original name. Remember: Good contrast between text and background is essential for readability.

Slide 7

PINKIE This one is called:

Slide 8

Ta da. This is Pinkie in action.

Slide 9

Now we get those Corrosion images

Slide 10

Lets call it Industrial Rust. A more detailed how to is in the works, so stop by again!