I'm a web-loving, webapp maker kinda guy. Here are a few things I have created for my employers, my freelancing projects and my own personal projects

Archive for the ‘Responsive Web Design’ Category

Redesigning a website for better conversion rates

Sometimes less is better for increasing the conversion rates of a website.   At Findlaw, we redesigned the Lawyers.FindLaw.com website to a more modern and more mobile-friendly website.   In our user tests (we sent half the users to the newly redesign and the other half to the old website), we found the new website were generating better conversions.

I was one of the Front End developers who worked on the redesign of the Lawyers.Findlaw.com website. My task role involve the creating the main search box on the main page of all the websites involved. This javascript-heavy component used ajax techniques to dynamically populate the acceptable search terms and locations (from Google Maps).  In this project, the website was based on JSP and XSL templates and we used the Zurb Foundation as the base of the CSS classes.

 

Advertisement

Category:

CSS, Javascript, JSP, Responsive Web Design

Tagged with:

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

View the Web Dashboard

Category:

HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design, Sencha ExtJS

Tagged with:

My Toddler Can Learn Names

My Child Can Learn Names

.

VIEW DEMO (source code – Javascript DOM animations and movements)

I have been buying a lot of apps from the AppStore and Google Play Market for my young son. Then I thought, “Hey, why don’t I make my own app?!”

In my spare time, I developed an app to teach my 2-year old son the names of his family members and favorite cartoon characters.

There are apps to teach your toddler animal names, colors, shapes, vehicles… but what about apps to teach your toddler the names of friends and loved ones? This app can teach your toddler the names of his/her family and friends in a fun and easy to play game.

Download the game from Google Play or Play the game online

This educational game was created using HTML5, CSS3, jQuery, Javascript and a plugin to stretch images.

Category:

Game, Graphics, HTML, HTML5, Javascript, jQuery, mobile/smartphone app, Responsive Web Design

Tagged with: