Member Avatar for JameB

I'm just starting to make my existing website's mobile version. I was wondering what kind of doctype should I use to ensure maximum number of phones rendering the site the way it was intended to. Targeted users use smartphones and not the thousand year old nokia phones.

Also, Should I just set the body's width to 100% of the phone's screen or should I do like a 250px wide website?

I tried to view my existing website on Blackberry Pearl with javascript enabled but it doesn't load images. (it doesn't load images because i am using javascript to change the src of img from a blank transparent image to the actual image.) Anyone know why its not working?

Any other tips, warning are welcome! :)

P.S. If anyone is not clear about the blackberry problem, and wants to look @ how i'm changing the src, click my username and find a thread called "criticize this website" and look @ the last post..

  • 3 Contributors
  • 3 Replies
  • 121 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by keval_hack

Dani AI

Generated

For modern smartphones the safest, simplest baseline is HTML5 plus a responsive viewport. The HTML5 doctype keeps browsers in standards mode and the viewport meta tells phones how to scale your layout. See MDN for details on doctype and the viewport meta tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Avoid a fixed 250px canvas. Use a mobile‑first, fluid layout and media queries so the same markup adapts to many screen sizes. Make images flexible with max-width: 100% and serve appropriately sized images when practical. For a starting pattern:

img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: 980px; margin: 0 auto; }
@media (min-width: 480px) { /* larger layout tweaks */ }

About the BlackBerry Pearl image problem: don’t rely on an empty or exotic placeholder src. Older browsers can be quirky when you simply swap img.src. Use a preloader pattern so the device actually fetches the file before you swap it in, and provide a sensible non-JS fallback (progressive enhancement). Example preload pattern:

var pre = new Image();
pre.onload = function () { document.getElementById('photo').src = pre.src; };
pre.src = 'images/photo.jpg';

Also check path case-sensitivity, correct MIME headers, and that JavaScript is enabled on the device. Emulators and remote debugging (or vendor device simulators) are useful for reproducing the issue.

As and mentioned, there are alternate stacks (Flash, WML, J2ME), but for current smartphones the HTML5 + responsive approach gives the widest, most future‑proof coverage. For further reading on these topics see MDN’s pages on doctype, the , and responsive design basics.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

My Opinion:

Instead of creating websites in html, you can do that flash lite. because in their documentation itself they given what are the supports and unsupported technologies within the mobile. So you should test with an simulator to know the merits and demerits. We can also develop in J2ME.

For yours is not working because you are fetching the image from the external folder or something which should also within your mobile. May be something not enabled in your browser of your mobile. check for Javscript enable/disable options.

Edited by Member #334542 because: n/a
Member Avatar for JameB

My Opinion:

Instead of creating websites in html, you can do that flash lite. because in their documentation itself they given what are the supports and unsupported technologies within the mobile. So you should test with an simulator to know the merits and demerits. We can also develop in J2ME.

For yours is not working because you are fetching the image from the external folder or something which should also within your mobile. May be something not enabled in your browser of your mobile. check for Javscript enable/disable options.

I would love to make a flash website but not all popular smartphones have flash capabilities. Like the iPhone and the Blackberry(for now, i hear rumours that the new OS has flash)

I am just having trouble getting my existing files to display correctly on the small mobile screen.

Edited by JameB because: n/a
Member Avatar for keval_hack

You can develop mobile site using WML and PHP.

You can use Emulator such WAP Proof for test your website.

-keval

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.