Author:

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Twitter: Follow Louis Lazaris on Twitter

The Case Against Vertical Navigation

In a recent article about unusable and superficial beer and alcohol websites, I made the claim that using left-hand vertical navigation is an out-of-date method in modern web design. In the comments, a few people wondered why I said this. I was surprised that it got any attention at all, because it was a brief comment in the article, and didn't constitute a substantial part of the argument I had put forth. Nonetheless, I decided to write an article describing what I feel is a solid case against using vertical navigation in modern web design.

Poli Maraton

Naturally there are exceptions to every rule, and I'll discuss those briefly at the end. But first I'm going to present five reasons why vertical navigation should not be used and why designers and architects should almost always construct their sites with horizontal navigation in mind.

It should be noted here that when I refer to "vertical navigation", I'm talking about the top-level, primary means of navigating a website. This would not include left or right sidebars that have secondary links and call-to-action areas that are perfectly acceptable in many circumstances.

Read more...

Styling HTML Lists with CSS: Techniques and Resources

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer's toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

Stepmenu in Styling HTML Lists with CSS: Techniques and Resources

If you're new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

In addition, we'll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

Read more...

The Unusable and Superficial World of Beer and Alcohol Websites

I was pretty excited when I came up with the idea of examining and showcasing some of the most famous beer and alcohol-related websites from a number of countries around the world. After all, who doesn't like the odd drink now and again? (Well, besides me — I can't stand alcohol in any form.) Surely this would make for an interesting article that would elicit quite a few comments. Well, if that's the result, it wouldn't be for the reasons I suspected when beginning to research this piece.

Corona Age Verification Screen

Instead, I've concluded — due to problems related to typography, accessibility, and usability — that the apparent "beauty" present on many of the websites related to this industry is merely "skin deep". To put it quite bluntly, the designers and developers in the beer and alcohol website industry should be ashamed of themselves for creating such horrendous user experiences. My analysis here will attempt to inspire modern-day designers and developers to avoid imitating the superficial design and development techniques employed by these web professionals.

But I won't just focus on the negative. There are some positive things to be mentioned, and a showcase of some of the nice sites is certainly in order, so that will round out the article (and might even fool a few of the "I'm here for the pictures" visitors).

Read more...

Designing Websites for Kids: Trends and Best Practices

How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable, and allows you to let your creative juices flow without the need to worry too much about usability and best practices? In today's web design market, it's rare that such a project would present itself — unless you were asked to design a website for children!

Club Penguin

Websites designed for children have been largely overlooked in web design articles and design roundups, but there are many beautiful and interesting design elements and layouts presented on children's websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to web design for children's sites — practices that should usually not be attempted on a typical website.

This article will showcase a number of popular commercial websites targeted towards children, with an analysis of trends, elements, and techniques used to help keep children interested and stimulated.

Read more...

Website Maintenance Tips for Front-End Developers

One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects. In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date.

Have you beautified your code, validated your markup, and made your XHTML more semantic? Have you implemented basic SEO best practices, spell-checked content, and removed legacy code? Have you ensured JavaScript is unobtrusive, applied the principle of graceful degradation, and minimized the use of Flash? If you've done all those things (and possibly more), what comes next? Are there things you can do to improve your site's overall effectiveness beyond those?

Wrenches

In this article, we will discuss ways that web designers and front-end coders can keep their websites relevant, timely, and accessible long after a site's launch. This guide goes beyond simple text and graphic updates, common "best practices" for CSS and XHTML, or other things you might see in a typical website checklist. We'll expand on many of the basics, and provide some effective tips for website maintenance geared towards front-end designers and coders.

Read more...

Web Conferences Roundup: Events from Around the Globe

Each year, thousands of developers, designers, and programmers from around the world gather together at conferences and events to share ideas, promote the latest technologies, and discuss best practices, standards, and emerging trends in their respective fields. For those of us who have had the privilege to participate in one or more of those events, we likely received valuable information that had a profound effect on our progress as web professionals.

An Event Apart

In this article, we've attempted to gather together a comprehensive list of web development and graphic design-related conferences and events that developers and designers can use as a reference to find out where and when the latest of such of events will be taking place. I've tried to ensure that the event descriptions and links are as general as possible, allowing this list to stay relevant for as long as possible.

Unfortunately, it is not possible to include every pertinent event. So if there is anything relevant missing, please comment below and we'll try to add it to the list. Also, if any of the information is incorrect or out of date, you can contact me using the bio information at the bottom of this article, and we'll make any necessary corrections.

Read more...

The Mystery Of The CSS Float Property

Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. Since columns are necessary in virtually every CSS layout, this property started to get used — and even overused — prolifically.

No More Tables - Floats

The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. If it were not for the CSS float property, CSS layouts would not be possible except using absolute and relative positioning — which would be messy and would make the layout unmaintainable.

In this article, we'll discuss exactly what the float property is and how it affects elements in particular contexts. We'll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we'll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development.

Read more...

CSS Differences in Internet Explorer 6, 7 and 8

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.

Screenshot

The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.

This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8.

Read more...

↑ Back to top