Web Design and Applications – W3C

The HTML5Apps continues its series of interviews of European
SMEs. Today, we go to Germany, where the
Cocomoreheadquarters are
located. The discussion was held with Alejandro Leiva, based in the
Cocomore Spanish office in Seville, is the technical lead of mobile
and emerging technologies, and with Christian Winter, Head of
Frontend Development in Frankfurt, specialized in responsive Web
design and the optimization of interactive Web applications for
mobile devices.

Hello! Would you please describe your company, its
mission/vision and its customer audience?

Cocomore is an international agency for Marketing and IT
services with 140 employees at our head office in Frankfurt, and in
Geneva and Seville. We are developing integrated communication and
IT solutions with best practices in crossmedia, branding, CRM,
marketing automation and e-commerce.

Our mission and our promise are measurable results in these
particular areas, achieved using creativity and technology. Our
main focus is on projects where it comes not only to appeal to
customers, but also to create a long-term customer relationship.
Therefore, data and IT is important but above all, you need content
which is appealing, entertaining and useful for communication with
customers.

That is why Cocomore has not only designers and creative
directors, but also editors. On the basis of our four values, which
are innovation, tradition, progress and responsibility, our agency
is trusted by leading clients including: the European Union, Lilly,
Nestlé, Procter & Gamble, Merz, RTL and Sanofi. Our customer
relationships usually grow from year to year and are long-term
based.

Can you tell us more about cross-platform mobile applications
you have worked on?

Cocomore has extensive experience in the implementation of
native and cross-platform apps.

Recently, we have accomplished a project regarding a
cross-platform mobile application for Germany’s largest drugstore
chain: dm. We developed a game app, named “Mission Morgen” to
support communication around sustainability topics. After the
functional concept phase was completed, we looked at which
technological approach would be best to implement the app; in
particular, we evaluated which of a pure native or hybrid app would
fit the project. For reasons of cost, time, supported devices and
the required features, we decided to go with an hybrid app.

Our technology selection has proven to be the right one: the
combination of ngCordova, AngularJS and Ionic allowed us to focus
on the important tasks as we did not need to spend much time on the
development of basic functions. Especially ionic provides an
optimal basis. With the use of AngularJS, we were able to divide
the tasks clearly and to scale optimally the frontend team. In
addition, thanks to this technological choice, we have retained
over the entire duration of the project a good code base and we
were able to integrate new modules quickly and with high quality in
the existing app. The backend development was realized on top of
Drupal. The resulting free application is available for smart
phones with the operating system iOS or Android.

As another example, Cocomore developed a pure native mobile
application for Pampers. We are currently evaluating relaunching it
as a hybrid app. Our goal is to provide updates with new features
or extensions several times a year. Regularly, we provide
information with the dynamic newsfeed on the homepage of the app
about current actions on the Web site and on Facebook
(competitions, new craft instructions, new stories to download).
The Web site and the mobile app are optimally matched: there is no
duplication of content, the app features complement the Web site
features.

Initially, when we first developed the app, we wanted to target
as many mobile devices as possible, so we designed two native apps,
one for Android an one for iOS. We have now decided to re-launch as
a hybrid app since this means a smaller development cost and the
opportunity to operate on more mobile devices.

Cocomore has realized many other mobile projects, e.g. an iPad
app for our client Fresenius. This app teaches health care
professionals in an entertaining way about the benefits of the
product OsvaRen. It is a very visual app with embedded videos and
an in-app game.

We also developed a guided product tour for the medical device
company Spine Art. It shows to surgeons the product range of
implants, how-to-videos and animated 3D visualizations of their
products.

Other projects included a career app for the HR department of a
large pharmaceutical client, a recipe database targeted at diabetes
patients to easily monitor calory intake, an ecommerce app allowing
consumers to shop diapers when waiting for the bus or tram. And
many more.

What are your views on native vs Web apps?

A native app needs to be developed in specific programming
language which is determined by the operating system such as
Objective C, Swift, Java, C ++, C #, XAML. For that you need a
programmer who has knowledge of all development methods (IDE’s
development tools, emulators, debuggers, SDK’s, etc.) in addition
to the programming language or more software developers for each
varying operating system.

Web apps are very different in this regard: they can be
programmed by an experienced Web developer for several different
smartphone operating systems without having unique knowledge about
the device-specific development methods. For us, with our strong
existing engineering skills in Web development, this is a huge
benefit.

Moreover, native applications are designed for an operating
system such as iOS, Windows Phone or Android, which means they run
only on these devices. Here, the different operating system
versions have to be considered, so that the correct functionality
is ensured. When a new version of the operating system is
introduced, the native app must be updated.

This does not affect Web apps. Web applications are specially
programmed HTML5 sites that recognize the mobile device and
optimize the content for representing, they run on all Web-enabled
devices.

