Web Development


12
Apr 12

Explore the possibilities with multivariate testing

[Subtitle A]

You probably have heard of A/B Testing where you have two versions of your page, serve them randomly to your visitors and track which works best. But there is a more advanced version of this, Multivariate Testing. This (obviously) involves multiple possible designs and of course it gets more complex to setup and analyze.

For #WordPress the Google Website Optimizer Plugin comes to the rescue to automate things, standing in the shoulders of course of Google's Website Optimizer service for the tracking and statistical analysis part.

+Tara Hornor at designfestival.com has a comprehensive tutorial on the whole thing. Check it out here http://bit.ly/I5cZ9U

Google+: View post on Google+


10
Apr 12

Javascript solutions for your chart needs

Die Flash, Die!

If you hate using Flash for your chart needs or just want a modern solution that will work on all devices, here are some alternatives:

1) Morris.js, based on #jQuery and #Raphaƫl , will give you beautiful looking line charts http://bit.ly/IqRdA9
2) From the maker of Highslide, Highcharts provides a range of chart options and works with either jQuery, #MooTools or #Prototype frameworks http://bit.ly/IeyibA
3) jqPlot is also based on jQuery and provides several types of charts http://bit.ly/IFBNml
4) Flot is another jQuery solution with support for lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series. http://bit.ly/HwGGEk
If you have any other suggestions, drop them in the comments ;)

Morris.js

Google+: Reshared 3 times
Google+: View post on Google+


9
Apr 12

Adding context in photos

Here is a nice #jQuery plugin to enhance the photos on your website with more information. iPicture allows you to add tooltips over any photo. You can set exactly where tooltip will show up and the text that will be shown. Check it out here http://bit.ly/Hsfw0l

Google+: Reshared 1 times
Google+: View post on Google+


6
Apr 12

Free website monitoring with Google Docs

I'm a happy customer of website monitoring server Hyperspin (www.hyperspin.com) but if you want a simple and zero-cost alternative there is another solution: Google Docs! It really works (just got my first alert :) ) Check out the tutorial here http://bit.ly/HiT8BQ

Google+: View post on Google+


22
Mar 12

How not to do an auto-responder campaign

Think before you press the auto button

A few days ago +SitePoint send me a new offer for their new CSS Anthology book. I happily access their site and request a sample chapter which arrives promptly. A few minutes later I am the proud owner of the book (I even posted about it here http://bit.ly/GGb2h6).

The next day, I receive a mail from SitePoint titled "Did you receive your Sample Chapters okay?", a nudge to remind me about the book and possibly purchase it. Wait, I already did!

Then another few days pass and I get another mail titled "Some more CSS Info for you." and starting with this text:
A week or so ago you downloaded the sample chapters from "The CSS Anthology, 4th Edition – Take Your Sites To New Heights," And you also heard Rachel Andrew (the author) sharing her insights on writing the book." Yes, I did. It's amazing.

At this point I feel like a fool :) I shouldn't have bought the book right way since there are so many other offers SitePoint has for me! Of course I have now clicked the unsubscribe link which I'm not sure if I have unsubscribed from getting more of this auto-responders or just all promotional mails for new books, but it's not like I mind much.

Bottom line, if you're going to automate a series of mails to people, it would be good to put some thought to it and revaluate if the people still meet the criteria you set for them to be included in the first place. E.g. your bots should be a bit smarter than A.W.E.S.O.M.-O. ;)

Google+: Reshared 1 times
Google+: View post on Google+


21
Mar 12

It's not you, it's the user

Software as social hacking

Finding out how you site/app/whatever is being used and percieved by the users is as important (or more) as your original specifications for it. This is what Grupper (a social service that sets up up drinks between 3 men and 3 women) discovered when they realized that cancellation rate for their events was extremely high.

On paper, they had done everything right. They had made cancelling an event very easy in order to provide a great customer service. What that meant though was the their system was allowing people to cancel for insignificant reasons. While this is was convenience for the person who was cancelling, it was quite the opposite for the other five persons who had their plans cancelled on them. So, if you could "sum the experiences", for each one good experience Grupper was creating, it was also creating five bad ones. And that terrible for the entire service, which could easily be end up being characterized as "site filled with %#%%!" ;) In the end, Grupper made the cancellation process personal, by forcing people to call up and announce themselves their change. That dropped cancellation rates 90%

One might argue that this is just the case of a social site, and it can't be applied elsewhere. But the point is understanding how your users are actually using your software (application, site, anything), what they expected to do and what they thought they got from the result. For example, consider a search form in a database with 40 category choices. Presenting all 40 options to the user sounds like the way to go. But if 60% your data is in 5 of the options, this means that user will start clicking on options and mostly get few results. This instantly is a bad experience, blamed on the system ("I tried it but I got no results. The system is broken"). Obviously, there should be a better way for the interface to allow the user to get the data he was looking for.

In the end, it's good to remember that it's not you that is using the software, it's the user. ;)

Read Grupper's article here http://bit.ly/GEPjuv (found via +Guy Kawasaki)
Somewhat related video: George Constanza on "It's Not You, It's Me" :) http://bit.ly/GCBZTs

Google+: View post on Google+


17
Mar 12

Page flip effect with jQuery

Burn Flash, burn

Here's another use of Flash that can be converted to #HTML5 / #CSS3 : turn.js provides an easy to setup page-flip effect with just a few lines of codes.

Get it here http://bit.ly/FOHmkX and also check out this tutorial of an Instragram-powered "magazine" using turn,js http://bit.ly/ym1cDo

Google+: Reshared 3 times
Google+: View post on Google+


17
Mar 12

How to fit a large table of data in a small screen?

You don't ;)

So you decided to join the mobile world and create a unicorn/droid-ready version of your site. If you happen to use big tables of data on one of your pages you find out they don't really fit in a small screen.

The good guys of the filament group have come up with a #jQuery / #CSS3 / #responsivedesign solution that comes down to this:
- select what is important for a small screen
- show it and hide the rest
- adjust the presentation according to the device so that you don't have to have 3 versions of the same thing
- give the user the option in any case.

Read on how to do it: A Responsive Design Approach for Complex, Multicolumn Data Tables at http://bit.ly/xtiPo0

Google+: View post on Google+


16
Mar 12

Responsive design strategies

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

Full read: +Luke Wroblewski's article "Multi-Device Layout Patterns" at http://bit.ly/xo77F7

Google+: Reshared 1 times
Google+: View post on Google+


14
Mar 12

The CSS3 Anthology, 4th Ed.

Just got Sitepoint's CSS3 Anthology book by +Rachel Andrew which has been updated to a fourth edition. It's a good over-400-pages reference book with basic and not so basic practical examples of using #CSS3 .

Hot topics covered:
* Responsive design: Smart layouts for all devices
* Stylish layouts: With tabular data, text styling, and CSS positioning
* Seamless navigation: Pretty rollovers and menus without JavaScript
* Cross-browser technologies: Compatibility troubleshooting and fixes
* Usable forms: Design forms that work, and look good too

Check this link http://bit.ly/xYiQBW for the table of contents.
It is currently offered as en e-book at $19 down from $29 http://bit.ly/yVFyf7

Google+: Reshared 1 times
Google+: View post on Google+