Web design articles, tutorials, and more.
To make the web impressive.
CSS3 Click Chart
by Louis Lazaris on February 3rd, 2010
Categories: Markup & Style, Web Design Articles | 6 Comments >
Since 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
by Louis Lazaris on January 26th, 2010
Categories: Web Design Articles | 1 Comment >
Today 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).
A Stationary Logo That Changes on Page Scroll with CSS
by Louis Lazaris on January 18th, 2010
Categories: CSS, Web Design Tutorials | 26 Comments >
The Econsultancy marketing blog has an interesting little effect using CSS that causes their logo to change when the page is scrolled. Visit their page and scroll down. You’ll notice the logo changes from a solid version to an outline version.
If you know CSS fairly well, or have investigated some of the sites on css Zen Garden, then you’re probably aware that this technique uses the CSS background-attachment property.
Response to “In Defense of Vertical Navigation”
by Louis Lazaris on January 12th, 2010
Categories: Graphic Design & Layout, Web Design Articles | 7 Comments >
It’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.
Deep Linking in JavaScript and Ajax Applications
by Louis Lazaris on December 17th, 2009
Categories: Ajax, JavaScript & jQuery, Web Design Tutorials | 5 Comments >
Last week I posted a tutorial that demonstrated using a simple application how to implement progressive enhancement into your Ajax projects. The one major flaw in the final Ajax-driven page from that tutorial is the lack of deep linking when JavaScript is enabled.
Although the resulting code is clean, works well, and is easy to maintain, the lack of deep linking is enough to cause a client to balk at the use of progressive enhancement in such a circumstance. So, in this brief tutorial, I’ll describe how to incorporate deep linking into that page.
If you haven’t already gone through the previous tutorial, doing so might help you get up to speed — but it’s not absolutely necessary, since the code we’ll be using is pretty straightforward.
Building an Ajax Application with Progressive Enhancement
by Louis Lazaris on December 9th, 2009
Categories: Ajax, JavaScript & jQuery, Web Design Tutorials | No Comments >
If you’ve done your best to keep up with web development trends over the past five years or more, then it’s likely that you’re familiar with the concept of Progressive Enhancement. I’m not going to provide an explanation of that technique here, but instead, I thought I would demonstrate using a small Ajax-driven page how progressive enhancement can be implemented.
The mini-app we’ll be building in this tutorial is an employee information page. It will consist of a series of links at the top of the page that will determine what employee info is displayed in the content area. The information will be held inside of include files, to simplify the process (as opposed to a database or XML file which might be more practical in a real-world app). Although we’re going to use Ajax to display the information, we’re going to ensure that the same information is displayed even when the user is visiting the page without JavaScript capabilities.
Impressive Webs Redesign
by Louis Lazaris on November 30th, 2009
Categories: Graphic Design & Layout, Web Design Articles | 8 Comments >
Over the weekend I rolled out a new “skin” for Impressive Webs, which I think improves the site’s design quite a bit. There’s more contrast, which creates a more distinct experience. And I finally have a logo that I’m satisfied with.
The layout of the site remains virtually the same, so, like I said, it’s not as much of a redesign as a “skinning”. I did change the height of the top navigation bar, and added some new graphics.
The Right Way to Add Custom List Markers to Unordered Lists
by Louis Lazaris on November 20th, 2009
Categories: CSS, Web Design Tutorials, XHTML | 2 Comments >
Most experienced web developers now understand that using CSS’s built-in method for adding custom list markers (also referred to as “bullets”) to style an unordered list is not an option. The unpredictable bugs that occur in Internet Explorer when using the list-style-image property render that method quite useless.
Fortunately, because of CSS’s inherent flexible nature, we can still customize the list marker on an unordered list. This is done by placing a background image on the list items. Here’s how most developers do this:
Audio Comments on Blogs — Now That’s a Great Idea!
by Louis Lazaris on November 7th, 2009
Categories: Web Design Articles | 6 Comments >
I was reading an interesting article on Boagworld called The biggest ecommerce lies and how to avoid them and I noticed that the author posted an audio comment to respond to some of the other comments that had been posted.
Will EOT Become the Standard for Font Embedding?
by Louis Lazaris on October 21st, 2009
Categories: Graphic Design & Layout, Web Standards & Best Practices | 5 Comments >
If you’re at all familiar with the various methods in use today to embed custom fonts in web pages (sIFR, Cufon, @font-face, etc), then you also may have heard of a font format called EOT. Well, if Microsoft has it their way, EOT will become the standard, allowing web developers — with permission from font vendors — to be free to use virtually any font in a text-friendly manner in their web pages.
So what is EOT, and how has Microsoft pushed to standardize this method? Embedded OpenType fonts are compact OpenType fonts designed by Microsoft for use as embedded web fonts. They are recognizable by their “.eot” file extension. By means of data compression and removal of superfluous data, EOT files are made small in size and include features that protect the fonts themselves from being copied and used in unauthorized ways.
