Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.

Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.

Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project.

What is Foundation?

Foundation is a framework for quickly prototyping and building responsive sites and apps. It allows you to rapidly put together pages, including layout and common elements like navigation, pagination, forms and more so you can see how your site works on desktops, tablets and phones. Then you can take that code and customize or adapt it into rock-solid production code.

Why was Foundation built?

We realized that the tools out there for building responsive sites – sites that work on any kind of device – were not only insufficient but really non-existent. There are a number of CSS frameworks that people are using, but everything was designed for fixed layouts. Mobile devices will account for over half of all Internet traffic in the next 2 years, so not designing and building for them is a death sentence for online products or services. We wanted a tool that would let us not only deliver a great experience to every device, but to very quickly test out what a great experience really looked and felt like.

Talk about a site you had to use Foundation for? How did it help? What issues did you have to deal with?

We’ve used Foundation for all of our internal sites and projects for the last several months, but if I had to pick one great example it would be a web app we released recently called Spur. Spur is a tool for doing traditional design critiques by letting you capture a web page, or upload an image, and then view it with blur, heightened contrast, rotation and other effects that reveal how the visual design holds up. We designed it from the ground up with Foundation to support desktops, tablets, and iPhones; all from the same front-end codebase.

If you pull up the app on different devices you’ll see different tools and subtly modified layouts all made possible with Foundation’s mobile visibility classes. These let you easily tag elements to be hidden or shown on specific types of devices, such as ‘hide-on-phones’ or ‘show-on-tablets’. That and Foundation’s inherent ability to scale to most any size meant that Spur has a slick, tailored experience for any device type with very little additional effort.

Working entirely with percentages of course adds some complexity, especially regarding images and the flexibility of certain objects like toolbars but beyond some specific CSS Foundation took care of almost everything.

Who should be using Foundation?

Anyone who wants their site or app to be relevant in a couple years should be building for multiple devices, and Foundation is a good tool for doing that. Foundation is perfect for new sites that you want to quickly prototype and build, since you can lay out entire sites in just a few minutes using the flexible grid and common elements already included.

We’ve found Foundation to be especially helpful for companies or organization who have concerns about the cost (in time and resources) to build for mobile devices – Foundation helps you do things quickly and all at once.

What’s the future for Foundation?

We’re constantly working on Foundation, adding common elements that people have requested or we’ve seen a need for. We just recently added a new four-column phone grid so you can do more complex layouts for very small devices, and we’ll continue to work on device and pattern support. We’re also considering things like page templates, code packs for specific uses like wireframing, and working with outside developers on plugins for other frameworks like Less, SaSS, Drupal, WordPress, etc.

Our goal is for Foundation to be more than just an open-source Framework but a complete community and development approach for the front-end. We’d love to have even more contributors, both in issues, feature requests, and code on Github and we’re happy to answer questions at  foundation@zurb.com.

Never Ending WordPress Business Bundle – only $14!

One of the newest examples is an interactive music video for Evelyn, by ABBY.

It’s a fantastic site that gives you the opportunity to mix different instruments and vocal styles together, while the song is playing, for a completely custom experience.

We asked the developers how they created such an awesome interactive video, and got their tips for working on projects of this type.

1. Where did the idea for the video come from? What was the creative process?

Although we were not directly involved in the creative process we will give you a short summary on how it was created.

We, Steffen & Dominik, just founded a web development agency in Berlin called bleech specializing in HTML5 and other modern web technologies. We have our office in a shared space together with a recording studio which is run by the members of the band ABBY. The space is completed by a booking agency and an iOS agency.

Most of us have known each other since college and we have worked together since then on many different projects in many diverse and creative environments.

The actual idea for the video was developed by a friend of us who studied design. He needed a topic for his thesis and had the vision of creating an interactive experience which lets the user experiment with the different components of a modern song.

2. Can you give a quick overview of the process for actually creating the video, the steps involved, etc.?

One of the biggest challenges for the band was to select the adequate instruments which differ in their sound and characteristics but at the same time have a pleasant sound and harmonize with each other. Additionally they had to ensure that the rhythms and harmonics of the newly integrated tracks did not, at any time, go against each other.

We believe they did a really great job on this.

The entire idea was developed without dealing with any technical requirements regarding web technology. So they started recording one video for each audio track in a historic sound studio in Berlin. This resulted in a total of 20 individual videos, which then had to be merged to make the idea become reality. For this task they asked a befriended Flash developer to make a website where you can control the different tracks and mix your own version of the song. Unfortunately, he faced some difficulties with the syncing process over a network connection, so that early draft never made it to a final release.

That’s when we came in. We felt challenged to prove that it was possible to bring their idea to life with the latest technologies that nobody has yet used in this exact way.

We started building the foundation in a test-driven JavaScript environment to ensure a consistent communication between the videos, our mediacontrollers, and the global timeline module. The mediacontrollers take care of switching the videos and displaying only the currently selected track. The timeline module serves as a reference time for each mediacontroller and syncs them if necessary.

3. What unexpected challenges presented themselves during the project? What advice would you give a developer who wanted to create a project like this?

A tough part in the development process was to keep the videos in sync without doing to many computations and to ensure that even on older computers a good, responsive user experience is possible.

The methods we found out to be most effective were an aggregation of several algorithms which keep the videos in sync and adapt to the machine’s performance by increasing the threshold and the frequency of how often the syncing is triggered.

The biggest challenge though was fine tuning in the millisecond area, as for a song with 120 beats per minute, an offset of 50ms of any of the tracks would clearly be noticed by the listener. Finally, we managed to get all of the audio and video tracks in sync by less than 10ms on high performance computers (like a 2011 MacBook Pro / Air).

If you’re planning on developing a media-driven HTML5 project, be prepared for sleepless nights optimizing small pieces of code, unforeseen browser bugs, and a million possible ways to implement a single function.

4. Where do you see this kind of content going in the next couple of years?

We hope that more developers start to experiment with media-related web projects and hope to see new frameworks being created for media rich applications. Up to this point Java (processing) and Flash still have some advantages for certain use cases.

The most prominent developments in HTML5 at the moment are definitely the audio and video capabilities and we are looking forward to features like the mediacontroller or device element being implemented in new browsers.

With modern server technologies such as websocket, we are waiting to see the delivery of real-time events to the user instead of only serving static, prerecorded content. Additionally, it would be great to see more large scale interactive content that integrates social experience with existing media channels. The usual stuff that everybody is talking about right now…

We are glad to be part of this project and to work with great artists with various expertise. The project has become our little baby and we are really overwhelmed by the positive response.

BTW, we’re looking for people to support our growing team.

What other awesome HTML5 projects have you seen recently? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

As developers are well aware, there are hundreds of APIs out there for doing almost anything you could imagine online. Some are better than others, and some are definitely more useful than others.

Below are forty of the most useful APIs out there. The included APIs will let you do everything from shortening a URL to displaying a book preview on your site to interacting with your Twitter account, and everything in between.

Please share with us which APIs have you found most useful and feel free to recommend others that we may have missed…

The Google APIs

Google offers dozens of APIs for web designers and developers.

Some are specifically related to popular Google products, like Gmail and Analytics, while others are more specialized and aren’t part of public programs.

All are free to use, of course. You can view all of Google’s APIs and code tools on their site directory.

• Feed API – The Google Feed API lets you download any public feed (including RSS, Media RSS, and Atom) and then combine them into mashups. It simplifies the mashup process by using JavaScript rather than more complex server-side coding.
• Places API – Google Places is a large directory of local businesses and attractions all around the world. The Places API lets you access that information and display it on your website, as well as display check-ins by users.
• Geocoding API – The Geocoding API lets you convert any address into geographic coordinates, which can then be used to place markers on a map.
• Tasks API – The Tasks API offers endpoints for reading, searching, and updating Google Tasks content and metadata.
• Analytics Management API – The Analytics Management API gives improved access to your Analytics data, and lets you fine-tune your requests to just pull the information and reports you need for your application.
• Blogger Data API – The Blogger Data API lets your application create and post new blog posts, edit or delete existing posts, and search for posts based on specific criteria.
• Books API – The Google Books API lets you integrate book searches into your application, and embed book previews on your site.
• Calendar API – The Calendar API gives access to many of the standard web interface tools and operations to your web app. Public calendar events can be searched and viewed without authentication, while authenticated sessions can access private calendars, as well as edit, create, or delete those calendars.
• Moderator API – Google Moderator is a tool for collecting ideas, questions, and recommendations from any size audience. The API allows your website or application to do the same.
• Prediction API – The Prediction API helps you make smarter apps that can analyze historic data and predict future outcomes. It can be used for things like recommendation systems, spam detection, upsell opportunity analysis, and more.
• Picasa Web Albums Data API – The PWA Data API can be used to create albums and upload, retrieve, or comment on photos, among other features. It’s been used for everything from powering digital photo frames to full-featured mobile clients and more.
• Static Maps API – You don’t always want an interactive map on your site. Sometimes a static map is just what you need. The Static Map API lets you embed static Google Maps onto your site, including custom styled maps.
• Directions API – The Directions API lets your users get directions from one point to another using a variety of travel modes from within your site or app, and doesn’t require a Google Maps API Key.
• YouTube APIs – YouTube has two APIs available: Player APIs and Data API. The Player APIs allow you to have an embedded player, or a chromeless player that you can then customize within HTML or Flash. The Data API lets your app perform a lot of the operations available on YouTube, including uploading videos and modifying user playlists.
• Webmaster Tools API – The Webmaster Tools API lets your client application use a variety of Webmaster Tools functions, including viewing sites, adding and removing sites, verifying site ownership, and submitting and deleting Sitemaps.
• Google Web Fonts API – The Web Fonts API makes it easy to add free web fonts to your website or application. Their collection of fonts grows on a continuous basis and already includes a huge variety.
• OpenSocial – OpenSocial can be used for building social applications, creating social app platforms, and sharing and accessing social data.

