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

When To Use Magazine-Style Themes For Blogs?

By Steven Snell, August 28th, 2008 in How-To | 103 Comments

When designing a custom theme or deciding on an already-existing theme, bloggers have a lot of factors to consider and there is no shortage of options, particularly for WordPress users. A growing number of blogs are moving away from traditional blog layouts in favor of magazine-style themes; however, the layout and presentation of content has a major impact on visitors and there is no one-size-fits-all solution.

Magazine themes have a few characteristics that distinguish them from traditional blog themes.
1. Magazine themes only use excerpts or headlines on the front page, while standard blogs will use either full posts or excerpts.
2. A magazine theme functions more as a portal to content on the rest of the site. The magazine theme will give visitors a glimpse at what is available and it will direct them to go in whatever direction they like.
3. Magazine themes make more effort to organize the content of the blog and present what is most important, whereas traditional blog layouts will order front page content based on what is most recent.
Read more...
Grid-Based Design: Six Creative Column Techniques

By Smashing Editorial, March 26th, 2008 in How-To | 107 Comments

Grid systems bring visual structure and balance to site design. As a tool grids are useful for organizing and presenting information. Used properly, they can enhance the user experience by creating predictable patterns for users to follow. From designer's point of view they allow for an organized methodology for planning systematic layouts.

After creating a well-structured and usable grid, consider allowing it to breath. A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions.

Like skyscrapers in city centers, overwhelmingly, columns dominate Web design grids. Once you've mastered the grid as a tool then it's time to get creative with it. Work on establishing a visual rhythm in your design. Then you can step in and break the visual flow for effect. The techniques discussed in the next section present effective ways of getting creative with your columns in grid-based Web design.

Read more...
CSS Frameworks + CSS Reset: Design From Scratch

By Smashing Editorial, September 21st, 2007 in CSS | 165 Comments

You don't have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you're starting to work with, at some point you have to define classes and IDs you've already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost "perfect" scratch. The latter might contain some basic definitions you'd write in your code anyway. However, once you've decided to create such a scratch, you need to make sure it is really bulletproof — besides, if the stylesheet also sets up optimal typographic rules and basic form styling you manage to kill two birds with one stone. And this is where CSS Frameworks and CSS Reset are becoming important. Using them, you can get yourself a perfect default-stylesheet and markup, save your time and ensure the best quality of your code from the very beginning. But what are CSS Frameworks? And why do you need the Reset for? Let's take a look at the idea behind CSS Frameworks, their advantages and disadvantages, most popular CSS frameworks and dozens of default-stylesheets you can use designing a new web-site from scratch.

Read more...
80+ AJAX-Solutions For Professional Coding

By Smashing Editorial, June 20th, 2007 in Developer's Toolbox | 420 Comments

Web-developers can create amazing web-applications with AJAX. Stikkit, Netvibes, GMail and dozens of further web-projects offer a new level of interactivity we've used to give up the idea of. Modern web-applications can be designed with enhanced user interfaces and functionalities, which used to be the privelege of professional desktop-applications. AJAX makes it possible to create more interactive, more responsive and more flexible web-solutions. And it's the first step towards rich internet applications of the future.

Asynchronous JavaScript and XML isn't a new programming language, as it is often mistakingly called. Basically, AJAX is a set of XHTML, CSS, DOM, XMLHttpRequest and XML, put together and used together for the same purpose - to improve the user-server-interaction.
- To understand the idea behind AJAX, you should read Jesse James Garrett's article "Ajax: A New Approach to Web Applications" and Wikipedia: Ajax;
- to learn the basics of AJAX, you should go through some AJAX tutorials we've presented previously;
- to learn more about professional CSS coding, you should visit 70 Expert Ideas For Better CSS Coding;
- and to get a powerful and handy CSS-Toolbox for your future projects, you can use 53 CSS-Techniques You Couldn't Live Without.
In this article we'd like to present a list of over 90 useful AJAX-based techniques you should always have ready to hand developing AJAX-based web-applications. Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic javascripts, as well as an extensive developer's suite should give you a useful and powerful toolbox you can use every day, without a need to go through hundreds of AJAX-related bookmarks. You may also want to take a look at the article 60 More Ajax and Javascript Solutions For Professional Coding.
Read more...
Data Grids with AJAX, DHTML and JavaScript

By Smashing Editorial, May 30th, 2007 in Developer's Toolbox | 111 Comments

In order to be presented effectively, information needs structure. The more intuitive data structure is designed, the better users can understand the content. Consequently, the data can be scanned and extracted in a more meaningful and systematic way. Table is a perfect example of a well-structured data presentation, which is easy to analyze and easy to handle. Used for its original purpose - to present data, not to style it -, it can convey ideas effectively. And this is what most of us are actually trying to achieve in the Web. Furthermore, the user experience can be greatly enhanced with further optional functionalities - such as sorting, filtering and fast editing. What solutions can you use to provide them in your tables? Few months ago we've covered the basics of semantically correct CSS-based tables - among other things, we've presented solutions for Zebra tables and few tables with sorting and filtering functionalities; but we've missed some important ones. Now it's time to get this right and list the rest - 17 free solutions for data grids, developed with AJAX, DHTML and/or JavaScript. In a brief and descriptive overview.
Read more...
Designing With Grid-Based Approach

By Smashing Editorial, April 14th, 2007 in How-To | 198 Comments

The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page, while developers can update the layout in a well thought-out, consistent way. However, it's quite hard to find your way through all the theory behind grid systems: it isn't easy at all. Some important notions and related key-facts can help to learn basics and keep essential techniques in mind. And this is what this article is all about. Inspired by Khoi Vinn's and Mark Boulton's presentation Grids are Good, we've decided to take a deep look in the articles about grid-based designs. We've read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we've listed the most useful references, tutorials and tools we found - with precise descriptions of what the articles are about.
Read more...