Planning and creating a mobile site for your main site

Question

We are at the initial stage of planning the creation of a mobile site for one of our customers. This mobile site will be in addition to the main site that we have already created for them. We determined that the content would be a small unit of the main site and would target the main audience, which is expected to use the site.

Looking through some sample mobile sites, we noticed that many sites that have WAP in the URL are actually just simplified HTML files. http://wap.mlb.com is actually not WAP, but plain HTML.

My WAP question is thinking about the past? With smartphones and iPhones capable of displaying sites as they are, do we need to worry about WML and WAP, or is the stripped down html version enough?

You can also recommend a blog or tutorial or answer below, what is the best way to test mobile devices? Do we need a programmer to know every variation of the user agent in order to redirect them to our mobile site?

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

Answer 1

The new phones come with WAP2, which uses the HTML Mobile Profile (XHTML MP), which is very similar to regular HTML. Older phones use Wireless Markup Language (WML).

Depending on your audience, I would consider creating a mobile version of the site using XHTML MP and completely remove WML. By mobile, I mean light graphics, little JavaScript, and easy navigation.

To check the capabilities of different phones for mobile devices, see WURFL .

In addition, you can take a look at the w3c Mobile Website Recommendations .

Answer 2

Here are two things you can do to improve iPhone support without doing a lot of work:

Make the page scroll up to hide the 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 the scaling for the page width (it’s best to do some testing and play around with it, and look for other examples that can use user-scalable=true ):

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

Answer 3

I would highly recommend you check out Cameron Mulls Book Mobile Web Design . This is not so much a technical guide for creating mobile optimized sites, but it also makes you think about the various options available and summarize all the pros and cons. It will definitely make you think about which approach you are taking and whether it is the right one. I think that it also has some pointers to resources that help detect mobile device requests to your site, there are various options.

Answer 4

At the moment (2014)

We may not need a separate site for mobile devices, instead we can go to graduation libraries such as Twitter Bootstrap , which uses responsive rendering so that the site adapts to screen size, whether it be a tablet or mobile device or desktop

One of the main advantages is the lack of maintenance compared to individual websites for mobile and desktop computers.

To learn more about Twitter Bootstrap, click here.

Answer 5

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

On the other hand, you can use CSS to display the same HTML in large screen format or small optimized for mobile devices, so I assume that the “simple HTML” approach just turned out to be the least complicated way. In addition, custom layouts allow websites to scale better, which simplifies the visualization of the site in both large and small formats.

So, the final question will be the question of the target market. Are you targeting a high-tech audience that will have fully mobile phones with 3G support? Are you targeting people who can have a maximum of 2.5G?

Answer 6

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

While the WAP got a lot of bad clicks, the strength is that you have low speed, high bandwidth connections. WML content is optimized by the carrier gateway to significantly reduce the amount of data transmitted over the air. If you have an iPhone, etc., In areas with reliable 3G coverage, you can afford to use richer content, but if you want the application to continue to work well in areas with a larger area, WAP has a big advantage.

One thing to keep an eye on for WAP is that the quality of WAP support in mobile phones varies greatly (suppose you also say this for smartphone web browsers). Most of them render pages in order, but form processing is really terrible in some browsers.

If you change content based on a user agent, you must also provide an explicit way to access a certain type of content (for example, separate uri) - automatic selection is not always right, and you want the client to be able to override this.

If you're into WAP development, check out WinWAP, a Windows-based WAP browser.

Answer 7

If you want to spend a very small amount of money, you can find a used copy of my Palm OS Web Application Developer's Guide on Amazon for less than $ 1. Although specific tips about older Palm VII devices are no longer applicable, there are several sections on creating mobile websites that may still apply. My main advice is this: first create pages with relevant information, and then navigation links; Click shared / template content on other pages try to optimize to reduce the time the user spends on one page; and avoid loading a large number of objects (images, JavaScript files) for the page to reduce latency.

Answer 8

Code: Forces the w3 validator to return 11 erorrs when I use it. Here the index page has been tested: You will not use multiple lines, not use. These are pattern strings.

 <!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">