The Yahoo! APIs

Like Google, Yahoo! offers a number of APIs useful for developers. All are free to use and can help you integrate a variety of Yahoo!-owned web services into your app, including Flickr and Delicious.

• Answers API – The Answers API lets you access the collective knowledge contained within Yahoo! Answers. You can search Answers based on a variety of criteria (including specific user, category, and more), set your app to watch for new questions in the categories you choose, and track new answers from specific users.
• Contacts API – The Contacts API lets you access relationships in your Yahoo! address book. It reads a user’s Contacts information while respecting user privacy and permission settings.
• Delicious API – The Delicious API gives read/write access to Delicious bookmarks and tags.
• Fire Eagle Developer API – The Fire Eagle API helps you create location-aware websites and applications.
• Flickr API – With the Flickr API you can view, search, and manipulate photo tags, display photos from a specific user or group, and more.
• Local API – The Local API lets you access location-based information and user-contributed content.
• Maps APIs – Yahoo! offers a number of APIs for their Maps services, including an Ajax API, a REST API, and a No Coding API.
• Meme API – Meme is a multimedia light-blogging platform. The API lets you create apps that can read, post, and repost content through Meme.
• PlaceFinder – The PlaceFinder API, similar to Google’s GeoCoding API, and lets you convert a street address into geographic coordinates.

More APIs

Yahoo! and Google aren’t the only ones offering powerful APIs for designers and developers. A number of social media sites and others have their own API(s), including Twitter, Facebook, Yelp, Bit.ly, and many more.

• Twitter API – Twitter has a host of developer tools surrounding their API that let you create apps that interact with virtually any of Twitter’s functions.
• Facebook APIs – Facebook offers APIs for working with Credits, Ads, Chat, and more, including a couple of legacy APIs that are no longer actively supported. Also found here is the Graph API, which is the backbone of the Facebook Platform, and enables your app to read and write data to Facebook.
• Awe.sm – Awe.sm offers a number of developer APIs for integrating their social media campaign tracking tools into your app or website.
• Foursquare APIv2 – The Foursquare API not only allows you to create apps that interact with the Foursquare service, but also to use Foursquare’s place-related database as a standalone service.
• Ning API – Ning offers a set of APIs for developing desktop and mobile apps, custom network features, profile apps, and data importers.
• Soundcloud API – Soundcloud’s API includes tools for sharing, streaming, and customizing the Soundcloud player for your website.
• Klout API – The Klout API makes a variety of data available to developers, including Klout Scores, Network Influence, Amplification Probability, True Reach, and more.
• Social Mention API – The Social Mention API provides a stream of real-time search data from a number of social media services for integration into other applications. It’s free for personal and non-commercial use.
• Opus Social Media API – The Opus Social Media API can serve as a basis for developing a social networking and digital media site or app.
• Digg API – Digg offers an API that lets you access their newsfeeds for your own sites and applications.
• Yelp API – The Yelp API lets you access business listing info, business ratings, and review excerpts from Yelp in your application or website.
• Zillow Neighborhood Information APIs – Real estate site Zillow offers APIs that give access to neighborhood information that can be integrated into other applications. (They also offer a number of other APIs, including postings, property details, home valuations, and more.)
• Tropo – The Tropo API adds Twitter, IM, voice and SMS functionality to a variety of common programming languages. Development is free, though sending messages varies in price (with Twitter and IM messages currently free).
• Bit.ly API – Bit.ly offers an API for integrating URL shortening into your app or site.

Written exclusively for WDD by Cameron Chapman.

Which APIs do you use? Are there any sites you’d like to see an API from that doesn’t currently offer one? Let us know in the comments!

Never Ending WordPress Business Bundle – only $14!

These special links include code (i.e. not just a target URL), and they trigger various kinds of useful functionality, allowing you to modify and extend any web page.

Once you begin using and building your own, you will no longer see web pages as static elements that you have no control over.

With bookmarklets, you have the power to bend any web page to your needs.

How bookmarklets work

Bookmarklets are more than static URLs. They are short bits of JavaScript, loaded by a link, that operate on the currently open page. Thus, the code becomes an extension of the current page and can interact with any element on it.

The changes to the page are temporary and are not preserved. When the user refreshes the page or follows a link, the JavaScript is lost.

Upon returning to the page, the user must click the shortcut again to enable the bookmarklet.

A sample bookmarklet

Perhaps the best way to explain bookmarklets is to demonstrate one in action. Bit.ly is a powerful URL shortening service that happens to provide a handy bookmarklet feature. Simply drag the link to your toolbar and start using your fancy new link on any page on the web.

When you click the Bit.ly bookmarklet, a panel loads on the current page. Notice that this is not a new browser window, but rather code that has been appended to the current page. Such bookmarklets enable developers to bring functionality from their website to any page on the web.

5 handy bookmarklets to get you started

Bit.ly

Few things are as convenient as a tool that allows you to quickly shorten and share URLs. With the Bit.ly bookmarklet, instead of copying a full URL path and sharing it, you can click a link to generate a short version of it. You also gain the ability to track how often that link is used. Not only that, but the link’s shortness ensures that the link won’t break in an email, as longer complex URLs often do.

Shortwave

Developers often go all out and pack a ton of functionality into a single bookmarklet. Such is the case with Shortwave by Shaun Inman. This powerful shortcut packs a ton of search functionality into a single place. You can search Google, Amazon, Netflix and loads of other major sources. The only gotcha is that you have to memorize commands to work with it. This hurdle aside, once you get used to it, you’ll quickly become very reliant on it.

ReCSS

ReCSS is a simple script that refreshes the CSS for a page but not the entire page itself. On the surface, this might seem like an odd thing to want to do. But consider if you are building an application or process that is broken by a refresh. For example, if you are styling an error message, instead of repeatedly performing an action that generates an error, simply refresh the CSS to test different styles. When the time comes, you’ll love this one.

autoPopulate

If you have had to build many long forms, then surely you sympathize with people who are frustrated with having to fill out forms over and over again. This is where autoPopulate comes in. The functionality here is rather simple: a bookmarklet that automagically populates form fields with recurring data. You can also build a custom version with your own values if needed.

Instapaper

Instapaper is an entire service built around a bookmarklet. The handy tool saves pages that you would like to read later. It conveniently syncs with your iPhone, iPad and Kindle, allowing you to easily pick up where you left off reading.

The ideal structure for bookmarklets

There is a way to architect bookmarklets that ensures they are easy to maintain. The principle is simple: use the bookmarklet as a shell to load source files onto the page. This means that the meat of the code is not actually contained in the bookmark. This eliminates the problem of how to get users to update the bookmark after you’ve changed the code.

To prepare updates to your bookmark, simply construct the link so that it loads all resources from your server onto the page. Typically, this entails adding a JavaScript and CSS file to the page, and then triggering the primary JavaScript to launch the functionality.

The following JavaScript appends a specified JavaScript file to the page:

 new_script=document.createElement('SCRIPT');
 new_script.type='text/javascript';
 new_script.src='http://www.your-site.com/script.js?';
 document.getElementsByTagName('head')[0].appendChild(new_script);

A template for creating bookmarklets

Building on this simple concept, below are two basic outlines for creating your own bookmarklet. The main choice you will have to make is whether to disable caching for your JavaScript file.

Template 1: caching

Template one does not prevent caching. This means your script will be saved to the user’s computer for some period of time. It will eventually be reloaded, but you have no way of knowing how soon. Here is the template:

javascript:(function(){
 new_script=document.createElement('SCRIPT');
 new_script.type='text/javascript';
 new_script.src='http://www.your-site.com/script.js?';
 document.getElementsByTagName('head')[0].appendChild(new_script);
})();

