 thenderScreen tycoonPremium
join:2009-01-01
Brooklyn, NY
kudos:1 | cellphones, or the art of small screen friendly sites The other day someone complimented me on my website(the one in my signature). I laughed and was confused, since this is little more than something I threw together in a text file and added CSS to. I'm no web designer and it shows in the hideousness of the site.
When I asked what made it good, he said it was the only one he found that loaded well on his cellphone. My guess was since I know nothing about good web design I couldn't implement any fancy stuff that would cause weirdness on a phone browser.
Since about half the people who view my site and call are doing it on either a phone or a machine with a cracked screen, this is important to me.
Are there any rules of thumb or tips on how to make a website more cellphone/small LCD friendly the more experienced designers on this forum have to offer?
--
Macbook repair in NYC |
|
 twizlarI dont think so.Premium
join:2003-12-24
Brantford, ON
kudos:3 | »www.alistapart.com/articles/pocket/ |
|
 usa2kBlessedPremium,MVM
join:2003-01-26
Canton, MI
kudos:3
1 edit | reply to thender
»www.w3.org/TR/CSS2/media.html
The right CSS catered to "handheld" could have benefits. |
|
|
|
thenderScreen tycoonPremium
join:2009-01-01
Brooklyn, NY
kudos:1 | reply to thender
Thanks, good information! |
|
 DC DSLThere's a reason I'm Command.Premium
join:2000-07-30
Washington, DC
kudos:2
 ·Covad Communicat..
·Verizon Online DSL
| reply to thender
What I do in ASP.NET is use a combination of master pages and CSS files for standard and mobile devices. If a request comes from a mobile, I dynamically switch to the mobile version. Presumably other environments have similar capabilities.
The key points are: - Keep the markup you're pushing as compact as possible.
- Design for a single column, flowed layout.
- Use only em or percentages for sizing (including text margins); px only for borders and body.
- Use only lowest-common-denominator fonts: arial, times new roman, courier, serif, sans-serif, fixed; avoid font calls as much as possible.
- Avoid overly large or small font sizes.
- Assume the worst and that your screen width won't be bigger than 200px
- HAVE ZERO DEPENDENCY ON CSS and javascript for anything to work.
- DO NOT USE FLASH for anything that the visitor does not have to explicitly download.
- Assume images will not render. Absolutely don't use graphics for "titles" or text.
- Include physical dimensions of images or tables.
- Create WAP-scaled versions of significant images such as logos.
- For variable images (such as a today's headline), if you are using ASP.NET or PHP you can resize images on the fly with some server-side code (beware of the load on the server, though). If you don't have the ability to do server-side resizing, specify width and the browser should do it (though likely with considerable loss of fidelity)
--
There is no giant fur-bearing trout. |
|
