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

2. About This Presentation While I’ve 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!

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.

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

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!

6. This one is called “Beige”. Ok, so it’s not the most original name. Remember: Good contrast between text and background is essential for readability.

7. “PINKIE” This one is called:

8. Ta da. This is “Pinkie” in action.

9. Now we get those Corrosion images…

10. …Let’s call it “Industrial Rust”. A more detailed “how to” is in the works, so stop by again!