Template 2: caching disabled

This alternative includes a handy parameter to prevent caching of your script. This is ideal for development because every time you use the link, it will run the latest version on the server.

javascript:(function(){
  new_script=document.createElement('SCRIPT');
 new_script.type='text/javascript';
 new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
  document.getElementsByTagName('head')[0].appendChild(new_script);
})();

The cache is disabled simply by adding a random query string to the end of the script tag. This makes the browser load the script each time it is used.

Also, note that these functions are in a JavaScript wrapper that identifies them as JavaScript code.

How to use the templates

Using these two templates, here is how you would put them to work. First, replace the URL in the code with the full path to the JavaScript file on your server. Secondly, place the code above in a link tag that can be added to a page. It is this link that users will drag and drop into their bookmarks.

Something like this should do the trick:

<a href="javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
document.getElementsByTagName('head')[0].appendChild(new_script);})();">Sample bookmarklet </a>

Note that all of the JavaScript had to be compressed to a single line of code. This compression can be a pain to manage, so I prefer to use this handy bookmarklet generator.

Once you have the basic framework in place, you can begin adding any JavaScript-based functionality to the scripts file for the bookmarklet. Use the new link in your browser to test as you go!

Don’t forget the cache!

One of the most frustrating aspects of developing bookmarklets is browser caching. You can’t force a refresh of the file other than by directly loading the source JavaScript file and then hitting “Refresh.” Passing a query string parameter as found in template two above is much easier.

A warning about “View source”

Another point that generates a lot of frustration is the source view of a web page. When running a bookmarklet and hitting the standard “View source” option, you might be puzzled.

When a bookmarklet dynamically adds code to the page, the standard source view will not show the updated HTML. Instead, you have to use a plug-in like Firebug or view the generated source using the Web Developer toolbar.

Additional resources for building bookmarklets

• The templates above are based on the tutorial at BetterExplained.
• Marklets is an awesome directory of bookmarklets.
• Here is an outline for building jQuery-based bookmarklets.

Written exclusively for WDD by Patrick McNeil. He is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Can you think of a way to extend your application with a bookmarklet? How have you creatively used bookmarklets?

Never Ending WordPress Business Bundle – only $14!

The opinions of web scholars differ on the use of grid systems. Many argue that setting grid points limits the creativity of designers. Others contend that a grid provides a scientific basis for a design to be perfected.

Both sides provide interesting arguments. These ideas have become part of a unique web culture characterized by influential design rules and open-source projects.

The grid isn’t a master key to perfect design. However, math has proven that certain design specifications provide the best ratios for page elements and layouts. If you’ve heard about any of this before, you may be familiar with the many options that grid-based layouts offer designers.

A Comparison to the Classic Web

Older generations used design as a control mechanism. Their designs presented information precisely and in a way that was easy to manage. This still holds true today, but these stale design principles are being uprooted.

In their wake, a new web culture is stirring. A culture of open standards and protocols, freely shared source code and powerful platforms run by programmers across the world.

One reason for this development is the significant increase in the number of people working on the semantic web. The underlying cause stems from the human drive to contribute to something more than ourselves.

Working for a pay day is satisfying, but not something to be passionate about. Developers who truly care about new standards want to leave their mark.

Where Grids Have Evolved

There hasn’t been a major study comparing pre-standards and post-standards web design techniques. We are able to track, however, how grids have become more popular over time.

The grid system is based on current technological trends and advancements. This includes statistics on the number of people who access the Internet at a given time, the devices they use to access the Internet and the screen resolutions and operating systems of their devices. Grid systems provide a structural balance to website layouts. They provide consistent measurements and allow for flexibility between frameworks.

In the late 1990s, not many household machines ran a resolution higher than 800×600, and even fewer past 1024×768. In the past 20 years, intricate and complex OSes have been developed to display much higher resolutions. 1024×768 is a common setting these days.

Monitor resolutions are growing exponentially, and this trend does not appear to be slowing. Check out the data table from Web Statistics and Trends; it details screen-resolution measurements via W3Schools.

Visual Grid Designs

All web pages are based on grids, whether the designer is conscious of this or not. Digital work is comprised of pixels and as such will conform to a set width and height, also producing artistic effects visually with spacing and distance between points.

Instead of painting in the dark, so to speak, you are able to use grids to shine a light on the project. Grids first became popular with the emergence of Adobe Photoshop as the de facto tool for web designers. Tutorials around the web present ways to display and implement grid lines when creating mockups, logos, graphics, icons and other digital art.

Over time, developers picked up on this and began to implement systems in their own work. Designing a grid layout in Photoshop is much different than creating the same layout in HTML and CSS.

The work required for each path is vastly different, yet the grid system itself is universal. As open standards fall into place, current design culture is moving toward grid-based structures.

Basic HTML and CSS Rules

Grids use some of the most common properties of HTML web pages. HTML grid layouts generate the same overall template each time.

The structure starts with a containing wrapper just wide enough to contain all of the columns. Inside the wrapper division there should be a collection of subdivisions. The number of subdivisions should be the same as the number of columns you need.

For a two-column layout, you may have two divisions, classed as .left and .right. All of your internal columns should have their CSS float property set to left or right, while the wrapper should contain a clearfix class.

To get a feel for HTML code, you could check out a dynamic grid layout generator. The popular solution from Page Column offers a great structure and supports multi-column layouts. All HTML and CSS are generated instantly and pass standards-compliance testing.

Breaking Out with Padding

Padding and gutters are integral parts of any grid system. Pieces of content that are formatted next to each other require space between them, which could cause the layout to expand unnaturally, resulting in broken pages.

Create definition in padded areas by crafting a layout filled with dummy content. Place your columns on a page and give them 1-pixel outlines using various colors. This provides an accurate representation of what your design will look like, outlining each area’s portion of content.

This technique works with both fixed and fluid layouts, making the integration to current grid frameworks much easier.

Gutters also don’t need to follow a set framework. You may be willing to sacrifice content area to increase the space between a two-column split. Open-source frameworks are malleable and allow you to edit styles directly or even implement your own to overwrite rules and define properties.

Layout Grid CSS Property

The layout-grid property is an older CSS specification adopted by Microsoft. It is written in shorthand to set a multitude of grid properties. Specifically, they reference layout-grid-mode, layout-grid-type, layout-grid-line, layout-grid-char and layout-grid-char-spacing.

Each of these can be defined as its own property and can be written without the overarching layout-grid. Here is a short list explaining each:

• layout-grid-mode
  Controls which type or mode of layout grid is used. Possible values include none for no grid, line for inline grid elements, char for characters and block-line elements, and both for all-around support.
• layout-grid-type
  Controls which grid is used to render page typography and internal text elements. Value pairs are loose, which is used for Chinese and Korean text, strict, which is used for Japanese characters, and fixed, which uses monospacing to apply equal distance between characters, regardless of language.
• layout-grid-line
  Controls grid length granularity when layout-grid-mode is set to line or both. This property behaves similar to line-height and can receive numerical values set in cm, px, pt, em or percentages.
• layout-grid-char
  Controls the size of the character grid for an element’s text content when layout-grid-mode is set to line or both. The values this property accepts are the same as above and directly affect the page’s line height. The difference is that layout-grid-line affects the page grid, while layout-grid-char affects the text and character spacing grid.
• layout-grid-char-spacing
  Controls character spacing when layout-grid-mode is set to char or both and the layout-grid-type property is set to loose. This property behaves like line-height and should be used for block-level text areas.

The purpose of creating these properties is to adapt grid layouts for Asian-encoded pages. The characters in Asian languages often require custom page layouts.

When viewed in other countries, these characters could behave strangely and break your grid calculations. These unique properties enable better visual formatting by utilizing a one- or two-dimensional grid system.

Vertical Page Rhythm

Many graphic artists will gloss over the importance of vertical spacing in grid design. Gridlines support horizontal layout design and align vertical page elements and typography. Four important properties manipulate vertical spacing: font size, line height, top and bottom margins and padding.

Line height is the biggest factor in vertical spacing. Page text is scaled by how large individual letters appear and by how much space the lines in between require. Commonly, line height is defined in pixels or ems, depending on how flexible the layout is. Ems maintain typographic consistency across all resolutions and browsers. The best approach is to apply font styles to all major HTML elements, including headings, block quotes and paragraphs.

Vertical rhythm can be retouched once a grid has been set in place, making scaling for different environments simple. Desktop users will have a much different experience than laptop and mobile users, who are dealing with much smaller resolutions.

You can’t plan the vertical alignment with exact precision, but in most cases an educated guess will produce quality results.

The Rule of Thirds

Divide a design into three horizontal and vertical spaces. This will create a grid of nine rectangles nestled in newly formed pockets. It is much easier to work with designs that are broken down into block areas with finite points.

