Website Design – Then and Now

It has been more than 12 years now since I started my career in Website Design and Development. As a matter of fact before year 2002 I was more in Graphic Designing and was designing Magazines, Brochures and other all kind of graphic design works.

But then in year 2002 my interested started to migrate in designing for Web and since then I am into website design and now I feel like share my experiences about Designing for Web then and now.

HTML Coding and Applications

When I started and designed my first ever website, it was for Human Rights Commission of Gujarat (India). I used Coreldraw as I just migrated from Graphic Design. I created all images I had to use on website in CorelDraw and then used Microsoft Frontpage for designing Web pages.

Those days Tables were used in HTML to setup elements on webpage, so I used to create tables, and merge and span table cells to create framework of my webpage. I created one and only animated element on the page which I created using GIF Animator software.

Responsive Design

Those days (back in 2000) in India 980px resolution monitors were new in India so web page we used to design was 767px width. But with 980px Monitors started hitting the market some of the website clients did not like their websites on center of screen with space both sides, they wanted their websites to accommodate on full width of monitor regardless of the resolution of monitor.

That condition was first in my life that I had to design website such a way it fits from 768px to 1080px monitor screen sizes taking full width of the screen. And I started designing webpages with main table width setup at 100% rather than pixel units, I used to set width of each cell in percentage Unit and finally got the results, those pages were fitting on any monitor sizes.

I don’t know I should call it responsive but that really was my first responsive experience.

Animated Sites

Then came the trend of Flash websites, Flash really created short term but yet powerful trend for almost all kind of websites, each client coming to me were looking for Flash website with music playing in background. Fortunately (or unfortunately) that since google was not able to read flash files, Flash trend washed off quickly except few industries like Movies, Auto as they still use or flash for their intros.

Complicated Navigation

I don’t know any of my friend designers experienced this in past or not but for some period of time I when flash was trending, people used to like complicated and tricky navigations just to show off. I still remember a case in my past that one of my client dealing in shoes wanted a navigation where you get all links coming out of shoe when user clicks on it. But like flash this trend also didn’t last long.

And Now....

But now days are changed, designs are created using HTML5, CSS3, using dreamweaver. I use Sublime Text 2 with Zen Coding plugin which makes like much easier for coding in HTML. We use jquery for basic animations and HTML5 (now google has launched web designer for html5 animations) for complicated animations.

Heavy graphics and animations, music playing in background disappeared. Laying out pages using table is forgotten. But the concept I faced in past (webpage spreads across whole width regardless of monitor resolution) is still alive but with different name.. Responsive Web Design but well the way we do it is different again.. Media Queries and HTML5

Even for SEOs life has changed drastically from then to now, google came up with regular updates to make search easy and SEO life hard. But about his SEO people may tell better unlike me.

Usability Testing or Website Testing, Human Tested or Tools?

Internet and Online Marketing has started to become primary medium of Marketing for many companies. Nowadays we see business running only on a website like amazon.com, ebay.com etc. More and more new ventures looking to develop website that earns for them, other many companies want their websites handle more part on their marketing department.

Once website designing part is done, even bigger concern takes part for any company or any online marketing company. It is testing a website not only for design and user experience but usability testing and conversion power of the website too. Because no matter your website is getting 500 or even 1000 unique visitor traffic per day, it will not be profitable for any company or website owner until it converts that traffic to your goal.

Now next question arises and a BIG ONE – How to test a website? Should a good tool to be used or hire a usability testing company which conducts human testing results? Or hire a usability consultant? Lets discussion these methods one by one and come to a conclusion.

Testing Website and Usability using a Tool

• There are tools to test websites, Google Webmaster Tools and Bing Webmaster Tools has many features which tells about your websites.
• Woorank.com, iWebCHK.com, RavenTools.com and YSlow by Yahoo are some other tools test your website.
• First and biggest limitation you have testing your website via such tools is, they can only test your website technically e.g. it can check whether you have H1 tag on your webpage or not, but it will not suggest its position on the page.
• Tools can’t suggest you design and its user experience for real time, colors and color suggestions as effectively.
• Testing via tool can be handy as it is cheaper and they give you primary things on your websites quickly which you can correct to start with.
• Once you are satisfied the performance and ranks shown by these tools you can more further to other methods.
• When you buys such tool(s) please check their clients, take free demo, compare the things they will check and then subscribe for them, you may not need to get them for longer period of the time if you are working on only 1 – 2 websites.

Testing Website and Usability by Usability Consultant

• Hiring a Usability Consultant for full time or part time can be a good idea if you are working on lead generating websites in this constantly changing online marketing world.
• Once your website is tested and OK by most of the tools, usability consultant can suggest you colors and important element positioning on a web page which tool cannot do.
• Hiring a Consultant can be expensive for smaller companies and sometimes if consultant has not worked in your niche industry, he may not be able to produce results you are looking for.
• Before hiring consultant, make sure he has worked in your industry and try to check his clients’ reviews.
• After working so many years in website design and development field and having getting many sites tested by end users, I have came to conclusion that sometimes typical usability rules don’t work in real world hence relying only on consultant may not produce you results you are actually looking for.

Usability and Website Testing by Humans

• Most effective way of testing website specially eCommerce Websites, Lead Generation websites in some industries, Dating – Social Media Websites and Travelling Websites.
• As discussed earlier sometimes (in fact many times) real user surfing your website is completely different than your or your consultant’s thought process.
• Even in my website testing experiences I have seen real users not doing what I was taking as obvious to do on the website.
• Once I was working on a Travel website where I kept nice contract color form for inquiry on top right bar of the website and asked 15 users to visit and send inquiry and surprisingly 11 of the inquiries came through “Contact” page and not through that right side form.
• This method can be cheaper than hiring a usability consultant and you can opt for your ongoing website testing as you make changes.
• You can easily perform A/B testing on you website through this method.

