DESIGN AND BUILD A MOBILE WEBSITE

Posted by Singapore Web Design Company on 30 December 2012

Tags:

With the mobile phone becoming an essential part of our daily lives, it is not surprising that many predict mobiles to be the most dominant internet browsing platform. According to a recent statistic, approximately 30% of mobile phone users (which makes up more than 700 million and counting) have browsed and do browse the internet via their mobiles. Considering the fact that there are more than 2.5 billion mobile phone users, with the figure increasing by thousands every day, it makes sense to assume the increasing need for mobile websites.

Many proactive, consumer-driven companies have realized the importance of mobile websites and have, consequentially, built their own mobile compatible websites. Some may find this need to create a whole new website for mobiles unnecessary assuming websites can be accessed using mobile web browsers via WAP. However, these individuals are ignorant of the fact that most websites cannot properly load on mobile web browsers, given the size of the normal websites. Therefore, there is a need to carefully design and build an additional website which is accessible via mobile phones or other similar portable devices.

 

DESIGNING A MOBILE WEBSITE:

For beginners, the website design used for creating your desktop website is not compatible on the mobile web browsing platform. There are accessibility design guidelines for mobile websites which are set by the W3C. As mobile phones make use of WAP for web browsing, the websites need to be created accordingly in terms of screen size and download limit. The easiest way of building a mobile website is making necessary changes to the existing desktop website design to make it mobile compatible. However, just because you are making use of an existing website design does not mean there won’t be a lot of work. Big changes would be required in terms of website layout, design, and construction.
Some basic pointers for mobile website designs are as follows:

  1. Get Dreamweaver CS3 and Adobe Creative Suite 3 which has Adobe Device Central
  2. Launch Dreamweaver CS3 and from the ‘Create New’ option, click on ‘More’
  3. Form the Page Type button, select HTML. Then publish out with the use of XHTML Mobile 1.0 profile, found under Doc Type.
  4. Begin coding your HTML-based mobile website. It is best to keep the website simple by concentrating more on the content rather than the design and other perks. A quick search online can help you find some of the best HTML codes for mobile websites.
  5. After the coding is complete, test the website. However, do not test within the browser. After choosing ‘Preview in Browser’, click on Adobe Device Central from the menu, and change the interface to mobile rather than desktop. From the Adobe Device Central, you can manually select a target device for your mobile cards, or you can create a custom device profile which will include the devices you wish to make your mobile cards compatible to.
  6. After that, you can load the code and make your mobile cards available for the devices you have chosen.
  7. For simplicity, code your website using XML or XHTML, with UTF-8 as the character encoding.
  8. Make sure the website is viewable on different screen sizes as the screen size varies from mobile to mobile. This can be hard to accomplish, but it is doable.
  9. Convenience is the top most priority as it is tedious and time-consuming to browse through the website using mobile web browsers. Therefore, it is important to keep all the important and relevant information on top of the webpage.
  10. Include radio buttons or lists for better usability of the website when viewers are adding text.
  11. If you want to include pictures on your mobile webpage, they should be in the JPEG or GIF format.
  12. Most mobile web browsers do not have back buttons; therefore, including back buttons and relevant, easily accessible links can make your mobile website very user-friendly.
  13. The maximum page size is 20 kilobytes. It is highly essential to include all the necessary information within the page size limit.
  14. You should refrain from including anything which is unnecessary or useless, as viewers are paying web browsing money to their providers in order to view the website.
  15. Avoid using tables as the main website layout as it will not be able to be properly viewed via mobile web browsers. Instead, use CSS for the layout for maximum compatibility.

 

BUILDING A MOBILE WEBSITE:

When building your mobile website, you have the option of creating it from scratch independent of your desktop webpage. While HTML can be used, you can also build your mobile website using the WAP or WML format. However, it should be noted that WML does not run with every web host. Therefore, before you use WML to build your mobile website, you have to communicate with your web host to make necessary changes in their web server. WML, which stands for Wireless Mark-up Language, is a light-weight version of HTML. Even though they are both quite similar, it is still difficult to switch from one version to another and WML is comparatively more limited in terms of features and tags.

Building a mobile webpage with WML:

Similar to HTML, in order to create a WML document, all you require is a text editor such as Notepad. In the document, include the following code as the header:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.mymobilesite.com/index.xml"><wml>
This code will enable the mobile devises to determine they are currently reading a WML document and verify the specific WML standards to use.
Webpages of mobile websites are called cards. A page viewed on your mobile phone while browsing is, therefore, a card. You can include more than one card in your WML document by entering individual codes, for example:
<card id="main" title="This is My Mobile Site" newcontext="true">
This code will create a card with the top title text of ‘This is My Mobile Site’ with the card ID ‘main’, used for the purpose of linking.
One of the most important things to keep in mind when creating webpages via WML is closing the WML tags properly. If any one of the tags is not closed properly the entire website becomes inaccessible.

Building a mobile webpage with HTML:

For those unfamiliar with WML, HTML can be used to build websites as well. The easy step-by-step method is:

Mobile website designing and building is a task which requires a lot of time and considerations. Therefore, it is best to keep your mobile website simple by focusing more on the content. This is not only makes your website easy to create but also makes it accessible by various mobile devices. If you are unfamiliar or do not have time to create a mobile website, the best solution is to hire help rather than give up on having a mobile website. Apart from designing and building mobile websites, some companies even provide additional services of mobile SEO and PPC to cater to the prospective growth in mobile websites.

 

 

 

 


Comments

View in: Mobile | Desktop