windowsvienna.com | Windows of Technology

May/13

31

Responsive HTML5 Web Application Design

Introduction

There is no disputing that HTML5 with CSS3 are revolutionary technologies that have brought the entire process of web design kicking and screaming out of the stone age. With the help of CSS3 media queries and HTML5 APIs such as geo-location, server sent events and local storage it is, at long last, possible to create web sites and web applications that provide visitors with a rich, interactive and seamless experience. Exciting though all of this might be the sheer scale and breadth of these new technologies presents a significant learning curve to be negotiated before you can create your first HTML5 webapp. Added to this is the need to comply with users’ expectations that the app will be responsive – i.e. work well on smartphones, tablets as well as large desktop screens. Well, a solution may well be at hand in the form of jReply Designer- an Integrated Development Environment, IDE, for creating responsive HTML5 web applications that protects you from all the nitty gritty details.

How it works

Perhaps the first thing to appreciate is that jReply is a service in the cloud. It allows you to manage every aspect of your web application – down to providing search engine validation meta tags and Google Analytics code – from any location, just so long as you have access to the Internet and to Chrome (Chrome is the only browser supported by the IDE which is still in beta).

Once you have logged in you are presented with a screen that seems refreshingly similar to the Visual Studio family of products. A toolbar at the top of the screen provides access to all of the web pages in your web application along with options for configuring the page currently on view in a resizable central pane. Status and information messages are presented in a status bar at the bottom of the screen. The status bar also contains buttons that allow you to view and manipulate popup page elements at design time and the ability to preview your web application as it might appear on various devices. This feature makes it incredibly easy to test the responsive behavior of your application – the way the application will look + behave on phones, tablets and desktops.

Adding new controls to a web page is easy – simply identify the correct control in the “Page Elements” sub-pane on the left hand side of the screen. Once a control has been added it can be configured by hovering on it and using the pop-up configuration editor that appears when it is clicked. A minor gripe – it is not possible to drag controls around to a new location as one expects to be able to do in a traditional IDE. Instead, you have to keep clicking on arrow keys that move the control with a screen refresh after each click owing to the fact that the newly configured preview has to be fetched from the server. At the time of writing this process was not too disruptive but may well become so as the jReply servers start seeing more traffic.

Styling & Layout

jReply uses jQuery Mobile in the background so it should come as no surprise that your first port of call when it comes to styling an application is designing a suitable jQuery Mobile Theme. Theming is nice but it can only take you so far and this is where jReply really starts to show its mettle. For starters it offers a very simple point & click CSS3 rules editor that makes it easy to define most commonly used CSS3 attributes. What is more, media queries are silently defined in the background which makes the process of creating responsive CSS rules dead easy. Once a rule has been defined applying it to a page element is merely a click away.

Responsive web design is all about making good use of available screen real estate in the best and most aesthetic way possible – irrespective of the nature of the screen. jReply provides a mind boggling arsenal of grid and other layout controls to help with the task.

Scripting & External Data

In jReply you can write your own Javascript and hook it up to the jReply event streaming system that abstracts all the ugly details of jQuery Mobile event handling and provides a simple high level interface. The creators of jReply have implemented a runtime Javascript library that contains a number of utility functions for manipulating jReply controls, creating dynamic content and more. Accessing external data on-the-fly is possible too by using a jReply “gofer” object that is in essence a high level interface for accessing external data sources via JSON-P.

Conclusion

There can be little doubt that jReply is a powerful and well designed IDE. The fact that it lives in the cloud may leave some feeling nervous on the grounds of speed & ease-of-use or fears of relinquishing control. The former concern is in my experience by and large unfounded, at least at the moment. The IDE may be in the cloud but it is very responsive and accessing data in the cloud has not proven to be as disruptive as I had feared. Data security is another matter – the creators would do well to clarify what measures they take to ensure the security of application data and what happens to all the hard work should their servers undergo a fatal crash. On the whole though, jReply offers a handy way to rapidly prototype a responsive HTML5 application.

· · ·

No comments yet.

Leave a Reply

You must be logged in to post a comment.

<<

>>

Theme Design by devolux.nh2.me