The science behind this trend comes from the “divine proportion,” also known as the “divine ratio.” The ratio of 1.618, which is the divine proportion, is a mathematical constant. When we divide any fixed-size layout into this value we can calculate the most precise division for a two-column structure.

Take as an example a 960-pixel layout. If we divide 960 by 1.618, we get approximately 593. According to the golden proportion, then, we should set our primary column length to 593 pixels. This method goes back to artists centuries ago. Luckily, with the spread of open-source frameworks, most of the math has already been calculated.

Building a Golden Rectangle

This theory for creating beautiful grid-based rectangular layouts is based on the Rule of Thirds. Split rectangles are geometrically sound compared to the golden ratio. Numerical values for the width and height of the rectangle are in proportion to the golden rule.

These types of rectangles are known as “golden rectangles.” The shorter and longer side should hold the values of variables a and b, respectively.

These rectangles are useful to build page layouts: they measure how large block elements should be. They are extremely easy to calculate, and the tools for many popular grid frameworks are built in.

These elements are very beneficial to web designers who use mathematical grids. Imagine the multiple scenarios in which a carefully structured golden rectangle would enhance a page’s aesthetics. This could include page widgets, e-commerce product images and even content-rich tables.

Beginning With 960gs

With all of this information available to the public, web designers have started to define their own standards.

Of all of the frameworks, the 960 Grid System (960gs) is probably the best known. This isn’t to say that it is the best-no grid system fits all criteria perfectly-but it is easy to work with. 960gs is adaptable and works well with almost any website. And it renders well on most browsers and devices

The math includes 12 columns at 60 pixels each, along with a 10-pixel margin on each side, producing a 20-pixel gutter. Most grid frameworks are based on 12- to 24-pixel columns. Of course, you aren’t expected to incorporate 12 columns into your layout.

Eventually, you will combine the columns and gutters into a single grid unit. Publishing content is much easier when you can draft specific details for images, widgets, videos and other page elements.

960gs has garnered so much publicity because it adapts well to the web. Most screen resolutions can display a 960-pixel website without a horizontal scroll bar. Increasingly, layouts are fitting into this ratio, indicating that this is the future of the web. The extra width doesn’t take away from the design and expanding or contracting a template is entirely possible.

Understanding a Full 960 Layout

Only so many columns can rationally fit into a design. A grid is not meant to lock you in a limiting mindset. Grids are guides to follow: they enhance user interactivity and page element placement.

The largest grid you could create is a 940-pixel content area with 20-pixel gutters. It’s a goofy use of the grid, but it is good to understand the possibilities. Two-column layouts are pretty simple and provide plenty of room for content. Common examples include:

• 780 x 140,
• 700 x 220,
• 620 x 300.

Notice that these all add up to 920. The 40-pixel loss can be accounted for by gutters on each “block” of the layout. These spaces keep users focused and allow the content to break apart smoothly. With split content elements, we have gutters on the far side and between the blocks, each accounting for 10 of the 40 pixels.

These spaces increase as you add new blocks to the layout. A three-column design has slightly less room for content than a two-column design.

If this concept is still confusing, refer to the image above. The simplest way to work with grids is to design a reference sheet similar to the graphic above, with all possible breaks for content blocks. With this information, mix and match styles to determine the type of design that would best suit your project.

For example, say we want to design a mock-up using three columns and the largest possible content area. With the chart above, we can break down our content area into two parts: one full of content, but split in half to contain two columns. This would require a 450-pixel content block and two 210-pixel columns.

Again, these grids are not meant to stifle creativity. They allow for flexibility but keep your back-end structure secure. Most designers won’t deliberate over the science of all this. The amount of time these open-source systems save a project is extraordinary, easily worth skimming through the documentation and implementing your own layout.

Fluid Grid Layouts

It’s not common to see grids pinned to fluid layouts. Pixels are the most precise unit of measurement for a website. To move into a measurement such as percentages or ems would require careful consideration. Such layouts are possible with a few changes and additional CSS selectors.

Fluid 960 Grid System is well known, although most of the code isn’t accessible to older versions of Internet Explorer. Through interactive prototyping and working on countless screen resolutions, you can scale a 960-pixel design across many screen resolutions. This open framework is not an exact copy of 960gs, and it comes with new documentation. If you’re interested, check out the GitHub repository for active forum discussions and archived Q&A sessions.

Like the rest of the web design community, you’re probably itching for something more stable. A few fluid frameworks that generate amazing layouts.

YAML Grid Layouts

Yet Another Multicolumn Layout (YAML) is one of the most popular CSS frameworks. It contains a large code base for manipulating flexible XHTML and CSS layouts. It’s consistently updated by active community developers.

The framework is extremely versatile, offering numerous practical examples with code. The smallest fixed-width layout will conform to 740 pixels, fitting 800×600 screen resolutions. Maximum-width resolutions are set to 80 em, offering scalability between mobile and desktop browsing.

Set with standard web fonts, around 75% of layouts will conform to a 960-pixel maximum, although this can be overwritten.

Many of the bugs found in older browsers have been patched. YAML supports Google Chrome, Mozilla Firefox, Safari and all versions of Internet Explorer 5+. See the framework’s overview and features for more in-depth information.

Yahoo! User Interface Library

YUI is a set of JavaScript and CSS libraries put out by Yahoo. Most of the project code and bug fixes have been written by professional developers from the YUI community. The most current revision is YUI2, though YUI3 API docs have been released to v3.1.1.

The YUI2 home page has links leading to the most popular projects. Toward the bottom, listed under “YUI2 CSS Tools,” are four influential frameworks: CSS Reset, Base, Fonts and Grids. This article is concerned with CSS Grids, though many of these other frameworks have been referred to.

The download file is only 4 KB and offers over 1000 unique web page layouts. Built-in settings allow for both fluid- and fixed-layout width sizes. Columns are self-clearing, so whether you’re running two- or four-way splits, the footer content will always remain underneath the primary content. Typographic properties are tied in together for flexible user-specific adjustments. Many core features are taken care of, which makes working in YUI2 so nice.

The CSS Grids framework offers a small number of mobile-based layouts. These render properly only on browsers with a relatively new version of the Webkit engine. This includes smartphones such as Android devices, the iPhone, BlackBerry and many Windows Mobile devices.

The integration is nice, but this new media hasn’t been tested thoroughly and may still display improperly on some mobile devices. But at the end of the day it’s worth the hassle, because the majority of mobile visitors who are willing to read the content on your website probably own a smartphone.

The Evolution of Web Culture

Web designers have become quite emphatic about open systems and rules. The early web wasn’t much of a community at all. There were HTML and CSS standards, but the mentality behind most layouts was “whatever works.” After significant developments in web technology, the Internet has become the best medium for publication worldwide.

Web designers and developers aim to simplify the process of creating websites without taking away from the quality or experience of a website. Grids are a harmonious instrument in that they give designs an order and structure. Chaos and random creation don’t usually yield results.

This is why grid designs are so accessible. The web has been reformed into an agile development system. Grid-based layouts produce stable websites: it’s no surprise the community has adopted frameworks as common practice.

Instead of relying on older unreliable methods, the average web designer today can focus on creating websites that are pleasing to users, rather than coordinating pixel-perfect creations.

Today, designers are much younger and hold greater passion for design than ever before. This, coupled with the open web movement, means that a stream of new web code is constantly being released to the public. GitHub repositories offers networking opportunities with other CSS developers.

Custom Grid Framework Development

Designers have criticized many open frameworks as being too bloated. Many are labeled as confusing, with too many classes and rules to work with. This may be true for some, and I certainly don’t discredit these remarks.

Ultimately, the more flexible a design, the better. Artists look for tools that make their job easier. Frameworks are not suitable for all designs. Developing frameworks over smaller web projects will save time in the long run. However, consider the CSS systems as more of a learning tool than a production environment.

Grids can be confusing at first, no doubt about it. Having a framework to reference and documentation to check against throughout the process will help newbies integrate quickly and with less stress.

With enough practice, developing a custom CSS framework will be simple. The benefits of this far outweigh the advantages of working with someone else’s source. You can structure all layout formats in one location and define properties such as font size, line height and block elements. Nobody has ever written perfect CSS code, so stick with whatever works best for you.

Common CSS Grid Frameworks

Below are some of the more popular CSS frameworks. Although not all of these frameworks focus solely on grid design, they do offer useful libraries to study and implement in web designs. The project source code is free in each case and usually comes with documentation.

1KB Grid

1KB Grid is a great CSS framework that mainly emphasizes speed. The download files are less than 1 KB in total and hold most of the CSS selectors you need to create a beautiful website layout. The CSS code is customizable before downloading, which is a huge benefit to all web designers. You can choose between how many columns to include and how wide the columns and gutters should appear. This grid is extremely friendly to newcomers and a great way to break yourself in.

