Web Development & Execution
David Addison
by David Addison
share this
?fl
« Back to the Blog

Mobile web development, a new standard

04/05/2011
Mobile web development, a new standard

Common woes of the mobile developer

Web development for Smartphones comes with its fair share of challenges including the following:

  • Screen size and orientation: There are tons of phones on the market today with Internet capabilities and they all have different screen resolutions. They can range from as small as 128 x 160 to as big as 320 x 480. Many of these resolutions can also change orientation as well so 320 x 480 can instantly change to 480 x 320.
  • Home screen icon size: Most Smartphones allow you to favorite a Web site and add it to your home screen. The problem with this is that almost all Smartphones have different sizes and resolutions in which they display their icons. Styles and formatting: Like normal Web development, it’s important to test for as many browsers as possible to avoid poor rendering. Especially for mobile development, it is well documented that it’s very important to have a client sign off on a list of target devices. CSS, Javascript, images, and even simple html tables sometimes won’t display on some devices or will display differently. Targeting every possible Smartphone will cause many headaches and might not even be possible.
  • Load time and memory: Mobile phones tend to be a bit slower when loading as well as not having as much memory.

Design tips

Keeping your styles and design simple but also user friendly can solve these issues. The best mobile Web sites tend to share the following characteristics:

  • Small images: This cuts down on loading time as well as gives more space for content.
  • Large links: Anything the user touches should be at least the size of an average finger. Some people have bigger fingers and will find it challenging to touch smaller links or may click another link by mistake.
  • Clean design and navigation: Someone viewing a site on a mobile device is usually looking for instant content, not a lot of bells and whistles. Keeping the design simple and easy to navigate will make your site more effective (and not frustrate the viewer).
  • Use alt tags: Alt tags are important for any Web development, but it becomes especially important if targeting low-end phones that might have images disabled.

Frameworks & Libraries

There are many useful tools to help solve the common issuues of creating a movile Web site, as well as making it look great in the process. Some can even make your Web site appear just like an iPhone app coded in Objective C! Here are a few examples I found to be worth trying out:

Important additions

For this last section I’m going to lay out important elements that one should know before starting to code a mobile Web site.

Don’t forget to extensively TEST! Most phones have a simulator available for testing and other programs are available that test for multiple devices. Be sure to test with the real thing as often as possible because those tools are handy but not always accurate.

  • jQuery mobile: http://jquerymobile.com/
  • ASP.NET Mobile Controls: http://www.w3schools.com/dotnetmobile/default.asp
  • iui - User Interface Framwork for WebApp Development for iPhone: http://code.google.com/p/iui/

Important additions

For this last section I’m going to lay out important elements that one should know before starting to code a mobile Web site.

  • Most mobile developers target their sites to look good with a width of at least 240 pixels; most modern phones have a screen that wide or larger.
  • The following meta-tag is super handy for managing with different screen size issues with fonts and other UI elements.
  • If you are mainly targeting iPhone, and Android, it’s recommended to use a small line of Javascript to "hide" the address bar. The address bar is still easily reachable on scroll, but what the code does is simply scroll the page down enough on load so the address bar is above the fold and there is more space for your site’s content. The Javascript is as follows: window.scrollTo(0,1);
  • Code to create a home screen icon:
  • Always add an option somewhere on your site to allow the user to revert back to the normal site. Sometimes scripts make mistakes when trying to detect the OS.
  • Sub-domains are more popular than .mobi sites. For example: mobile.dirigodev.com would be more likely to be used than dirigodev.mobi.

Don’t forget to extensively TEST! Most phones have a simulator available for testing and other programs are available that test for multiple devices. Be sure to test with the real thing as often as possible because those tools are handy but not always accurate.

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×