McGEE, Barry. (2010)

musings & scribings from my head

Archive for Web Design

Website Launch: Madden Raparees GFC

A few weeks ago, I launched a little website I designed and built for Madden Raparees Gaelic Football Club.

My little brother plays for Madden Raparees so asked me to design and build something simple which could be updated easily. I had been itching for a little project to use Frog CMS so I got stuck in.

Madden Raparrees

As I’m primarily a web developer these days and prefer to hand over the design work to others who can craft a much more beautiful picture, it was a bit daunting to fire up Photoshop again and get designing. However, I soon found myself losing hours playing about and experimenting. I forgot how much fun designing with a blank canvas can be.

It’s also quite liberating to be able to just push pixels about with a keystroke as opposed to having to code to make aesthetic changes.

In the end, I decided to go with a simple layout based on the popular 960 grid layout, supported with a large hi-res image in the background. I also took all the images on the site myself and was quite pleased with the visual impact given by the football in the background.

Frog CMS is very easy to install and hack around with if you’re competent with PHP and mySQL. Documentation is however limited, but it’s open and simple enough to allow you to pretty much manipulate it however you wish.

Frog CMS is open source, however active development of the core seem to have virtually ceased but a fork has been made in the shape of Wolf CMS. From what I can gather, this is where the magic is now happening and for any future projects, I shall be using Wolf instead.

I have now handed the site over to the football management and it’s been well received by the local community which is good to see.

Visit Madden Raparees GFC

The Problem With the Web

The Internet is vast and the mind boggles about how big it will be in ten years time.  It’ very easy to think, after toiling away for weeks, that when you launch a website, it’s gonna take the Internet by storm (Or maybe that’s just me?). Anyway, 99.9% of the time, it will not. It’s just a very small little grain of sand in an ever expanding desert.

In ten years time, will there be any point in making and adding new websites to the Internet? After all, domain names are already running out, where will we put stuff? How will anyone find it? Will the Internet be superseded by a new platform where all essential services are provided and the Internet as we know it becomes a graveyard of archives that people did in the nineties and noughties? Hmm.

Some think the answers lie in semantics, watch this great little doc to find out more…

Web 3.0 from Kate Ray on Vimeo.

Web Fonts with Google

How we use typography on the web has changed massively in the last few years.

When I first started building websites, there were roughly 5 “web-safe fonts” and if you wanted your text to be accessible, you had to make do with those special five.

Things started to change a few years back with the emergence of sIFR. This was very exciting at the time as it basically meant you could use any font you wished on your webpages, providing the user had Flash installed. However, it was and still is quite buggy. If you wish to do anything other than the basics, it can be quite temperamental to manipulate to your needs.

More recently, Cufon has appeared as a worthy alternative to sIFR, circumventing the dependency on Flash and more importantly, Cufon is much leaner in page weight terms. It also very simple to use. This has been my weapon of choice for quite a while now.

However, Google has now entered the fray and made the whole thing even simpler. Last week they released their Font Directory which essentially means you can install any of their fonts in your web pages with two lines of code.

Web fonts with Google

Google have taken care of all the display issues, even making all their fonts IE6 compatible, and wrapped them up in a nice little Black Box for the web to use. The library is a little limited at the minute but I fully expect it to expand with time.

I’ve used the font ‘Reeny Beeny’ for my header and navigation on this blog. To see hows it’s done, follow the simple steps from Google.

FTP on the hoof

I arrived in London tonight for a couple of days training starting tomorrow. Upon arrival and saying goodbye to the nice air hostesses with the interesting headwear, I checked my emails to find a client in a panic as his website was falling apart in IE7 for some unknown reason.

He was quite concerned as, although it’s never good for a site to fall over, this week he received quite alot of media coverage and was getting alot of traffic off the back of it. Not a good time for a site to fail but as with Murphy’s Law

Anyway, after a quite look on my iPhone I realised that a third party script had failed. I hasten to add, I did not develop this site, I’ve just took over the maintenance recently after the company that built the site went to the wall. Digging into this site, it’s not hard to see why, but that’s beside the point.

Speaking of the point, I suppose I should get to it, I just wanted to let you know about a useful little site, net2ftp, which is a web based FTP client. This handy little web app made it super easy, once I found the nearest Internet point in the airport, to jump in, disable the offending code and get the site up and running again until I can get a closer look.

Also worth a mention is FTP on the Go, an FTP client iPhone app. I have this as well but don’t store any usernames or passwords on it for security reasons*, and can only recall the FTP details of my own site off the top of my head. But, if you have the memory for it, it’s also a great little app that will allow you to edit code via FTP anywhere.

As I was reminded again tonight, this can come in very handy indeed.

*On that security note, always remember to log out of any remote FTP service or risk the consequences at your peril!

A few thoughts on BizcampNewry

Today, I attended the first BizcampNewry, which I must say I very much enjoyed it. It was an all-day event & held in the Southern Regional College in Newry, a city about 30 miles from Belfast near the border.

