Designing and Developing for Mobile Web
Posted by Rich Holdsworth on July 17, 2009 at 11:58 amFiled under: Mobile Device and Browser Detection, Mobile Internet, Mobile Web Design, Mobile Web Development
Mobile Internet is a tricky platform to develop for unless you use the right tools and have the lowdown on what works and what doesn’t.
As there are so many different devices out there in the worldwide marketplace any developer will meet a number of challenges. This mainly concern varying screen sizes, a number of markup languages and device inconsistencies and capabilities.
Obviously, developing mobile internet applications that work across the widest range of devices should be paramount to any serious developer or designer. If your site cannot be viewed on any percentage of mobile browsers then it is unlikely to meet its full potential or any at all.
Often, brand integrity is as important as user experience. This is especially true where mobile marketing meets customer engagement but it is also important to ensure that users have a good experience on even the simplest of sites.
Some older phones have incredibly small screens, while newer smartphones are being released with increasing resolution all the time. Adapting only to this presents significant challenges because typical applications are not all that aware of the device that is browsing at any given time and the screen resolution that it supports.
This is also true of many of the other capabilities and bugs that devices bring.
Of course, development is not just getting the right stuff onto a device – you also have to write great applications too! So that you, as a developer or designer can concentrate on what really matters, the service you provide, Wapple have developed a device independent markup language that helps you focus on functionality while you can be sure that what you want will be delivered to mobile browsers in an optimal fashion.
The product that Wapple have developed is called Architect. At its core is an XML based markup language called WAPL (Wapple Application Programming Language).
WAPL allows your application to describe the layout, components and functionality that your application wants to display on screen just as your application would if it were delivering HTML to web browsers.
WAPL is converted in realtime to the exact markup that your application should deliver to the particular mobile browser that your visitor is using. You can read more about the importance of optimizing for every mobile web device in this article from Rich Gubby.
All communication with the user comes from your server, and all interactions take place with your application. So, WAPL is simply an intermediary language between your logic and the end user mobile device.
If you are familiar with web development then using WAPL in your application is really easy. You can using WAPL statically or dynamically, just as you would with HTML. All that you need to do is pass your generated WAPL through the Wapple Architect system using SOAP. Architect then responds with markup you can reliably serve to the browser.
Everything is taken care of. Images are resized, pages are optimized, quirks of the browser are ironed out and the delivery is as perfect as the device in use can handle. You can rely that users will be able to engage with your application just as you need them to.
The bottom line is that WAPL makes your application work on ALL mobile phones.
Of course, you still have to write a great engaging mobile application that works well. This is something that WAPL can’t do for you but we can offer some thoughts and ideas on how you can make sure you’re on the right track.
Mobile users do not want to search for information or services. You have to serve them. They want to get to the meat of your application as fast as possible so always be aware that too much fluff around the content that matters will turn your visitors off.
Keep pages clean and focused.
Images are an important part of a mobile site. Presenting users with a trusted brand is an important factor in this. Old-skool standards suggest that you should keep small and images to a minimum but when you are using a technology like Wapple’s you can be sure that images will be resized down to the phone screen in question. Still, you should not overload your page as a lot of visitors will still arrive via a mobile operator and not a wi-fi broadband connection.
Text is always preferential to graphics as the phone browser will pretty much ensure that its native fonts are screen readable (unless you purposefully make them tiny!). Text is always faster than images to load, so use text wherever possible and only use graphics where you really need them.
Also, it is worth considering how delightful it is to read well proportioned text on a mobile device. Get it right and your users will feel very comfortable using your services.
Fitting the horizontal width of the screen is essential. Despite the ability of some smartphones to display full web pages, the experience on horizontal scroll is not a good one to say the least.
Wapple technology naturally fits the sites you describe in WAPL to the screen width of any device in use. The result is a more easily consumed site and better user experience.
Channeling your content is important if you have a large site. This comes back to the idea that users want to be served. By using carefully and concisely defined channels you can allow the user to find what they are looking for without having to type in any kind of search criteria. This is a big plus for your users and will win you a lot of friends.
So, there are some starter points. Expect to see a more detailed article on designing the perfect mobile site in the near future.
With Wapple Architect, you have the tools for delivering to mobile devices. Hopefully you now have some ideas for how you might engage your users as well.
If you are not a developer, perhaps you are more visual or do not have an existing application to mobilize, then you might want to check out Wapple Canvas. It is a graphical web-top tool for for creating mobile internet sites and it is perfect for designers who want to build a mobile site and have it deliver perfectly to every mobile browser. The same technology that optimizes sites is employed but you don’t have to dream in code to use it!
If you have any questions, thoughts or ideas, just comment below and I’ll answer asap!
Related posts:
Recent Comments