Cutting Edge Browsers and Their Development Tools

"This is a hot time in the world of browsers. Despite a rocky morning, Firefox 3 got over 8 million downloads when it was released. It’s up to over 24 million now. I bet many of you are amongst these downloaders, I know I was =)

I bet many of you do your web design and development in Firefox. Things just seem to behave as you expect them to in Firefox. Plus, it has a wealth of invaluable development tools like the Web Developer Toolbar and Firebug. If you have never heard of or aren’t currently using Firebug, I did an introductory screencast for it you can check out.

The ability to view and manipulate the entire DOM of a web page after it is rendered is crazy powerful. I’m not sure if Firebug was the first tool ever created to do this (I doubt it), but it has certainly popularized it. The way that it works, being part of the browser itself, has started a new paradigm of browser-specific development tools. Let’s take a look at all the browsers and their latest offerings."

CSS Editors Reviewed

"We continue to review text and source editors for designers and web-developers. After a thorough consideration of WYSIWIG- and source code editors now it’s time to take a closer look at applications for advanced CSS-coding. Reason: while numerous HTML-editors offer more or less advanced CSS-support there are also allround-CSS-editors which offer a sophisticated integrated development environment for CSS-coding."

(more...)

30 websites a Web developer should Know

Here's a great list.

Beautiful CSS buttons with icon set

"I love clean design and in general simple solutions to design nice and attractive elements for my websites. This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set."

Building a Unique Contact Form

I’m calling this Part 2, because last week I began this adventure over on Tutorial Blog where we first designed a unique contact form:

Photoshopping a Unique Contact Form

Here we are going to pick up where that left off and actually build this thing with HTML/CSS, as well as add some validation with jQuery, and make it tick with PHP. Here is what we are building.

FORM elements design using CSS and list (ul and dl)

After my last post (Clean and pure CSS FORM design) I receive a lot of messages with some suggests, opinions and critics about the method illustrated in these post to design a FORM using pure CSS code. I have to say I prefer to use table to place FORM elements into the page, but another method I often use is the following: using unordered list ("ul").

Webon Makes Building a Web Site Easy

Create your own web site with the free what-you-see-is-what-you-get (WYSIWYG) web site builder Webon. Webon provides a simple solution for people with no experience with web publishing. That's not to say that you can't insert your own custom HTML or stylesheets, but if you don't have experience with any of that, Webon will take care of it for you.

(more...)

CSS Instead Of Tables

Most web developers and designers will tell you to stay away from tables when developing web sites, of course there are some exceptions, like forms, and data. Instead they will tell you to use CSS. When designing your web site you should use CSS, along with the HTML "div" tag. Now, you may be asking, why? The reasons are below!

Clean and pure CSS FORM design

Some readers of my blog hate html tables and often ask to me which is the better way to design FORMS with CSS, without using tables to place each form element in a table's cell. How I said some time ago... tables are not evil. Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It's simpler and faster than use only CSS property "to simulate" a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.

10 Principles Of Effective Web Design

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

(more...)

Opera Releases Firebug Alternative: Dragonfly

For web developers, and especially front-end coders, the Firefox extension Firebug by Facebook’s Joe Hewitt is a killer app and major time saver. It lets you deconstruct the webpage currently loaded into Firefox to get a better idea of how HTML, CSS, and JavaScript needs to be modified to work properly (and it can even make changes to CSS on the fly).

Opera has just released a competing set of developer tools called Dragonfly. They will be automatically included in Opera 9.5 beta 2 and newer versions of the browser...

Building Web 2.0 Tag Clouds in PHP

Every major website seems to have a tag cloud. Users love tag clouds; they help navigate masses of content quickly and easily. When used appropriately, they help us sort filter through information stores, reduce the signal-to-noise ratio. Providing a tag cloud is also relatively painless for the server - after all, it’s just some HTML. But how do we actually build a tag cloud at application level? In this tutorial, I’ll take you through putting together a full-blown, calculated web 2.0 tag cloud in PHP.

50 Essential Photoshop Text Tutorials

Last month I published a collection of 45 Photoshop Tutorials for Better Navigation, which quickly became one of the most popular posts on this blog. Due to the response, I spent some time finding more great Photoshop tutorials. Here are 50 of the best tutorials for working with text.

Everything about Firebug - 21 Great Resources

"What is Firebug?" you may ask. Firebug is an excellent Firefox browser extension that is great for troubleshooting, editing, monitoring, and debugging. It is free and open source. It is one of my favorite web development tools.

(more...)

Text Effect Tutorials Every Designer Should See

Text and the way it looks is a major part of any design. A great design can be cheapened if the text on the page looks wrong. Any logo is almost entirely text. From water to fire, these 51 tutorials will show you how to create any style of text you want.

5 Web Design Tips You Can't Live Without

The web design world is filled with excitement and experience, creativity and skill. Often, experienced web designers utilize a set of solid, proven techniques that others may not notice. Let's take a look at a few of these techniques and how you can implement them into your own site quickly and easily.

Rounded Corners Using CSS

Rounded corners add a nice little design to any page – using rounded corners can be image heavy; So, this post I am going to show you how to make rounded corners using only CSS!

(more...)

10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you'll be creating stunning CSS forms in no time at all.

Perfect pagination style using CSS

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

Write a well structured CSS file without becoming crazy

This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases.

I experienced, proceeding without "order" or a clear vision about what you want to realize can be harmful and you risk to add, change, remove classes and properties, with the only result to have untidy code with a lot of unused elements on your final product.

Before you start writing directly CSS code, I suggest you to prepare a "draft" with all sections your site will have. Then follow these simple "rules" to optimize your work.

(more...)