The tale of the design rip off

By Mark Goddard | Published: August 10, 2010

It happens a lot. Someone may browse your website and think “That looks great, I could use that”, then five minutes later there is an exact replica somewhere being passed off as their own work.

It’s finally happened to me. Normally you probably don’t have the privilege to see this blatant ripping of ones own work but today it was brought to my attention. Read More »

Posted in General, Website Design, graphic design | Leave a comment

iGrowl, A simple jQuery Plugin for iPhone Notifications v0.1

By Mark Goddard | Published: May 23, 2010

So you may or may not have noticed the iPhone notifications which popup every now and then subtly dropping you information. They come in real handy for AJAX calls on the iPhone.

I’ve been recently developing a Web App for the iPhone and came across the problem of displaying these. I couldn’t find a suitable notification plugin (that was simple) for jQuery so decided to whip one up myself (yay my first jQuery Plugin).

This mimics the iPhones native Growl notifications. I first saw these in Tweetie (now Twitter for iPhone) when hitting the retweet button.

It has three options, to use simply include the jQuery Library and then any of these three things:

1. AJAX Spinner

$.iGrowl(1,"Please wait..."); //1 = ajax spinner

2. Success!

$.iGrowl(2,"Success!"); //2 = the tick icon

3. Error

$.iGrowl(3,"Error"); //3 = the cross icon

The idea is a simple notification system for iPhone and works perfectly for AJAX callbacks. You can customise the message to display anything you like and it works on all the modern browsers. It was intended for use only on Apples mobile devices but works and looks great in Firefox, Safari and Chrome and doesn’t look too bad in IE either.

Any problems let me know and I’ll be right on to fix them. Enjoy!

 

Download iGrowl v0.1 – 7.6kb | View a Demo

 

Tip: View the demo in your iPhone and add it to your homescreen for a true Web App demo.

Posted in Downloads | Tagged , , , , | Comments closed

Fixing the Hover event on the iPad/iPhone/iPod

By Mark Goddard | Published: May 21, 2010

In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:



if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });





    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });


}


								

				
Posted in Browsers, Tutorial | Tagged , , , , , ,  | Comments closed

			


				
			

    			
General Election Day, who is the HTML5 of British Government?


By Mark Goddard | Published: May 6, 2010

				




Here in the UK a General Election is upon us. The different parties are fighting for your vote and to promote themselves online most of the parties have launched brand new websites. Here is an analysis of the different technologies used to see who is the HTML5 of British Government.


The Labour Party




Notable technologies used:


    

  • jQuery 1.3.2 + jQuery UI 1.7.2
    • 

  • Prototype 1.6.1.0
    • 

  • Scriptaculous 1.8.3
    • 

  • Tiny MCE
    • 

  • CSS3 (or at least what’s possible using 2.1)
    • 

  • XHTML 1.0 Transitional
    • 



How does it stack up against web standards?


XHTML 1.0 Transitional with 301 Errors, 45 warnings (oh no Labour, thats bad!)


The Labour Party’s website is well laid out with a solid grid system organising content well. It has a great use of colour clearly defining the brand of Labour (Red). Overall a nice design worthy of any Government site. The use of jQuery seems to be a no brainer in modern websites and so it should be, it works so well.


Liberal Democrats




Notable technologies used:


    

  • jQuery 1.3.2
    • 

  • XHTML 1.0 Strict
    • 



The Lib Dems don’t really use a lot of next generation technologies. It pushes the boat out with jQuery, and that’s only used for the rotating banner.


How does it stack up against web standards?


XHTML 1.0 Strict with 1 Error (such a shame! It was only a target="_blank" too, never heard of window.open?)


The Lib Dems website is pretty horrible really. It’s untidy, poorly organised and their use of colour is pretty much horiffic. First impressions of the Lib Dems site is “Mothercare”, as they use the old Mothercare green their brand was originally built on.


Conservative Party




Notable technologies used:


    

  • jQuery 1.2.6 + jQuery UI 1.8
    • 

  • jQuery 1.4.2 (yes they really do include two versions, and ones not even Minified :-O )
    • 

  • Dreamweaver Flash AC_RunActiveContent.js (why in gods name? swfobject anyone?)
    • 



How does it stack up against web standards?


XHTML 1.0 Transitional with a pass! Huzzah! (With 2 warnings)


Well after that win for Tory (pass) their design doesn’t do too badly either. With a great use of colour and clear use of typography and layout the Conservatives website is a joy to look at and play with (Homepage). It’s just a shame this is a front for an actually poor site overall. The design completely changes when visiting alternative pages, which is a shame indeed. But at least it passed validation!