Conclusion:

• If you are working on completely new website, it is good that you get a tool and complete primary tasks a tools suggest, but as discussed, tools can only check whether you have “Alt tag” on your image or not, but it can’t suggest what it should be.
• Once you are done with primary testing, go and either hire usability consultant if you are running big corporate website or information portal type website where you are targeting more on traffic and technical tasks to be performed on your website from specific niche.
• If you are running small lead generating website, sales oriented website definitely go for end user based usability testing having end users testing your website and don’t forget to do A/B testing on your website.

If you are looking to hire a usability consultant or want to A/B test your website or want your websites to be checked by end users, contact me via sonimanoj@gmail.com and I will definitely be more than happy to help you out and make your website performing better than it is now..

Using Micro Data on B2B Website

What is Micro Data?

It's been long since Micro Data has been discussed by various Website Masters, Web Developers and SEO People for various kind of purposes for various type of websites.

I am not going in too much basics on What is Micro Data as its already been discussed on various blogs. In single line it is a HTML5 specification which simply helps computers understand the content of the Web Page. Microdata has its own vocabulary as given by schema.org which include various tags like Organization, Person, Event, Product, Breadcrumb, Review, Offer etc. These vocabulary tags can be used on HTML using various Global Attributes like itemscope, itemprop etc.

Microdata on B2B Website

Its been about 3 years since I have started testing / implementing Microdata on various kind of websites, In most cases Microdata are used for eCommerce Websites, Event Websites or Article Sites like Blog sites. But I was brought to the situation that I had to use Microdata on B2B Website (e.g. A Website which is Website Design Service Provider which has pages talking about their services etc.)

Using Microdata on B2B Website is bit tricky, I studied the websites because usually You need Structured Data on your website where you have same format throughout all pages with various data (e.g. Product detail page of eCommerce Website all pages will display different product but structure of the page will remain same). But B2B sites I was given did not have same format which can be used to structure the data on page. 

Step 1: Identify the Data on B2B Website which can be used as Structured Data

First check out the B2B site which is given and identify vocabulary and attributes that can be used throughout the website mostly you will find one or more below things common across the pages

1. Breadcrumb
2. Organization name and address
3. Static Content / About Pages
4. Page Titles
5. Blog / Posts

Step 2: Adding the Microdata on Header / Footer and Breadcrumb

We can start with Breadcrumbs, The Microdata Breadcrumb we use is also called RDFa Rich Snippet which is recommended Rich Snippet by Google to recognize it. Check out recommendations by Google for RDFa Rick Snippet.

For a Normal Breadcrumb like shown below
          Home > Services > Web Design Services

You might have HTML code like below.

<a href="home-url">Home</a> &gt; <a href="services-url">Services</a> &gt; Web Design Services

After we add RDFa Rich snippet as per google recommendations (as given in above link) the code will look something like below.

   <div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">

     <a href="home-url" rel="v:url" property="v:title">Home</a>
   </span> &gt; 
   <span typeof="v:Breadcrumb">
     <a href="services-url" rel="v:url" property="v:title">Services</a>
   </span> &gt; 
     Web Design Services

After We are done with Adding Microdata on Breadcrumb second thing is Organization Name and Address, Which is recommended to be on footer of every page and a Organization Name on Header of Every page. In Short the header of every B2B Website mostly is like Company Logo, Main Navigation, Phone Number etc. 

Mark this header section using "Corporate" Schema, but make sure If your Main Navigation has Keywords in Anchor Text then Mark Navigation as "significantLinks" and if not then you can use  "SiteNavigationElement" so that search engines understands page structure better. You can get Help about How to use Corporation Schema from here. You can use "telephone" markup for your phone number and image mark up for logo.

Next is the footer of the site which as discussed earlier should have the Address of the Organization and Mark it as "postalAddress: schema. There are various tags for various parts of Postal Address like streetAddress, addressLocality, addressRegion, postOfficeBoxNumber and postalCode. You can get further help on postalAddress schema from here.

 If you have links on footer there are again two ways of marking it up. Either use "SiteNavigationElement" or use "significantLinks" but make sure you don't repeat same markup on header and footer. Decide which one you want to show search engines as Navigation of website and which one as Other Significant Links.

Step 3: Adding the Microdata on Static Content Page and Other Pages

After you are done on Breadcrumb, Header and Footer, Its turn to add Microdata on Static pages, Here you have mark your Main Heading which is H1 using "name" tag. If you have Image within the content of the page mark it up as "image". If there is event mentioned anywhere on the page mark it as "BusinessEvent".

Talking about About page, if you have Names of your employees, VPs, CEOs etc on that page you can mark them using Person tag. Get details of Person tag from here. 

Step 4: Adding the Microdata to the Blog

Good News about Adding Microdata is we have a google tool to add Microdata. Where you just enter URL of your post page and it will Help you to add various tags to your Blog. But for your information We use below tags for various parts of Blog.

1. Post Name (H1) as name

2. Main Content (Text Content) as articleBody

3. Image as image

4. Author as author

5. Posted on Date as dataPublished

Once you are done with Adding Microdata don't forget to test them using Google's Microdata Testing Tool.

If you have any question or need any help you can discuss on comments. Don't hesitate to draw my attention towards any oversight i might have made in the post.