Hi, I made a mobile version of my site (300 px wide) in html. I was able to successfully redirect from the mail HTML website to the mobile when a smart-device was being used.
The website appears exactly perfect on android phones. The problem I am having is with iPhones and Safari. I know it must have something to do with the viewport tag, and have messed around with it, but no matter how I set the viewport tag, the Safari browser still minaturizes the home page of the mobile site.
Can someone please tell me what configuration of viewport tag I must use to correct this? Or if this is not a viewport tag problem, please tell me what else is needed?
Your site got a “0” on http://validator.w3.org/mobile/ and I am sure that report will give you a lot of ideas on what you are doing wrong.
Most importantly, you should forget the desktop design mindset and start thinking for designing for mobile devices and mobile users.
A couple of my "No No"s for mobile sites that might help you better understand how mobile design should be approached:
about 500kb homepage size ? incredible, would you visit such a site on your phone? make it less then 50k, I target 20k mostly.
Inflexible layout ? make the layout fit to the screen dynamically.
Too many and large images ? use less and smaller images.
Large images used for navigation ? use text and/or smaller images for navigation.
tables for styling layout ? use css instead of tables. use tables only for presenting tabular data.
Too much content on the homepage ? do not provide much content on the homepage. provide a good navigation.
map on the homepage? I would display it on an inner page. because not every homepage visitor would be interested in their map. and use Google Maps Javascript API (V3) for your Google Maps, https://developers.google.com/maps/documentation/javascript/
A properly designed mobile site shouldn’t need a “Visit Full Site” link, unless this is a much complicated site.
Finally, I use the following meta tags in my mobile designs:
There are some nice mobile web design tutorials and books around the web, I recommend you go through the basics before you continue. If you are making that site to a client, you really should stop, learn more about mobile design and then continue.
Yes, I knew I had an aggregate score of 0 from the W3c validator. I had already printed down all the code and errors from W3c before posting. Most Individual pages are higher 65-75. I am getting dinged a lot for the embedded YouTube Videos (iframes).
Any suggestions? an image with a link to YouTube? That was what I am thinking.
Appreciate the time you took to respond to me. Thanks.
I used to place an image with a link to YouTube in my earlier mobile designs. But the smartphones are getting improved all the time and soon all new versions will support videos and iframes well. It is up to you to use which version. An image will be less meaningful to the end user but it will be supported by more devices; on the other hand, an embedded video will be more meaningful to the end user whereas it will be supported by less devices.