Additional Information


Lets compare their Twitter followers:




Let’s be honest though this is a bit of fun, vote for who you like, not how popular they are online, but I know who I voted for!


								

				
Posted in General, Photography, Website Design, graphic design | Tagged , , ,  | Comments closed

			


				
			

    			
10 Amazing Stereographic Projection photos on Flickr


By Mark Goddard | Published: December 19, 2009

				


Stereographic Projection is an art-form which I’ve been eager to try for quite some time now. It’s one of my new years resolutions for 2010. The execution is very difficult to get right but the outcome of such a photography style is simply astounding. Here’s 10 to get your creative juices flowing.


Salt Pan Stereographic


© Martin Heigan – http://www.flickr.com/photos/martin_heigan/1518652806/


 Read More »


								

				
Posted in Photography | Tagged , , , ,  | Comments closed

			


				
			

    			
Closed: Win 500 free professional business cards! Comment/Retweet to enter!


By Mark Goddard | Published: December 3, 2009

				


Business Cards


Update: Competition closed! Winner should expect an email very shortly with details on how to get their business cards! Thanks to everyone for entering!


Update: Winner was Matt, thanks for retweeting and commenting. I’ll get a photo of his cards when they are posted ;)




Courtesy of Overnightprints.com we have a batch of 500 professionally printed business cards up for grabs!


There are two ways you can enter into this prize draw;


    

  1. Enter your comment below (any pleasant comment will do) and you’re entered
    2. 

  2. Retweet this twitter message I posted (tweet must be identical)
    3. 



What you win…


    

  1. 500 custom business cards, completely yours, no strings attached
    2. 

  2. Free business card design by me (optional, but there if you want it)
    3. 

  3. Humbleness (until you hand out that first card and make that first contact!)
    4. 



That’s it! Easy peasy. You can enter via either stream (twitter.com or comment below).


This promotion is thanks to the guys at overnightprints.com who are promoting their postcards and business cards ready for the holidays.


Competition closes at 7pm GMT on Friday December 11th 2009  Saturday 12th December at 12pm GMT so get your entries in quick.


Winner will be chosen from the collated comments and tweets then chosen at random by software. Competiton is open to everyone!




								

				
Posted in Competition | Tagged , , , ,  | Comments closed

			


				
			

    			
Business Card design, how to do it right!


By Mark Goddard | Published: November 28, 2009

				


Business Card


We’ve all been there, with an opportunity to impress only to fail by handing out a scrappy piece of paper with your name and number on. Is anyone likely to find that piece of paper again once they’ve put it down? Are they likely to pass it along to another potential client? Or are they more likely to throw it in the trash?


A business card is an important piece of promotional material. Something that is unlikely to be thrown away if it does it’s job properly. It must be memorable, easy to read and contain all the information needed in a short amount of space. Read More »


								

				
Posted in Downloads, Tutorial, graphic design | Tagged , , ,  | Comments closed

			


				
			

    			
Homepage Design: How to make an impact


By Mark Goddard | Published: November 6, 2009

				


FireShot-capture-#001---'Mark-Goddard,-Zero-One-Hundred-Web-Design---Artfully-Illuminating-Design'---0100_tv


Yesterday I launched the brand new homepage of my portfolio. It was a long time in the making trying to get everything looking good and now I’m going to explain the reasons behind the design, how I came to it and how you can apply the same techniques.


 Read More »


								

				
Posted in General | Tagged , ,  | Comments closed

			


				
			

    			
My Top Ten Web Designer Resources


By Mark Goddard | Published: November 1, 2009

				


If your a seasoned web developer your going to want to follow some great resource sites. I myself have quite a large list of RSS feeds in my Outlook but here are my top ten with plenty of resources, freebies and tips…I will however feature 5 “biggies” and 5 “smallies” if that makes any sense to anyone who speaks the English language…


Here we go with the biggies…


1. SmashingMagazine.com


Smashing Magazine


Packed full of daily web resources from desktop calendars to tips on learning CSS. They have also recently had a redesign massively cleaning up the content (which was pretty bad on my opinion) and also aggregating content from websites such as spyrestudios.com, buildinternet.com and webdesignerwall.com. All of which are also great resources…


2. WebDesignerDepot.com


rss

