Top Ten Resources for Learning Web Design and Development

I've just been surfing about tonight, revisiting some old favourites and checking out some new sites friends have told me about. In the 12 years I have been working as a web designer/developer, I have often fallen back on other peoples code samples and tutorials to learn.

Some of my collegues on the design team have expressed an interest in learning some more technical, code based skills, such as JavaScript or ActionScript, and I am always keen to find tips and tricks for Illustrator, After Effects and Photoshop, as well as SQL, XML, or any one of many web design and development techniques, so, here's my top 10 resource sites if you're keen to learn...

1. W3 Schools. - If you want to learn about any of the web design and development languages, including HTML, XHTML, CSS, JavaScript, SQL and much much more, this site should be your first port of call. Hundreds of clear examples and references make this site indispensible. Bookmark it!
2. Webreference - Another indispensible site, for any of the popular web languages. Webreference is a HUGE site, and a great place to find new tips and tricks, from Multimedia and Internet Design to PHP and Active X programming. Essential!
3. WebDesign Tutorials - I had'nt seen this site before today, but I'm impressed by the amount of content. The frames based displaay is a little irritating, but, if you can ignore that, there's a huge amount of useful stuff to be found, covering 3d Studio Max, PhotoShop, Flash, C++, CSS and much more.
4. CSS Zen Garden - If you have'nt seen CSS Zen Garden, just go there. This site is the best illustration of the full potential of CSS when used well. A Stunning collection of stylesheets, showing how a single site can be completely redesigned, without touching the HTML mark-up. If you are into CSS, this is nirvana!
5. Web Pages That Suck - At the other end of the spectrum from CSS Zen Garden, this is the place to go if you want to learn how NOT to do it. Well worth checking out, some of the sites listed are truly shocking! Just make sure one of YOUR sites never appear on this site!
6. W3C HTML Validation and Jigsaw - These two sites are equally useful and important in the web designer/developers arsenal. If you want to be sure your site is vaild HTML and CSS, then you need to bookmark and use them both!
7. SitePoint - I'm a big fan of SitePoint, both for their website, and the books they publish. SitePoint has a real community feel, with hundreds of quality articles, books, videos, forums and more. Well worth checking out.
8. A List Apart - This is another indispensible site. With hundreds of authoratitive articles and tutorials about standards based and best practice web design, this is one you just can't do without.
9. Webmonkey - This site has been around for years, and had undergone a re-design over the last year or so. With tutorials, a code library and reference sections, this is another really good place to start...
10. Kirupa - This is a good site for those of you interested in Flash, Sliverlight, WPF and ASP.NET/PHP. Kirupa has been around for some time now, and has some top notch tutorials and artciles. Well worth a visit

If I've missed any, let me know! I'm always on the lookout for new sources of inspiration...

Powered by ScribeFire.

Adobe.TV - Your first stop for learning Adobe software

I'm a big fan of Adobe software, I use many of their tools every day of the week. To be honest, they don;t have a massive amount of competition when it comes to design and deveopment software. With a line-up including Flash, Photoshop, After Effects, Indesign and Illustrator, it's hardly surprising.

So, if you want to get an idea of just how powerful the software can be, what the latest techniques and developments are, or you want to take your design and development skills to the next level, it's well worth checking out Adobe.TV - With channels for different disciplines, such as Video Professional, Photographer, Designer or Developer, there's plenty to pique your interest. Just select a video, sit back, watch and learn, and best of all, it's free.

It's also a good example of what you can do with a bit of Actionscript 3 and Flex.

Powered by ScribeFire.

I HATE VISTA

I've not posted for a few days, as I have been busy wrestling with Windows Vista. After waiting a while, I decided I would install SP1 and get my install of Vista Ultimate up-to-date.

What a mistake. I have tried to install the service pack 5 times now, with no success. Crap error messages give no clue, and Microsofts own recommendations don't work either. Arrrrggggh.

Why do they even bother releasing an update if it won't install? I'm not the only one either...

http://blog.washingtonpost.com/securityfix/2008/04/windows_vista_service_pack_1_n_1.html

http://discuss.extremetech.com/forums/thread/1004423846.aspx

http://support.microsoft.com/kb/947366

As much as I hate to say it, I'm beginning to consider buying a Crapple instead!

Powered by ScribeFire.

REPOST: Absolutely shocking - for geeks like me

I originally posted this a couple of months ago on another blog, but after spending a bit of time re-examining the software in question today, I was driven to repost it....

