Mobile web development, is a service that is
starting to be requested more and more by our clients. Social Media
used to be the buzz word of the day, but there is a new sheriff in
town - Mobile Web and Mobile App development.
With the rise in smart phone technologies and the way that we
use our mobile phones to browse the web and to interact with
businesses online, it is very important that your website A)
renders correctly on a mobile browser or B) you've created
a unique mobile app so that your customers can easily use your
services on their mobile phones.
Mobile App Development
On the flip-side of the coin, the second mobile strategy to
consider is whether to build a native mobile application to roll
out across multiple device platforms like: Apple iOS, Android,
Blackberry, WebOS, Windows Mobile and Symbian OS. A mobile
application can be defined as software written for mobile devices
that performs a specific task, such as a game, calendar, music
player etc.
This approach provides for a much richer and better user
experience as it focuses solely on the end-user and what they may
want to get out of the application. A mobile application allows you
to integrate completely with device functionality to ensure
the best features possible within your app, such as GPS, camera,
calendar and accelerometer.
Take a look at an example of a
mobile app (give it time to load all the assets)
we developed for Honda at the Johannesburg Motor Show. This app
allowed visitors to the Honda stand to browse all of Honda's
products and read about the company and its vision for the
future.
Mobile Web
There are 2 ways to approach your mobile strategy, and the first
discussed here, is a Mobile Web strategy, in
which you aim to make your website as Mobile Friendly as
possible. In order to ensure that your website is 'mobile friendly'
there are 3 goals you need to accomplish:
- Presentation - make your website work well on
a variety of different screen sizes.
- Content - adjust content for mobile users
which may mean streamlining content and functionality specifically
for what a mobile user would need.
- Performance - give users a smooth experience,
even on a slow connection by only sending them the bits they will
actually need.
There are three different technical strategies to consider
before undertaking a mobile web development project. We discuss
each here:
1. Separate Sites Approach
This is a very popular approach and many of the major web apps use
it including, Facebook, Digg, Flickr and YouTube. By implementing a
'user-agent detection
sniffer' you can detect whether a person is browsing your
website from a mobile phone and direct them to a separate url like
http://m.mywebsite.com. This approach can solve all the 3 goals
above at once - if the user's browser looks like it's on a phone,
you serve them mobile content, formatted for their phone and
optimized for speed. The downside to this approach is that you now
have to maintain 2 separate sites, 2 sets of content and 2 sets of
front-end code.
2. Responsive Design
Approach
This apparoach is actually quite old, and ditches the user-agent
sniffer and instead makes the webpage respond on the client-side to
the mobile browser's capabilities. By implementing best practice
coding techniques and HTML/CSS/JavaScripting standards, you give
the mobile phones browser the best chance to render the website as
it sees fit for the mobile phones capabilities. This approach will
only cater for 2 of the above goals: 1) Presentation and 2)
Content. The third goal 'Performance' will be difficult to achieve
because content must be altered on the client-side with
JavaScript and this could slow browsing down.
3. Hybrid Approach
The third and final approach aims to combine the first 2
strategies to avoid some of their shortcomings. This Hybrid
Approach centers around breaking down mobile development into its 3
goals (listed above), and then applying the best techniques
available to tackle each goal individually. The most important
concept to remember is that server-side and client-side techniques
can be combined to fit your situation.