A Very Simple “How To” For Designing Mobile Page Templates Warning: These are not real phones....
If you can't read please download the document
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
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!