1 / 10

A Very Simple “How To” For Designing Mobile Page Templates

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.

burton
Download Presentation

A Very Simple “How To” For Designing Mobile Page Templates

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  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. Start with Some Markup HTML CSS body { background:#585858; font: 95%/150% Tahoma, Geneva, sans-serif; color: #ccc; } .content { padding: 2px 5px 5px 20px; background: #fffurl(bg.jpg); margin-top: 0px; } Etc. etc. etc… Etc. etc. etc… Etc. etc. etc… <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><imgsrc="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… Use a liquid layout to ensure your content is viewable on different screen sizes.

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

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

  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. This one is called: “PINKIE” Background images help define a look and feel. Just be sure they enhance, rather than distract from the content.

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

  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!

More Related