Baseline CSS

Baseline is another standard CSS template available free for download. Not only does this package include code for grids, but it also structures page typography and block elements. All code is compatible with CSS3 and HTML5 elements, giving developers control over how to structure page flow. Baseline CSS offers solutions for vertical space manipulation by integrating page typography into a flexible grid.

1140px CSS Grid System

CSSGrid.net is home to a newer fluid framework for grid-based websites. With 1140 pixels and a 12-column split, the structure scales properly on all devices, from the largest monitor resolutions to handhelds. The framework uses media queries to check when to display a certain layout and how to spread the page content. Author Andy Taylor frequently updates the project, and you can download the latest 1.6 release here.

YAML

YAML provides the most flexible framework to develop layouts. The documentation offers a complete solution for all fixed, elastic and fluid layouts. Core files have been tested extensively on small and large websites. If you’re looking for a stable CSS framework, YAML is a great solution.

Blueprint CSS

Blueprint contains many of the benefits of Baseline. The advantage of this framework is its well-recognized brand name. Many active developers have updated the project with new classes. Grids comprise a large portion of the framework, but many models are used to form typography, mobile and print screens and more!

CSS Boilerplate

The CSS Boilerplate project was started by one of the developers of Blueprint. The code is a more refined, stripped-down version of the Blueprint framework, optimized for speed and easy readability. Although the project hasn’t been updated recently, it provides an opportunity for beginners to rule out their own CSS project definitions.

YUI 2: Grids CSS

YUI2 Grids is a very popular framework put out by Yahoo under its YUI2 line. The code is perfect for both fixed and fluid layouts, following rules set in CSS2 and CSS3. The framework is well documented under the Yahoo User Interface Library and is considered one of the better frameworks for beginners.

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital Internet trends and networking within the design community. Check him out on Twitter @jakerocheleau for more about his work.

Do you use a grid based framework for your designs? Share your views with us!

Never Ending WordPress Business Bundle – only $14!

Most developers now recognize that organized, valid code ensures maintainability and compatibility.

Anyone who doubts this merely has to speak to a developer who has picked up work on an old website that is littered with unorganized, uncommented spaghetti code.

Just as preparing our code to be read by other developers is important, so is preparing our code to be read by browsers. Great web development might start with great organization, but it ends with great optimization.

This article introduces best practices of front-end performance.

The Story of a Web Request

When a visitor requests a page from your website, several things happen:

• Your web server returns an HTML document;
• The visitor’s browser looks for and requests linked files (CSS, JavaScript, images);
• Your web server returns those linked files;
• The visitor’s browser displays those files, runs them or looks through them for more things to request (e.g. CSS background images).

While this process seems simple enough, a number of complications could really slow it down:

• Each requested file has headers that must also be sent. Sending many small files creates unnecessary overhead, which you avoid with a couple of big files.
• Most browsers are limited in the number of files they can download from one domain at a time. If you have 24 files to download from the same domain, the ninth won’t begin downloading until the first has finished.
• Many browsers block all parallel downloads when loading external JavaScript.

While all this might sound somewhat complicated, there are best practices to follow to make it much simpler. Both Google and Yahoo offer fairly comprehensive guidelines on taking website optimization to the extreme:

• Google Page Speed,
• Yahoo YSlow.

Many of their recommendations require a bit of work. Below are the five best things you can do today to improve your website’s performance with minimal effort.

5 Quick Changes To Improve Your Website’s Performance

1. Move your JavaScript to the Footer

Moving your JavaScript files to the page footer is the quickest and easiest thing you can do to improve performance. Many browsers block parallel downloads when loading external JavaScript files; by putting your files in the footer, browsers will begin loading other things first.

Look out, though, for side effects to timing and appearance. If you are using JavaScript to change the appearance of an element, it won’t be executed until after a longer time lag.

2. Put the CSS First

Loading the CSS first is just as important as putting the JavaScript at the end of the HTML document, for two reasons:

1. CSS often contains background images that require another round of requests. Getting these started ASAP is important.
2. Pages render as soon as the CSS is ready.

By putting the CSS at the top of the document, you ensure that all background images begin loading immediately and that your website renders as quickly as possible.

3. Compile and Minimize your CSS and JavaScript

When writing code for maintainability, using several different style sheets and JavaScript files often makes sense. When optimizing for performance, this is almost the worst thing you can do. With each file you add, a header needs to be sent and an additional request needs to make its way to and from the server.

Combine all of your CSS into one file and all of your JavaScript into another, and then minimize them both. (Don’t forget to put the CSS at the top of the HTML document and the JavaScript in the footer.)

Although recompiling and minifying your files after each change might sound like a pain, the performance difference is truly dramatic.

Compilation and minimization resources:

• Online CSS Compressor and Minifier,
• Online JavaScript Compressor,
• WordPress WP Minify plug-in,
• PHP5 library,
• Google’s Apache Module.

4. Beware Third-Party Scripts

Many websites today contain third-party scripts and widgets that load data from other servers. Examples are the Tweet Button, the Facebook fan box, the Share This button and even Google Analytics. You would think that these would all be well engineered, but many are not. For example, the Digg widget makes nine requests, is 52 KB and blocks the main page from downloading!

Use these widgets sparingly, measure their performance and look for asynchronous alternatives. Alternatives to the most popular widgets are available; installing them is slightly more complicated, but they perform much better. You can usually find them with a little digging.

Asynchronous widget resources:

• Google Analytics,
• Tweet Button,
• WordPress Asynchronous Widgets plug-in,

5. Measure Your Results

A number of great tools out there make it easy to measure the performance of your website. Some can be used in the browser; others are online:

• Firefox Firebug
  Check out the Net tab in Firebug to see a visual timeline of how long your website takes to load and why it’s so.
• YSlow for Firebug
  Yahoo has released a plug-in for Firebug that analyzes a website against its YSlow recommendations and suggests ways to improve performance.
• PageSpeed for Firebug
  This works just like YSlow but is based on Google’s PageSpeed recommendations.
• GTMetrix
  This tool takes a URL and delivers a full report on the website’s performance based on YSlow and PageSpeed. It’s convenient when Firebug isn’t available or you want to share the results via a link.

Going One Step Further

Most web developers could implement the five tips above fairly easily. That said, a number of other things are worth doing if you want to dig a little deeper and optimize your server’s configuration.

Add Expires Headers

Include an expires header with every file your server sends. This tells the browser how long the file is good for. This way, the browser knows to save the file for the next time it is referenced, so that the browser doesn’t need to fetch it again from the server.

Many websites include the same CSS file on every page, but there is no reason a visitor should have to download it for every page; the browser should know to cache it.

Use Gzip Compression

Today’s computers are really fast. Gzip compression takes advantage of this by asking the server to compress every file before sending it to the visitor.

The visitor’s browser then downloads and uncompresses it. In the past, we had to consider server resources in deciding whether to enable this. Today, there is essentially no downside to enabling gzip.

Consider Installing mod_pagespeed

Google has just released an Apache module called mod_pagespeed. It automatically implements almost all of the techniques in this article.

Understanding the techniques before implementing this module is still important, though; if you know how the website works, you’ll be able to take advantage of mod_pagespeed’s many filters. One such filter, Combine CSS, finds, combines and minifies all CSS referenced in the HTML.

The module has a number of filters and settings that could improve your website’s performance. All are worth looking at.

Conclusion

While not the most glamorous topic, optimization deserves more attention. Our job as developers is to learn the industry’s best practices in order to deliver the highest-quality work to our clients and users.

This post was written exclusively for Webdesigner Depot by Joel Sutherland, founder and web developer at New Media Campaigns. He is a part of the team that just launched HiFi, a modern content management system built for designers with their clients in mind. Follow Joel on Twitter or contact him on the HiFi website.

Do you know of an easy way to improve a website’s performance that wasn’t mentioned in this article? Please share it and your experience in the comments below.

Never Ending WordPress Business Bundle – only $14!

Over the years, this process has become more organized; rules have been put in place to create best practices of coding.

In this article, we’ll take a look at some ideas you can use when writing style sheets to speed up your code.

Efficient CSS is easy to manage and easy to read and can be a resource for web designers. Getting organized is a big step, but using CSS can be a little more complicated than that.

As you read this article, keep your own preferences in mind; the best advice you can get from any developer is to find your own way of working. Combine a few of the techniques here with your own methods to get the most benefit.

Why Bother Streamlining CSS?

Many designers confuse front-end and back-end languages when talking about parsing code. CSS and HTML are front-end design languages used to format and style elements on a website. Files are downloaded and parsed by the visitor’s browser, which means that front-end code has a substantial loading time.

Code downloaded and parsed by the browser takes time to be read and computed, just like code written in back-end languages (such as PHP or Ruby). Streamlined CSS can greatly benefit a website because it can shorten loading times and speed up page-element structuring.

