Mobile Site Development Questions

Resolution and Coding of a Mobile Site

[jimh009]

Hello,

Let me preface this by saying I'm probably the last person in the USA who doesn't own a cell phone. Indeed, the only cell phone I've ever used is my mother's phone - and she bought it back in 2002. Thus, my knowledge of smart phones and wireless phones in general is basically non-existent.

Still, I know how to code websites. And one of my content sites that performs well covers a topic that is ideally suited for mobile users. A second site of mine also has at least a few pages that are ideal for mobile users, too.

Thus, I've taken the leap and registered the sub-domains for these sites (using the m.mydomain.com Brett suggested in another post).

I have a number of questions that I was hoping either some mobile site developers, or simply power users of these phones, might be able to answer.

1. What Is the Ideal Resolution to Use? This is my biggest question. Scanning my logs, I see the most popular mobile resolution to currently browse my site (which accounts for about 1-2% of all traffic), is 320x480. However, there is a massive variety of small resolutions it seems. So, what resolution should I design for?

Additionally, I noticed that many smartphone users use their phones horizontally - essentially shifting the resolution to 480x320. Do these phones automatically "shift" the web page, or might I be better advised to design a mobile site for this wider resolution and let the phone itself scale down the resolution for when the user keeps the phone vertical?

Finally, a final question regarding resolution. Are smartphone resolutions like computer monitors today - in that the resolution seen in the webmaster logs doesn't reflect the actual screen resolution the user sees when using the phone. Or to phrase it another way, do I have to worry about scroll bars, status bars, etc, when coming up with the right resolution to use for mobile site development?

2. PHP, XML, HTML? I use Dreamweaver to create all pages for my sites, and all pages i create are .php pages (although they aren't necessarily dynamic, "created on the fly" pages). However, I've read in various places that XML or HTML is preferred for mobile sites. Yet Google Adsense says use the .php extension for all pages (I'm an Adsense publisher), at least if you plan on running the Google Adsense for Mobile Devices Ads.

Thus, I'm lost on this. Suggestions?

3. CSS. I've read conflicting information on this. Some websites on mobile development say you can safely use "some" CSS. Other sites say to stay away entirely from the use of CSS, especially an external stylesheet.

So what's a guy to do when it comes to mobile devices and CSS?

4. Colors. Is it safe to assume that the Webmaster isn't forced to use "web safe colors" for smartphones and other mobile devices? I tend to gravitate toward web safe colors if only for simplicity, but still it's nice to know I can break free of them when needed.

Is there anything special I should know about when it comes to color use for smartphones and mobile devices?

Thanks for any help on this. I'm also very open to any other suggestions or comments people might have when it comes to developing a small, mobile website.

Jim

[NathanDrake]

Jim, I can't help you because I'm in the same boat, but this is something I'd really like to know as well :)

[tangor]

@NathanDrake: Welcome to webmastworld!

@jimh009: Mobiles are interesting in their "character width". Font sizing is a b*tch. Divs will make you crazy... Google frowns at showing content different to bots (theirs) and users, and something different to mobile, too (marginal in this regard, but something to be considered).

Suggestions: Reduce divs (columns), avoid max width, beware "large fonts"... Get a cell phone. Write your website to show x to x and y to y. Make yourself crazy... Or... KISS. One of those simple things often over looked. Keep It Simple, Stupid.

One screen div (one other inside, sparing!). Use em front sizes. MINIMAL pics. Or, as I do, tell 'em to p]ss off. Wait until the divs load. You want it, you entered, I got it... you craved, lusted over... (kidding a bit, but not by much). HAVE THE CONTENT! (PRODUCT) If your content is desired mobile users will wait until their screen limited devices can display it.

That said, DO NOT PUT REALLY HUGE IMAGES as backgrounds to your home/index page. That would suggest a "What, are your freakin' nuts?" comment. Not that I would do that. :)

[jimh009]

Well, I spent the weekend watching football (Go Packers!)and designing this little mobile addition to my primary site. It was an interesting project. For anyone interested (does anyone even follow the Webmaster General forum anymore?), here's what I did.

1. Resolution - Since the vast majority of my mobile users were using iPhones and similar mobile devices that had a resolution of 320x480, I decided to design everything around this resolution (actually, 300x480, to provide a bit of "wiggle room"). People without smart phones aren't likely to find my mobile site addition useful anyways - so I thought it best to design for people who will actually find the content provided useful. I suspect the design should work well in other less-advanced phones, too, although scrolling and/or tilting the phone will be required.

2. Simple Layout/KISS - Even before reading tangor's reply, I decided to keep things exceedingly simple. I suspect I used the most simple and boring template around, complete with a boring white background. For my first design, I simply found a freebie template on-line somewhere and made a some changes to the CSS (more on that later). The template is a table-less layout, which I read was highly suggested for mobile devices. Another bonus was that the number of "div's" was quite minimal, making it easy to modify.

3. Validating the Design - Just as you can validate a normal web page at W3.Org, you can validate a mobile design too ([validator.w3.org ]). I discovered validating a mobile design isn't quite the same as a normal web page, as it's much stricter. But I got it done. Additionally, I got my design to score 96% on their little scoring system, which is good enough for more advanced smart phones.

4. Testing - How do you test a mobile layout if you don't own a smart phone? Go find a iPhone emulator, that's how! I found a nifty piece of free software on-line that mimics both an iPad and a iPhone. Assuming this software works as designed, the little mobile template I created actually looks halfway decent at the 320x480 resolution. For those who want to try the software, it's called iBBDemo and can be found here ([labs.blackbaud.com ]).

5. Page Size - Mindful of the slower loading speeds of smart phones and the need to minimize bandwidth, I kept all pages (so far) under 10K. Future pages that will have photographs (there will be a photo gallery users have the option of viewing) will be somewhat larger, but even those will fall well under 20K in size.

6. CSS - I used an external style sheet, as more advanced smart phones don't have an issue with it. Again, I'm designing for the "newer phone crowd," so I made a conscious choice to sort of let older phone users deal with any issues that might come up due to the use of an external style sheet. The stylesheet also matches the template in one sense - it's very small at around 1K.

7. PHP - I designed all pages as .php pages, and used .php includes. No problems from what I can tell so far. I suspect older phones will struggle with it, but oh well! The mobile validator didn't have any issues with it, either.

Anyways, this little project was a nice diversion from other stuff I needed to do. I'm sort of looking forward to seeing how one page in particular does on this mobile site, as I put a link up to it on the most popular page of my primary site which draws around 2000 - 5000 visitors a day and where 2-4% of the visitors use smart phones.