Should the Designer Write Code?

Yes

The designer should write the primary code and test his / her theories in interactions by doing so, much like a prototype. It’s even better if you can create prototypes that can work just as well in production. Without this, much of the Design is of no use as you are always at the mercy of the person writing the CSS and HTML and their skill set. Writing your own HTML, CSS, some part of Javascript and PHP never hurts, that’s what makes things work exactly how you wanted them to be. A good place to start practicing your skills is a dummy install of a wordpress blog and then changing it one step at a time using the theme editor.

Should one use a visual editor

No. They are mostly for people that don’t want to do the hard work and create a lot of junk code. Avoid editors like dreamweaver where things can be dragged and dropped. Best way to do it is using Notepad (Windows) and TextEdit (Mac) and a bunch of stuff that are free on Linux. If you want it to be a bit more colourful you can use editors like Coda, Netbeans or Sublime Text. They help you just a bit by colour coding the different aspects of the code.

When do I use Photoshop?

Only when you need to create graphical elements that are not possible through CSS3 and HTML5

Translating to Tablet

Translating to tablet is a tough job with so many of them around in various resolutions. I dont have enough metrics yet to decide from which point to switch to a Tablet View and after that to a Mobile view. But overall, the experience should be similar to available apps, like Mail, Facebook, and others which users are already used to. Here’s a view of that this page looks like with the menu tab open on an iPad.

Clicking on the 3 bars under the header opens the side panel on iPad and other tablet devices below 980px maximum resolution

Clicking on the 3 bars under the header opens the side panel on iPad and other tablet devices below 980px maximum resolution

The geek stuff used to do this is 99% CSS and 1% JS. Just load up the required values with a proper media query that looks like this.

@media screen and (min-width: 641px) and (max-width: 980px) {
/* And put all the cool stuff here */
}

And then a simple open close for now using jQuery does the rest! You need to have two open / close buttons so that the user can actually close the panel if they do not need it. The status is not carried over to the new page that loads from any click.

$(document).ready(function(){
//$(".hidden-menu").hide(); this is to be kept on if you want the menu hidden always, even in full view
$(".show-menu").show();
$(".hide-menu").hide();
// this does the show menu part
$('.show-menu').click(function(){
$(".hidden-menu").slideToggle();
$(".hide-menu").show();
});
// this does the hide menu part
$('.hide-menu').click(function(){
$(".hidden-menu").slideToggle();
$(".show-menu").show();
});
});

That’s not all. Now you have to find the button and assign the class “showmenu” to it.

<div class=”menu-icon”><a class=”show-menu” href=”#”><img alt=”" src=”yourbuttonimage.png” /></a>

And then find the actual menu so that it knows what has to be opened when clicked! Make sure you create a separate class to define the attributes of the menu itself and not complicate matters by clubbing the two. It’s just simpler and easier

<div class="menu-class show-menu">/* Your menu here */</div>

Now that the menu is opening, chances are, it has hidden the button that was used to open it in the first place and there is no way to get rid of it if you wish to do so. For this, we add a simple fix, a clone button within the menu that does exactly the opposite. It closes the menu so that the user has a clear view to the actual content. You can give an additional conditional style to this one for situations where you do not need the button, for instance, mobile.

<div class="hidden-menu">
<div class="menu-icon hide-on-mobile"><a class="hide-menu" href="#"><img alt="" src="yourbuttonimage.png" /></a></div>
/* Your menu here */</div>

And we are all done!

Having an all accessible “Menu”

WordPress has it famous sidebar. And every blog needs one. It’s another thing completely as to how a theme interprets and shows it. Most blogs have it on the right of the left, like a standard large pile of links that keeps increasing. This leads to an unusual page height and people accessing your blog get bugged. This blog however will slowly go in a direction that is a hybrid of Desktop and Mobile and the three bars on top is the first step in that direction.

menu

Try it out

Now the menu is on demand. Look for the familiar 3 horizontal bars on mobile and tablet!

20130303-111413.jpg

Oddroad.com – BETA Launch

We re-launched a conceptual product today after a complete re-design. Oddroad is targeted to be a place that allows you to browse destinations and then go there rather than search for them on a travel or booking site. The idea is based on the theory that people want to go to a place that feels a certain way, but not exactly that particular place.

e.g. I may want to go to Shimla, but once I am done with that, I probably would think twice before going there. As a result I look for places that are similar to Shimla and not Shimla itself.

