Skip to main content

Post categories

  • Drupal Tips & Tricks
  • Drupal Howtos
  • Drupal Themes
  • X Twitter
  • youtube
Home
Drupal 4U
Drupal Development, Drupal Web Design, Drupal SEO
  • Home
  • Showcases
  • Services
  • Blog
  • Themes
  • About
  • Contact

Breadcrumb

  1. Home
  2. Tips and Tricks
  3. Using Drupal, HTML5, and Javascript to Create Hybrid Internet Apps

Using Drupal, HTML5, and Javascript to Create Hybrid Internet Apps

Tips and Tricks
February 19, 2015
Profile picture for user drupal
By drupal
  • facebook-f
  • twitter
  • envelope
  • print
53

Author: Jared Whitehead

In the ever evolving internet world, an issue that has been arising is “how do I take an existing website and make it cross-browser compatible?” Of course the simplest answer to this would be to create a style sheet for each browser, it’s easy but it can take up a lot of time and hassle. The same issue comes up when you want the website to be viewable on a mobile device as well.

How do we work around this?

We build a native app for each device, starting with mobile. There are over 1 million smart phone users. The current method of implementing websites may be inadequate for the modern day mobile trend. Why mobile first? Phones are coming equipped with high-end, multicore processors and are able to handle tasks that are comparable to desktops. The problem that arises is that mobile networks are generally slower and more unstable. You have to deal with dead spots, bad reception, and horrible coffee shop Wi-Fi not to mention data is limited and can be expensive.

Where to Start: Drupal, HTML5 and JavaScript

By combining the powers of a highly customizable CMS (Drupal) and the fifth generation of the HTML standard (HTML5) we can find a solution to most of the problems associated with cross platform implementation and take advantage of open source technologies. One of the benefits of Drupal is that there are thousands of modules, all contributed by its ever growing community, and if you can’t find the module you’re looking for, you can build one yourself. Drupal will be the center of the app, and content management as well.

To give relief to the Drupal CMS, use HTML5, CSS3, and JavaScript to put together a unique and intuitive UI that acts more like an application, and less like a website. All three of these technologies are native to all phones and tablets. HTML5 is extremely useful. For starters its video, audio, and canvas tags boost the power of HTML to the next level. We also use it for a JavaScript API for local storage, application cache, history management, cross document messaging, and web workers, there are many other reasons to use HTML5 as well. CSS3 replaces flash, allowing for shape transformations, transitions, and animations and because it’s supported by all browsers, use JavaScript as the backbone of the UI itself.

Benefits

One of the main benefits of this set up is that both the front-end and the back-end are versatile and flexible. The use of HTML5, CSS3, and JS creates a clean looking UI that is both functional and easy to implement. The UI itself can look, feel, and behave like a desktop and native mobile app, giving it that cross-browser compatibility. This method also saves resources and bandwidth, especially for people using mobile networks. This also lowers development costs, and saves time and money on maintenance in the long run.

Drawbacks

Developing the API is going to take some extra development time and there will be a definite learning curve to HTML5 JavaScript API and JavaScript frameworks. More resources will also be spent on developing the UX (user experience).

In the End

This is a hybrid design that favors the mobile trend. If your website mainly displays static content that requires minimal user interaction, then this concept might not be for you. This concept favors a more complex website that needs high interactivity but also requires mobile support. In the end, it all depends on your needs, and your users’ needs.

Using Drupal, HTML5, and Javascript to Create Hybrid Internet Apps
General

Read more articles

Newer
The magical trio of Drupal content management: Bundle copy, node clone and node convert
Older
Use the Drupal module "Secure Site" to easily and quickly restrict the access to your website
  • Log in to post comments
Profile picture for user drupal
drupal
53
2
min read
A- A+
  • facebook-f
  • twitter
  • envelope
  • print

Contact Drupal 4U

Get in touch for questions and our Drupal development, design and SEO services.

Contact Us

We aim to reply the latest within 48h.

About Drupal 4U

We are a group of Drupal designers, developers and webmasters and we launched this website to share our experience and knowledge with you. Drupal is a free software package that allows you to easily organize, manage and publish your content, with an endless variety of customization. Drupal is open source software maintained and developed by a very large community of developers and users.

  • X Twitter
  • youtube

Drupal Services

  • Drupal Web Design
  • Drupal Development
  • Drupal SEO
  • Drupal Migration

Drupal 4U

  • Services
  • Showcases
  • Themes
  • Blog
  • About

Drupal Links

  • Official Drupal Website
  • Drupal Answers
  • More Than Themes
  • Theme Forest
  • DXPR: Drupal for Marketers
2012 - 2025, Drupal 4U

Footer menu

  • Contact
Home
Drupal 4U
Drupal Development, Drupal Web Design, Drupal SEO
  • Home
  • Showcases
  • Services
  • Blog
  • Themes
  • About
  • Contact
Clear keys input element