Peter Lewis

A client wanted to do the graphic design for their own website revamp and asked what size to do it. some sites use a dynamic size - expanding the website with the size of the browser - which maximises the space. Although this offers the greatest flexibility, it comes with it’s own challenges with regards to good design and coding.

Although I tend to develop Flash eLearning to run full screen therefore a default of 1024×768, although due to browser security issues you have to allow for the title bar and frame (1016 x 734), although depending on the version of Flash and your browser, this sometimes isn’t the case. Bit of a mine field really!

Typically in the past I’ve developed websites intended for 800×600 at around 783 x 398 actual web space (allowing for scrollbar, border and standard toolbars in browsers).

But more and more I see larger websites as visitors screen sizes increase and generally they run their browser larger or full screen. So now the typical (new) website would generally be around 950×600, although these can fluctuate up and down depending on the developer and design. So somewhere between 850×500 and 1000×700.

There are many considerations, especially mobile phones and older systems using smaller resolutions, but fundamentally you need to look at your target market - look at your existing website stats to see what your visitors resolutions typically are and go with a size that works with your design - too much space can be difficult to fill, too little can look cramped and involve too much scrolling.

Don’t have access to stats? A great resource is W3Schools - The general consensus is that most users are at 1024×768 (48%) but larger resolutions are rising fast (38%), and towards the end of 2008 will probably be the majority.

setTimeout!

This little function is very straight forward to use and can save huge amount of timeline spacing. If you often find yourself adding loads of frames to insert pauses in your animation - for example to display some text on screen, before it automatically moves on - then using this will really help.

Simply add:

setTimeout(play, 2000);

stop();

setTimeout is a built in function within Flash, the first part “play” is the command you want to run when it’s done waiting - in this case it’s the built in function play(). The second part is how long to wait - this is done in milliseconds, so 2000 is 2 seconds.

And obviously don’t forget to stop the current timeline, otherwise there’s no point in pausing!

This is just the basics, the next step would be to call a custom function to do something more than just play - in this case your code would look like this:

setTimeout(Continue, 2000);

function Continue():void {
play();
}

stop();

The part we’ve added her is a custom function it can be called whatever you like (without spaces) - you only need to have this once within this timeline! So further pauses in this timeline would simply have the setTimeout line followed by the stop, no need to re-declare the custom function.

As an example of the above, have a look at this fla file to see examples of both approaches in action - the first to pause the timeline, the second and third to open and close some doors.

View an example swf here.

Another day, another manipulated visual chart to sell news…

The figures speak for themselves. Shame the chart doesn’t!

Click here for the previous story

OK, nobody can really rely on statistics, they can always be twisted and shown in a favourable or unfavourable light. But it was especially noticeable today on the BBC news…

Notice anything wrong with this image of local election voting results from the BBC news channel?

73% of people see visual representations over textual information* so at first glance of this chart it looks like Labour (red) are doomed with a landslide victory for conservative.

Although the figures may be correct, the visual representation of them clearly is not. Looking at the “other” grey column, it’s around a third of the “conservative” blue column. “Liberal Democrates” yellow column just under half, then, hang on, the “Labour” red column is only just larger than the yellow column!

Most viewers would simply see the massive lead of the blue column, but in reality it should be halfway between the blue and yellow columns.

This just illustrates how important accurate images and graphics are - for any usage, and how a simple visual picture can immediately leave an impression or opinion on the viewer.

Are the BBC strong supporters of Conservatives, did they run out of red imagery or are they exaggerating the facts to make it seem more dramatic so they can sell the news? You decide!

* This statistic was completely made up, but as only a few readers may get this far, they’ll probably never know or care.

Problem: I have images on a transparent background, they’re different shapes and sizes, for all older versions of Photoshop I’d have a generic action that copy merged my selection, created a new document (with dialog on so it adjusts the size correctly), pasted, saved (again with dialog on so I could enter filename) then closed.

Quick and easy.

CS3 comes along and sticks a spanner in the works - when you create a new document via Actions it creates it to the width and height defined in the action, even though this was set to clipboard. Re-record or load old actions created with older versions of Photoshop and the same happens - when you run the action, Clipboard is greyed out and unavailable and the dimensions are the size of whatever was orginally recorded.

