Mac vs PC ads
Am loving these Mac vs PC ads. The American version stars Justin Long (Die Hard 4.0) & John Hodgman (never heard of this guy) and the British version stars David Mitchell & Robert Webb (Peep Show).
Favourite posts
Crispin Rodwell website launched
Crispin is a multi-award winning photographer & photojournalist with 26 years experience covering stories throughout Ireland and in almost 40 countries around the World.
He wanted a simple website that would showcase his amazing photography taken worldwide. An easy to use admin area was developed to allow Crispin to upload his own photographs and easily drag-and-drop them into his preferred order. This feature makes use of the script.aculo.us library.
Lynx Sports website launched
I’ve designed and developed a new website for Lynx Sports, a sportswear supplier from Cork, Ireland. Lynx Sports is the first company to take advantage of my Kit Me Out kit designer, allowing customers to experiment with their own kit designs and colours.
Site updates – introducing Wordpress
I’ve been making several changes to the site recently.
As you may have noticed the layout has slightly changed (but not much). Just my way of making the information more accessible.
I’ve restructured the pages. Basically each page no longer has the file extension (i.e. .asp). This is to future proof the site, so that down the line if I decide to switch programming languages, it will be a lot handier to apply. For example, if I decided to convert my site from asp to php then you, the user, wouldn’t be affected as all the pages would be in the same locations therefore bookmarks and search engines will still work.
I’ve been introduced to Wordpress, and am now using it as my blog engine. I know I know, I’m about 2 years behind, but I started using Wordpress for a project recently and couldn’t believe how easy to use it was and how powerful it was. I can’t believe I haven’t looked at it until now. And there’s an endless amount of plugins available so that makes things very handy and saves me a lot of programming time and effort. Thanks to Small Potato @ WP Designer for the easy to follow, step by step tutorial on designing themes for Wordpress. Web Designer Wall also offers some good Wordpress tips. Here’s a couple of useful Wordpress links:
Quick update – very busy
Thought I’d give a quick update as I haven’t said anything in a while.
Very busy these days with Masters course and finishing up a couple of big projects that I started over the summer. Made a few changes to the site to make it a bit more user friendly. I’ve been reading a couple of good usability books:
From this I’m making my sites more ‘user friendly’ and ensuring my designs are easily understood at a glance.
Was at an interesting talk a few weeks back with Sir John Hegarty of Bartle Bogle Hegarty, a highly respected advertising agency in the U.K. Some of their clients include British Airways, Audi, Levis and one of the ads he showed us was this Levis ad below, which I hadn’t seen in years and thought it was pretty cool.
Timed style sheets in PHP and ASP
You may or may not have noticed that my site has a timed style sheet. Visit the site during the day and it has a day theme, early evening a sunset theme and during the night a night theme (you can also click the icons at the bottom left of the site to view each theme). I often get emails asking how it’s done. It’s very simple, and here’s how.
- Harry Roberts @ www.prdesign-studio.co.uk explains in a simple tutorial how to implement the timed style sheets in PHP
- The guys @ www.5key.net explain how to implement the timed style sheet in both PHP and ASP (click here for non-translated version)
Please do check out their sites do see how it’s done and thanks for the refferal guys.
The basics
How the timed style sheets are achieved is very simple. Basically I have three style sheets entitled day.css, sunset.css & night.css. The code checks to see what time it is and if it is between 7am and 5pm, the output is day.css. Between 5pm & 8pm sunset.css and 8pm & 7am night.css. That’s all there is to it.
PHP
<link rel="stylesheet" type="text/css" href="<?php $hour = date("H"); if ($hour >= 7 and $hour < 17) echo "day.css"; elseif ($hour >= 17 and $hour < 20) echo "sunset.css"; else echo "night.css"; ?>" />
ASP
<link rel="stylesheet" type="text/css" href="<%if time >= #07:00# and time <= #17:00# then
theme = "day.css"
elseif time > #17:00# and time <= #20:00# then
response.write "sunset.css"
else
response.write "night.css"
end if%>
How easy is swfIR to use?
Click here to visit the swfIR website.
The website gives you a step by step guide on how to set it up.
- Download the necessary files.
- Copy the Javascript file and swf file to your website directory.
- Include the Javascript file in the header of your web page i.e.
- Decide what technique to apply and apply it to the image of your choice like so:
Answer: Easy!
I came across swfIR (swf Image Replacement) about 9 months ago, round about the time I was introduced to sIFR (Scalable Inmann Flash Replacement) but until recently I had never used it. It allows you to perform image techniques on the fly, for example, rounded corners or rotation, meaning you don’t have to apply these techniques in Photoshop. This gives you a lot of flexibility in regards to what you can do with your images without altering the original.
I was surprised how easy swfIR is to use. One of the reasons I haven’t used it until now is because I didn’t think I had the time to start messing about with it but it literally takes 5 minutes.
<script type="text/javascript">
window.onload = function(){
round = new swfir();
round.specify(\\'src\\', \\'swfir.swf\\');
round.specify(\\'border-color\\', \\'ffffff\\');
round.specify(\\'border-radius\\', \\'10\\');
round.swap("#img");
}
</script>
Before
After
The above code gives an image (with an id of ‘img’) nice rounded corners.
Thanks to the swfIR team (Jon Aldinger, Mark Huot & Dan Mall) for an easy to use and useful tool.
Green Energy in Waringstown recieves a face lift
I recently designed a new fresh and modern layout for Green Energy Solutions. Over the last year Green Energy have had much success and are rapidly expanding therefore their website needs to reflect the professionalism that the company offers, look interesting to potential customers and have all information easy to access.
The key to the new site was to make things simple, have the information that the user wanted available at the click of the button. And for those who could not find what they were looking for, a Google integrated search facility, which not only searches through the web pages, but searches through any additional pdf documents also.
The new design is web standards based (CSS & XHTML), which compared to the old site (designed with HTML tables) allows for a greater range of accessibility and gives some meaning to the data structure which is important for SEO. New high resolution photographs were taken by freelance photographer Ronan Murphy to give the user a better and more detailed view of the products and services that Green Energy have to offer.
A new admin area has been added to allow the client to keep the site up-to-date as they would like and a dealer back-end system has also been developed to allow dealers to login and order parts, download technical pdfs and download marketing material. The client is now also able to add dealer locations and contact details to a Google Map integrated into the dealers page.
Green Energy Solutions: Renewable fuels, solar panels, biomass fuels, wood pellet heating systems
Make your own Simpsons character
Was checking out the Simpsons movie website the other day and noticed they have an application for making your own Simpsons characters. See what you’d look like on the set of Springfield, compared to the likes of Moe, Smithers and of course Homer. There’s a lot of characteristics to choose from so you should be able to get a reasonable resemblance.
Simply go to www.simpsonsmovie.com/main.html and click on ‘Create your Simpsons avatar’.
Annoying yellow input fields from autofill
If you have the Google tool bar installed on any of your browsers, I’m sure you’ve come across yellow input fields in forms. This is a feature called autofill that highlights the fields that the tool bar can automatically fill for you. If you’re a web designer, these can be particularly annoying:
- They may not fit in with your site’s colour scheme
- User’s may get confused into thinking these are the only required fields
- If you’re trying to spice up the look of your form, it makes things ugly
Until recently I have always accepted that that was the way it was going to be. I have Google tool bar installed on Firefox. Installed it ages ago and use it occasionally to look up page ranks however, in my opinion it’s pretty useless. With the latest versions of Firefox and Explorer I don’t think you need it, just gets in the way, so I keep it hidden.
I was trying to spruce up a form by adding a background image to input boxes and the fields were turning yellow, as usual, but this time I decided to look up a solution to my problem. Incidentally, you can turn the autofill feature off, but users visiting the site most likely have it turned on. I came across a few Javascript solutions, which I thought would do the trick, until I eventually discovered that there was a simple solution to the problem the whole time. Simply by adding !important after my CSS line, the browser will obey my style rather than the autofill style.
background:#585858 !important;
A simple solution to an annoying problem. My advice is to remove Google tool bar in the first place, but as a web designer it’s handy to know what some of your users might be seeing.