The benefits may not be obvious with today’s high-speed connections and advanced operating systems. You may want to look at your website on a mobile browser to compare load times and see how the website loads.

When CSS is coded efficiently, you should see the form and style of website elements as they are being processed. This can look different from browser to browser, but it still happens. The more you test your website’s code, the more you’ll see it.

Keep your code standardized and simple. If you’re updating your blog or personal website a few months after initial development, churning through CSS styles that you’re familiar with is easier than dealing with new ones. Adapting to established standards helps in the long run.

How to Work With Efficient Code

To begin coding styles with utmost efficiency, you’ll have to adopt some new ideas. These are basic CSS techniques being used today by top-notch Internet websites and app developers.

Keep Your Code Simple

This can be easily overlooked. When mapping out a set of data for your styles, keep it simple. Create data sets in a column stack if you need to.

Start by creating a list of different sections to work on in your styles. You can include text, forms, layout boxes, headers, footers and anything else you might need. To really get organized, you can break it down into a few known styles, such as an id or class for navigation links.

This first step helps create a blueprint for your website using plain words, before you get into any style language. Afterwards, sitting down to write code will be much simpler; having the resource list in front of you will help you pour out code at an almost superhuman rate.

Keep Blocks of Code Delineated and Sparse

There is an ongoing debate about how CSS code should be written. When I first started, I used block notation because it was all I had ever seen. But single-line notation is much faster when it comes to parsing text and making it legible.

I’m not making a case for ignoring block-style CSS-far from it. When you’re dealing with an important element or id that holds six or seven major properties, keeping it in blocked form will be easier. You’ll be isolating the important parts of your style, making them easier to find at a glance.

Reading long styles in block notation is also easier because most text editors wrap long lines, and reading property-value pairs can get confusing when you’ve got 10 or more to go through. Being the web designer, you have to make the call on how to space out the CSS code. Keep efficiency in mind, and use your best judgment.

Working with other Developers

If you’re a professional web designer or aspire to be one, chances are you’ll work with a team sooner or later. This can be a blessing or a curse, depending on the team.

Designers are often reluctant to make major changes to their work. CSS code is a bit different because you’re trying to create a beautiful layout using only property values, and files can get messy when passed between a few hands. So, stay organized.

Comments are a major help. If lines or blocks of code might confuse or mislead others, comments will save hours. Explain everything you put into the style sheet as elegantly as possible.

Make sure no duplicate or appended styles are overwritten. Imagine that the h1 to h4 headings are styled high up in a CSS document, but then some code lower down changes their fonts. This could be immensely confusing for someone who didn’t write the code and now has to go through and fix the bug.

Communication is also critical. You could write the most efficient code around, but a lack of communication will doom your team. Focus on the task at hand, and work with the creative ideas produced collectively by the team (not just your own).

Keep Track of Separate CSS Documents

Another way to keep code clean and organized is to keep style types separate. This works well for large websites on which holding all the styles in a single document would be unrealistic.

Facebook is a good example. It likely has many different styles for all its various pages: profile, search, registration, photos, etc. If the styles were all consolidated in one file, I wouldn’t want to be the guy who has to sort through the code just to fix a simple bug.

Facebook gets a lot more traffic than your website, but the principles are the same. If organization is a concern, separate style sheets can go a long way. Web designers often organize code based on the aspect of the document that it structures (e.g. layout.css, text.css, forms.css).

Not all styles need to be loaded on every page. And here lies the benefit: the method allows for greater customization when building your website. You’ll cut down on parsing time tremendously just by creating separate views and styles.

Testing Support for IE

Web developers have always painted Internet Explorer as the villain, especially with CSS. Luckily, you can apply conditional comments (which look like regular comments to most browsers) to the HTML.

You can use these to apply styles in Internet Explorer. Check out conditional comments if you’re not familiar with them; they can prove invaluable when CSS properties don’t work right and you need an alternative.

With the release of Internet Explorer 9 Beta, we’re getting a bit closer to a unified Internet experience. The only problem is the number of people who are still running browsers as old as IE6 and IE7, which have serious processing bugs (due to flawed rendering engines) and sometimes require external styles. Thankfully, support has improved, and Microsoft seems to be turning things around.

Adding a Table of Contents

This step is optional, but I find it works wonders for my style sheets. You can store the table outside of the CSS document itself, but I have found this to be somewhat counterproductive-especially because adding comments inline is so easy.

The main reasons to put a table of contents in your styles are that it facilitates access and streamlines the editing process. Put markers at the beginning of your document to separate the code into logical divisions.

Creating your own keys is a good approach. For example, if you plan to split your table according to the main areas of the document (layout, font, header, navigation, etc.), you could key the sections with unique characters.

You could use =!layout and =!font to delineate the layout and font sections, respectively. You probably won’t run into those exact sequences of characters anywhere in the code, so adding them to both your table and the beginning of each comments section should be safe. Then, use the search function in your text editor to skip down to the section you want.

This is also a good strategy for projects in which many people will be looking at the code. It keeps everything organized and accessible.

There are many ways to optimize code and make it more efficient, and these tips are a great start. CSS is evolving, and a lot of new ideas about it are being built up.

You need passion and dedication to make it in the design industry. If you can hold on to your passion for digital design, then keeping up with CSS best practices shouldn’t be difficult. Reaching out to others in this huge global community of web designers can be a great help; industry experts are usually happy to share their techniques and innovations.

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital and Internet trends and networking with the design community. To hear more about his work, find him on Twitter @jakerocheleau.

What are your methods for streamlining CSS? Any suggestions for newbie CSS developers? What new features or additional support would you like to see in future iterations of CSS?

Never Ending WordPress Business Bundle – only $14!

Along with updates to the core framework, when version 3.0 was released the WordPress team also added a new default theme, replacing the now obsolete Kubrick. The new theme, as most of you are probably aware, is called Twenty Ten.

Not to sound too corny here, but from the first moment I laid eyes on Twenty Ten, I fell in love with it. But I’m not talking about theme’s visual design (which is pretty humdrum); I’m talking about the front-end code, which has seen a number of improvements over the previous default theme.

In this article, I’ll discuss some of these improvements that I feel are worthy of examination and imitation.

And keep in mind that this is not a discussion of the features of the theme itself; this is a discussion of the structure and organization of the HTML and CSS and how it provides an excellent model to follow for front-end developers.

It’s HTML5 Ready

The first thing you’ll notice when you view the source of the Twenty Ten theme is the simplified doctype, which means it’s technically capable of using HTML5. So, while there aren’t any of the common HTML5 elements in the theme (like and ), the HTML5 doctype is a step in the right direction.

You’ll notice in the source that there are a few other markup simplifications: the character encoding declaration is simplified, and the HTML element doesn’t have the “xlmns” attribute. Both of these improvements are based on the HTML5 spec.

So, even if you’re not using any of the common HTML5 elements in your pages, you could still make your pages HTML5-ready by including the new simplified doctype, and removing some of the other soon-to-be obsolete elements, thus following the example of the developers of Twenty Ten.

Proper Use of the h1 Tag

This is an improvement that’s easier to examine when looking at the actual PHP files that create the markup, and constitutes a definite improvement over Kubrick for best-practices SEO, semantics, and accessibility.

In Kubrick, on every page the top-level heading (<h1>) is the website title. This is fine for the home page, but not secondary pages. Thus, a single article page in Kubrick has the article’s title marked up with the <h2> element. According to Roger Johansson of 456 Berea Street this is not best practice.

Take a look at the screen grab below displaying how the new Twenty Ten theme handles this problem:

The PHP code in header.php changes the markup depending on which page is being viewed. If the home page is being viewed, the element that surrounds the page title becomes the <h1> element. On any other page, the title is wrapped in a <div>. In the latter case, this allows the <div> element to be more meaningful on secondary pages, contributing to SEO and overall accessibility.

Eric Meyer’s CSS Reset Included

Recognizing the usefulness of a CSS reset, the Twenty Ten theme developers have also included a variation of Eric Meyer’s CSS Reset at the top of the theme’s CSS file, crediting Meyer in a comment:

A reset can go a long way towards achieving cross-browser compatible CSS layouts. So the inclusion of the reset is no surprise here and is another technique employed by the Twenty Ten developers that’s worthy of imitation.

Closing Tags are Commented to Indicate IDs and Classes

At one of my previous jobs, I was working on a lot of inherited code, and some of the previous developers suffered from divitis, making it difficult to rearrange or target elements in the markup. So, in new projects, I started adding comments at the end of <div> elements, to ensure that during future maintenance anyone could easily see which element ended where. This was especially important for deep-nested sets of <div> tags.

The Twenty Ten developers have recognized the value of comments to identify the names of <div> elements, so they’ve done something similar, except they’ve taken it a step further:

