5 Blogs for Web Designers to Follow

shot of the nettuts site
shot of the nettuts site
  1. Nettuts
  2. Nettuts is part of the Envato network. Nettuts covers all sorts of web design and development. Everything from WordPress to posts on Coldfusion. Articles are well written and frequent.

  3. A List Apart
  4. Published by Happy Cog A List Apart covers all topics dealing with web design. From usability to introductions to Ruby on Rails. While only published a few times a month each article is packed full of knowledge and is good for reading more than once.

  5. Digging Into WordPress
  6. Although this blog is a newcomer to the scene the authors are not. Follow this blog for lots of neat little tricks to use in your wordpress development.

  7. CSS-Tricks
  8. Another blog by Chris Coyier (Digging Into Worpress is also by Chris) but a bit more generally focussed on CSS. A great all around resource for design and coding tips. Also check out the forum for lots of helpful people.

  9. Wireframes Magazine
  10. If you are looking to learn more about wireframes and information architecture look no further. One of the things I love about this blog is that it shows examples of how other people do their wireframes.

Free cformsII stylesheet

cformsII by delicious days
cformsII by delicious days

I work with wordpress tonnes and most sites I build need a contact form of some sort. My default plugin for forms on wordpress is cformsII. My only real complaint with the plugin is that the stock stylesheet is huge and a bear to work with.

To solve that problem I created my own and decided today to share it with you. Please if you have any suggestions on how to make it better leave them in the comments or hook up with me on twitter @curtismchale.

Download the stylesheet.

Usage Instructions

To use this stylesheet with your cformsII form simply go to the cformsII/styling menu and deactivate the stylesheet. Now use the @import method to include your new stylesheet from the main site stylesheet.

The stylesheet accomodates one main form and the use of the cformsII widget. You will have to change some of the div’s call to suit your site.

You may use this stylesheet with no attribution for any of your projects. If you would like to distribute it please link back to this post.

Have fun styling your forms.

Edit: While cformsII was nice it doesn’t compare to using Gravity Forms. I don’t do forms any other way anymore so go purchase Gravity Forms.

Interesting Links: CSS trickery

CSS Image Trickery

Both of these articles come from the newest addition to my RSS feeds sohtanaka.com. First off is an article on adding effects to images with some CSS and HTML. Pretty neat and shows much of what you can do without encasing the entire effect in an image.

The second article from sohtanaka.com deals with a double repeating background image on a header. Another very good piece of CSS and image trickery to achieve a specific effect.

Photoshop Texture Brushes

A pretty cool set of Free Photoshop brushes is available from a friend over at Design by Firgs. Free to use but don’t distribute or sell them yourself.

Staying in Sync

Many designer use gmail and I also use Google Calendar cause I can sync it everywhere. Now google just released a cool tool to make syncing gcal and ical easier. Wish I had this last week when I synced up my gcal at work and my freelance and my mobile and my PC at home. Ah well the work is done.

Changing the default ‘required’ in cformsII to an image

I recently had a client request a red asterisk instead of the default (required) that comes with cformsII the wordpress plugin. As it was actually my first time using cformsII in any fashion I started with a quick search to see if there was a documented work around to make this happen. While I did find a way to change the default text to a * which I could then have applied a colour to I wondered further if I could do it with an image. I realize that an image was not required for my circumstance but since I was digging into the CSS a bit I figured I should find out if this was possible just incase it ever came up in the future.

If you’re going to do this start by copying the CSS from cformsII into the stylesheet for your site. I learned through a few trials that this is way easier especially if you’re using a code editor with a built in FTP client for editing remote files. Once you have picked through the CSS and styled the code how you like it we’re off to the races.

The (required) text is surrounded by a span and class as seen below:

Code Snippet
<span class="reqtxt">(required)</span>

In the stock CSS you will find that there are a few lines of CSS to display the look of the required text. I deleted all of them and combined the styles to simply:

Code Snippet
span.reqtxt, span.emailreqtxt {text-indent:-5000px; display:
inline-block; background: url(http://filepath/asterisk.gif)
 no-repeat; width:15px; height:15px;}

This is partly things I learned from the CSS Sprites technique (text-indent) and partly trial and error. I had actually tried the same code while I was trying to edit CSS from withing cformsII and it didn’t work inside there. I am not sure why but I assume that I made a typing error the first time. You have to set the display value to inline block or the images will collapse and not be seen. Also don’t forget to define the width and height of the images.

I also tried to set the font-size to 0px but found that in IE it rendered small lines that was the text. After I realized that I tried text-indent again and it worked. I did find that a negative text indent number was required as with a positive one the (valid email required) text did not indent.

This method will allow you to display any image in place of the (required) text on the page. If your client decides to add more (required) fields at a later date it will also continue to work with the new fields. The only thing I was unable to get client proof was the legend. I hand coded the legend at the bottom of the form. This means that if my client adds a new form it will not automatically show the legend at the bottom. I feel this is only a minor draw back as the symbol is widely used for the same meaning and the implementation of a legend at the bottom of the form is marginal in time taken.

You can see the technique in use here.If anyone else has better options for implementing an image replacement for the (required) field I would love to hear about it in the comments.

News from around the Web

Lots of things are happening today most notably CS4 was released by Adobe. I’ll be writing another post later today going into more detail about the launch and rouding up resources for further reading, for now on we go.

There is another great post over at Design Reviver detailing 22 Firefox 3 Plugins for web developers. This list is fairly exhaustive and although I use many of the plugins I didn’t even know about some of them. Specifically Font Finder and iMarcos look very promising for saving me time everday.

Sitepoint also has a great article on Minimalist HTML documents that is a must read. Detailing efficient document layout all web coders should take a quick look through and check against their own coding practices.

Finally there are two great articles over at A List Apart. The first one deals with proper Progressive Enhancement of styling on the web. Using javascript to check for box model support you can serve different CSS to a browser based on its support of the box model. The second article takes on the topic of Web Standards and how they haven’t been the saviour of the web as was originally thought. The author details many of the problems that are plauging the implementation of standards in the web industry today.

That’s it for my round up for now. Check back tomorrow some some more in depth stuff on CS4