Building Mobile Web Apps the Right Way: Tips and Techniques [09May11] - 0 views
-
Here’s a quick breakdown of the big differences between desktop and mobile platforms: Mobile device hardware is smaller and generally tends to have lower hardware resources than desktops/laptops. Smaller screens bring about different design considerations and challenges. Touchscreen technology introduces new interaction concepts that differ from traditional input devices (keyboard and mouse). With a mobile device, internet connectivity is not always as reliable as a hard-wired broadband connection, which means internet connectivity is a concern and data transfer could be significantly slower. Although these sound as if they are hurdles to get over, with careful thought and consideration, there’s no reason why they should be. Touchscreen technology is exciting. The smaller screen design will really make you think about how to get the user to interact with your mobile web app in the most satisfying way possible. What we should really be doing is looking at the list of differences above and seeing opportunities to deliver our content in a different way. Building mobile web apps will be a paradigm shift from traditional web development and web design.
-
In the next sections, we will discuss development/design considerations, as well as concepts and techniques for building mobile web apps.
-
Leveraging CSS3 Mobile web browsers these days are pretty advanced. Android devices use a mobile version of Google Chrome, whilst the iPhone does the same with Apple’s Safari. Some mobile devices come with mobile Opera and others allow you to install a browser of your choice such as mobile Firefox. So we’re talking about some pretty good browsers in terms of CSS3 and HTML5 feature support. CSS3 allows us to render things through code that would previously have required an image. We can use color gradients, draw rounded corners, create drop shadows, apply multiple backgrounds to HTML elements, and more — all of which can help improve performance and decrease development times.
- ...11 more annotations...