Not specific in it’s content, Web Designer Depot seems to feature everything from Illustrator spotlights (like the recent one on the amazing Archan Nair) all the way to freebies such as the nice RSS icon set. I do however recommend they remove the horrible “I WAS a fat slob” adverts on the right as it’s pretty dire to see (see screenshot to the right)…


3. Spyrestudios.com


Is very good at eyeing up great web designs and showcasing them on their site. They are a small design agency in Canada but have a great blog. They also recently showcased my website because of it’s use of cufon, the amazing javascript text replacement (towards the bottom of the list).


4. BestWebGallery.com


Not a brilliant resource per se but it does feature some amazing modern designs. Not to be used as a starting point for designs but rather as “subliminal inspiration”.


5. BuildInternet.com


Build Internet is managed by twins Sam and Zach Dunn and is a great place to read more about the business side of website design. It’s packed full of jQuery tutorials, graphic design resources, CSS information and HTML tips. Give it a look.


Now for the smallies, generally sole developers who blog about their industry, not necessarily “small”…


6. Adii Rockstar


Adii Rockstar


Now Adii is quite a little celebrity online. He’s known well for his work on the WooThemes project which sells premium wordpress themes but makes for a very interesting read.


7. Fabio Sasso


He’s the guy behind abduzeedo.com and seems to be in deep in the website design world. He has some great work to check out and is involved in a large number of successful websites packed full of resources and inspiration.


8. Veerle Pieters


A graphic/web designer from Belgium, Veerle has tons of posts from over the years covering stuff from html to illiustrations. It makes for an interesting read if you dig deep into the older content. You’ll also see just how much a great designer knows about their industry when you read Veerle’s blog.


9. Collis


Probably should reside in the biggies list but because we aren’t talking about his amazing success story, Envato, he slots into the smallies. He’s the CEO of one of the largest and greatest design marketplaces on the web. He has his own blog called the Netsetter which covers mainly covers the business side of the design industry. (he also features a lot of guest writers too)


10. Chris Spooner


Because he’s a local boy! Chris was born and raised in Sheffield, UK, and runs his blog over at Spoon Graphics. He posts some great content covering mainly graphic design but it a great source of inspiration.


There are many more people to check out in the web design world, you just have a dig, and when you find them either subscribe to their RSS feed or follow them on Twitter like a stalker. Either way you’ll get great resources and good reads!


Also see @liammckay @kevinrose @shauninman @jasonfried


								

				
Posted in General, Website Design, graphic design | Tagged , , , ,  | Comments closed

			


				
			

    			
Developing for multiple browsers *sigh*


By Mark Goddard | Published: October 31, 2009

				


I know it’s unfortunately the “taboo” of modern website design, but many developers don’t want to simply leave their IE7 visitors and IE6 visitors in the dark. It’s fine for sites like this one, or for web applications but what about corporation websites? For sites that HAVE to support older/alternative browsers. This came to light ever more when I recently worked on a website which would mean that customers worth millions could possibly be using IE6. There’s 50% of employees there too who still run IE7 so not supporting them wasn’t an option. I needed (and used) a large set of tools to help me accomplish this task, and I’m going to tell you about them.


Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site. Read More »


								

				
Posted in Browsers, General, Tutorial, Website Design | Tagged , , , , , , ,  | Comments closed

			


				
			

    			
Great Advert Roundup


By Mark Goddard | Published: October 25, 2009

				


I’m a sucker for a good advert. Clever adverts such as Oranges “I Am A Smile When You Least Expect It (see below)”, Benettons controversial but accurate campaigns, and over the past few days I’ve found quite a few great print adverts which caught my eye.




The Orange advert always makes me smile. It’s so fluid and random at the same time. It makes you think like a child for a second and ultimately drops Orange in an exciting, fresh and great advertising niche. Hopefully after the T-Mobile merge these adverts will stay as the T-Mobile adverts are really sh**.


findus-kid1


Clever use of an old stereotype. Kids hate going to Grandmas. So bring her cooking home.


http://www.greyparis.fr/


Head2


Disturbing in every way yet after reading the tagline it makes sense, in a sick twisted way.


http://www.milc.it/


Notice_Wrinkly


Putting textures into Billboards is probably no easy feat although the guy who put it up probably saved time getting each one smooth.


http://www.seetheperson.info/


zeissbeetle


OTT for sure but a brilliant way to advertise…a magnifying glass!


Y&R Dubai


audimountains


Golden Age Integrated Marketing & Communication. (Ignore the “Sprinking the Passion” Haiku.)

