August 30, 2009

Targeting Browsers (Namely the Different Versions of IE) with Only CSS

3:07 pm
in Web, , ,

Internet Explorer 6 has been in use for a whopping eight years, during which time the internet has grown both in size and in usability. So here we are, with 25% of people still using IE6 which hardly even begins to support modern CSS techniques.

For a long time, designers have found different ways to target IE6 and its slightly improved (but still seriously lacking) predecessor, IE7, and feed them different CSS to fix any bugs that the browsers have with normal, up-to-date styling. A popular trick is to use IE’s conditional comments to give IE6 and/or IE7 a different stylesheet. This works fine, except that it means that you need to make two stylesheets for your designs. There is a way that is less widely known that exploits the star-html hack combined with CSS 2.1 selectors to differentiate between IE6 and IE7. It looks like this:


element {
/* Standards-Compliant Properties Here
}

* html element {
/* IE6 Properties Here
}

*+html element {
/* IE7 Properties Here
}

Basically, IE6 and IE7 both think that there is an element above the html element, which is nonexistent in other browsers. So the * html selector is used to target IE6 and 7. To single out IE7, a CSS 2.1 selector (*+html) which is unsupported by IE6 can be used.

The CSS-only technique is a lot less of a pain than using a separate ie6.css file for all of your hacks. Anyway, that’s just a helpful hint I just figured out.

July 27, 2009

Web Design From Scratch’s Anti-Spam Method

12:30 am
in Web, , ,

I just wrote a post about how to make sure that someone using your contact form is human, which utilized a validation image. While this is effective, it requires the user to spend an annoying 10 seconds deciphering the text and typing it in. Web Design From Scratch has a very clever solution.

The trick is to use javascript to make sure that the user is interacting with the form, by waiting for the user to focus or click on the form itself. Once it sees that the form has been interacted with in a human-like way, it sets a flag in a hidden input field. If the person browsing is not using javascript, then a <noscript> tag is used to show a normal CAPTCHA form which is checked by PHP only if the other input flag returned false.

Sure, there are other ways (the “hidden” empty input field) that work just fine, but this is certainly a clever way of going about it. It exploits a real difference between spambot and human.

July 18, 2009

CushyCMS: Not Much, but Great at What it Does

1:34 pm
in Web, ,

I am in the process of redesigning/remaking a site for a non-profit organization. Their site is, as of now, a collection of static HTML pages which are unintelligible to the average non-profit worker. On top of wanting a new look for their site, they are looking for a way to edit their pages’ content without screwing up all the HTML and without having to directly edit any files at all. They have no need for a blog, an online application, or anything that is more than just blurbs and information.

I could use edit forms combined with PHP and a database in a password protected area of the site; I could use an in-depth content management system like Drupal to handle the editing user interface for me. But all I need is a way to change the content of the HTML pages every once in a while.

The perfect solution is CushyCMS. CushyCMS is actually hardly a content management system. All it is, is a way to edit specific parts of an HTML file using a WYSIWYG editor. You don’t have to install anything on your site; in fact, all you have to do is add class="cushycms" to the tags containing parts of the page you want editable. The coolest thing is that you can add the class to any type of tag (div, p, h1, span, even image) and have it be editable. Then you go to CushyCMS’s website, give it your FTP information, and you can start editing your content right away.

A great feature of Cushy is that you can add “editors” who can edit pages of your choice and have their own login. So you can give all the clients’ workers the ability to edit their own pages hassle-free, without worrying about all the technical stuff like FTP and HTML.

CushyCMS makes it impossibly easy to give your site client-friendly capabilities without using any back-end coding at all. I would recommend using it to anyone that is making a site for clients who plan to only change little bits of content on their site at a time (a “Current News Story” page perhaps).

As a CMS, Cushy is no Wordpress, but it is great at making content easy for clients to edit.

June 6, 2009

Topsy: A Cool Idea

6:05 pm
in Web, ,

If you haven’t already, you should check out Topsy, a new search engine powered by tweets on Twitter. As opposed to using brute force and following links like Google and all the other search engines out there, Topsy parses every single tweet for links, and adds them to its database. So instead of giving you just the most relevant results (boring), like Google, Topsy dishes out the sites that the most people are talking about.


Topsy is where Twitter meets Digg, and I think there is nowhere that this site can go but up. It will be interesting to see what happens to it as Twitter becomes more and more widely used to spread websites.

10 Great Sites for Learning Graphic Design

10:31 am
in Design, Web, ,

There are a lot of great websites out there with boatloads of information on beautiful web design. You probably know of a lot of them, but here are some of the best:


1. Smashing Magazine

Smashing Magazine

Smashing Magazine is very popular among web designers and graphic designers alike. It makes sense, because the tutorials, freebies, and collections are consistently high-quality. Subscribing to Smashing Magazine is a great way to learn and get a lot from the web design community.


2. Nettuts, Psdtuts & Vectortuts

Tuts Plus

If your looking for tutorials on web or graphic design, the Envato Network’s Nettuts, Psdtuts and Vectortuts are the best place to start. They have practically endless amounts of tutorials on Photoshop, Illustrator, and Web Development.


3. Webdesigner Depot

Webdesigner Depot

Webdesigner Depot is another site filled with articles written by people from the web design community. There are some great articles here about design, web development, graphics, and inspiration. There is, in my opinion, a little more variety in the posts here than on other sites.


4. Blog.SpoonGraphics

Blog.SpoonGraphics

Blog.SpoonGraphics is the blog of a very talented graphic web designer. Chris Spooner writes tutorials expaining most of what he knows. There are some really nice, detailed Illustrator tutorials on this blog, along with lots of freebies and collections.


5. Veerle’s Blog

Veerle's Blog

Veerle’s Blog covers a very wide spectrum in terms of content. Everything from science to CSS tricks to architecture, Veerle’s Blog’s got it. Its a fun read, because you never really know what kind of thing will be published next.


6. Tutorial9

Tutorial9

Tutorial9 is a site dedicated to Photoshop, Photography, and Web/Blogging tutorials. All of the tutorials are very high quality, and there are tons of them. Tutorial9 also gives you access to lots of free resources, like icons, photos, and vector packs. A great site to subscribe to!


7. FudgeGraphics

fudgegraphics

FudgeGraphics is the blog of the talented graphic designer, Franz Jeitz. There are lots of freebies on this site, including brushes, textures and wallpapers. Franz also writes tutorials, focusing on photoshop, sharing some of his tricks. All of his articles are interesting and useful; a good read!


8. Spoonfed Design

spoonfed

Spoonfed Design is a great site to look for tips, tricks and tutorials about illustrator, photoshop, freelancing, and web design. This is another great addition to your arsenal of tutorial sites. Featuring a daily inspiration and a community blog, SFD is a great site to always have your eye on.


9. My Ink Blog

myinkblog

My Ink Blog is truly “a resource for all things graphic and web design.” Here there are tutorials, interviews, freebies, and some really interesting and intriguing articles. A very useful resource at My Ink Blog is Andrew Houle’s “MyInkTrail,” which is a great way to find new, helpful RSS feeds.


And of Course, 10. Cyclonic Studios

cyclonicstudios

(I had to include some self-endorsement). I just started blogging a day ago, so there isn’t a ton here yet, but I promise for a post a day, whether it be inspiration, a collection like this, tip and tricks, or a tutorial. Drop by every once in a while, or you could subscribe to my feed and follow me on twitter to stay up to date!


Thanks for reading, I hope this helped you find some new sites about graphic design and web development. Later!

June 5, 2009

5 Simple Ways to Make an Ugly Website

9:04 am
in Design, Web, ,

Hi, this is Graham. This is actually my first real entry, so subscribe to my feed, and share it in as many ways as you can (don’t worry, I’ve got links at the bottom).

Anyway, my first lesson is how to make a hideous website. There are plenty of very poorly designed sites out there. So here’s a couple tips to help you on your way to a really terrible-looking site.

(more…)