Feb27

A designer’s creativity is often showcased in the little details and touches that he or she incorporates in a design. Using common, familiar objects as design elements to accent and ornament a web page is a wonderful way of showcasing one’s attention to detail.

For inspiration, I explore the trend of utilizing paper clips by providing excellent examples to showcase how designers make use of them.

These People Comedy.com

These People Comedy.com - Use of paper clip as an ornament

Realistic paper clip used as a design ornament.

Continue reading »

Feb27

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

1. CSS Grid Builder

CSS Grid Builder - Screenshot

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press “Show Code” and it generates the HTML for you.

Continue reading »

Feb27

Every web designer has a need to create invoices and track payments that have been received or have not yet been paid. Fortunately, there are a number of tools that can streamline this process, and we’ll look at 20 options here. There is a good deal of variety in terms of features and pricing. Some are better suited for organizations that have several employees, while others may be a good fit for a freelancer. Some of these tools will simply help you to create attractive invoices and other will extend further into the area of accounting software.

PayPal

PayPal screenshot

PayPal provides a simple invoicing system that will email your invoices to your clients. This system is fairly popular with freelancers because there are no monthly fees, just a small amount taken out of the money that you receive. The PayPal account is then linked to your checking account and you can easily transfer the balance from PayPal to your bank. Personally, I use PayPal for my freelance blogging and I’m very happy with the service.

Continue reading »

Feb27

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

Continue reading »

\\ tags:

Feb27

For Web developers wanting to use Micosoft’s Internet Explorer as their primary browser, there’s some terrific IE extensions/add-ons that can aid you analyze, troubleshoot, debug, and speed up development of web pages.

Here, you’ll find the top 6 free IE extensions for web developers.

Where appropriate (and available), you’ll also find related resources, their download page, and documentation.

1. Internet Explorer Developer Toolbar

Screenshot -Internet Explorer Developer Toolbar add-on for IE

The Internet Explorer Developer Toolbar, developed by Microsoft, offers several features and options to aid web development and design.

Continue reading »

\\ tags: , ,

Feb27

Chris Pederick’s Web Developer extension for the Mozilla Firefox browser is one of the best tools in a web developer’s arsenal.

About a couple of months ago, I wrote an article about it entitled “9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension” and I’d like to follow up on that by showcasing even more things you can do with the Firefox Web Developer extension.

1. Determine server information of a website.

Ever wondered what your favorite website uses for their server technology? If so, you can quickly view the website’s HTTP response headers by using “Information > View Response Headers“.

The following example shows Digg’s response headers:

Continue reading »

\\ tags: ,

Feb27

A large part of being a capable web designer/developer is learning from people who’ve been acknowledged for their expertise and authority.

Finding and reading information about effective web design is part of being a web professional.

With this in mind, here’s just a few compellingly-sound advice and viewpoints from recognized personalities in the field of creating kick-ass websites.

1. Design with the users in mind

“Although there are lots of elements to consider when designing compelling Web experiences (writing style, look and feel, information organization -to name just a few), there is one “knowable” element that can be used to appraise the rest: audience. A detailed understanding of your target audience provides you with an effective metric by which to evaluate all your design decisions: structure (content and organization), visual presentation (personality and tone), and interaction (functionality and behavior). From cultural dimensions to computer expertise, the more you know about your audience the easier it becomes to design for (and communicate to) them.”

- Luke Wroblewski, Interface Designer, from LukeW: “Understanding Your Web Audience

Continue reading »

Feb27

Are you an advanced JavaScript coder looking for more sites to sharpen your coding prowess? Maybe you’re a web designer wanting to double as a developer (or at least know enough to add a bit of rich content into your designs). Either way, if you’re looking for more information on the topic of JavaScript, the following resources are worth a gander.

Reference, Resources, & Tutorials

DevGuru

DevGuru – JavaScript Quick Reference

DevGuru provides an extensive list of JavaScript syntax, alphabetized similar to a glossary for easy scanning and searching.

TechCheatSheets.com - Javascript Cheat Sheets

TechCheatSheets.com – Javascript Cheat Sheets

A roundup of 10 JavaScript cheat sheets in one place; includes cheatsheets for frameworks such as jQuery and Prototype.

Continue reading »

\\ tags: , ,