CodeinWP CodeinWP

Web Design Articles

Updates to the CSS3 Click Chart

Updates to the CSS3 Click ChartI’ve added five new items to the CSS3 Click Chart. I also added a couple of filter hacks for IE, and corrected some syntax examples.

Each item on the chart includes a clickable heading that opens an info panel on the bottom of the screen displaying a basic description of the item, along with example syntax. To accommodate the fact that the chart is now more than one screen, I’ve integrated Alen Grakalic’s Easy Slider jQuery plugin.

The 3 Most Important Things to Consider Before Starting a Design

The 3 Most Important Things to Consider Before Starting a DesignThis topic doesn’t necessarily need a long explanation of the three main points, so I’ll just list some factors for consideration by way of an “infographic” (or at least, my own pathetic attempt at one).

I think these three areas are arguably the most important to consider when preparing for a new design. I stress that these are pre-design considerations.

Why I Hate .net Magazine (But I Still Love It)

Why I Hate .net Magazine (But I Still Love It)First, let me state up front that .net magazine is a must-read for anyone working in web design or development. It is a fantastic, well-researched, well-edited, and cutting-edge publication that has contributed enormously to the web design industry, and has personally helped me to complement my online reading with a vast array of invaluable information.

I especially appreciate articles written by familiar bloggers and designers from around the community, some of whom I’ve personally been privileged to interact with. The magazine’s editors truly go above and beyond to ensure they’ve (as they state on page 8 of every issue) “scoured the web” to find the web’s best talent. In recent months, they’ve published articles by Alen Grakalic, Soh Tanaka, and Chris Coyier, the latter of which was a major cover feature on WordPress. Many of us are no doubt familiar with those names, so it’s exciting to see them get such recognition.

But the magazine has its flaws, and although it’s (by default?) my favourite web design magazine, I still think it could be better. So here are my (admittedly whiny) complaints about .net magazine, and how I think it could improve.

CSS Opacity: A Comprehensive Reference

CSS Opacity: A Comprehensive ReferenceCSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.

One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

CSS Font Shorthand Property Cheat Sheet

CSS Font Shorthand Property Cheat SheetIn the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works.

So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy!

How to Get 100+ Comments on a non-Contest Blog Post

How to Get 100+ Comments on a non-Contest Blog PostI had to qualify that title, because by far the easiest way to get hundreds of comments on any blog post is to give something away to a randomly chosen commenter. But as bloggers we’re always in search of ways to create a little bit of buzz to increase page views and overall reader participation through re-tweets or comments.

As a web design writer, I do feel that it’s not only necessary to educate and get people thinking, but I feel I have an obligation to entertain my readers in the process of said education. Sometimes, however, entertainment and education are not enough, and it’s necessary to cause a little bit of controversy to get readers thinking, commenting, and in some cases, downright angry.

In this post, I’ll briefly outline 4 ways that are almost guaranteed to elicit at least 100 comments, and get the community buzzing.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery

Getting Buggy CSS Selectors to Work with jQueryAlthough the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

CSS3 Click Chart

CSS3 Click ChartSince my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.

The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.

The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.

New Website Launch: Interviews by Design

New Website: Interviews by DesignToday I’m happy to announce the launch of a new project I’ve been working on since late December. It’s a simple website called Interviews by Design that will be a repository of 5-question interviews conducted with designers from around the world.

The name has a two-fold meaning: (1) The interviews are conducted with designers; (2) Each interview asks the same five questions, thus they are in that format “by design” (meaning done intentionally).

And I should probably give credit to Chris Coyier of CSS-Tricks for popularizing the 5-question format in the design niche (although he may have borrowed the idea from another blogger or Craig Kilborn, I’m not sure).

Response to “In Defense of Vertical Navigation”

Response to In Defense of Vertical NavigationIt’s been quite a start to this week since the publication of my article on Smashing Magazine called The Case Against Vertical Navigation. I really didn’t expect this type of response. I assumed that what I was stating was a fairly commonly held view among designers.

Since there have been a lot of criticisms of Smashing Magazine over the past year (mainly because of endless “list” posts), Vitaly Friedman was more than happy to publish an opinion piece on a specific aspect of design. So, if you haven’t read the original article yet, please do. And please read Kyle Meyer’s response to my article, which I will be responding to here.

I’m glad Kyle posted his response; as Jacob Gube mentioned in both SM’s comments and on Kyle’s site, this type of discussion is good, regardless of who is right and wrong.