-
-
0
comments
Live Demo
Related article : Introducing 9lessons iphone Web Application
Normal site
Contains HTML code. CSS width style fixed with pixels. width : 900px
http://www.w3.org/1999/xhtml">
Content-Type" content="text/html; charset=iso-8859-1" />
</span><b>Normal Website</b><span class="Apple-style-span" style="color: blue; ">
Mobie site
Contains HTML code. CSS width style with percentage. width : 100% . Take a look atMETA tag viewport.
</span><b>Mobile Website</b><span class="Apple-style-span" style="color: blue; ">
width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
META tag viewport for Iphone
Width fixed 320
META tag viewport for all smart phone devices (recommended)
Auto width adjustment.
Apple developer meta tags information
Redirect iPhone, Blackberry, & Palm Requests With .htaccess
Beginning iPhone 3 Development: Exploring the iPhone SDK
[ Read More ]
How to design a website for mobile devices (smart phones). Next web world with smart phones so start working on mobile templates. In this post I want to explain very basic HTML design tip with adding a meta tag. I had implemented this attouch.9lessons.info, try to access this link with any smart phone Eg: Iphone and Android devices.
Live DemoRelated article : Introducing 9lessons iphone Web Application
Normal site
Contains HTML code. CSS width style fixed with pixels. width : 900px
http://www.w3.org/1999/xhtml">
Content-Type" content="text/html; charset=iso-8859-1" />
">
Mobie site
Contains HTML code. CSS width style with percentage. width : 100% . Take a look atMETA tag viewport.
width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
">
META tag viewport for Iphone
Width fixed 320
width = 320,initial-scale = 2.3, user-scalable = no" name = "viewport" />
META tag viewport for all smart phone devices (recommended)
Auto width adjustment.
width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name = "viewport" />
Apple developer meta tags information
Redirect iPhone, Blackberry, & Palm Requests With .htaccess
Beginning iPhone 3 Development: Exploring the iPhone SDK
-
-
0
comments
[ Read More ]
How to Design and Build a Mobile Website
Did you know that in the world today there are more than 2.4 billion mobile phone users, and a thousand more are added every minute!
About 30% of these mobile phone owners (more than 700 million and growing) have browsed the Internet through their mobile phones. This is the reason why mobile Web browsing is predicted to become the next predominant Internet platform.
Many consumer-driven companies have already seen how promising the mobile platform is and have already equipped themselves with a mobile Web site. A mobile Website today is not simply a passing fad. It is predicted that in the future mobile sites will prove to be a necessity, even the new Internet standard. Right now, there are millions of WAP mobile users browsing the Internet. But, there is an unfortunate disparity when it comes to the number of consumer-focused mobile Web sites that actually load properly on phones.
This is because there are special procedures involved in designing a mobile Web site. The following article is meant to help you learn how to design and build a mobile website.
The Basic Principles of Mobile Website Design
First, you have to know that the Web site design and construction generally used for computer browsers is not compatible with that of mobile phones. For your site to work well on a mobile handset, it must follow the accessibility design guidelines for building mobile Websites which are set by the W3C.
In mobile phones, the technology called the WAP is used for browsing. Because of the limitations of WAP browsers in terms of screen size and allowable download, you will need to strip down your current design.
The easiest way to build your mobile Website is to modify your existing Internet site to make it compatible for mobile handsets. If you decide to do so, expect that there will be big changes in terms of layout, design and construction.
Here are some principles about mobile Web design that you should take note of before proceeding to build one of your own:
- Websites which make use of tables for the main layout will not look right on mobile phones.
- Your site must use CSS for the layout to ensure maximum compatibility.
- It is easiest if your site is coded using either XML or XHTML, with your character encoding set at UTF-8.
- You have to consider that different mobile phones have different screen sizes. This can be a major headache if you want your mobile Web site design to run on all of them.
- Remember to put all the most important information that you want mobile users to see on the top of the page. It can be time consuming to browse through a mobile site, not to mention tedious to read through. Make your mobile site design convenient for your consumers.
- It is difficult to enter text in mobile Web sites. You may want to offer your user the convenience of radio buttons and lists, which they can choose from depending on what they need.
- If you wish to put images on your mobile Website, it should be in jpeg or gif format.
- A good mobile Web site design provides back buttons and links. Many phones are not equipped with back buttons, so try to provide one.
- Keepin mind that the maximum page size for a mobile page is only 20 kilobytes. Make everything fit into that number.
- Lastly, you should bear in mind that users are actually paying fees to access your mobile Website. Make sure that they are getting their money's worth!
How to build a mobile Website
You can also opt to make your own mobile Website from scratch, independent of your current Internet site. First, you can build your mobile Web site through the WAP or WML format (though HTML can be used too). WML cannot be run with all Web hosts. You will need to ask your Web host to make necessary changes in their Web server configuration before you can build a mobile site using it.
WML is the acronym for Wireless Markup Language which can be imagined as the light-weigh version of the HTML. It is similar in some ways, but deferent enough such that you might find it hard to switch from one to the other. Be warned, though, WML is limited in terms of features and tags.
Creating a WML document should be easy. You only need a notepad or reliable text editor, as with HTML. As a header, begin by typing:
"http://www.mymobilesite.com/index.xml">
This code will tell the mobile phone that it is currently reading a WML document and specifies which WML standards to use.
When you build a mobile website, your pages are called cards. Your mobile site cards are what is seen on the handset screen at one time. You can add more than one card into your WML document. Declare them by typing:
This makes a card with the ID "main" for linking purposes which will display a title text on top of the screen: This is My Mobile Site
It is important that you close your WML tags properly. One improperly closed tag will render the page unviewable. Each and tag must be closed with a corresponding and tag.
The good news is HTML can be used to design and build your mobile Web site. Here is a step by step guide to doing this:
- To make things easy, you will need Adobe Creative Suite 3 which has Adobe Device Central and Dreamweaver CS3.
- Launch Dreamweaver CS3. From the Create New option, click on More..
- Choose HTML from the Page Type button then publish out with the use of the XTHML Mobile 1.0 profile which can be found beneath Doc Type.
- You can now begin to code your HTML-based mobile Website. It is best that you go for a simple HTML design which is more focused on great content than all the other design perks. There are a number of online sources that can help you with the fine details of HTML coding for mobile Web sites. Try searching for these on Google.
- Once you are done with the coding, you may want to test the mobile Web site you have built. You do not test it within the browser. Choose "Preview in Browser" then click on Adobe Device Central from the resulting menu. This changes your interface from a desktop to a mobile.
- In Adobe Device Central, try to choose a target device (look at the Available Devices panel found on the left of the screen) which through which the mobile cards will be displayed. You have the option to choose them manually, or you can build a custom device profile which contains all the possible devices that you wish to support.
- As soon as you are finished, your code can be loaded and rendered on the devices you have chosen.
It is difficult to support all the available devices out there. The best solution to keep your mobile Web site as clean and as simple as possible is to allow it to be viewable across as many mobile platforms and portable devices.
As you can see, there is a lot to consider to design and build a mobile website. The principles of mobile design are different than those of conventional Web site design. If you do not have the time or patience to learn new coding practices, then consider hiring a firm that specializes in mobile Web site design. Many firms also offer mobile SEO andPPC services as well, in anticipation for the growing need of instantaneous information.
If you currently do not have a mobile Website, you are potentially losing out on extra business. Consider getting one today!