Oddroad treats it’s destinations just like an e-commerce portal would treat its products. Categorised and ready for consumption, so that one can reduce on the research and guess work and concentrate on the adventure part of it. What’s the fun if you have to read up a lot of pages before you can find a place to go to.

Oddroad’s promoters have collected detailed data for over 1000 destinations within India and their points of interest. Places are tagged by their activities and have detailed weather and other descriptions as well, including what to wear and what not to wear. It’s not perfect as yet. But it will get there. Tight integration with a on ground support structure is coming up to connect the traveler to the last mile, not just the last Airport or Bus Station. Today was Day 1 of the new version and it received an overall warm response. The first month data and analytics will help us shape it further and give it more focus so that the Traveler gets to his destination ASAP. Give it a Spin.

www.oddroad.com

Why sites should try and know their Users?

When we buy a shiny sports shoe for running / jogging / walking / drinking beer or whatever, if you bought it from an E-Commerce store, chances are, they will recommend you other shoes that you can buy! Very few take the route of Often Bought Together and actually show you a Show Cleaning Kit, Socks. After all its logical, I am already done with my Shoe Purchase, what are the chances that I will but another one. Men will say Aye! while women will completely disagree.

The same for women does not work. Data says, they buy cheaper and more affordable shoes in multiple colours and styles and then pair it. Which means, its perfectly logical to show them the Same Shoe in another colour or a Similar Shoe in Another ColorThe another colour part is important for about 50% of the user group while the other 50 can very well swing the other way. Best is not to take a chance and display both.

And don’t show socks, most of them wear peds these days!

A whole lot of Red Shoes!

A whole lot of Red Shoes!

www.oddroad.com

www.oddroad.com

What are you selling?

Are you selling what people are searching?

Or are you just pushing things. Most common thing in today’s e-commerce is that when a product is not available, we put a Big Large Block with a JS Scroller and fancy jQuery saying “People who saw this product also saw this”. But is it really what I want or it’s just some makeshift arrangement. This is not as random as it seems to be.

When women look for Shoes, they are based on a Type, Style and Colour. The colour part is very important here. As opposed to when men look for Shoes its mostly based on Purpose and Brand. This is a general observation of Shopping Behaviour around me.

Then why is it that we do not take in into account? Attached is an image from a Popular E Commerce website and a very nicely done but it works only when my search matches a category. If I had searched for Yellow Headphones the same logic does not apply!

It is probably time for products to be listed by Tags rather than Categories and then organising the tags in a more user friendly manner.

Flipkart's product suggestion widget for items that are out of stock

Flipkart’s product suggestion widget for items that are out of stock

Groceries are not exactly E Commerce

Post ZopNow many people have asked me why the website does not really adhere to the many basics of e commerce that we have come to expect over the last few years. The answer is simple, Groceries are not exactly E Commerce, in other words Retail. 

Let me put this in much more simpler words. Groceries are not really Benetton or Adidas. They are a repetitive purchase process, very boring and done in large quantities, often in numbers greater than 50 for one session. And this process is repeated more than once in a month, sometimes more than once in a week

This brings us to the next part of this kind of e-commerce, Speed. A customer should be able to add all these items at lightning speed so that this online experience results in lesser time consumption overall over the conventional method. And to bring in speed one has to get rid of some of the steps in regular retail.

A clip from a recent advertising campaign

A clip from a recent advertising campaign

Going Responsive – ReaderBlocks

After a long time I have touched the Blog. Partly due to lack of time, partly due to patchy hosting service, more due to general laziness. Finally got around to creating the version 1.0 of my first responsive theme. Made for browsers across phones, tablets, laptops and desktops. This is still an “alpha” and I hope to fix most of the stuff and have the variations for this theme available for Download soon!

The current theme is in two columns / single column layout depending on the device or window width with selective formatting for specific categories. At least that’s the overall plan, lets see where it goes from here.

Current version of ReaderBlocks Beta

Current version of ReaderBlocks Beta

Vimeo in Couch Mode

A very innovative use of HTML 5

20120102-041944.jpg20120102-041949.jpg20120102-041955.jpg20120102-042005.jpg

Space Form and Structure || Bricks on Vimeo

Bricks on Vimeo on Vimeo

via Bricks on Vimeo.

Not easy to find samples and help to work on Blender. And somehow I landed on this one. Probably the most unique concept I have come across in the last 10 years, a pursuit of sorts depicted solely by the coverage of area of two characters. The animator has actually managed to show spaces, alleys, trees, roads and even complete devastation left in their path.

Those of you in Design related education, this is a must for Space Form and Structure