Okay, that’s quite a bit of an exaggeration, maybe purgatory rather than hell.
Anyway, I don’t really know any javascript so I rely on help from the bountiful internet so I can do things with it. Lucky for me there are a bazillion javascripty jquery type pop ups, however unfortunately there are A BAZILLION javascripty jquery type pop ups. Well again, I’m overreacting slightly. But here are a few of the pop up plugin type things I tried out.
Lightbox is the one everyone has heard of, but it annoys me slightly – although I’m not entirely sure why. Simple to use and install, but unfortunately wasn’t any use for me this time as it can only show images, rather the sections of HTML that I required.
Colorbox is nice. It produces nice looking pop ups. Smooth transitions. It can load up flash, video as well as HTML. However, again I couldn’t use it for the project I wanted as I needed a div to pop up then stay where it was allowing you to interact with the rest of the page. I think you might be able to get Colorbox to do this, but I struggled with the coding.
DOMWindow was my saviour in the project I was working on. I didn’t want a hover pop up, or one that fills the entire screen, but with one click a little window should appear, then it should close when the user clicks on the close button. Very simple and easy to use.
A few others
Fancybox
Thickbox
Shadowbox
in Code |
I’ve been looking into a few methods for how to replace text on a page.
I’d initially used CSS to replace text with images, this is quite an awkward solution as you have to create a new image for every item you want to replace. I did a bit more searching and discovered siFR 2. sIFR (Scalable Inman Flash Replacement) allows you to replace text on a page with any font you want, using CSS, Javascript and Flash.
I’d struggled previously getting this version to work properly and behave the way I wanted it to. Mainly for each item in a navigational menu to look the same. So I was rather happy when I discovered there was actually a version 3. This version is incredibly easy to use. I love being able to apply CSS styles, as well as defining the font size.
Take a look here: sIFR 3
in Code, Flash animation, Web design |
Part of the microsite I’ve been working on requires a page flipping component.
Did some research into finding one that would suit, and found these:
Had a go of the free version. This is HTML based so didn’t suit my purposes of importing it into the flash as an internal component, and the license with the source code was out of the budget. Animation feels nice and smooth and there are plenty of page controls, but the page images load in dynamically, so if you are flipping through quite quickly you seem to get a lot of blank pages.
View demo
I liked the smoothness of this one as well. It also has plenty of page control features and comes in a variety of types:
With the Flash Component you can add ActionScript for external navigation, page links and video. Although no source code is supplied, the component should cover any common uses. Images also load in dynamically. It seems faster than the Flash Page Flip one, although this may be related to the image file sizes. One thing I wasn’t so keen on was that the shadows seemed a bit on the dark side, but overall seems like handy and easy to use page flipping tool.
This page turner offers all the standard page controls, but also has the option of auto page flipping, hard front/back cover, page tearing and right to left written books. Again this one allows you to load in either your image or swf pages dynamically, and is controlled by an XML file. Page turning animation doesn’t quite feel as smooth, but has a lot of extra features and good documentation on how to use it.
View demo
Page Flip also offer a completely free open source version of their Page Flipping component. Has almost all the same features as v3.5, however you import your page images directly into the FLA file.
View demo
So…
These all seem to be really good page turning components with slightly different usage methods and features.
in Code, Flash animation, Web design |
Today I’ve been doing some testing. Running through one of the sites we’ve been working on. Was really initially meant to be testing the layout in IE6, but due to my slightly pedantic nature I’m pretty much running through a lot of the functionality and logging the rather numerous, if minor, bugs. There aren’t that many IE6 issues anyway.
Testing is actually something we’re normally quite bad at doing right. It always gets scheduled in at the start, but as a project goes along, and things take longer than expected – especially the development work, the time for testing gets shrunk. It is a really essential step though. It’s hard to view something you’ve been working on objectively. You know where to click and what button takes you where, so you never get lost in a site, and unless there is an error, your expectations are always fulfilled. So, you require an outsiders eye. Someone who has absolutely no idea what’s going on (Okay, that’s a slight exaggeration).
Anyway – there is lots to check and fix. Fingers crossed for the deadline on Monday!
in UX, Web design |
Well, the next exciting thing I’m doing is revising a sign up process. What I really need to do is look at this book: Web Form Design: Filling in the Blanks by Luke Wroblewski . Actually I’m pretty sure there is copy around here somewhere.
Again it’s all about user interaction, creating a simple effective form that is easy to use. You want the user to not even have to think about what they have to do, but just do it. I’ll let you know how I get on.
in UX, Web design |
Right, so I’m trying to get my head around how to design a page to modify a hotel booking. However, there is quite a major limitation to this. The system cannot actually modify anything; you can only cancel the booking then re-book it, if what you previously had is still available, unless, of course, you are just changing something simple like room occupancy, guest name or payment method – then it can just update the original booking. That’s not complicated at all, especially when you work out how many scenarios there has to be!
So, my main challenge is how to create a seamless process for the user, while not making it a nightmare for the developers to actually program. Hmmmm.
Firstly, I created a beautiful (well, practical) process flow chart to help me work out what the page has to do for each scenario (quite often ignored in the design process, because really we just want to get to working on the pretty pictures, and, as well as helping we work out what the page has to do, it should also help when it comes to the actual programming logic).
It looks something like this…
From the flow chart I’ve been able to decide the page content and structure, as well as how many visuals need to be done to fully explain the process. All I have to do now is put them together…Well, that wasn’t as hard as I thought it was going to be.
in UX, Web design |