You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.
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
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. [Links checked & repaired March/06/2017]
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...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.
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...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.
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...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!
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...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?
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...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.
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.
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.
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...If you've been assigned to design or provide the architecture for a large e-commerce project or other information-heavy website whose success depends on content findability, it is vital that the design and layout of the search functionality for that website is considered carefully.
The search results page is the prime focus of the search experience, and can make or break a site's conversion rates. Therefore, bridging the gap between a user and the content or products they seek is a crucial factor in the success of any large website. The responsibility to design an effective search results page is best considered after a thorough examination of some of the features and functions found on search results pages from a number of popular niches.
In this article, we'll look at a number of trends and practices incorporated on a variety of websites. From this examination, we'll conclude with a summary of the best practices learned from the examples those sites have set.
Read more...Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances. [Content Care Dec/21/2016]
The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.
In this article, we'll explain exactly what z-index is, how it has been misunderstood, and we'll discuss some practical uses for it. We'll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox. This comprehensive look at z-index should provide developers with an excellent foundation to be able to use this property confidently and effectively.