Responsive Web Design for a dashboard
Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone
VIEW DEMO (source code – Responsive web design with charts in Sencha EXTJS; source code – A plot chart using HighChart javascript library)
With the increasing popularity of iPads and iPhones, I was asked me to create a web-based dashboard to provide an optimal viewing experience with all their devices – iPads, iPhones, and Macbooks using just a single-code base. I was able to achieve these requirements using responsive web design techniques with HTML5, javascript and CSS3.
The dashboard contains several distinct widgets:
1.) Multiple carousels (swiping of data) responds to both mouse and touch gestures to swipe the card to view additional sets of data.
2.) A slider to select the date and time range. The slider transforms into the standard iPhone time picker when the web-dashboard is viewed on an iPhone.
3.) Sophisticated charts embedded inside of other charts.
4.) Grids to display data
5.) Persistent Web Design techniques to retain user’s viewing settings
In addition to javascript and CSS3. I used the following technologies and plugins:
- Bryntum Scheduler and Gantt Charts
- Sencha EXTJS 4.0
- jQuery
- jQuery.ContentCarousel plugin
- Developr theming
- glDatePicker
- jQRangeSlider
- jQuery.blockUI plugin
- mobiScroll
Anthony Hoang 