Showing posts with label blog design. Show all posts
Showing posts with label blog design. Show all posts

Saturday, February 17, 2007

BarCamp Day 1 - Afternoon Sessions

Tom Scott on Open Source Incremental Backups For Windows
Tom's presentation was useful for those who want to manage incremental backups for Windows in a sensible way. His full presentation is available here: http://www.thomasscott.net/barcamp2/

I backup my system less often than I probably should (photographs aside, which get saved in at least 3 places regularly - I'm paranoid!). So perhaps I should take the time to have a go at this myself.

Meri Williams on Project Management For Busy Geeks
Meri's talk started with the Basic lifecycle of a project. Few projects go through the whole lifecycle properly. The Big Secret is that, for smaller projects, PM is all about Initiating, Planning & Closing (and not worrying too much about execution and control). Planning should NOT be about planning a step by step guide - but something that helps you understand what you're doing. And communicating this to stakeholders. She also mentioned that lots of projects are not closed properly - haven't we all been plagued by customers that just won't go away but pester by saying "can you just do this bit extra?".

[Meri's running order]

Leisa Reichelt on Design Consequences
Leisa's was a hands-on session where she demonstrated her techniques for initial brainstorming of site layouts and designs. We all had to break out the pen and paper (and post-its!), and "mock up" a screen to show the BarCamp Schedule (the real thing was done the low-tech way as you can see):

[Day 1 Schedule - done the low-tech way - but it works very well]

Then we talked about what we'd done and why. It was nice to get away from the computers for a bit, and everyone had fun explaining how they had implemented their solution to their neighbour.

[Andy and Nat listen intently to one BarCamper's version of the schedule solution]

Robert Lee-Cann on Over-Engineering Is Fun!
Leeky's presentation was a light-hearted and thoroughly enjoyable look at solutions to problems which have been hugely over-engineered, and he wondered if this was a typical trait of geeks in general?

[right, Leeky having a geeky- brained moment]

Problem: Is the coffee machine full?
Easy Solution: get off your butt and go and look
Geek Solution: we all know where a bit of over-thinking can get us: webcam trained on the coffee maker

[below: The man needs coffee!]

Problem: Who's going to make the tea round?
Easy Solution: Press-gang someone into doing it
Geek Solution: Web-based ordering of drinks, LED display in the kitchen showing the round required, online voting afterwards to see how well it was made!

Confessions:
Having described the above solution which is in use at his work (!), he asked us all if we would like to confess our most ludicrous over-engineered solutions. Some of the best were as follows:

  • Meri - private IRC channel to decide the flavour of your pizza before ordering it - used by people living in the same house
  • John - set up a telly, Freeview box and video transmitter in one room and a reciever in the other room - when they could have run a cable through the wall!
  • Brave Geek: had written 112K JavaScript file to write a whole web page on the fly, built in the days of Netscape 3 and IE3! He got a round of applause for that one!
Pitch An Idea
The final part was for the audience to come up with a solution to the perennial problem of putting the loo seat up or down in the bathroom. Many outrageous examples were put forward, which ranged from having a finger-print recognition pad on the loo door, so the loo "knew" who was about to sit down, to weight/position sensitive pads just in front of the loo, so it knew if gents were standing or sitting down! All great fun.

Andy Budd on The User Experience
Andy started by talking about the early desktop interface, when abstracting the interface made it easier for "non-tech" users. At the time, it was revolutionary. Similarly, Joe Bloggs doesn't want to learn Unix to use their iPods. People DON'T read the manual. No wonder we say RTFM so often.

We learn by experience - programming DVD recorder is very similar to programming the video. So the building blocks are there and users learn the metaphores. It makes it important not to break common interaction habits.

Users learn new technology by exploring - you switch it on and start clicking buttons to see what happens! So make buttons look like buttons. And make sure it's not fragile so that inexperienced users can't break the system with one click.

Modern life constantly demands our attention. How easy is it to send a text while crossing the road? Rarely do people give your application 100% of their attention. Design it to make things easy, as people are adept at multitasking.

Make error reports blindingly obvious. It's a great place to make the user experience a good one - as soon as something breaks, you want immediate service or fix, or at very least, a human-readable error message. Don't make users feel stupid when they do something wrong.

[I'm no dunce]

Usability is all about making technology easier to use. Plan user experiences carefully. Create wireframe storyboards - think how filming is never done without paper mockups. Then test it on REAL users. Can be as simple as chatting to coffee shop customers - feed them donuts and buy them a coffee and get their feedback on your site - one day user testing, low budget - anything is better than nothing.

UCD is sometimes confused with Business Centred Design or Marketing Centred Design. You should not have to deal with politics. But we all know how hard that can be. Designing with a focus on business unit function is also horribly bad. Technology Centred Design - designing around our own technical ability - we do it that way because we can - is also a no-no.

Get out and talk to the users - find out what they're trying to do with your site. Users don't just want to know what the weather is going to do for the sake of interest, they are more likely to need to know if whether to take an umbrella with them today!

Build up Personas for each broad type of user. Design with these in mind. Very easy isn't always best - maintain a balance. Sites or games companies know about flow - you lose time when you are interested in something.

Starbucks are masters of the "coffee experience" - which is why we are willing to shell out 3 quid for a cup coffee!

Lastly, he made the point that the iPod would probably fail user testing. People buy into the brand. You might struggle through learning the interface, but you're willing to learn it because your friends tell you it's a cool gagdet. So for the right brand, people are willing to take the time to learn new ways of working.

Wednesday, December 06, 2006

Cowboys (Me) And Indians (That'll be Apache)

I'm A PHP Newbie
For some weeks, I've been meaning to try my hand at some PHP development, having done most of my projects to date with .NET. I bought the excellent book Blog Design Solutions in September, and have been gradually reading my way through it in my spare time. It gives advice on installing and tweaking some of the most common blog engines such as Movable Type, ExpressionEngine, WordPress and TextPattern, but the last chapter leads you through building your own blogging solution.

I thought this was a good place to start for a PHP newbie, since there were copious examples and plenty of advice about setting up your test environment, a notorious minefield to tread safely on your own.

Setting Up The Test Environment
Unfortunately, this is where the pain and suffering began... I downloaded the lastest stable Apache release (as adivsed by the book), which was supposedly 2.2.3, as the Win MSI installer. It half loaded up, but would not run as a service on my WinXP Pro machine. The Apache icon appared in my SysTray, but the context menu was blank, and it did not appear in my list of services to start manually! After going round the loop several times, I gave up and went back for the 2.0.59 release instead - which worked first time!

Because I've already got IIS running as my default web server on localhost, I had to tell Apache to use a different port - 8080 is the conventional one for a second web server. Then you can use this in your URL to call on Apache to serve your pages:

http://localhost:8080/blog/index.php
I had already installed MySQL 5.0.22 a while back, along with useful tools such as the accompanying Administrator, Query Browser and Migration Toolkit, but had not really used any of it in anger since.Consequently, it took a few minutes to remember what I'd chosen as the root password for the MySQL Administratior package! Eventually, I set up my database (all very straightfoward with the Admin plugin, you don't have to go messing about with SQL statements to make a new table etc, it's all done from a neat little GUI). I'd also got PHP 5.2.0 installed by now.

Connecting To The Database
The next hurdle came when I tried actually running a PHP page with a database connection. I kept getting an error:
Call to undefined function mysql_connect()
After some reading around in my book Beginning PHP and MySQL 5 book (another one which has been propping up the coffee table of late but came into it's own for this), it turns out that PHP5 does not ship with native MySQL support embedded; you have to download some extra libraries and then go fiddling around with the php.ini file. I found this tutorial page really useful in explaining what was needed. And for all the knocking that Microsoft gets in various quarters, I don't ever remember this much effort being required to set up IIS to run with the .NET framework! Bah, humbug.

Once the environment was properly configured, the actual blog development wasn't too bad. I had a few "moments" of frustration trying to chase down some syntax typos which caused various things to blow up, but you get used to that with hand coding!

Telling The Time
Another tricky thing to get right is date and time formatting. My PHP book gave me info if you want to use PHP to display the current date:
<?php echo "".date("l, jS F, Y"); ?>
Gives you "Wednesday, 6th December 2006".

There are occasions when you want to format the date in the SQL statement, and trying to get your head round a seemingly-arbitrary set of case-sensitive parameters in the format string is difficult. Which is where Dan Winchester's guide to MySQL date_format was also very handy. You might use something like this:
SELECT post_id, title, post
DATE_FORMAT(postdate, '%W, %D %M %Y') AS dateposted, DATE_FORMAT(postdate, '%H:%i') AS timeposted
FROM posts WHERE post_id=$post_id LIMIT 1
dateposted would display "Wednesday, 6th December 2006" as before, and the timeposted variable shows "22:45". I split these in two so the parsed date string could be displayed separately from the time portion - if you made two posts in a day, it's nice not to repeat the day/date element every time. If you wanted to lump them together, just use this instead:
SELECT post_id, title, post
DATE_FORMAT(postdate, '%W, %D %M %Y' at %H:%i) AS dateposted
FROM posts WHERE post_id=$post_id LIMIT 1
This will give "Wednesday, 6th December 2006 at 22:25" as one string.

Future Developments?
So now, I have my own blogging engine running on my localhost using PHP and MySQL. I'm not about to share the new blog with the world, as it largely consists of a personal diary and various rants, but it's been a very worthwhile exercise in dipping my toes in the murky PHP waters.

I may decide to develop the code further, and perhaps use it to host this blog on my own server in due course, but for the moment, it's staying right here at blogger.

Saturday, November 18, 2006

Playpen #6 - sIFR Headlines

I've been meaning to experiment with sIFR headline styling ever since hearing Dave Shea's Fine Typography On The Web piece during the @media 2006 conference. I've finally got a demo going at playpen #6.

What does sIFR mean?
sIFR stands for Scalable Inline Flash Replacement, and is an unobtrusive JavaScript/Flash solution for providing lovely fonts on your site (eg for headlines) whilst still remaining accessible, and not relying on that font being installed on a user's machine. Read more about the techniqute by visitng the official sIFR Wiki/Documentation site. H1 and H2 headings are best restyled using sIFR, rather than large bodies of text. If a browser does not have JavaScript enabled, the headlines will just be styled by the regular CSS definitions, so it degrades gracefully.

Why Bother?
There are several techniques for image replacement. The Gilder/Levin method is one such (see Dave Shea's article which explains some of the others too). Gilder/Levin is recognised as one of the best from an accessibility standpoint. But the down side, is that you have to manually generate each graphic used to replace your text, plus add a specific CSS rule for each in your stylesheet. That's all very well if you have a smallish, static site, and not many headings to replace. But what about database-driven sites and blogs, where you don't know in advance what the text will be which needs replacing? The only practical way to go is sIFR under these circumstances.

Where Can I Get It?
More information and a download for the code can be found at Mike Davidson's sIFR page.

Where Is It Used?
Keep an eye out for any sites which use unusual typography for headings or recurrent elements. If this is a database-driven site (such as ecommerce or blog), the chances are, sIFR will be the method that's used. Two likely candidates off the top of my head are:

Tuesday, September 19, 2006

Further Reading

There was a dangerously-tempting bookstall at d.Construct the other week, and I found myself buying two books which have been on my To Be Read list for a while:

Beginning JavaScript with DOM Scripting and AJAX - Christian Heilmann, Apress
I think it will be an excellent companion for the DOM Scripting book I've already read by Jeremy Keith. Will do a proper review when I've read this in more depth.

Blog Design Solutions - Andy Budd et al, Friends of ED
Great advice for customising your blog. Not just in terms of look and feel, but also advice on hosting your own blog, setting up testing environments, databases etc. I hope to give this blog a "lick of paint" in the near future!

I've also recently finished Dan Cederholm's excellent book:
Bulletproof Web Design - Dan Cederholm, New Riders
This one is a must-read for anybody seriously contemplating standards-based web design. Dan takes common table-based solutions (which can still be seen in the wild), explains why they are not bulletproof, and then reworks the solution in a standards-based way. I was very impressed with the session he did for @media in June, and this takes things even further. A great reference for bulletproof techniques.