For those of you unaware what a “BarCamp” event is, it’s basically a mini-conference where the attendees arrive and sign up to be the speakers for half hour slots throughout the day. You can generally talk about whatever you want but from experience of attending similar events, it’s wise to have done some preparation before hand, rather than jump up on a whim. It’s also advisable to speak on a topic you are very well versed in as you never know who may in the audience, and you could find yourself out of your depth very quickly.

It was billed a business conference but the talks I attended were very online business orientated although this may have been due to the effect that I was drew to the webby sounding talks. I did see, for example, a talk on auditing which I’m sure was business agnostic.

Of the talks I attended, I particularly enjoyed Niall McKeown’s (ION Online) talk on why you shouldn’t (should) start an online business, Lee Munroe’s presentation on the growth of Lookaly and Mark Nagurski gave a great insight in the afternoon on how to monetize your online brand.

There was also a presentation in the morning (I’m afraid I’ve forgotten the gentleman’s name, if anyone remembers, please let me know in the comments), who told of how he had successfully built a business online selling inflated balloons. An amazing idea and he passed off some very useful tips and tricks to consider when distance selling physical products online but he did however advise people with an idea of selling products to start off by building their own websites. I disagreed and why I disagree will be the topic of a blog post later this week…

These events can sometimes be blighted by people only there to promote brand numero uno, but thankfully that didn’t seem to be the case today with many speakers clearly just giving up their time to pass on the value of their experience which was appreciated. If you were one of these speakers, I thank you.

All in all a great event so close to home, and big props to Chris McCabe & Nichola Bates for making it all happen, these things don’t come together magically and I’m sure there was a lot of hard work went on behind the scenes.

Incidentally, I found out about this event through the Digital Circle network and also see that there is a BizcampBelfast on the horizon. I shall certainly be there.

A big week at BBC Switch

So, this has been a pretty big week for us at BBC Switch. After 3 months of development we launched the revamped Switch portal. This is a big step up for us as it is now sitting on the new Forge directory. Forge supports dynamic, database-driven services rather than static page-based services and an infrastructure that includes new hardware, systems and updated technology. It is also powered on the PAL layer by PHP. All this is good news for us developers; and those maintaining and updating the portal. It is now much easier to discover our content across various platforms and should make for a much improved user experience for our teenage audience. The lead developer for this was the very talented Charlie Rogers.

A unique feature of this portal is that it has a dynamic “live” state. What this means is that the page will automatically broadcast our online content like The 5:19 Show during the week and simulcast BBC Two when BBC Switch content is being played out on Saturday afternoons (from roughly midday – it varies.)

BBC Switch revamped portal

BBC Switch revamped portal

It is very feed based and alot of the dynamic behaviour on the server side is made possible by manipulating the iPlayer and Programmes feeds based on our Switch branded content across BBC Two and Radio 1. On the client side, there’s quite a bit of lovely Glow to make the live transitions etc.

This week also marks the return of our TV zone with The 5:19 Show making the move from online to BBC Two. It’s just as random and funny but now with even better guests thanks to the lure of TV exposure. You can catch the show again on the The 5:19 Show programmes page.

We also have several new TV shows starting in the Saturday zone. We have a new comedy about starting university called Off The Hook, it’s very funny and is also available to watch online. This was piloted last year as Fresh as an online only series, and went down very well with the audience. It reminds me very much of those heady first few weeks at Uni and I’m also quite keen on the hot Irish girl featured. This is also being shown on BBC Three which should help promote the Switch brand to a wider audience.

Chartjackers is an exciting project using YouTube celebs to attempt to well.. hijack the charts and get a collaborative single to number one, using the YouTube community. These guys are very well know individually for their vlogging talents and have approx 35,000 subscribers each! It’ll be very interesting to see how their project pans out over the coming weeks.

And finally, tonight sees the launch of The Cut, the new soap series, initially played out online every weekday, followed by a weekly omnibus on BBC Two. As this has been an in-house production, I’ve seen the huge effort put in by the production team and have to say, having seen the first couple of episodes, it’s very slick indeed. Set and filmed with five miles of Switch HQ, it’s very fast paced and includes lots of new music from BBC Introducing. In this vein, if you are a young aspiring musician, you may also get your music featured in the show. We are also putting in a big effort online, offering a backstage insight via The Cut Blog and by offering users to take away an embeddable widget to stick on their third party spaces. This helps us push relevant content to users who want it and helps increase exposure to their friends.

The Cut website

The Cut website

All in all, exciting times indeed!

IE: The Status Quo

With recent news that Windows (Europe) will no longer bundle IE with Windows OS, this article on the current state of IE browser share makes for very interesting reading indeed, hard to believe that IE6 will outlive IE7 but unfortunately, that seems to be what we are stuck with..

State of the Browsers: IE Edition

Death to Internet Explorer 6 – Please?

I was heartened to learn this week that Microsoft has announced that it will now bundle IE8 into it’s Windows Automatic Updates. This means that users will be presented with a priority update which will upgrade their web browser from IE6/7 to IE8.

