Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. 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

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.


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?


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.


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.


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.


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.


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.


Search Results Design: Best Practices and Design Patterns

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.

Walmart In-Store & Online

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.


The Z-Index CSS Property: A Comprehensive Look

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.'s Unique Gallery

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.


Horizontal Navigation Menus: Trends, Patterns And Best Practices

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back.

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better. In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We'll also look at several trends that developers can choose from when working on the navigation design for their next project.


Unique TV Series Episodes That Inspire Creativity

Whatever creative field you are striving to excel in – whether it be graphic design, web development, blogging, or writing of another kind – inspiration can be gleaned from any creative field, even if that field is not directly related to what you personally do. As artists striving to stand out in our own niches, it is important that we notice and appreciate ground-breaking or otherwise imaginative work done in a broad range of artistic spectrums.

In this article you'll get inspiration from the area of creative writing in popular television series episodes from the past 40+ years, and we'll discuss how the creativity achieved in these particular episodes can motivate all of us, as artists, to always strive to prevent our creations from being too normal and predictable.

The artists who wrote or co-wrote the TV Series episodes that we're featuring here were accustomed to producing work in a familiar environment, in harmony with the shows' usual themes and settings. But in specific instances, those writers decided to create something unique that would long be remembered and appreciated. Some of the creativity was visual, other examples were more related to adjustments in theme, and others involved a little of both.

Let's review how these particular episodes were different from what came before, and hopefully this will inspire artists today to become motivated to similarly push their work to a new level.


↑ Back to top