Embed Size (px)
DESCRIPTION
A Very Simple “How To” For Designing Mobile Page Templates. Sara Dellinger designs for Azalea™ Software Cairn Mobile 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. About This Presentation. - PowerPoint PPT Presentation
Citation preview
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
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!
<body><div id="content"> <div id="navButtons"> <ul> <li><a href="#">link one</a></li> <li><a href="#">link two</a></li> </ul> </div><p class="hangingHead">mobile web template</p> <p><img src="cairn.jpg" alt="cairn free mobile web site template" width="100" height="100" class="imgRight" />Building a web site for cell phone users is different than a site for computer browsers. </p><p>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.</p>
Etc. etc. etc…Etc. etc. etc…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…Etc. etc. etc…Etc. etc. etc…
CSS
Use a liquid layout to ensure your content is viewable on different screen sizes.
Add Visual ElementsTexture: Corrosion
Company Logo
Texture: Sand, stones
Shapes in shades of pink
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!
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.
“PINKIE”This one is called:
Background images help define a look and feel. Just be sure they enhance, rather than distract from the content.
Ta da.This is “Pinkie” in action.
Now we get thoseCorrosion images…
…Let’s call it “Industrial Rust”.
A more detailed “how to” is in the works, so stop by again!
