Planning and Building a mobile enabled site for your main site [closed]

Question

We are in the initial planning stages of building out a mobile site for one of our clients. This mobile site will be in addition to the main site that we have already built for them. We've determined that the content is going to be a small subsection of the main site and will target the main audience that is expected to use the site.

While looking through some sample mobile sites we noticed that a lot of site that have WAP in the url are actually just simplified HTML files. http://wap.mlb.com is not really WAP enabled but simple HTML.

My question is WAP a think of the past? With smartphones and the iPhone having the ability to render sites as is do we need to worry about WML and WAP or will a stripped down html version be enough?

Also can you recommend a blog or tutorial or answer below how best to check for mobile devices? Do we as the programmer need to know each variation of user agent in order to redirect them to our mobile site?

Finally, would you program a mobile site for the iPhone/Touch Safari browser or just leave the site as is?

Moiety

Answer 1

Newer phones come with WAP2 which uses HTML Mobile Profile (XHTML MP), which is quite similar to normal HTML. Older phones use Wireless Markup Language (WML).

Depending on your audience I would consider making a mobile phone friendly version of the site using XHTML MP and drop WML completely. By mobile phone friendly I mean light graphics, little JavaScript and simple navigation.

To check capabilities of different hand phones, take look at WURFL.

Also, you might want to take a look at Mobile Web Best Practices from w3c.

Lederman

Answer 2

Here are two things you can do to improve support for iPhones without doing much work:

Make page scroll up to hide URL bar:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

And set scaling for the page width (best to do some testing and play with this, also look for other examples that may use user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

Mistreat

Answer 3

I would highly recommend you check out Cameron Molls' book Mobile Web Design. Its not so much a technical how-to for building mobile optimised sites but makes you think about the various options available and summarises each ones pros and cons. Will definately make you think about what approach you're taking and whether its the right one. I think it also has some pointers to resources that help detect mobile device requests to your site, there are various options out there.

Mendiola

Answer 4

As of now(2014)

We may not need separate site for mobile devices instead we can go for front end libaries like Twitter Bootstrap which uses responsive rendering so that site adapts itself to the screen size whether it be Tablet or Mobile device or Desktop

One of Major advantages is it takes less maintenance when compared to having separate websites for mobile and desktop.

To know more about Twitter Bootstrap click here

Annora

Answer 5

I think the main difference with the 2.5G phones and the new 3G phones is that while 2.5G phones used their own browsers, browsers on 3G phones have become much more similar/accurate in their rendering capabilities.

On the other hand, you can use CSS to render the same HTML in either a large screen format or a small mobile-optimized one, so I guess what has happened is that the "simple HTML" approach just appeared to be the least difficult path to take. Also, tableless layouts allow websites to scale better, making it easier to render a site in both large and small screen formats.

So the end question will be that of a target market. Are you targeting a tech-savvy audience who will tend to have fully 3G-capable phones? Are you targeting people who might have 2.5G at the most?

Noneffective

Answer 6

My experience is that it really depends on what you're trying to do and who/where the users are.

While WAP got a lot of bad press, it's strength is where you have low bandwidth high-latency connections. The WML content gets optimised by the carrier's gateway to greatly reduce the amount of data transmitted over the air. If you have iPhones and the like, in areas with solid 3G coverage you can afford to go for richer content, but if you want an app to still perform well in more out of the way areas, WAP has a big advantage.

One thing to watch out for with WAP is that the quality of the WAP support in handsets varies a lot (guess you'd also say the same for smartphone web browsers). Most of them display pages ok, but the form handling is truly awful in some browsers.

If you vary content based on user-agent, you should also provide an explicit way to access a specific type of content (e.g. seperate uri's) - the automated choice is not always right and you want the client to be able to override it .

If you go with WAP development check out WinWAP - a Windows-based WAP browser.

Plutus

Answer 7

If you want to spend a very small amount of money, you can find a used copy of my book "Palm OS Web Application Developer's Guide" on Amazon for under $1. While the specific tips about the old Palm VII devices don't apply anymore, there's a few sections on making mobile websites that might still apply. My basic advice is this: make pages small with relevant information first, then navigation links; push generic/boilerplate content to other pages; try to optimize to reduce the amount of time a user spends on a single page; and avoid downloading lots of objects (images, JavaScript files) for a page to reduce latency.

Pawl

Answer 8

The code: Causes the w3 validator to return 11 erorrs when I use it. Here's the index page it was tried in: You'll not some multiple lines, not used. They're template lines.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>

Impregnate