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 devices. 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.Mobile phones that have separate data plans are not able to download large amounts of data quickly so designing for quick download time is crucial.
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:
- Your site must use CSS for the layout to ensure maximum compatibility. Avoid using tables.
- 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 devices have different screen sizes. Design and build with a "fluid" layout in mind.
- Remember to put all the most important information that you want mobile users to see on the top of the page like site search and navigation. 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.
- Design for fingers. Click targets should be a minimum of 30-40px in size and use whitespace in between elements to ease clickability.
- Keep download time in mind. Avoid background images… they can reduce readability in certain lighting conditions. Combine smaller images, like icons, into one file and use css to position them on the page. This reduces the number of http requests your device has to make. Lastly, reduce size of images and minify javascript.
- Forms can be difficult to use on a mobile device. Since text is time consuming to enter, you may want to offer your user the convenience of radio buttons and lists, which they can choose from depending on what they need. Also, reduce the number of screens a user passes through to complete a form. Form labels should be top aligned rather than left aligned to save space.
- Forms should require the minimum amount of data input and should remember the data for the next time a user visits the site.
- Most browsers don't support plugins or extensions
- Lastly, the phrase "less is more" holds true to mobile design. Avoid using unnecessary graphics.
How to build a mobile Website
Building a mobile website is very similar to building a full scale website. They both use HTML, CSS and Javascript, and can be built with your favorite web development tool. Most mobile browsers also support HTML5 and CSS3. However, here are a few things that need to be added to a mobile page to make it display on a mobile device.A few tags are needed in the <head> section of the webpage to let the browser know that the page is ready to be viewed in a mobile browser:
<meta name="HandheldFriendly" content="True">More information on these meta tags can be found here.
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
Also, if you want your website to detect what type of device is trying to view the site, you will need to create a php script that detects the incoming device and changes the website layout accordingly. There are many available solutions out there and can best be found through a browser search. The most important thing is to not base the script off of a list of devices (iphone, android, windows phone, etc.), but rather detect what type of device is viewing the page. Mobile devices come and go updating lists can get tedious.
It is difficult to make your mobile website display the same on all mobile devices. The best solution to keep your mobile website as clean and simple as possible and to make sure it has design and functionality fallback options for older mobile devices.
Resources
For a good list of mobile resources, click here.Some Issues We Address for web mobile -
- Most Fly-Out Menus Don't Work - A mobile Phone Has No Mouse!
- Two and three tier
fly-out menus may look cool, but they don't work on mobile devices.
I am referring to the fancy menus where you position your mouse over a button, and a sub-menu flies out with several
options to click. Since mobile phones do not use a mouse - an event based on a mouse hovering over a link -
just doesn't happen!
Whatever is supposed to "fly out" stays hidden and that part of your site is unavailable.
Menus, like the ones on this page, have links organized into logical sub-groups (like fly-out menus), but need no mouse to reveal contents (all options - always visible). In addition to flawless function on mobile phones, they are far more search friendly.
Note also, the iPad and new Windows Tablets are all touch screen and will not respond to many mouse related commands either.
On the topic of mouseless mobiles - take a peek into the future of Smartphones & docking stations - follow this link! - Flash doesn't perform well on mobile devices!
- Apple's Steve Jobs says -
"Flash was created during the PC era – for PCs and mice. Flash doesn't perform well on mobile devices, it drains the battery and it's not optimized for touch interfaces".
Android, Windows Mobile and some others are presently working on Flash support, but Apple (iPhone) has no such plans. On newer Droids, Flash movies (like Youtube) will work if you manually start them with a click. Otherwise, they appear as a blank space with a Flash icon in the middle.
Our advice - avoid Flash, unless it is really necessary. Don't waste your money on Flash intros that no one watches.
Ask yourself - is a gratuitous Flash intro even appreciated by a business user? Answer: Why do do you think they all have "Skip Intro" buttons?
Click here to see animations that don't use Flash. They work on ALL web devices, all browsers and are not suppressed by Firefox (on a PC). - Tiny Font Sizes Are Too Hard To Read On A Mobile Phone!
- Lots Of Websites Use Tiny Font Sizes, we use a 14 point Arial or Verdana font as the default font for all pages.
It is easily read on a mobile, as well as on a PC.
There is no good reason to have the text size be so tiny - mobile or anywhere. - Simple Tech Works Better On A Mobile Phone, And Faster Too!
- The fastest broadband mobile is reminiscent of early 90's dialup service!
Sites that take too long to load on mobiles may get the axe!.
What works better on mobiles works super on a PC or laptop.
We always use the LEAST technology needed to get results here - mobile or not. Complex technology is not only too slow, it breaks down on mobiles. Google is demanding faster load times for all sites and we are delivering! - Standards Compliant CSS Layout And Uncorrupt Code A Must
- CSS Layout is more search friendly and gives a mobile device
less to handle. Clean, error free code displays everywhere perfectly - especially
critical on mobiles.
Most conventional browsers can compensate for technical errors and display a badly corrupt page. The more simplistic browsers in mobile phones can not. If the page is not put together right, it will fall apart on a mobile, or "smartphone" .
What if I say that this is one of the best article of this topic & it is well written with the good amount of content. Web Designing Services in Delhi
ReplyDelete