Those of you that know me will understand my issue with this, but if you've just stumbled in by accident, I'll apologise in advance. This post is a geeky techie rant. Nuff said!

I am a web developer/designer (did you notice the order there?) who has been working on the web for 12 years. In that time, I have tried my hardest to stay up on current trends, latest techniques and new ideas in the web development field. I started as a "web designer" back in 1996, and over the past decade have had to stay abreast of developments, constantly honing my existing skills and learning new ones. So, bearing this in mind here goes....

WHY IS MICROSOFT USING PISS-POOR HTML TECHNIQUES IN THEIR VISUAL STUDIO 2008 EXPRESS EDITION TRAINING VIDEOS??????????

Do I seem a littled hot under the collar? That's because I am.

I work for a well known recruitment website, who are currently migrating their 'nix based web site and database etc across to ASP.NET - no, wait, thats not the punchline..., and as a result, my collegues and I on the design team are on a learning curve. Now, it's not too bad for me personally as I am a bit of an oddball on the team, in as much as I'm reasonably capable with non-design stuff, like Javascript, Ajax, XML, ASP, VB, SQL database coding (yes, yes, I know, Microsoft technologies), Actionscript etc, I'm a sort of designer programmer if you like, but most of the design team are DESIGNERS!

The whisper around the office is that the "recommended" web design/development software will be one of the following.