Their comments not only include the ID or class name of the element they identify, but also indicate whether or not the name is a class or ID. The first comment in the screenshot above is for an element that has an ID of “primary” (indicated by “#primary”) and a class name of “widget-area” (indicated by “.widget-area”).

So, while my own convention is to just name the element regardless of class or ID, they’ve included a single character (the hash or period) to identify the attribute on which the name is based. This is a good practice to follow, and is just a simple way to enhance the clarity and maintainability of your markup.

CSS is Commented More Clearly

Finally, staying on the topic of commenting, I noticed a clear improvement in the way CSS is commented and organized in Twenty Ten, as compared to Kubrick. This is no doubt something that many front-end developers have tried to do for a number years, and it’s good to see the Twenty Ten developers following suit. Below is a screenshot showing the distinct comments in Twenty Ten’s CSS file, making them very easy to find when scanning through the styles:

By contrast, in Kubrick the comments were not as easy to spot when scanning the file:

Conclusion

It’s understood that one of the best ways to become a better coder is to study the work of others. And that advice certainly applies to front-end code that is easily accessible on pretty much every website.

The five things I’ve discussed in this article are not necessarily anything new in front-end development, but I think seeing these practices implemented on a single project is unique, and so the Twenty Ten developers (who are evidently Matt Thomas and company) have done a great job in this regard, providing some excellent techniques and examples worthy of imitation.

This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Have you noticed anything else about the new default WordPress theme’s code that’s worthy of discussion? Please share your comments below.

Never Ending WordPress Business Bundle – only $14!

Wireframes bring elegance to design mock-ups. They are the basic structure of a website, with colors and enhancements removed.

They are used to view design concepts with just the bare essentials, and they can provide a useful perspective on any project.

Most wireframes are created in software suites such as Adobe Photoshop and Fireworks, but some websites enable you to create wireframe images right in the browser.

In this post, we’ll go over coding a basic wireframe image in HTML and CSS and see how it can benefit the creative process.

Why Bother?

Why spend time sketching a website’s structure? In some cases, it might be unnecessary, but it can help when you’re stuck in a rut or struggling to see the big picture.

It can benefit both designers and clients. In paid work, you’re responsible for pleasing the client. Showing the basic structure of their soon-to-be-designed website can give clients relief and a sense of control over the whole process.

But if the design is very basic or has a simple structure, then creating a wireframe might not be worth it; mocking up the entire thing in Photoshop, with buttons and color, might be just as quick.

Deciding what steps to take does require time and critical thinking. After all, a wireframe is merely a tool. It is underrated by many web designers but surprisingly useful once understood.

Prototyping Wireframes in Code

For years, Adobe design software has been the premier suite for wireframe creation, but the web has undergone substantial change and is still evolving.

The rise of coding standards and increase in HTML5 documentation are big steps towards a common web. Now, coding a basic wireframe in HTML and CSS is no more work than tackling the job in Fireworks.

With wireframes, you can attack a project head-on from multiple angles. You can even test for compatibility with CSS2 and CSS3 techniques and browsers. Things don’t need to be complex at the beginning; a wireframe simply serves as a solid foundation to begin coding.

Sharing content also becomes easier with a wireframe. You can host all the files you need on any web server, and you can set up a demo directory and forward live updates to clients and overseers of your project. Making changes, such as quick tweaks to margins and widths in the document’s CSS, is simple, too.

Standardize Code for the Long Haul

Wireframes save time in the development process. If the CSS styles for your basic elements are already written, then the rest is just filler (important filler, mind you).

Start out properly, with the correct HTML document type and directory structure. Document types aren’t too different from one another. You can read about them on the W3C Specs page. They don’t matter much in the old World Wide Web model, but HTML5 is thorough and allows your website to grow.

You have to test compatibility on as many operating systems and browsers as possible anyway, and the wireframe prototyping stage is the perfect time to do this, because you’re already focused on arranging the layout.

This is also a good time to work on a mobile-friendly template. As the structure changes, you should be able to incorporate ideas and manipulate the document’s code. Development becomes easier because there is less code to clutter up your mobile and custom styles.

Beginning the Structure of the Document Wireframe

The best way to start is with a blank slate, because it affords you the most creativity. The obvious elements to include in the code (as in any other web document) are html, head and body.

This is the skeleton. You’ll need a few more elements for the wireframe to look good. The div (or division) is notable. This is the element used to box certain areas of the page, such as the logo or search box.

Divs are the building blocks of HTML5 wireframe prototypes. Anything and everything can be enveloped in a div, and styling is a breeze when you apply classes and IDs to elements. Much of your main code will be split up by divs because they are the basic block elements.

With the new HTML5 specs, an element called nav has been introduced. This can be combined with an unordered list and some CSS properties to create and define your website’s main navigation area. Below is a simple example of how you could structure your nav:

<div id="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

Working With header and footer Elements

You’ll notice in the example above that I used a div with an ID of header to separate my heading navigation. This is perfectly acceptable and nothing is wrong with the above code. HTML5 gives us other options, though.

The header element in the new HTML5 specs allows you to further define your structure, which is useful mostly for web page crawlers and screen readers, which separate a “heading” portion of the content. It shouldn’t make any difference to your users, and it keeps your code shipshape and show that you really understand what you’re talking about.

Another interesting element that’s been added is footer. Same idea: use this element in place of a div to separate your footer content. Generally, footers are out of the way and contain basic information about the website or company.

You could add links to the footer and use a nav element to define some of them, but that would be ill-advised. The nav element specifies the main navigation area, so adding it to the footer or anywhere else would be redundant.

In this scenario, using the footer element and separating the navigation links as an unordered list is best. You could use a columned footer, with a number of columns of links. These could be separate div elements displayed next to each other, all wrapped in the main footer.

CSS Techniques for Styling Wireframes

If you understand HTML and have worked with the web for a while, then you probably know some basic CSS. Many of the new features of CSS3 are for adding fancy rounded corners and drop-shadows to text.

I don’t mean to suggest that CSS styling is not important, but the core layout and positioning is what ultimately makes your website’s structure. With CSS, you define width, margin and spacing. These are the basic properties of most web elements, and they’re the last step in creating a truly outstanding wireframe.

If you’re intrigued by CSS3′s new properties and selectors, then check out Webdesigner Depot’s collection of enhancements. It contains guides all over the web about the new features in CSS3.

Adding clearfix to Styles

If you are unfamiliar with the clearfix technique, do some research. It’s a popular class that you would add to a div container that holds two or more floating blocks.

If you’ve never heard of clearfix, it might seem confusing, but the concept is simple. Think of a container div that has two divs inside it, both floated left. By default, most browsers would render the two columns as directly touching each other, and the containing div would expand down the page to fit whichever column is longest.

By adding a clearfix class to your container, both columns will fit happily inside the container div, which expands down far enough to fit both elements. This solves many problems in wireframe prototyping, particularly with two-column layouts (i.e. the main content and the sidebar). This method will also work for three- and even four-column layouts, each column would just need to fit in a smaller space.

Displaying CSS: Keeping Styles External

What to do with CSS placement is another important decision. Professional web designers and developers simply suggest keeping an independent .css file, separate from your HTML code.

This way, the structure is in one document and the layout and design is in another. Both are equally important to wireframes, but they perform distinct tasks.

All of your HTML code is strictly structural. You can put links inside paragraphs inside container divs inside other containers, and so forth. Styling controls the size, spacing, margins and lettering of paragraphs and links, and the wireframe defines the width of containers and their placement on the page.

Page elements provide further examples. You would code the div containers for content and sidebars, but you would style and position them using CSS. For a designer, understanding how to separate content and style is key to mastering wireframes.

Implement Dynamic Page-Element Placeholders

Fancy jQuery effects and Ajax-ified web elements seem to be all the rage. Trends grow, and nearly all popular websites feature some dynamic content. It’s important to consider. If they complement the design, why not feature blocks in your wireframe?

Developing an entire back-end system for a dynamic log-in box might not be practical, but noting the JavaScript libraries you will need is a great start. You could also code styles that structure this box and set things in place for later, when you would add color and detail.

These themes can be applied across many interface elements. You could use search suggestions similar to Google’s or leave notes in your code to implement a dynamic news or Twitter-feed box, either of which would make your wireframe dynamic and provide an elegant way to represent a solid-state object in place of dynamic content. During the prototyping phase, this is all you need anyway.

Common Wireframe Development Mistakes

It’s difficult to go wrong when you’re just starting to code the basic structure of a website, but keep certain details in mind.

Remember that a wireframe’s purpose is to present a framework without much detail. It’s useful during the initial stages of planning the page elements; you can delve deep into your website and see the big picture.

Keep things simple and in order. Overlooking this is a common mistake and it will cripple your ability to meet deadlines. A wireframe doesn’t need to be anywhere near perfect; it’s supposed to be a rough outline of the website. Even a strictly HTML and CSS wireframe should consist only of page element outlines.

Avoid detours by focusing on your main goals. Remember why you started the process with a wireframe in the first place!

Wireframes can also solve many problems that beset the design process. Coding a prototype in HTML and CSS is the best way to get a head start on a web project, large or small. It’s a simple, efficient way to give shape to your ideas.

A ton of articles on the web relate to the wireframing process. I’ve covered the coding and development side of things, but to learn more about wireframing, keep reading. The design tips are out there; you just have to find them!

This post was written exclusively for Webdesigner Depot by Jake Rocheleau, a passionate web designer and social media enthusiast. Jake loves reading and writing about the latest digital Internet trends and networking in the design community. Check him out on Twitter @jakerocheleau for more about his work.

What are your experiences with the wireframe process? Do you work in code first or in some other type of software? What do you think are some benefits to prototyping in code first?

Never Ending WordPress Business Bundle – only $14!

But they can also generate a surprising number of superfluous elements.

The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables?

Creating cleaner code means going beyond the framework and thinking about what it really represents.

CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. One of the most popular frameworks today is the 960 Grid System (960.gs), named after its default width. With practice, 960.gs can be a great tool for any web designer. But it also revisits a few old problems.

Before CSS saw widespread use, tables provided all the layout a web designer needed. More complicated designs had tables nested within tables, but used in excess these created a tangled mess of HTML. CSS-based layouts lured designers with the promise of less HTML; they also appealed to semantics enthusiasts. Simply put, CSS encouraged the use of HTML that described what content was about, not what it should look like.

As designers learned to use CSS, div elements replaced tables. But divs can be—and often are—nested, just like tables.

The Spread of Class-itis and Div-itis

Clear, lean code offers many advantages. It’s easy to fix, quick to download and causes fewer problems across different types of browsers. Relevant tags help screen readers, search engines and mobile devices interpret meaning in addition to layout.

Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. But now designers face a glut of classes and divs.

Do CSS frameworks such as 960.gs recreate the underlying problem with tables? If their goal is efficient HTML, can designers and developers use 960.gs without spreading “class-itis” (i.e. excessive use of classes) and “div-itis” (i.e. so many divs that tables start looking good again)? Yes, they can.

To understand how, we need to look at the framework itself.

A Rundown of 960.gs

960.gs provides a set of columns, written in CSS, that facilitate the laying out of web pages. Download the files, add them to your website and it’s ready to go. No special plug-ins or new technology are needed, and you can use it in conjunction with other CSS files.

Columns are contained within blocks called (naturally) “containers.” The defaults are container_12 and container_16, which divide into 12 and 16 columns, respectively. Custom sizes are available.

The diagram above shows the two default containers with 12 and 16 columns. The gray won’t be visible on your final website, of course. The columns merely show where blocks, called “grids,” can be arranged.

A grid is a block of content that can cross more than one column in a container. Grids float left by virtue of being held in .container_x, making them ideal for modular layouts. The width of each block is determined by which grid you apply to it: grid_1 is one column wide, grid_5 is five columns wide, etc.

Above, .container_12 holds three grids. Each grid, in turn, would hold different elements of the page’s content.

Above, .container_16 holds two blocks of 12 and 4 columns, respectively. Like .container_12, this 16-column-wide layout measures 960 pixels wide—but its columns are narrower.

Resizing the grids in which the content’s elements fit is simple: change the grid_x in each div.

The official 960.gs website showcases websites that were built on the framework, and it also provides page templates, links to a custom grid generator and the framework itself. Detailed instructions are included, too, because there’s more to learn. Grid margins and the ability to step into gutters between grids make the system even more flexible.

In spite of these benefits, embedding <div class="grid_x">…</div> in <div class="container_x">…</div> encourages coders to use many class attributes (class-itis) and divs (div-itis).

Solutions

Arguing against tables for layout is easy enough. But using three or more levels of nested divs doesn’t solve the problem—it just replaces one set of tags with another. Frameworks help but don’t always solve the dilemma. With a little forethought, many of these problems can be avoided.

Only Use Classes That You Actually Need

The simplest solution to excessive CSS code is to cut out what isn’t necessary. 960.gs was conceived as a wireframing tool, meant to be replaced when the website goes live. It includes more than 180 class definitions.

If your design is structured on, say, .container_12 and never uses more than .grid_5 and .grid_7, then remove the others from the CSS.

Apply class=”grid_x” to Appropriate Elements: Headings, Images, Links, Paragraphs

The .container_x and .grid_x classes aren’t restricted to div elements. The class attribute can be applied to any element except html, head, meta, param, script, title and style—so, practically anything in the body. If a pair of div tags enclose only one item, then they may be unnecessary.

Applying Grid Code to Non-Divs

Grant Grid Properties to Certain Elements

Being simple CSS, .grid_x has properties that would work with any other class name—or any element. By copying the properties to certain elements, extra classes become unnecessary.

.examples li { (properties of .grid_4) }

<ul class="examples">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

Below, applying the grid to list items creates even columns, with minimal changes to the HTML.

CSS turns the above list into a multi-column group. If you need a normal list with bullet points, just discard the class="examples" attribute. Is this semantic? Certainly—as long as the content merits a list. The CSS merely changes how each bullet point is presented.

Another example:

.photos p { (properties of .grid_10) }
.photos img { (properties of .grid_6) }

<div class="container_16 photos">
  <img src="…" alt="photo" />
  <p>First caption</p>
  <img src="…" alt="photo" />
  <p>Another caption</p>
</div>

This automatically puts captions, enclosed in paragraph tags, adjacent to photos.

When tables are not appropriate, the tabular effect is easy to create with non-tabular HTML.

.datelist { (properties of .container_12) }
.datelist h3 { (properties of .grid_3) }
.datelist p { (properties of .grid_7) }
.datelist strong { (properties of .grid_1) }

<div class="datelist">

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

  <h3>subhead</h3>
  <p>…</p>
  <strong>3 p.m.</strong>
  <strong>Jan 1, 2010</strong>

</div>

The example above is a schedule of events in which each “cell” in the table has a different tag to reflect its unique content, rather than having the catch-all <td> tag. (Ideal? Maybe not. The HTML doesn’t distinguish between groups of content.)

Applying .grid_x properties to other elements requires some planning, but it results in less-cluttered HTML and doesn’t interfere with 960.gs itself.

Use Classes in Parent Items, not Child Items

Div-itis and class-itis aren’t limited to CSS frameworks.

All of the examples in the last section share an interesting trait: only one class declaration in each. Wherever the same class attribute is used several times in a row in the HTML, change the parent instead of the children.

Unnecessary:

.item { (various properties) }

<ul>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
  <li class="item">…</li>
</ul>

Above, all six elements have a class. They’re redundant because the classes are identical. Here’s a better way:

.group-of-items li { (various properties) }

<ul class="group-of-items">
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

The remedy here for class-itis is to assign a single class to the parent element. CSS selectors do the job, applying the styling to every <li> inside the .group-of-items class. This method can be used on any group of elements with a common parent. For example:

<div>
  <h1 class="title">…</h1>
  <h1 class="subhead">…</h1>
  <p class="publication-date">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
</div>

.title { (various properties) }
.subhead { (various properties) }
.publication-date { (various properties) }
.body-text { (various properties) }

Most of the paragraphs above are just simple paragraphs and yet have needless class attributes. We also have two headings, distinguished only by their classes—yet adjoining <h1> elements don’t make for a good content structure. Here is a better solution:

<div class="article">
  <h1>…</h1>
  <h2>…</h2>
  <p class="publication-date">…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</div>

.article h1 { (various properties) }
.article h2 { (various properties) }
.article .publication-date { (various properties) }
.article p { (various properties) }

Now only two classes remain. We’ve kept the .publication-date class to distinguish it from the normal paragraphs below it. Because HTML doesn’t have a “date” tag, this class is necessary to show what the paragraph contains. The new .article class enables you to style that div and the elements in it in the CSS with minimal mark-up. The CSS in both examples has four definitions each, and yet we end up with much cleaner code in the second.

In general, identical elements with a common parent do not need extra attributes. Classes only help when there’s a difference between them. A rule of thumb: use classes only when you need to distinguish between otherwise identical types of content.

Simplify

The purpose of the 960 Grid System, and CSS frameworks in general, is to reduce the effort needed to lay out web pages. The benefit of CSS is that it reduces the amount of HTML necessary to display a page. But as a layout language, CSS isn’t perfect. Frameworks are merely tools that help people achieve solutions, not the solutions themselves. It’s up to designers and developers to combat class-itis and div-itis.

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you say more with less? Share how you streamline code and your workflow in the comments below…

Never Ending WordPress Business Bundle – only $14!