There are also several campaigns raging throughout the Internet to finally get shot of IE6 including Bring Down IE6 pioneered by the excellent .net magazine and a useful little piece of javascript from IE6 Update. Although with the latter, however worthy the cause, I’m a little uneasy about the fact it pertains to be an official Windows message when in actual fact it’s not. It’s a little too like a Trojan tactic for my liking.

As much as this is all very encouraging, it may not have the impact many are hoping for as many the users still using IE6 have managed to resist upgrading to IE7. This may be down to a few reasons including users owning an illegal copy of Windows or being locked down in a corporate environment. I know this first hand as many non-tech people in my office still use IE6 as their primary browser as the BBC hasn’t even managed to roll out IE6 yet.

To this end, I’m afraid to say, the reports on the death of IE6 may be great exaggerated.

How can BBC Guidelines improve your website?

Seetha Kumar

At a recent monthly departmental meeting, I met Seetha Kumar, controller of BBC Online. Seetha is responsible for the editorial and strategic development of the mammoth web presence that is bbc.co.uk and she reports to the BBC Trust.

BBC Online faces many challenges as it continues to scale and must move and adapt quickly to keep up with new technologies and trends. Some of the challenges I have encountered since I started working on sites for the BBC include;

  • How can we make each site/offering unique yet remain part of the BBC site and brand?
  • How do we bridge the gap in tone and voice between sometimes serious hard hitting sites such as Revealed and comedy sites such as The 5:19 Show?
  • How can we make sure we aren’t replicating content already existing on the site?
  • How do we ensure we aren’t reinventing the wheel over and over again when designing page elements?
  • How can we best move users through the site to content most relevant to them?

These are exactly the types of questions Seetha was tasked with answering and this week she has published her ten very insightful publishing priciples for BBC Online. However, these principles are not unique to the BBC and should be a must read for every website owner, however big or small.

It is continually drummed into us at the BBC to put audiences at the heart of everything we do. This is something that every website owner should also do.  Design and develop with your user at the heart of your process at all times. Only then will you see your site reach it’s full potential.

I’ve reproduced Seetha’s guidelines below but they can also be found on the BBC Internet Blog.

1. Web sites and products should be designed to meet a clearly-defined audience need

Anticipate needs not yet fully articulated by audiences and meet them with products that set new standards and even exceed expectations.

2. The best websites do one thing really, really well

Do less, keep it simple, execute perfectly.

3. Ensure there is nothing similar already published on BBC Online

We are all contributors to one website. How are you adding to what exists already? Can you reuse what has been built and is your content, in turn, reusable? Don’t create a web cul-de-sac – we have so many of those already!

4. Any website is only as good as its worst page

Ensure best practice editorial processes, technology and UX standards are adopted and adhered to. Your content may be linked to, forever, so plan for the full lifecycle. Consider how will it look in three year’s time, how it can be curated. Will it degrade gracefully – or should you set a date for it to be mothballed or archived?

5. Accessibility is not an optional extra

Sites designed that way from the ground up work better for all users. Your site should, where appropriate, easily translate into other languages.

6. Maximise routes to content

How will people know your site exists? Keep the URL as simple and memorable as possible (and remember that all URLs should be lower case). Optimise your site to rank high in Google and other search engines. Develop permanent URLs and contextualise with as many aggregations of content about people, places, topics, channels, networks and time as possible.

7. Free up your content for consumers to take away

Don’t reinvent Facebook or Bebo – just make it easy for users to take nuggets of content with them, with links back to your site or the wider BBC from wherever they are. Wherever and whenever users find your content make sure the feedback loops work.

8. Do not attempt to do everything yourselves – “do what you do best and then link to the rest

Link to other high-quality sites – your users will thank you. Use other people’s content & tools to enhance your site and vice versa.Don’t feel you have to host the conversations about your content, just link to them or join in as appropriate.

9. Consistent design & navigation needn’t mean one-size-fits-all

Users should always know they’re on a BBC website, even if it doesn’t look exactly like another. Clear signposting is vital to ensure users won’t get lost within or beyond your site.

10. Personalisation should be unobtrusive, elegant and transparent

After all, it’s our users’ most personal data – respect it. And adhere to our forthcoming cookie policy!

sIFR

I only recently looked into sIFR. I know, I know, its been around for a while but I can be a Johhny come lately at times and although I had a yellow post it beside my computer for months, I only really got down and dirty with it last week…

sIFR (scalable Inman Flash Replacement) is not a new technology; it’s a new technique that marries existing technologies – Flash, JavaScript and CSS – to improve web-based typography where mainstream techniques, such as CSS image replacement…

…and its really quite easy to implement! Much of these ease is due to Mike Davidson’s release pack, which really does all the donkey work.

I managed to get sIFR going so I can now integrate this into my h1 and h2s in my site. SIFR uses Flash, JavaScript and CSS to allow designers to use custom fonts in web pages regardless of whether that font is installed on the clients machine or not. The reason I want to use it in my major project is because I can follow through with my brand identity throughout my design while still being fully accessible and adhering to the W3C guidelines…exciting stuff, I’m sure you’ll agree, check out my test page.

Next entries »