Results 1 to 3 of 3

Thread: Mobile friendly website

  1. #1
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Mobile friendly website

    Hello friends,

    i wanna know a way to optimize a website compatible to all mobile phones.
    Suppose i have websites in html, php or ASP and i want all my websites to be accessed from mobile phones. What i need to do? do i need to learn wml? Also i want to know how some websites run properly on smartphones by default(without making any changes)

    please suggest me and thanks in advance

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    There are two main concerns:

    1. Type of device.
    An old black and white 200x200px cell phone might be able to browse the web. And so can an iPad. Both are "mobile devices". If you are only looking at the newest generation of mobile browsers, you will have relatively few problems. An iphone, for example, can display any page that safari can display and it shows it at the same resolution as a computer (very small on the screen) and you can zoom in to any element you choose. This means that designing for an iphone is not particularly difficult. But now consider the old cell phone.
    It's good to have a cut off in mind for what type of device you're trying to support. If it's really *everything* then you will need a fallback that is text only, not even relying on CSS.

    2. Features. I'll break this down into 3 main areas:
    1) Input methods. This is crucial but easy to overlook. An iphone only allows scrolling and taps for clicks, on the touch screen. There is no right click, no double click and no drag. (Or, such as with double click, they are disabled for the browser because they do other things). For some devices, there isn't a mouse at all and arrow keys are used to select links. For this reason, accessibility is a huge concern and if you can test on a few devices you'll get an idea about what is possible. Summary: only use basic, standard links. Or at least have those as a backup. Users on a mobile device probably won't be bothered by extra things they can't use (especially if you make it invisible in those cases) as long as there is some method they can use. This is similar to SEO: a complicated menu is fine, but you need that text-only navigation section at the bottom so that the search engines can find the pages too.

    2) Browser Features
    This varies a lot by browser/device, but basically anything that isn't standard HTML may not function. Javascript is surprisingly well supported now but I wouldn't say it's reliable except in the newest devices. CSS is supported by almost everything (though perhaps not perfectly so be careful about complex layouts) except the oldest devices. Flash is not supported at all on most devices. If you are interested in the iphone/ipad, those specifically do not (probably never will) support flash. A few devices do, but likely not the majority of your mobile visitors. Remember also that mobile devices often don't have full file systems. This means limited downloads, and even more limited uploads-- on the iphone the "file" type of input (with the "browse" button etc) is just disabled. Typing and selecting are also difficult so be aware of that when creating any interactive parts of the site. Make the login form as simple as possible to save them time.

    3) Screen size. This is a very important part of designing for mobile devices. Some of the newer devices (see description of iphone above) can zoom and make this much smoother, but even if that's the case the page is small when viewed in full. And some devices can't view the whole page, just a section and you can scroll to see more. I've heard that a 250px or 300px (width) layout is preferred for mobile devices, though that's only for the older ones. It would look fine on the newer ones too, but it isn't necessarily required.


    In general, you'll need to decide whether you want one version of your site or two or more. If you want one version, make your site standards-compliant, using current technologies (don't use HTML5, etc), and always have a backup for any advanced features like Javascript, or maybe even CSS. Ask yourself: if I turn off all extras on my browser, does the site look ok?

    And also find a cutoff: it's probably best to ignore that old phone mentioned above-- no website is going to look perfect, so they'll forgive you.


    Other concerns include:
    1. Data size-- limit your pages and images in size, but of course this improves all the time. People who often browse the web probably have 3G, and now 4G is starting to spread so it's only a matter of time before this isn't a major concern-- but also remember that some visitors will have limited data or must pay per byte.
    2. Some websites get designed specifically for certain browsers. Gmail, for example, is designed for the iphone and I believe that page is only for the iphone. You could do this if a lot of your visitors are using a certain device.
    3. How will you detect the device? And remember it's not always reliable. Also it's best to give the user a choice to go to the "full" site because 1) their device might support it; 2) it might have options that are limited in the mobile site and that can be very frustrating.
    4. The IP address of a mobile device is not as stable as a computer. I don't know anything about how cell phone companies work, but certainly jumping from wifi hotspot to wifi hotspot you end up with changing IPs. If any security involves this, you'll have to rethink your system-- it's similar to laptops, but more frequently changing.


    You mentioned PHP and ASP. These are irrelevant to the output device because they operate entirely on the server and generate a page. Then that final page is sent to the device. The concerns are HTML, CSS, Javascript and plugins-- things that operate in the browser (client side).



    Finally, why will mobile users be visiting your site? Will it be rare because they just wanted to look something up quickly? Or will they be actually using (interacting with) your site? If it's purely for "information extraction"-- so that users can see the page on their phone, that's easy enough and not something to worry about. But if you want users to spend a lot of time on your site on their phones, then this is another issue entirely and probably worth developing a special mobile site.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,937
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    Thanks for your thorough answer Daniel - you/it are most helpful.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •