Smashing Magazine we smash you with the information that will make your life easier. really.

35 CSS-Lifesavers For Efficient Web Design

CSS-design is not easy. We need to find workaround across browser inconsistencies, not that easy CSS-concepts and quite counterintuitive CSS-solutions. However, there are effective and useful CSS-tools and Smashing Magazine reviewed many of them in our previous posts. Now it's time to present you with some fresh (or not mentioned earlier) tools that can assist designers in their work.

Today, we will look at 35 new and useful CSS tools, generators and resources that can significantly improve your workflow and reduce your time efforts for CSS-coding. Whether you're writing, compiling, refining or experimenting with CSS code – or all of the above – these tools can help you get the job done faster and better than ever before.

You may want to take a look at the following related articles:

• 50 Extremely Useful And Powerful CSS Tools
• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn't Live Without

Read more...

Module Tabs in Web Design: Best Practices and Solutions

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking (or in some instances hovering over) the content's corresponding tab control.

Module tabs are seeing an increase of use as websites and web applications push for optimizing web page screen areas without sacrificing the amount of information presented at once. For example, in weblogs, they are used in secondary content sections (such as the sidebar) to present relevant and interesting information such as a listing of blog posts which users can interact with to get to web pages quicker. This inevitably allows for an unobtrusive and compact manner of presenting content.

This article discusses the use of the module tabs design pattern for use in websites and web-based applications. We share with you some best practices to consider when using module tabs, a listing of real-world examples of websites the take advantage of module tabs, as well as tutorials and free downloadable scripts for building and deploying module tabs in your sites.

Read more...

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it's clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we're stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can't we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It's time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we'll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we'll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Read more...

Adaptive CSS-Layouts: New Era In Fluid Layouts?

Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.

If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes.

In this article, we'll discuss effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.

Also consider our previous articles:

• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
  This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.
• Flexible Layouts: Challenge For The Future
  Discusses the challenges of flexible layouts for the future.
• Screen Resolutions and Better User Experience
  Introduces the issue of screen resolutions, then considers the average user's profile.

Read more...

Ask SM: CSS Quick-Question Edition

This is our sixth installment of Ask SM, featuring reader questions about Web design focusing on HTML, CSS and JavaScript. These entries are not all questions, but rather quick Twitter responses to the query, "What has been your most difficult CSS challenge?" Among other things, this post covers the sticky footer issues, positioning elements at bottom of a div, on having layout, aligning labels and inputs, auto top and bottom padding, z-index and more.

If you have a question related to this challenge, feel free to reach me (Chris Coyier) by one of these methods:

1. Send an email to ask [at] smashingmagazine [dot] com with your question.
2. Post your question in our forum.
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Read more...

DelliStore: A Free Professional CSS/XHTML/PSD-Template

Over the last months we’ve heard numerous complaints about the lack of quality in our freebie releases. We are aware that our readers have high expectations and we try to do our best to meet them in our posts. In this post we release a beautiful high-quality (X)HTML/CSS-template (including its PSD-source) that will hopefully meet your expectations and come in handy in your projects.

This template, designed by the design agency Dellustrations and released for Smashing Magazine and its readers, is a full px-based, cross-browser-compliant (X)HTML/CSS-template (IE 6, IE 7, Firefox, Safari, Google Chrome). It consists of 4 custom pages; the PSD-source is included in the release package. You may modify this template for a e-commerce web site, restaurant, pool and spa web-sites and other caters, ventures and facilities.

You may be interested in other freebies that were released on Smashing Magazine recently:

• Project Icon Set
• Flavours Icon Set
• Typography Keyboard Layout
• "Magazeen": Free Magazine-Look WordPress Theme

Read more...

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven't heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.

The term "sprite" (similar to "spirit," "goblin," or "elf") has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen.

You may want to take a look at the following related posts:

• 53 CSS-Techniques You Couldn't Live Without
• Powerful CSS-Techniques For Effective Coding
• 50 Extremely Useful and Powerful CSS Tools
• CSS Float Theory
• CSS Specificity

Read more...

[Ask SM] Transparent Background, Positioning Problem

This is our fifth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can style only the text inputs, refreshing a content-block automatically, how to avoid some positioning problems and create and use transparent div-backgrounds; we also discuss further CSS-related problems and deliver answers to a couple of quickfire questions.

If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: a) send an email to ask [at] smashingmagazine [dot] com with your question; b) Post your question in our forum or c) if you have a quick question, just tweet us @smashingmag or @chriscoyier with the hashtag #asksmcss.

Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. However, I hope you use the forums to post questions because that gives you the best opportunity to get help from the community.

Read more...

Table Layouts vs. Div Layouts: From Hell to… Hell?

Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know how to? Often it seems that people are moving away from table hell only to wind up in div hell.