I like it when companies “dirty” their cars up. Most 4×4′s are pathetic excuses for offroad vehicles, finally Audi saw the light and slapped some mud on there…or did they?


								

				
Posted in General | Comments closed

			


				
			

    			
New Result Group Website Launch


By Mark Goddard | Published: September 21, 2009

				


rentalresult


So it’s 4 months in on my new job and I’ve finally just launched the brand new Result Group website. It’s three solid months of development, hundreds and hundreds of tweaks, 1500+ lines of CSS and thousands more of XHTML programming and PHP. It’s built entirely by hand, no cheap CMS systems and no limitations on scalability. It also runs part of the site on WordPress (see the Rental News section).


Result Group develop world leading Rental Management Software and they needed a world class website to go along with that. The site was redesigned from the ground up by myself and there has been a lot of work chucked into a very fast moving three months. We finally went live last week and as of now, all hiccups seem to have been rubbed out.


It also uses GeoIP technology to direct you to the correct regional site (United States visit us.rentalresult.com while UK visit www.rentalresult.com).


It really was a mammoth task and one in which I’m very proud to have built solely.


Go check out Result Groups rentalresult website for their rental software and check out the design and jQuery loveliness.


								

				
Posted in Website Design, Wordpress, graphic design | Tagged ,  | Comments closed

			


				
			

    			
DRVE


By Mark Goddard | Published: August 22, 2009

				


drve


I go on holiday in 5 days and it’s going to be an experience! Theres a group of us going (with about 7 cameras, 4 iPhones, a laptop, a motorhome and 1200 driving miles through Europe) Because there are four creatives on board we decided to build a website documenting our travels.


The outcome is http://drve.co.uk/ so make sure you check it out. You can also follow our tweets @drve09.


								

				
Posted in Photography, Website Design | Comments closed

			


				
			

    			
Manchester United vs Chelsea – Community Shield 2009 Wembley


By Mark Goddard | Published: August 10, 2009

				


Wembley Stadium


Update 6th Nov 09: My panoramic wembley photo has been used in Main Event Magazine (Thanks Ky for sorting this)

Update 12th Oct 09: This photo is now part of the Wikipedia page on Wembley Stadium as the header image


The game was full of controversy, foul play, substitutions and of course, goals. Chelsea finished up beating the Champions 4-1 on penalties and I took along my trusty SLR to photograph some of the action and I got some pretty good shots! Note: all the photos are licensed under the Creative Commons Attribution-Share Alike 2.0 UK: England & Wales licence which means they are free to use along with attribution to this site! Enjoy!


Cool


Ben Foster


giggs_small


drogba_small


Rooney Loud Mouthing


Owen Man Utd Debut


Penalties


Cech Saves Giggs


Chelsea Community Shield Winners 2009




Attribution-Share Alike 2.0 UK: England & Wales




								

				
Posted in General, Photography | Tagged , , , , , , , , , ,  | Comments closed

			


				
			

    			
Free Cool Wallpaper for download


By Mark Goddard | Published: August 2, 2009

				


Funkydory


I’ve been toying with Photoshop filters and different colours lately for a project at work and decided that what I created was good enough as a wallpaper! Therefore I am now announcing for download “Funkydory“. A very colourful and stylised background for your computer in many different screen resolutions. Just pick yours from the list below!


1024×768 | 1280×800 | 1440×900 | 1600×1200 | 1680×1050 | 1920×1080 | iPhone/iPod Touch


								

				
Posted in Downloads, graphic design | Tagged , , , , , ,  | Comments closed

			


				
			

    			
Spam Drawings


By Mark Goddard | Published: July 29, 2009

				


Victory


Elliott Burford has drawn some awesome ideas related to spam headlines.


Such classics as “Win your victory in bed” and “Show your longer organ off to your buddies” have been creatively drawn


Head over to elliottburford.com for 22 more illustrations. Brilliant.


								

				
Posted in graphic design | Tagged ,  | Comments closed

			


				
			

    			
FREE TwiPho wallpaper


By Mark Goddard | Published: July 19, 2009

				


TwiPho


I just launched a new FREE wallpaper on TwiPho. It looks amazing and was designed by the brilliant Graphic Designer Kyle Wilkinson.


Go check it out and download it.


								

				
Posted in Downloads, graphic design | Comments closed

			


				
			

    			
Four Free Vector Characters + HD Wallpaper


By Mark Goddard | Published: July 17, 2009

				


Ok so I got my Illustrator hat on yesterday and drew four character doodles on my notepad.

I then thought “Why not draw these as Vectors?”…presenting Four Free Vector Characters + HD Wallpapers!


