Category Archives: Web Portfolio

The new mobile theme is alive

I am happy to announce that this blog is now compatible with smart phones and other smart devices. I just finished creating a custom theme which is similar to the current blog theme in look & feel but adjusts the blog automatically when viewed on a mobile device.

GX-mobile

For this I am using on few WordPress plugins and some tricks.

  1. WordPress Mobile Pack – This plugin automatically detects whether the user is viewing the blog from a mobile phone, smart device or a computer and depending on that it loads the mobile centric theme & layout.
  2. I had to disable Lightbox & Contact form 7 for mobile theme as they were loading JavaScript files which were not required in case of user reading the blog in a mobile phone. I am using a simple Wp-contactform for mobile view.
  3. You can contact me using the contact form whose link is given in the header as an email Icon. You can also find me on twitter, Facebook, Ovi, Flickr & LinkedIn using the links given in the footer.
  4. The theme is tested & working fine in Nokia browser, Android 2.1, iOS 3.0 & Opera Mini/Mobile. I request users to check my blog in as many devices as possible and let me know of any bug you encounter.
  5. The best way to read my blog is to subscribe to the RSS feed in your device using the RSS icon in the header. That will ensure that you get all my latest posts & updates delivered to your device automatically & with proper rendering for the device.

 

ixEdit : jQuery for Dummies

Recently, with the help of my fellow ex-SlideShare buddy Sri Prasanna, I started learning bit of JavaScript for my interaction design needs. JavaScript has always fascinated me & considering in today’s time all the browser vendors out there are trying to make JavaScript compiling as fast as possible, combined with the advent & arrival of HTML5… JavaScript is sure to take on the world.

However, I don’t know JS programming, though I have been reading by the tutorials at Eloquent JavaScript as suggested by Prasanna, but I was still looking for something which will let me do my interaction design, without going into coding. This is where ixEdit hails.

 

ixEdit is a visual JS coding tool. It comes as a JavaScript file package only combined with CSS & works under your browser. You can simply add 2 lines of code to your HTML & rapidly start to design stuff in the browser itself with real time results.

It uses Google Gears to store the changes & JS as you are working, on your local computer only as long as the filename or browser doesn’t changes. This I hope will be changed to HTML5’s “File” feature for local storage.

The best part is, you can make all the interaction, events you want & then just deploy them at which ixEdit will give JS code which you can either put in your HTML file itself or modify to include in a separate JS file.

Microsoft’s debugging tools for Internet Explorer

Most of the web designer & developers are using some sort of tool like IE tester or a separate machine running IE 6 or IE 7 to check for compatibility errors with these browsers. Also, historically it’s been hard to debug for IE 6 & 7 as we do not have something like Firebug for Internet Explorer.

Some of us already know about the web developer toolbar for Internet Explorer, but today Microsoft released a new visual debugging tool for Internet Explorer called Expression Web SuperPreview for Internet Explorer (Microsoft, please hire someone to come up with short names for your product). Its like IE tester but from Microsoft, means it has the native real engine of IE 6 & IE 7 not something emulated which some people think IETester has. (Its wrong though, IETester has the same DLL as IE 6).

The difference between IETester & SuperPreview is that in IE Tester you cannot debug or see which HTML element is affected & which part of the CSS is giving problem but in SuperPreview you can see the web page in IE 6 as well as IE7/8 side by side so it is easy to know which part is getting affected & then you can easily target that element. Like in the current screenshot, I am checking the rendered HTML in IE 6 & IE 8 side by side. If there is some anomaly in IE 6 but not in IE 8 then I know which HTML element or CSS is breaking.

SuperPreview for Internet Explorer

However, this isn’t all that we require. This indeed is a great effort from Microsoft to move the existing web pages from IE 6 to IE 8 but it would have been better if we can get the functionality of IE Developer toolbar in SuperPreview. Now, that is indeed available in expression web 3.0 but that is a paid software, what if we just want to test & see what’s broken & fix is quickly.

MCon Outdoor Advertising : Amalgamation of 3D & 2D in Web Designing.

Few days ago I was given the job to design the website of a Mumbai based Outdoor advertising which was to be made all in Flash. Now, Flash takes lots of time to load but also gives us some interactivity which isn’t possible in JavaScript.

I made the concept for MCons by looking at one of my old 3ds Max renders of Urban Colony. I went with a 3d Perspective & made real boards on which ads are shown outside our home.

This is how the modified design of MCons would look like.

Homepage b1

When the user clicks on the mailbox, it opens a slide out animation for this contact form.

contact form

We are also told to add cat & dog animation as they are the company’s trademark which will be added by Flash. My fellow ex-colleague at Infranix are working on it.

This is my last work in Infranix. Next work is going to be for SlideShare.

Destination Holiday

Destination Holiday is a Travel Agency in Lucknow. For there website, they wanted a design which was is something like a paper brochure. They wanted something which they can simply tell the user to print & it will still look good.

I started with a Paper Texture background which I later reduced a bit. At the homepage all you get is thumbnails of various place’s pictures where destination Holiday provides service & touring etc. When you mouse over any thumbnail a Tooltip opens which has some information about that place as shown in the screenshot. The tooltip is made using JavaScript

Homepage1

Once clicked, another page opens with information regarding the place using simple accordian. This Place content page is under revision right now which might change if the client gives further feedback.

Content Page - Keral

Ramswaroop College

This was one of my biggest projects & I was allowed to do whatever I wanted to keep the design good & minimal. The client gave the navigation links himself so I was not able to sort them again or make them better.

The header is simple depicting a iron board usually seen at colleges. I opted to go with a color scheme similar to the building of the college. Header has a object based search from which the user can do specific searches. He can search in the library for a book, or the whole website or just for a particular person such as teacher etc.

The flash ad shows pictures of the college followed by a latest news box. The icons used are from Tango Desktop Project. The homepage is self explanatory.

SRMCEM Homepage

The left hand side navigation sidebar is AJAX based. As visible in the following screenshots. The pages has expandable & collapsible navigation based on Accordion design.

Content Page Mechanical Engg

Content Page Library

Content page admission

404 page

Proposed page for faculty contacts

Faculty Information 6