This article covers common problems with layout structure. The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future. Please join us on this journey from hell to heaven.

You're in table hell when your website uses tables for design purposes. Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website's functionality.

Read more...

8 Simple Ways to Improve Typography In Your Designs

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it's in the details that designers often neglect.

These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we're going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

Read more...

[Ask SM: CSS] Equal Spacing, CSS Font Replacement

This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you'll also learn best practices for CSS font replacement and answers to a couple of quickfire questions.

If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: a) Send an email to ask [at] smashingmagazine [dot] com with your question; b) post your question in our forum, c) or, if you have a quick question, just tweet us @smashingmag or @chriscoyier.

Antoine Nicolas writes: Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS? This is a classic example of something that is fairly difficult to do in CSS but probably shouldn't be. I have approached this problem in a number of different ways in the past. I have revisited it a little now, and I'll present what I believe is the best solution here.

Read more...

Ask SM [CSS/JS]: Divs of Equal Height, Dealing with IE 6

This is our third installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we'll cover how you can take care of a smooth page scrolling and Internet Explorer 6 bugs. You'll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:

• Send your question by email to ask [at] smashingmagazine [dot] com.
• Post your question in our forum
• Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier

Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.

Read more...

Ask SM [CSS/JS]: Pixel Width Decisions, Modal Boxes

This is our second installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. If you have a question about one of these topics, feel free to reach me (Chris Coyier) through one of these methods: send an email to ask [at] smashingmagazine [dot] com with your question, post your question in our forum (you will need to sign up and yes, the forum is not officially launched yet, but it is running!) or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag “[Ask SM].”

Please note: I will do what I can to answer questions, but I certainly won't be able to answer them all. However, posting questions to the forum gives you the best opportunity to get help from the community.

Read more...

50 Useful Design Tools For Beautiful Web Typography

Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right.

Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography.

Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter.

You may want to take a look at the following related articles:

• 50 Extremely Useful PHP Tools
• 50 Extremely Useful CSS Tools

Read more...

Ask SM: How Do I Create A Colorful Sitemap With jQuery?

We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our "Ask Smashing Magazine" series, in which well-known developers from the web design community answer our readers' questions and suggest solutions to common problems.

Today, we are glad to welcome Chris Coyier, who you may know from his articles on CSS-Tricks, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris!

Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:

1. Send an email to Chris at ask [at] smashingmagazine [dot] com with your question,
2. Post your question in our forum, putting "[Ask SM]" in the thread title (yes, the forum is not officially launched yet, but it is running!),
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier with the tag "[Ask SM]."

Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn't help you out.

Read more...

12 Useful Techniques For Good User Interface Design

Last week, we presented 10 Useful Web Application Interface Techniques, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.

This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.

You may also want to take a look at the following related articles:

• Web Design Trends For 2009
• 5 Useful Coding Solutions For Designers and Developers
• 10 Useful Techniques To Improve Your User Interface Designs
• 10 Principles Of Effective Design
• Five More Principle Of Effective Design

Read more...

Push Your Web Design Into The Future With CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification.

Realistically, you won't be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward. Here are five techniques snatched from the future that you can put into practice in your website designs today.

Read more...

50 Extremely Useful And Powerful CSS Tools

We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts.

Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools.

We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review.

Please take a look at the following related posts:

• Powerful CSS-Techniques For Effective Coding
• 53 CSS Techniques You Couldn't Live Without
• CSS: Techniques, Tutorials, Layouts
• 75 (Really) Useful JavaScript Techniques

Read more...

100 Free High-Quality XHTML/CSS Templates

If you haven’t taken a look at the (X)HTML/CSS templates that are available for free from a variety of sources, you may be surprised by the quality you can find. WordPress themes tend to get a lot of exposure and attention in the design community right now, but there is also a wide variety of high-quality (X)HTML/CSS templates that are free of charge.

In this post, we’ll showcase 100 free high-quality templates. Hopefully some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines.

You may want to take a look at other collections as well (some are from Smashing Magazine, some are not):

• Free Design Templates
• Free CSS Layouts and Templates
• 100 Excellent Free WordPress Themes
• 25 Sites to download Free Web Templates

Read more...

12 Principles For Keeping Your Code Clean

Beautiful HTML is the foundation of a beautiful website. When I teach people about CSS, I always begin by telling them that good CSS can only exist with equally good HTML markup. A house is only as strong as its foundation, right? The advantages of clean, semantic HTML are many, yet so many websites suffer from poorly written markup.

Let's take a look at some poorly written HTML, discuss its problems, and then whip it into shape! Bear in mind, we are not passing any judgment on the content or design of this page, only the markup that builds it. If you are interested, take a peek at the bad code and the good code before we start so you can see the big picture. Now let's start right at the top.

Read more...