Characters


These vectors are released under a Creative Commons Attribution Licence. This means you CAN use them for ANYTHING, commercial or personal and you can even modify them without asking permission. All I ask is that you attribute my work by linking to this website.


That’s it. The rest is history, as they say…Download characters.zip (3.3MB)!


Included in the ZIP file are the four characters in vector EPS format and three wallpapers, 1920×1080, 1440×900, 1024×768.


								

				
Posted in General | Comments closed

			


				
			

    			
FREE floral print


By Mark Goddard | Published: July 10, 2009

				


ky


A good mate of mine (Ky Wilkinson) is giving away 5 FREE floral prints.


Make sure you head over to his blog and drop him an email to claim one!


								

				
Posted in General | Comments closed

			


				
			

    			
University is over! (for a year anyway)


By Mark Goddard | Published: July 6, 2009

				


Stamps


So University is done and dusted for 2009. I won’t be returning until September 2010 which makes for a nice break. In the end I got my grades (A,A,B,B,B,C) which I was very happy with. To top all this off I thought I’d showcase some of the work I did to receive these grades.


Visual Design (B Grade)


Plugs

I’ll start with a Module I didn’t thoroughly enjoy this year due to boring briefs, however, I did a little bit of illustration for it which included some postage stamps, posters and even included some Video in After Effects. You can see the video, the illustrations and the posters over at http://turnitoff.info/ (the posters reside in the footer of the page)

The site was built using the latest in Javascript and jQuery technology so check it out, hover over the elements, play with the buttons. Your probably better off using FireFox too, as IE couldn’t really handle it’s superior web modernness. Make sure you check out the video at the bottom of the website too (yes that is me speaking sounding common as muck).


For Visual design I also illustrated the stamps shown in the header image. It’s based on Music Technology over the years and I think I captured the best four from the past century or so. You can see them in all their vector glory too.


WebsiteMultimedia Product (C Grade)


This was a complex one, which also means I can’t demonstrate it online. The idea was simple, Unique Bidding auctions.


The site featured a worlds first in online bidding. Live real time bidding in auctions. You could actually watch LIVE bidders placing their respective amounts on the page as it went along. This meant users could bid against each other based on other users’ bids. Clever eh! It was all jQuery and PHP grabbing the data from a database. It was awfully complex and also included a 10,000 word document explaing the process and research behind it. There was also a very fancy presentation which explains the fundementals if anyone wants to watch it. Its the branding, the functionality and the UI all rolled into a short few slides.


It also had it’s own iPhone web application which tied into the whole site shwoing live bids from anywhere in the world at any time.


Web Programming (A grade)


Another interesting one. And one which I actually really enjoyed.


guestAssignment one involved building a file based Guestbook with full admin features, the ability to edit posts and delete them, a swear word filter to stip out those naughty words and a slick simple UI. It also had AJAX editing of comments right in the page. No loading, no navigating, just click and change! I think you can guess what Lady Part and Ping Pongs were supposed to say! It maybe available as a free download if anyone is interested in the future.


Assignment two was a dog database website. Very similar to Battersea dogs homes website. It needed full admin controls and the ability to save dogs as favourites and have the ability to search the dogs too. The brief was very extensive, and I covered everything. Check it out online right now. I ended up building a commercial site based on this for Cliffe Kennels.


Authoring (B Grade)


It was basically Actionscript 3.0 work. For assignment 1 I had to develop an interface which included an animation, using the drawing API and the components within Flash 8. I ended up building a Spirograph kind of application which allowed you to colour it yourself and watch the application build it for you. Very nice! Have a look at it. I also built a flash gallery using XML and class files. But it’s not something I have online at the moment.


Multimedia Design & Production (A Grade)


This is a group project, and something which is a real challenge working with four different creative minds. My University chum Chris Kovalenko was part of our A grade group which created a chairty website and CDROM called the West Yorkshire Autistic Society (completely fake). Check out the site.


Intro to Video (B Grade)


My mate Adam Fisher helped me out with this one as I couldn’t star, edit and film the whole video. He rode the bike, I edited it, The Chemists supplied the music. It actually works quite well for my first every video. So I’m quite happy with it as a 2nd year project.




That’s it! I hope this gives someone some kind of inspiration either for university or for their next project. If it did help you in any way shape or form, drop me a comment!


								

				
Posted in Browsers, Downloads, General, University, Website Design | Tagged , , , , , , , , , , , , , , , ,  | Comments closed