the making of qrisper.com

best beach in the world

Decided to take a breather on the php to focus on the interface.  Actually, the php issue was interface related so I guess what I really mean is focus on making qrisper a bit flashier looking.

The landing page was getting a little noisy so I decided to put the registration into a modal window. I used jquery and followed a tutorial from yensdesign.com.  Implementation was pretty straightforward. One thing I want to tinker with is the location of the window.  It looks a bit off-center…I noticed that on the tutorial as well.  If anyone can see the reason why, please holler (code below).

function centerPopup(){

        var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $j("#popupSignup").height();
	var popupWidth = $j("#popupSignup").width();

	$j("#popupSignup").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});
}

I’m using jquery with prototype so I needed to make sure that I included jquery’s noconflict clause and change the $ variable for all jquery scripts (hence the $j).  There’s so much information out there about jquery that it’s hard not to use it.  But now that I have the power, I need to be responsible and practice restraint.  qrisper’s getting a little large around the waist from overindulging on all of those image files. Found this site on web optimization, telling me that qrisper needs to go on a  diet.

Also added a little feedback button…meh…looks alright.  The button made me realize that I’m digging myself into a trap.  I am maintaining slightly different versions of the same page.  Which version the users see depends on whether or not they’re logged in.  Decided that I could probably use a php if statement to swap out includes depending on whether or not a session id exists.

Wanting to trim the fat further, I went to clean up my css files and optimize them with a few new tricks I learned.  Big mistake that was.  Spent a few hours fixing all of the damage I caused.  I found the tips from David’s old blog.  Actually found a number of good resources…a few of which I used to fix a few issue that had been bugging me.

Fear natural disastersHaven’t made much progress in the ajax front.  Stuck with a couple of php issues that I need to resolve first.  Fixing those two things should drastically change how users navigate qrisper.

In the meantime, I’ve been taking care of a couple of other things:

  • created the first drafts for the About Us page and the Sitemap (plain HTML, not XML)
  • spiffed up the images in the What? tab…I might redo them still
  • changed the content in the Skipped tab.  Instead of a form listing all of the questions that users skipped, it simply becomes another pool of questions that users can choose to answer or skip again.
  • made enough changes to score a B on YSlow.  But feels like the sites actually slower…
  • added the Digg this and Yahoo buzz icons to all results pages.  But I added them only to the non-logged in pages.  I’m sure this will need to change.

I’ve been playing with affiliate programs and adding a few ads here and there.  Figured out a strategy to diversify my ads portfolio.  Now all I need are users to view and click on those suckers.

I have never...Spent a good chunk of time this week putting together the admin pages for qrisper.   There’s a lot going on back there!  I’ve gained a new appreciation for the folks that developed all of the admin pages that I’ve utilized over the years.  Actually, the one’s at JPM were crappy as hell.  Admin pages never got any love over there.

Working on these pages and seeing the data flowing through gave me some more ideas for user incentives.  More on that in a future posts.

Anyway, here are a few more enhancements:

  • after logging in, clicking on the logo now takes you back to the splash page, without logging you out.  Once I change the question and answer interface for both sides, not sure if this will still be necessary.  But more than one person asked for it so there you go.
  • after a lot of procrastinating, finally put together a decent FAQ page.  The FAQ page got a decent amount of hits so I needed to get on that.  The remaining pages should follow shortly.
  • don’t think anyone noticed (since no one used the feedback form in qrisper.com to provide feedback) but that link was fixed.
  • also fixed a problem where clicking on the “get password” submit button wasn’t pushing out the email with the user’s id and pw.
  • been dipping my toes into modifying the .htaccess file and minifying js and css for site speed optimization.  Not sure if I’m doing something wrong or my site just isn’t big enough, but I don’t see much of a difference.

Also hit a bit of a milestone this week.  I wrote my first line of original php code to solve a problem.  Woohoo!  Up until now, I’ve been recycling Amos’ code.  Baby steps.

Ajax is staring me in the face right now.  Need to figure out a way to tackle that bastard.

Best flat-panel TV 40 - 49Thanks again to everyone that provided feedback so far.  It’s crazy how much tunnel-vision you get when you’re preoccupied with just making the darn thing work!

Anyway, just wanted to highlight all of the changes I made already based on people’s feedback:

Amos:

  • added Q and A icons in the recent answers column.  Tried adding image icons but decided that the simple text looked cleaner.
  • inverted the colors for questions and answers in recent answers.  Was trying to keep the answer colors consistent across the site…need to rethink this.
  • got rid of most of the target=”_blank”.  Still debating whether to keep the ones that link to a Google search or any site outside of qrisper.
  • replaced the ad with a banner providing more info on qrisper – need to work on my animated ads.
  • reorganized the What tab a bit.  Still need to work on the content and new screenshots.
  • combined View 1 and View 2.  Made View 2 available as titles.
  • added some text describing what users can do after signing up under all results pages – need to work on that.
  • changed the links so that the category name takes you to a list of all questions for that category (before you had to click on the number to do that).
  • changed the question page so that the first thing you see are the questions and their answers, with an add your own answer section on the bottom.
  • changed the results page to include a suggest a question section.

I still need to make the content more readily accessible, both for registered and non-registered users.  I’m gonna dive into some ajax to do that.

David:

  • login button doesn’t work – the forgot id/pw div was on top of the login button – oops!
  • form fields don’t fit – that was cuz I never checked for Mac Firefox/Safari.  Only way I could fix it was to shorten it for PC Firefox/IE.

Jack:

  • javascript errors – leftovers from previous code…didn’t even realize they were there!

Chris, thanks for your comment.  That’s basically the idea.

So I had a blog set up previously for qrisper.  But back then, I was merely a reporter, only having the ability to report on progress.

Now that I can actually contribute to the progress, I hope to have more stuff to write about.  And I guess I’m now an investigative journalist/detective?

Word.