Doh!

Solution: Finally managed to resolve the issue with some help from Steven Sacks…

Download the Photoshop script here, then follow these steps:

1. Place copymerged.jsx somewhere on your hard drive, preferably a fixed location
2. Select the position in your Action where you want it to copy merged and create the new document
3. Start recording
4. From the menu: File -> Scripts -> Browse (dialog opens) choose the script that you just placed from your saved location
5. The script should run through copying, creating a new document, paste your image and resize
6. Stop recording
7. Turn off any previous actions you had which did anything from within this new script (e.g. new document, paste, etc)

After much searching for a good gallery/image-display WordPress plugin for portfolios, the best free contender was NextGen Gallery, but to get anywhere near what I wanted I had to have a variety of other plugins…

NextGen Gallery - nice display of images/gallery and slideshow (using an old version of ImageRotator) - this is fine if you want the basics, anything more and you have to get your hands dirty or look elsewhere. Good backend management and organisation of images, quite a few plugins support it and it’s well written and easy to understand the code (if that floats your boat)

JW ImageRotator - Used for the changing images

Lightview - The nice JavaScript animation of images showing full browser screen

Lightview Plus - The piece of code that sits between NextGen Gallery and Lightview

I also tried SimpleViewer which required the bit in-between nggSimpleViewer, but this no longer works with WordPress 2.5 and isn’t supported. Doh! In fact a lot of the above are difficult to get help on, as there’s no forums active and minimal documentation.

All the above plugins work fine standalone, but trying to integrate the lot meant lots of digging into the code, trial and error and wishing I’d written it from scratch. There are still some minor bugs, but it now works as I want it…

• The ImageRotator links to Lightview when clicked
• The NextGen gallery can be hidden and Lightview still works (Lightview requires the gallery)
• Both the ImageRotator and NextGen display different images once clicked instead of the same, larger version
• ImageRotator contains more information about the gallery and images
• And finally customising the interface, titles and captions for both versions of Lightview

Lightview, NextGen and ImageRotator are great pieces of software and kudos to the developers. Although everything would have been far smoother with decent documentation or reading how others have solved these issues probably countless times.

So, I’ve changed my nameservers on my domain to point to my new host and granted it takes time to propagate, but after a good few hours, peteralewis.com is active and pointing to my new host.

Almost.

www.peteralewis.com (with the www) gets redirected to searchportal.information.com (also related to spi.domainsponsor.com). After a quick search it appears this is common and people start blaming Google, IE, spyware and ISPs for redirecting domains that can’t be found to these websites.

I use Fasthosts for my domains and this site is currently hosted with Dreamhost - I’ve no idea if one of these are responsible, my previous host (hostgator) or some higher management of domains.

But the reason it’s occurring is that the domain hasn’t fully propagated throughout the internet. Low and behold around 18 hours from setting up the new nameservers, the www. address points to the correct place.

Problem solved, although it would be good to know why the address without the www worked straight away…

After nearly four years without a website, I’m back online! Frantically trying to get a site up and running from scratch in whatever time I can squeeze in around projects.

Being a designer, I want it to look fantastic, leading edge and possibly even award winning (hah!).

Being a developer, I want it to be all web 2.0, accessible, usable and fully validated with clean CSS and xhtml. Not only that, it has to be a solution that ticks all the boxes:

• Client login with unique secure review and file download and upload areas, all easy to use.
• Allow animations and example projects to be viewed.
• Implement a dropbox style emailing facility, where I can send large emails via the website and clients can send them to me. Easily.
• There’s got to be a leading edge gallery and image viewing implemented site wide
• Ideally linked or combined with project management and issue tracking websites or tools

And being the customer and project manager…

• It’s got to be delivered on time (yesterday)
• Fully SEO (Search Engine Optimised)
• Include good content and material
• Inspire or help other developers/designers
• Impress clients into hiring me

Phew.

That’s a fair amount to achieve, especially as the old adage is true that “you’re always more critical of your own work, so it’ll never be completely happy with it”. So the only way forward is to get it online straight away and improve the site as required over time.

So stage 1 - get WordPress up and running, use a nice looking template and focus on the site structure and content. Most importantly get the portfolio up and running so potential and existing clients can see my work.

Better get on then…