Smashing Magazine is an online magazine for professional Web designers and developers, with a focus on useful techniques, best practices and valuable resources.

In the past few years, we've been working hard to publish only the best in quality industry knowledge, and have decided to finally create a series of workshops to immerse participants in full days of learning and networking with leading experts. Drop by our offices to learn, schmooze and gain master skills!

The workshops will take place at Smashing Media’s Headquarters where tips and industry secrets will be given directly from some of the most well-respected names in today's digital world. Get your workshop tickets now!

As of today we’re pleased to announce Typeplate, a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography, so as we hurtle towards the future, we think there’s still a lot we can learn from five centuries of history.

Typeplate is the result of this exploration of our typographic heritage. We made Typeplate because we weren’t satisfied with existing Web frameworks.

Before 1998, the birth year of CSS Level 2, form elements were already widely implemented in all major browsers. The CSS 2 specification did not address the problem of how form elements should be presented to users.

Because these elements are part of the UI of every Web document, the specification’s authors preferred to leave the visual layout of such elements to the default style sheet of Web browsers.

Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access.

Careful control of visual hierarchy is a key aspect of the design decisions we have to consider. In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice.

It’s time to stop thinking about the Internet and online communication in the context of a device, be it desktop, tablet or mobile. Advances by Google and Apple have heightened consumer expectations, which now require stricter focus from us to create seamless online communications — communications that work everywhere and that get their point across.

We need to embrace a device-agnostic approach to communicating with connected consumers and forget the idea of a "mobile Internet". There is only One Web to experience.

There’s no avoiding those Angry Birds. They are, quite literally, everywhere: toys, snacks, cartoons, plush toys and that wildly addictive game that seemingly everyone has downloaded at some point — 1 billion of us last year alone.

2012 was another landmark year at the Angry Birds aviary, otherwise known as Rovio. The Finnish-based developer not only released a slew of tie-ins — from Green Day to Star Wars — but also went social.

This article is a case study about the evolution of the BEM, a methodology that enables team members to collaborate and communicate ideas using a unified language that consists of simple yet powerful terms: blocks, elements, modifiers.

Learn about the challenges that a big company faces when gradually building an entire ecosystem of services with an ever-growing team of developers.

There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.

Rather than write another article on building a WordPress theme (which would be silly, really, since any theme I build would fall into the “crappy” category), I’ve asked some of the top theme designers and developers to share some tips and techniques to help you improve and refine your theme development and design process.

How do you convince clients to trust you with their valuable and much-loved product? In my experience, the best way to sell work to clients is to apply user-centered design not only to the work we produce, but also to the clients who commission that work.

We have to understand who our clients are, what is important to them and what their goals are. And then we have to deliver work that not only meets the needs of end users, but also satisfies the personalities within the company itself.

↑ Back to top

In this section, we present to you the most valued and appreciated articles from the last few years on Smashing Magazine.

An insightful look into an evolving design process that Drew Clemens has been using with some promising new deliverables and tools. This should provide a starting point for you to freshen up your own process and bring it into the responsive age.

60 high quality icons that provide crisp, attractive visuals for your modern and fashionable-looking interfaces. Available in 64×64px, 48×48px and 32×32px (.EPS, .AI and .PNG).

This article focuses mostly on a few simple macrotypographic techniques—with a dash of micro—and on how to combine them all to build a more harmonious, adaptable and, most importantly, readable Web page.

Brand New Printed Mobile Book If you're looking for a good book on Mobile, this is the one. Our brand new book covers the best mobile practices, techniques and design patterns. Get your copy today!

Get Your Smashing Books! The Smashing books are the best printed books we've produced so far: valuable, cutting-edge, high-quality books that every designer should have on their bookshelf. Get your books now: printed or eBooks!

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Let's meet! Vitaly Friedman, editor-in-chief of Smashing Magazine, will be speaking at UX Munich in Munich, Germany, on the 14th of March 2013. Let's grab a beer!

We are looking for somebody with a good mix of UI and visual design skills. Ideally you have some experience to sports/competition based products, cricket in particular.…

Description:Our new Front End Web Developer will work with other designers and developers from business and IT segments to conceive, research, design and implement…

View more job openings…

Free eBook: "Best of Smashing Magazine" We've got a gift for you! To celebrate our birthday, we've released a free eBook with best articles published here on Smashing Magazine over all these years. In PDF, ePUB and Mobi. Get it now for free!

With a commitment to quality content for the design community. Smashing Media Made in Germany. 2006-2013. About / Impressum

How These Were Built

Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. We thought it would be extremely useful to have access to icons without the need to save many versions or sizes for a single site. By using a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need.

How to Use Them

We've made it super easy for you to get going with these icons! Just follow these simple instructions and you'll be rockin’ in no time.

Download the Font Pack

First things first, get your mouse pointer over here and download the font sets or choose a specific font from the download area in the sidebar. →

Merge in the Styles

It's really easy to hook up the pack's stylesheets to bring your new icon web font to life. When you download the fonts, you'll be able to simply merge the stylesheets and fonts folders straight into Foundation. If you are using Sass, we've got .scss files for you! Here's what the CSS looks like:

Write Your Markup

We've used an <i> for icon elements. You just simply apply the appropriate classes that match the icon you want to use. Here's what the markup looks like:

Using More Than One?

If you want to include more than one font on a site, you can simply chain a class to it that will apply the appropriate font-family. Here's an example:

Style Away!

You can use some awesome CSS techniques to start exploring different styles. We've come up with a few ourselves, check them out:

Looking for the old set?

How These Were Built

Here at ZURB, we’re always trying to think of new ways to innovate on our processes and methods. We thought it would be extremely useful to have access to icons without the need to save many versions or sizes for a single site. By using a font, we’ve given you the ability to have an endless number of sizes, colors and styles for the icons that you need.

How to Use Them

We've made it super easy for you to get going with these icons! Just follow these simple instructions and you'll be rockin’ in no time.

Download the Font Pack

First things first, get your mouse pointer over here and download the font sets or choose a specific font from the download area in the sidebar. →

Merge in the Styles

It's really easy to hook up the pack's stylesheets to bring your new icon web font to life. When you download the fonts, you'll be able to simply merge the stylesheets and fonts folders straight into Foundation. If you are using Sass, we've got .scss files for you! Here's what the CSS looks like:

Write Your Markup

We've used an <i> for icon elements. You just simply apply the appropriate classes that match the icon you want to use. Here's what the markup looks like:

Using More Than One?

If you want to include more than one font on a site, you can simply chain a class to it that will apply the appropriate font-family. Here's an example:

Style Away!

You can use some awesome CSS techniques to start exploring different styles. We've come up with a few ourselves, check them out:

This simple black square icons arrows set includes a wide variety of arrows and arrowheads. Many of them come in sets of 4 or more – up, down, left, right (dotted arrows, solid arrows, mouse pointers, refresh, undo, redo, download … Etc) as well as several hand pointers.

Related Icons

This simple black square icons arrows set includes a wide variety of arrows and arrowheads. Many of them come in sets of 4 or more – up, down, left, right (dotted arrows, solid arrows, mouse pointers, refresh, undo, redo, download … Etc) as well as several hand pointers.