SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: designing for mobile
-
Oct 31, 2006, 10:16 #1
- Join Date
- Sep 2006
- Posts
- 50
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
designing for mobile
Is there a section here for designing for mobiles and for handhelds.
I wanted to create a page that is built in HTML and CSS, but make it available for handheld devices. I think I pretty much get the hang of designing for handhelds except that there is a 500 pixel wide table on one of the pages, and I was wondering what the best way to deal with this was.
Also I wanted to ask, what is the best resolution to build for for pdas and mobiles.
Thanks
-
Oct 31, 2006, 15:51 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You may want to read this thread before doing anything else:
http://www.sitepoint.com/forums/showthread.php?t=431774
Basically, mobile technology is in a state of transition. Older handheld units cannot (and I mean this literally) understand HTML, much less CSS, and depend on a wireless content specification called WML (Wireless Markup Language), which is served over the Wireless Application Protocol (WAP). Newer devices can handle HTML fine, but the CSS support varies wildly.
As far as actual real estate goes, you're pretty much looking at anything (the following are in pixels) from 128x128 to 240x320.
WML and the WAP are being abandoned by the Open Mobile Alliance, which is working in conjunction with the W3C Device Independence Working Group to promote access to a "unified Web from any device in any context by anyone."
I'm not going to go into WAP and WML, but I am going to touch up on HTML and CSS a bit, since it will eventually be supported by just about everything, and it will also (in the meantime) help improve your existing HTML/CSS strategies for the "traditional browser" audience.
Write clean, semantic, and valid HTML. A proper document structure is going to be essential. If something is a header, mark it up as a header. If it is a paragraph, mark it up as a paragraph. If it's a list, use a list (if it's a list of links, then use an unordered list of links - like you would for a navigation menu). Use the HTML code that was designed for the job. Also, keep your HTML code as small as possible.
HTML Code:<div class="header"> <div id="header1"> <p>Level One Header</p> </div> </div>
HTML Code:<div class="header"> <div id="header1"> <h1>Level One Header</h1> </div> </div>
HTML Code:<h1>Level One Header</h1>
HTML Code:<div id="header"> <h1>Level One Header</h1> <p>Tag Line - Our site is the leader in...</p> </div>
Another thing to do is to avoid using actual HTML images as much as possible. If you do, try to keep them small. You can use CSS (and the IMG element as an anchor) to replace the default HTML image with a CSS background as necessary for regular and handheld devices.
Where would the CSS go? In its own stylesheet, of course (remove the space and forward slash from the end of the tag if using HTML 4 - you only need them if using XHTML).
HTML Code:<link rel="stylesheet" type="text/css" href="/styles/handheld.css" media="handheld" />
Opera (Opera Software) - www.opera.com
NetFront (Access Systems) - www.access-company.com/
Nokia (Nokia) - http://forum.nokia.com
Openwave Mobile Browser (Openwave) - www.openwave.com
Pocket Internet Explorer (Microsoft) - www.microsoft.com
Picsel (Picsel Technologies) - www.picsel.com
iPhone Tester - www.iphonetester.com
Here's a list of mobile device manufacturers as well:
Forum Nokia - http://forum.nokia.com (wow, haven't we seen this link already?)
Ericsson Mobility World - www.ericsson.com/mobilityworld
BlackBerry Developer pages - www.blackbery.com/developers
And as an extra treat, I'm going to include Microsoft's MSN TV (formerly WebTV) in the mix as well.
With a scant screen size of 544x372 pixels, it's one of the hardest to design to. Fortunately it remains just barely a blip on the overall usage radar, but it still has millions of users (I personally know one). You can get the emulator for MSN TV at http://developer.msntv.com/TOOLS/msntvvwr.aspLast edited by Dan Schulz; Aug 26, 2007 at 03:01. Reason: Added iPhone Tester
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Nov 5, 2006, 10:00 #3
- Join Date
- Sep 2006
- Posts
- 50
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dear Dan,
Thank you for that comprehensive response. All of it was really useful and insightful.
-
Nov 5, 2006, 11:54 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not a problem.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Nov 7, 2006, 04:26 #5
- Join Date
- Oct 2006
- Location
- New Zealand
- Posts
- 2,323
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Some links I've found useful for making mobile designed sites:
http://www.passani.it/gap/#prereq
http://emulator.mtld.mobi/emulator.php
I'm no expert but here's my take on things:
Basically, keep your code as simple as possible, don't use images unless absolutely necessary and make sure they're highly compressed if you do.
There is little point in changing fonts or font sizes, use of H1, H2, H3 etc. will provide the accentuation necessary for titles etc.
Always prepare liquid layouts to compensate for varying screen widths, you don't want users to have to scroll sideways.
Never use excessive code, your users will be paying for any extra code you add and it can be quite a substantial cost.
Ryan,
Bookmarks