Articles By: Louis Lazaris

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

By / / 17 Comments

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

By / / 16 Comments

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.

Recreating CNN’s Beveled Navigation Buttons with Pure CSS

By / / 17 Comments

Beveled Navigation Buttons with Pure CSSWhen CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.

I think this is a common-known technique among experienced developers, but many beginning web designers will probably resort to images to create this effect, which is not necessary. So, in this brief tutorial I’ll show you how to create a navigation bar with beveled edges using pure CSS, identical to that on CNN.

A JavaScript Content Switcher That Works Without JavaScript

By / / 102 Comments

A JavaScript Content Switcher That Works Without JavaScriptRecently, while doing research/work on a completely unrelated topic, I came across the beautiful illustrations on Rype Arts, which are displayed inside of a JavaScript-driven content switcher. For some reason, I happened to visit the page with JavaScript disabled and noticed that the content switcher was still working (albeit, with a few flaws).

At first I couldn’t figure out how it was functioning. Normally, with JavaScript disabled, this type of content switcher (or content slider) will just display one item, or else display all items, without allowing any “switching” functionality. After some poking around, I realized it’s not a very difficult thing to do. The switcher utilizes in-page anchors and overflow: hidden to keep the switchability intact.

Screencast: Why You Shouldn’t Use CSS Font Shorthand

By / / 35 Comments

Screencast: Why You Shouldn't Use CSS Font ShorthandStarting today, and pending the work involved and subsequent success/failure, I will be regularly posting screencasts on Impressive Webs. Most of my writing time is spent authoring stuff for Smashing Magazine and Web Designer Depot of late, so I thought, as a change of pace, I could start doing some screencasts for my own site.

The inspiration for this idea, naturally, comes from the screencasts on Nettuts and CSS-Tricks. Jeffrey Way and Chris Coyier have been doing screencasts for quite some time, and I definitely have to give credit to them for the inspiration. I’ve especially enjoyed Jeffrey’s recent video quick tips on Nettuts.

CSS3 Click Chart

By / / 22 Comments

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

By / / 4 Comments

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).

A Stationary Logo That Changes on Page Scroll with CSS

By / / 41 Comments

A Stationary Logo That Changes on Page ScrollThe 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 / / 8 Comments

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.

Deep Linking in JavaScript and Ajax Applications

By / / 8 Comments

Deep Linking in JavaScript and Ajax ApplicationsLast 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.

⭠ Newer Articles Older Articles ⭢