The big drawback of Web apps is their lack of access to phone
specific functionalities like camera, microphone. Since Web apps
run in the browser of the device access to phone hardware is very
limited.

Cocomore deliberately focuses on cross-platform mobile
applications (also called hybrid apps), which help bridge the gap
between native and Web apps. This kind of application consists of a
Web app, i.e. a backend and frontend running on a server. Thereby,
the app can also be accessed by desktop browser. It is then
displayed as a normal Web site.

The second component is an app container which can be uploaded
to the various app stores. This container allows the access to the
smartphone hardware and it draws its content from the Web app.
Thereby it combines the advantages of both types of apps. In fact
those hybrid apps are build using Web technologies and with some
native code, so they can be converted via framework in a native app
container very easily. But due to their architecture leveraging the
many advantages of the Web applications, such as the cross browser
compatibility and the cost benefit, the future could be these
hybrid apps. The most important factor being here the availability
of all the native features.

Ultimately, which considerations drive your choices between
native or Web?

Depending on the individual requirements, each of these
applications can be a better choice. If you want to create an app
that makes very advanced use of the hardware and has high
performance demands (execution speed, processing speed, output
speed / graphics), a native app will be the better choice. The same
applies if a high level of integration in the operating system such
as look and feel of the UI elements or interaction with other
applications is required. Also if the app should be executable
without an internet connection, the native app is a better
fit.

A Web app is particularly advantageous regarding total cost of
ownership and implementation time. It bears comparably low
development costs and short development periods. This technology is
directly accessible via a link, so it has the ability to run on
many mobile devices and operating systems and runs on each
smartphone without installation.

In practice, the approach we currently recommend to our
customers is to have a mobile Web portal for general information
sharing, and a cross-platform hybrid app for more interactive /
engaging content.

What is missing to do the interactive content from within the
browser, rather than going through an hybrid app?

There are various considerations that makes a browser-based
approach less attractive:

• Our customers don’t necessarily accept that a browser-based
  approach can give good enough results in terms of performance and
  UI,
• They tend to see also a “real” app as a better
  marketing/communication channel,
• The app tend to be for shorter-term campaign, with often a
  gamification aspect, and it’s not obvious to end-users that you
  would obtain a game or game-like experience from within the
  browser,
• On the Web, our quality expectations require good results on a
  much wider set of platforms that we would target with our hybrid
  apps (i.e. mostly iOS and Android), and thus the more interactive
  you make the Web app, the more likely you’ll encounter bugs in
  older or less advanced mobile platforms.

How do you deal with adapting the user interfaces of the apps
across devices and platforms?

For adapting the app across devices of various sizes and
shapes, we’ve found that using responsive design via the Ionic
framework lets us deal quite well with the huge diversity of
devices on the market, from smartphones to tablets. There are some
issues when dealing with older Web views (esp. on Android), but it
remains overall quite manageable.

With regard to the specific native look and feel of each
platform, we usually recommend to use a single UI paradigm across
platforms, without trying to customize it. Once you start
customizing the UI, and taking into account e.g. the inconsistent
availability of a hardware back-button between iOS and Android, it
makes maintaining the whole app workflow much more difficult.

As an SME, what are your needs in terms of Web standards? Which
Web standard(s) are you waiting for specifically?

The arrival of the Push API is very exciting for us! Clearly
this will make the offering of browser-based content a lot more
attractive to many of our customers, even for the simple mobile
portal. We can’t wait to see it adopted in more browsers, and we
already know we’ll use it in our projects in the upcoming few
months.

An area where we’ve found we had to rely on specific Cordova
plugins in our hybrid developments is for media playback; for
instance, we’ve found that playing an audio file in loop using the
basic audio capabilities of a Web view wouldn’t work well on
mobile, and that’s a pretty fundamental issue e.g. in a game.

We’ve also had issues with using Web sockets in some older Web
views, but this had more to do with implementation bugs than issues
in the standard from what we’ve determined.

We’ve struggled for a while with storing data —
localStorageproved unreliable as the stored data could
be wiped out by the OS; but we’ve now switched to Indexed Database
which seems to solve that issue well enough for us.

Any other business related to mobile, Web and standards?

We are an agency for marketing and IT. We help our clients with
state-of-the-art technology serving a marketing purpose. This can
be CRM system implementation, Web and app development, e-commerce
platform development, data management, social media and the like.
In most of those projects, and in today’s world, systems are no
longer independent. A very big issue is the creation of interfaces
in order to connect systems creating a technological ecosystem.
Standards around communication interfaces between systems are a
very important topic. Being in a position to shape and apply
standards is one of our motivations of being a W3C member.

Thank you!

Filed under:

html5apps