Improve your Knowledge of Related Skills

Tom Kenny — Mon, 17 Jan 2011 19:25:09 +0000

Whatever you do, you should always be looking to improve your work. This is especially true if you’re a web designer or developer as technology and techniques are always improving around you. With that in mind, we’re going to look at one of the best ways to improve your work, by knowing more about related fields.

Web Designers

I subscribe to the idea that all web designers should be able to write the HTML and CSS for everything they design, even if they don’t always (or ever) code the sites they design themselves. Doing so allows you to know the limitations of what you can do. More importantly, you can get more out of your designs if you really know how to get the best out of HTML and CSS.

In a previous role as a web designer, I was able to help some of our web developers with CSS as I had a better understanding of it than they did. We didn’t have any specialist front-end developers, only back-end developers who could also write CSS (to a good but not great level) but that’s another issue. Actually, it isn’t. For a back-end developer, CSS is absolutely a related skill so more time improving that would mean faster turnaround in work. Only one or two developers showed any sign of improving their CSS, while others produced code that didn’t always match designs causing delays in projects. Delays could have been reduced significantly if they had improved their related skills although a web developer really should know CSS well.

A great example of a designer and his ability with CSS is Benjamin De Cock and his CSS playground. His high level of knowledge of CSS allows him to push his designs to the next level. Take his vCard for example.

Web Developers

A web developer who has some knowledge of design and usability, even at a basic level, can be a great asset to a company. If a designer has to pass something on to a developer but has missed a usability issue, the developer who posses some knowledge of usability may spot it and discuss it with the designer, avoiding a problem before it goes live or even before it enters final testing, saving time, money and potential headaches for users.

With my background in design and currently working as a web developer, I’m always looking at usability issues, no matter how small they are and I should be otherwise it would be a waste of what I’ve learnt from previous roles. I can also chip-in with any design work if the designer is too busy or is away on holiday.

One developer who has the ability to design is Shaun Inman. It’s clear that he is a very talented developer having created Mint and Fever and even a quick look at his projects will show you that he can also design. The advantage for him is he can control every aspect of his work. Shaun shows just what can be achieved if you work hard at related skills to the ones you develop first.

Valuable Asset

The final point and perhaps most important is, you’re a more valuable asset if you have skills and experiences in related fields. It’s great to specialise in one or two things as that’s how you’ll become great at something but you’ll get even better at your specialities if you learn other disciplines around your own.

10 Useful Bookmarklets for Web Designers and Developers

Tom Kenny — Thu, 19 Nov 2009 01:30:33 +0000

You may not be aware of bookmarklets which are an underused tool in web designer or developer’s toolbox. A bookmarklet is a a term that merges bookmark and applet to add functionality to a web browser. They can be stored in the bookmark bar of any browser and used from there to perform useful tasks and consist primarily of Javascript code.

As Javascript is synonymous with web development, some clever developers have created some extremely helpful bookmarklets that can improve your day to day work. Here are ten of the best available.

1. Firebug Lite

All web designers and developers should be familiar with Firebug (if for some reason you’re not then go now) and Firebug Lite is a striped down version that works on all browsers. Especially useful for fixing IE issues.

Interesting fact: Firebug inspired the name for Inspect Element.

Use on this page.

2. MRI

Enter the name of any selector into the text box and click the MRI button and this bookmarklet will highlight all of those selectors on the page.

Use on this page.

3. Design

Use on this page

4. Resize Viewport

Very simple, click on the following links to resize your browser window to these common resolutions. Only works in Firefox but that’s most of you who read Inspect Element.

1024 x 768 |Â 1280 x 1024 | 1440 x 900 | 1680 x 1050

5. ReCSS

One of the most useful bookmarklets for development is ReCSS. It reloads the CSS file independent of the HTML which speeds up work considerably when you’re only writing CSS code.

Use on this page

6. Save to Delicious

Delicious is one of, if not the most, popular way of saving articles especially in the web design and development community. This bookmarlet provides a quick way to save the current page to Delicious. Give it a go and save this article to Delicious!

Bookmark this page on Delicious

7. Edit Current Website

Sure, you can preview edits of HTML text using Firebug or WebKit’s Web Inspector but this bookmarklet turns the whole page into a WYSIWYG editor. Of course these changes aren’t permanent and are only local to your machine but gives you a good idea of what changing content does to the page.

Edit this page!

Color List
Document Tree Chart
HTML Attribute Viewer
HTTP Header Viewer
Hidden Field Modifier
Javascript Object Tree
MODIv2
Mouseover DOM Inspector
Object Dimensions
Page Info
Remove Children
Resize Fonts
Ruler
Show Source
Style Sheet Tweak
Style Sheet Viewer

Use it on this page.

Inspect Element » development