Web Design Articles
Not Another CSS3 Click Chart Update!
By Louis Lazaris on May 17th, 2010
Categories: Markup & Style, Web Design Articles | Comments Off
The CSS3 Click Chart has been updated to include 4 new CSS3 properties, a few of which I’ve only recently come across.
At this point, most of the cool and trendy stuff has been included in the chart, so nothing new that I add will be of great interest, but I’m continually researching and discovering new properties and enhancements that are part of the CSS3 spec, so I’ll continue to add them over time.
Is WordPress Screwing Up Your SEO?
By Louis Lazaris on May 6th, 2010
Categories: Markup & Style, Web Design Articles | 33 Comments >
Ever since WordPress burst on the scene and gained huge popularity among designers, developers and Joe Blow bloggers, it has become shockingly easy to create SEO-friendly content. WordPress handles everything for you: Pretty spider-friendly URLs, semantic content, accessibility, and structurally accurate heading tags.
Wait — scratch that last one. I’ve always been suspicious that WordPress’s HTML heading structure was slightly off, and recently my suspicions have been (evidently) confirmed. Two articles have provided some important info to help front-end developers, content strategists, and SEO experts structure their content in a more accessible, semantic, and SEO-friendly manner.
More Additions to the CSS3 Click Chart
By Louis Lazaris on May 5th, 2010
Categories: Markup & Style, Web Design Articles | Comments Off
CSS3 is fun to mess around with, and this info chart has certainly kept me busy while helping me to become more familiar with the newest techniques in CSS.
I’ve made updates and modifications to the click chart, including a few improvements to some of the already-existing examples, to make them more specific. The changes are listed below, or you can skip the boring descriptions and just use the demo button to view the updated chart.
What is Inline-Block?
By Louis Lazaris on April 26th, 2010
Categories: Markup & Style, Web Design Articles | 21 Comments >
If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6′s margins to behave.
To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.
Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.
Updates to the CSS3 Click Chart
By Louis Lazaris on April 22nd, 2010
Categories: Markup & Style, Web Design Articles | 11 Comments >
I’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
By Louis Lazaris on April 19th, 2010
Categories: Web Design Articles | 11 Comments >
This 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)
By Louis Lazaris on April 14th, 2010
Categories: Web Design Articles | 31 Comments >
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.
Using JavaScript’s Try-Catch Statement
By Louis Lazaris on April 6th, 2010
Categories: Scripting, Web Design Articles | 7 Comments >
I don’t consider myself an application developer. I think I have some knowledge of application design principles, but it’s something I’d like to improve on, especially in the area of JavaScript and Ajax-driven applications.
One technique that I believe is quite helpful when developing high-powered JavaScript apps is the JavaScript try-catch statement (also referred to as try-catch-finally). I became familiar with try-catch sometime last year, and although I haven’t used it much, I found it could prove useful in a number of circumstances.
In this article, I’m going to describe what try-catch is, how it can be used, and how it can help make web applications less annoying to users.
CSS Opacity: A Comprehensive Reference
By Louis Lazaris on March 23rd, 2010
Categories: Markup & Style, Web Design Articles | 28 Comments >
CSS 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
By Louis Lazaris on March 17th, 2010
Categories: Markup & Style, Web Design Articles | 17 Comments >
In 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!