• Microsoft Expression Web - WHAT????? Has anyone actually used this out of choice? Our team have been working with Homesite (oldskool), and the old favorite Dreamweaver (we're on CS3 now), with a couple of us using alternative tools of choice, split between the Mac chaps using Coda, and myself using the awesome Aptana Studio (more on that another time....). I've installed an evaluation copy of Expression Web. All I can say is it looks and feels remarkably like F***tpage. Need I say more? and yes, I've read the rave reviews. I just think they are wrong. Dreamweaver killer, my arse.
• Microsoft Visual Web Developer 2008 - Hmm. Top tool for the hardcore coders, but let's be honest, it's not the most inspiring tool for creating top notch sites now, is it?

So, I have been scooting around the net when I find a spare moment, looking out for useful tutorials and resources relating to how the ASP.NET migration will affect us and any changes that may be ahead. Naturally, the first place you'd think of looking would be the vendors
documentation and resources right? WRONG.

In the interests of being able to put forward an informed opinion on the matter, I spent a bit of time checking out Visual Web Developer 2008 this evening, specifically, watching some of the video training that Microsoft are providing on their site.

Please, if you are a web designer/developer/standards/accesibility nut, watch this video, and spot the mistakes. I actually sat laughing as I watched. Shocking.

For those of you that are'nt total geeks, I'll explain....

Microsoft, at first, weren't particularly interested in the internet, then, they realised how big it would be and decided to jump on board. In the early days, they did'nt rule the online world as much as they do now, but over time, and several anti-trust cases, they now have a huge share of the world's web browser market. During the mid - late 90's we had the "browser wars" where it was sometimes easier to write 2 versions of your code to be sure all your site visitors could have the same experience. Fun times.

These days, things are getting better. It's still challenging to create a web site or web application that works across the broadest possible range of users, but today, we have more and more standards. XHTML and CSS are the norm, and sites are becoming more accesible, and useful by the day. Even Microsoft are flying the standards flag. No really...check this out, from the Expression Web product overview...

"Build dynamic, interactive pages that harness the power of the Web to deliver superior quality. Built-in support for today's modern Web standards makes it easy to optimize your sites for accessibility and cross-browser compatibility."

So, imagine my amusement, when I am watching the very first video in a series aimed at new ASP.NET developers, admittedly maybe hobbyists or students, but new developers all the same, and I am told to add a totally non-standard font to the project page (this should be CSS) and then a bit later, am shown how to use an HTML table for layout purposes (again, this should be CSS based).....

Microsoft. Come on. It's 2008. You are pushing a very clever technology. So why, why , why are you insisting on oldskool 1990's HTML? If thats what you're recommending or endorsing, regardless of your new enthusiasm for standards, I am REALLY looking forward to the laugh I'm going to have when we start looking at the HTML your ASP.NET controls spit out.....

Jokers.

Powered by ScribeFire.

Cream is the new white

Arggh. What is it with the cream coloured background? It seems everywhere I look, someone is using the same colour scheme, a dark gray or black header, then a cream band, then the rest of the page in white, then back to a dark grey footer. Yes, it looks nice, but it's EVERYWHERE!

Don't believe me? In less than 20 minutes checking out CSS galleries and web design showcases, I have found these...

Web Media Alliance
Jandaco
Train-ee
Light CMS
Website Owners Manual

And to be honest, there are quite a few more I could mention, but I really can't be bothered, i'm bored now.

Powered by ScribeFire.

jQuery enhanced HTML lists

I was playing around with CSS and ordered lists this evening, trying to make an ordered list with large item numbers and small list item text, and after much messing around discovered that what I was trying to achieve isn't really possible using just CSS and the OL or UL tags, and, after using jQuery for a while now, thought I'd have a go at creating a plugin to solve my problem.

It's nothing very complex, but it does the job. It simply looks at an OL or UL, strips out the HTML content of the child LI elements, and replaces the OL or UL with DIVS. This allows me to use CSS to style the numbers and text separately, using progressive enhancement. You can see a demo here.

Usage

To use it simply include jQuery in the head of your document...

<script src="your_path_to_jquery/jquery.min.js" type="text/javascript"></script>

Below that, include the jquery.enhanceList.js file...

<script src="your_path_to_jquery/jquery_enhanceList.js" type="text/javascript"></script>

Make sure you have the following CSS classes in your stylesheet, feel free to tweak it to your design requirements!...

.olContainer {
width: 450px;
margin: 5px;
border-bottom:1px dotted #cccccc;
padding-top:10px;
}
.olNumber {
font: 700 220% / 1 Georgia, "Times New Roman", Times, serif;
width: 30px;
margin: 0 10px 0px 10px;
text-align: center;
float: left;
position: relative;
padding: 0 10 10 10;
}
.olText {
white-space: normal;
font: 400 100% / 1 Arial, Helvetica, sans-serif;
padding: 0 0 10px 10px;
line-height: 1.5em;
}
.clearFix {
clear: both;
}

In your HTML document, you will need an ordered or unordered list, in my example, I am giving the target list a class called "enhance" to use as a selector...

<ol class="enhance">

<li>This is the first item, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>This is the second item Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li> Third item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fourth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fifth item..Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Sixth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

</ol>

It is a good idea to use an external javascript file to contain your code, rather than have script in your HTML document, so create a new .js file as follows, and save it as enhance.js in your sites script directory,...

$(document).ready(function(){
$('#activeEnhance').click(function(event){
$('ol.enhance').enhanceList()
})

Then include it in the head of your HTML page...

<script src="your_path_to_jquery/enhance.js" type="text/javascript"></script>

Thats it. All you have to do now is run it! I hope you find it useful. Feel free to let me know your thoughts on this. You can download sample code, and the plugin here

03 Nov 2008 Update: A visitor contacted me to let me know that my posted source code didnt work out "out of the box" - this was due to my source HTML referring to jQuery 1.2.6 which wasnt included in the zip. This has now been fixed. Apologies to you if you downloaded it and had problems due to this oversight!

Powered by ScribeFire.

Useful jQuery Plugins

I use jQuery pretty much every day at work, and in personal projects. I love the way it allows me to add rich functionality and effects to my projects, without much hard-core coding (well, unless I'm trying to be a smart-arse!).

So in true spirit of the Blogosphere, I thought I'd compile the top 10 list of my current favourite useful jQuery plugins...

1. Dimensions - This is one of the best. It extends jQuery with dimension specific methods. With it, you can get dimensions (height and width) of the window, the document, and individual elements, and find the co-ordinates (offsets) of any element in a web page. VERY useful.
2. Cookie - I use this one quite a lot, it makes manipulating cookies a breeze. Go get it!
3. jQuery UI - This is really a collection of plugins rather than one (but you can create your own build so you don't have to include the whole collection), but highlights include a variety of visual effects, including Fold, Slides, Explode, Pulsate, Puff and more, as well as some really slick ui elements such as a rather tasty SplitPane and Drag and Drop behaviours. Nice.
4. Media - This is a very cool one, it allows for unobrusive embedding of media including Flash, Quicktime and Silverlight into documents. Highly recommended.
5. labelOver - Another one in my regular jQuery toolkit, this allows you place the label over the input field, using CSS. It is based on a very good article on A List Apart about Making Compact Forms More Accessible
6. Validation - Anyone involved in the development of web applications needs a good validation script, and this is a great jQuery plugin that does just that. I hate ugly forms and JavaScript alerts, which is why I can't code a form without at least considering using this plugin. In short, don't leave home without it!
7. tableSorter - Sometimes, you can't avoid using tables, particularly for displaying data, and this plugin allows for all sorts of table tomfoolery, from basic column sorting to appending the table data using Ajax.
   
8. Form - This useful plugin lets you enhance forms to submit using AJAX. No special mark-up required, just include the plugin and write your callback. We like it!
9. Field - If you need to manipulate form fields beyond the standard val() method, this is the plugin for you!
10. XML to JSON - This is a cool utility if you work with Ajax and XML documents. Does what it says on the tin!

I could have easily made this a top 20 list, as there are so many good plugins out there, but then I would'nt have enough for my next list, but I hope you found at least one useful addition to your jquery library.

Print Design Competition

OptimalPrint are running their first annual print design contest for professional graphic artists and amatuer designers. Enter the contest here for a chance to showcase yout winning print design talent.

This design competition is divided into separate divisions for professionals and amateurs.

There will be 1 grand prize winner and up to 100 honourable mentions chosen from each division.

Professional design competition prizes

Grand Prize: 1000 GBP worth of print materials from Optimalprint UK and an iPod. The winning design will also be displayed on the Optimalprint UK website.

Honourable mentions: The top 100 entries will win a T shirt and have their design displayed on the Optimalprint UK website

Amateur design competition prizes:

Grand Prize: 1000 GBP Scholarship or Digital camera (Canon EOS 400D) The winning design will also be displayed on the Optimalprint UK website.

Honourable mentions: The top 100 entries will win a T shirt and have their design displayed on the Optimalprint UK website.

Design competition categories

1. Best and most original event card design:

1. Invitation card
2. Christmas card
3. Wedding invitation

Create a design for an event card not presently offered by Optimalprint. Entries in this category should employ unique design elements and should be relevant to one or more of the following age groups: Babies, Children, Youth, Adults or Seniors.

2. Best and most original business card design

Requirements for the design competition

1. All designs must be submitted by 12:00 Noon GMT on November 14, 2008 via online entry form
2. Each participant may submit one or more designs for each design category listed above
3. Upon registering please specify your status as either a professional designer or an amateur
4. No purchase is necessary to enter the design competition


5. Contestants may upload their designs in the following file formats :
   pdf, psd, eps, ps, bmp, gif, jpg, png, tga, tif, pcx, pct, svg, svgz, (MS-Word) docx, doc, rtf, (MS-Excel) xls, xlsx, (MS-Powerpoint) ppt, pptx, ai

You still reading? What are you waiting for, click here to enter the design competition!

Powered by ScribeFire.

Top 10 Web 2.0 Rants

I have had enough of Web 2.0. Listen up. ITS NOTHING NEW! When will they learn? I agree that the web has entered a new phase, with users expecting feedback and richer interactivity rather than the passive experience that used to be the norm "back in the day". However, Web 2.0 is not a design technique, or a technology per se. It's more about the web becoming a more useful, and accesible tool. To see what I mean, just have a look at the amount of APIs out there, allowing developers to build new more powerful web applications.

I'm not the only one who feels this way (if anything I'm late joining the fray), and to prove it, here's my top 10 Web 2.0 Rants (it's worth noting the age of some of these posts too!)

1. I Hate Web 2.0
2. Web 2.0: Is it just hype?
3. Web 2.0 != a check
4. Application Insight: Why I Hate Web 2.0
5. 10 Things I hate about Web 2.0
6. Valentines Day Massacre
7. You Are Not a Web Designer
8. Web 3.0 at Binary Bonsai
9. There is no Web 3.0, There is no Web 2.0 - There is Just The Web
10. Does Web 2.0 Still Look Good? Did it ever?

So, if you were wondering what Web 2.0 is, you should, after reading the above articles, have a much better idea. Then we can move on to Web 2.1, or Web 2009, or Web Service Pack 1, or whatever the hell the marketing and hype-munkys decide to call the next trend!

Powered by ScribeFire.

Google launches Mail Goggles

Found this on the official Gmail blog today, and thought it was worth posting...

Google Labs has launched a new Gmail feature called "Mail Goggles". I'm sure, like me, you have fired off an email in the heat of the moment, then regretted it 10 minutes later. This is bad enough in your personal life, but it can be a nightmare if you do it in work emails, so to try to help, Mail Goggles it checks you are in a sensible frame of mind before you send, by asking you to solve some simple math questions.

LOL, so, if you are too drunk to solve a simple math question, you're too drunk to send that strongly worded email to your head of department. Brilliant. Can they do it for drunk women with their text messages too?