Network Posts
Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs
Editor’s Note: This post is the first in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that were published recently and present them in a nice compact overview. Smashing Daily #2 is now published, too.
Vasilis goes through dozens of RSS feeds and hundreds of tweets so that you don’t have to. Do you find the new series interesting? What would you like to have? And what wouldn’t you like to see? Let us know! We’d love to hear your feedback in the comments!
A couple of words from Vasilis himself:
“Years ago I started collecting links, and once a week I would write an email to my colleagues with a small introduction to every link. Later on I decided that more people than just my colleagues might benefit from this collection, so I decided to publish everything on The Daily Nerd.
“Last November, during the Fronteers conference in Amsterdam, Lea Verou convinced me to start writing in English; up until then, I wrote my comments in Dutch. More and more people started following me, and I think that’s a good thing; I believe more talented people than me should know the things I know. By more talented people, I of course mean you, the reader, so you can understand just how excited I was when Vitaly Friedman asked me if I wanted to start publishing the Daily Nerd on Smashing Magazine. So, here we are, the first episode of the Smashing Daily! I hope you like it!”
Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs
Your local mobile device lab
Jeremy Keith started an open local mobile device lab in Brighton, and he urges you to do the same in your home town.
Web font performance: Weighing @font-face options and alternatives
An important part of design and UX is performance, so when you decide to use a Web font, you should definitely know what the negative impact that choice might have on your users. Here’s an excellent in-depth article about font performance. Yes, you should definitely read it (and the comments, too, because they’re actually quite good).
Miscellany #7,” Shady Characters
Here’s a short post by Keith Houston, with news and thoughts about unusual characters. A pleasure to read, like everything else on his blog.
TypeStacks: Instant font stacks based on your font
Here’s a nice tool that suggests a font stack based on your chosen font. It knows the fonts served by TypeKit, although it doesn’t seem to know too many Google Fonts. Still, a very handy tool.
Let’s Get Physical (Units)
There are a few occasions when we’d love to use physical units (such as cm and in), but unfortunately these units don’t work as expected in CSS. Boris Smus has written an extensive article about these units, how they should work, why we want them and why they work the way they work.
Cutting the Mustard
The BBC is working on a responsive news website, and it is sharing everything it finds out, which is extremely useful. In this article Tom Maslen explains how the BBC manages browser support. An absolute must read for anybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.
H5BP
Here’s an overview of projects related to the HTML5 Boilerplate. Some excellent stuff is in there, but before you start using everything in there, remember the excellent advice of Rachel Andrew: “Stop solving problems you don’t yet have.”
html5shiv and Serving Content From Code Repositories
Never just link to scripts hosted on other domains, because you won’t always get the advantages, such as caching and Gzip. This is explained in detail in this excellent article. Yes, you should definitely read it.
Thinking Async
Loading an external JavaScript file can block the rest of the page from loading, which of course is a major performance and usability problem. The solution is to load scripts asynchronously, and Chris Coyier shows us ways to do that, extensively as always.
Experience Design Is the Future of Mobile Payments
“Holistic” means something like “complete.” So, Perry Chan argues that a “complete” user experience is the future of mobile payments. I actually think that right now, in the short run, whatever the future, the things we have right now are just terrible. Anything would less painful (at least here in the Netherlands). (I also think the future of UX on the Web is bigger fonts — much bigger).
Learn CSS selectors interactively
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.
Allen Tan on highlighting and focus,” Readmill Blog
My father always scribbles annotations in the margins of his paper books. He’s probably been doing this for more than 50 years now, and if somehow we could assemble these annotations, it would be an incredibly interesting and useful database. But as it is, it’s pretty useless. Allen Tan writes about this and more in this article on modern digital reading.
Browser Support
If, for whatever reason, you don’t like any of the tools or websites out there that tell you what browsers support what CSS feature, then this tool might be the one you’re looking for. I still prefer When Can I Use… or Mozilla Developer Network Docs, though.
Stamen
Your app needs a map, but you want something other than boring old Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.
Browser Support? Forget It!
What does “browser support” mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell, it means something else. This is a good read for people (or clients) who struggle with the ever-expanding browser landscape.
The id Attribute Got More classy in HTML5
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time, which generates a string like 1336984564. The problem is that in HTML, an ID had to begin with a letter. Mathias Bynens tells us if this is still the case in HTML5.
Autofill City and State From Zip Code With Ziptastic
Filling out forms is a pain in the butt, especially on devices without a traditional keyboard. You should be asking users for as little information as possible. If there were a way to make things easier, you should probably do it. For instance, you could prefill parts of an address when the user enters their ZIP code. Chris Coyier shows us what a flow like that could look like.
CSS Layout Gets Smarter With calc()
A thing we needed desperately before being able to use box-sizing: border-box was the ability to mix different CSS units. There are still some use cases for this, though, and luckily more and more browsers are supporting the calc() property. Here’s how it works.
Last Click
The Origin of the <blink> Tag
Here’s the true story behind the blink tag by the guy who came up with the idea, Louis J. Montulli II. A nice anecdote on early browser history.
mr. div
Of course, you could use a simple Web technology like canvas or WebGL to generate beautiful animations, but why do it the easy way when you could use the ever-amazing animated GIF? Here’s a great Tumblr blog to follow if you’re looking for some random fantastic 4-D inspiration.
What Do You Think?
Do you like this new series? What would you like to see in it? Please provide some feedback, and let us know what you think!
(al) (vf) (il)
© Smashing Editorial for Smashing Magazine, 2012.
The Smashing Book #3 “Redesign The Web” Is Out!
The new Smashing Book #3 has finally arrived—freshly printed, neatly packed and ready to be shipped to you, our dear reader. We believe this is by far the best book we’ve produced so far. We are very proud and excited, and the initial verdict has been thoroughly positive, yet in the end it’s up to you to decide how valuable and useful they really are. Get your books now!
Why The Theme Of “Redesign”?
In recent years, the Web has changed—a lot. The Web designer’s tools are now advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they face new challenges and are embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web. The new Smashing books will change the way you design websites for the better.
But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? The books explain what you need to know in order to create effective websites today, and what you need to know to be prepared for the future. Well-known experts share practical know-how and introduce a whole new mindset for progressive, future-proof Web design.
Smashing Book #3 (Printed & eBook)
With over 40 people having worked on the project, a lot of thorough editing and consideration needed to be done to fine-tune each chapter’s content and order to make the most sense. In the end, 11 of the most outstanding articles made it into the Smashing Book #3, covering topics ranging from the business side of design to mobile approaches and responsive design.
The Smashing Book #3 covers innovative coding, design and UX techniques and discusses the peculiarities of the mobile context and emotional design. It also presents practical HTML5, CSS3 and JavaScript techniques, as well as a bulletproof workflow for responsive Web design. The book challenges you to think differently about your work, your code and your designs.
Table of Contents
| AUTHOR | CHAPTER | DETAILS |
| Elliot Jay Stocks | Preface | |
|
|
||
| Paul Boag | The Business Side of Redesign | |
A redesign is the best thing that a Web designer can experience. Yet before leaping head on into a project, we must consider the business behind the redesign. By its nature, a redesign has the potential to make a website successful, but it also has the power to destroy a perfectly good idea. Important considerations to keep in mind before engaging in a redesign project include common dangers, required research, the working process with the client and testing. Paul Boag leads you through this process step by step.
Chapter keywords: business model, redesign timing, scope of redesign, redesign considerations, realignment, project pitfalls. |
||
| Rachel Andrew | Selecting a Platform for Redesign | |
Once you have understood the business side of the redesign project, the next step is to choose the right platform. Understanding all of the requirements of a project will save you valuable time in aligning the new functionality with the technological circumstances. Take stock of existing structures such as the CMS, e-commerce system and payment gateway. Beware of the project constraints, including the budget and wishes of the client. Only then will you be able to concentrate fully on the project, without encountering unpleasant surprises ahead.
Chapter keywords: technical requirements, CMS, eCommerce, payment gateway, refactoring, platform choice, redesign project constraints. |
||
| Ben Schwarz | Jumping Into HTML5 | |
Ben Schwarz takes away the fear that many Web developers suffer when confronted with a new technology—by encouraging experimentation. The chapter guides you through the new HTML5 elements and discusses the possibilities that come with the adaptation to these elements. This is a practical, compact guide to HTML5, with everything you need to know today in order to create flexible and maintainable websites for the future.
Chapter keywords: HTML5, semantics, semantic outlining, ARIA, client-side storage. |
||
| Lea Verou, David Storey | Restyle, Recode, Reimagine With CSS3 | |
![]() Some CSS workarounds that have hung around from earlier days prevent us from becoming better, more efficient designers. Learn how to recode CSS to reduce the number of images, HTTP requests, presentational JavaScript and wrapper divs on the page, while making the style more flexible and maintainable. Learn about the rem unit, Flexible Box Layout, source-order independence with flex order, multiple backgrounds and gradients, background clipping, border images, transforms, transitions, box sizing and new CSS3 selectors. Restyle, recode, reimagine: because CSS3 is here to stay!
Chapter keywords: CSS3, techniques, Flexbox, multiple backgrounds and gradients, transforms, transitions, box-sizing, selectors, layout. |
||
| Christian Heilmann | JavaScript Rediscovered | |
Even though jQuery is written in JavaScript, it is not the same; nor is it native to browsers. The large jQuery library abstracts away a lot of issues that Web developers face, yet sometimes it’s used without a real purpose. Christian Heilmann takes us back to its origins and shows us how to implement simple JavaScript solutions without resorting to jQuery, achieving the same result in a slimmer and less process-intensive way.
Chapter keywords: JavaScript, jQuery, CSS selectors, classlist, localStorage, tutorials. | ||
| Dmitry Fadeyev | Techniques for Building Better User Experiences | |
User experience means good design, and the central aim of design is not to decorate, but to solve problems. Whether that means getting more sign-ups, inviting users to post more content or making the interface easier and faster to use, this is ultimately the sort of design that delivers a great user experience. This chapter features powerful UX techniques that you can easily apply to your products and websites. Make sure users stay on your website for the right reasons, and get an edge over the competition by improving user-targeted processes. Also, explore experimental approaches and avoid some misleading design techniques.
Chapter keywords: UX design, forms, good defaults, customer service, copywriting, storytelling, experimental techniques, design pitfalls. |
||
| Marc Edwards | Designing for The Future, Using Photoshop | |
Because good design and user experience are almost mandatory for success today, the lines between desktop software, mobile software and the Web are increasingly blurry. We have to continually change our tools and techniques to meet new requirements. Marc Edwards addresses some of the challenges that Web designers face today and will in the future when using Photoshop. Realism, scale, screen sizes, resolutions, formats, techniques—this chapter touches on all of it. There is no reason to surrender to scaleability and liquid image requirements when using Photoshop!
Chapter keywords: Photoshop, screen sizes, pixel density, scale, gradients, shapes, color profile, mobile, Retina display. |
||
| Aaron Walter | Redesigning With Personality | |
Any design that does not effectively establish a connection with its audience has missed its goal. Getting to know your user is just as important as knowing yourself and the personality behind the brand; this will set you apart from competitors. This chapter describes how to develop your own design persona and define the key characteristics to guide your project’s path. New technologies and techniques are not what build connections with users, but rather the empathy evoked by the personality behind them. Aaron Walter explains how to bring out the personality at the heart of your work.
Chapter keywords: personality, brand sympathy, engagement methods, design persona, voice and tone. |
||
| Aral Balkan | Mobile Considerations in UX Design: Web or Native? | |
The native vs. Web debate is meaningless and counterproductive. All products nowadays have high demands for UX design. Web designers turn into UX designers by gaining specialized knowledge of the Web and by mastering auxiliary frameworks and their components. Not only do the aesthetics of an interaction object count, but also how the object behaves upon contact. Designing documents and designing applications requires knowledge of basic responsive design principles and progressive enhancement. This chapter helps you understand your medium, explains what exactly it means for an application to be “native,” and goes over how to choose the right tools and technologies for the job.
Chapter keywords: mobile, user experience, native applications, native as culture, interaction design principles, responsive Web design. |
||
| Stephen Hay | Workflow Redesigned: A Future-Friendly Approach | |
Web design changes quickly. In multiplatform design, where websites and apps are used on many and varied devices, we are confronted with multiple destinations. How do you go about integrating as many devices as possible? Is targeting as many different platforms as possible really important? In this chapter, Stephen Hay suggest a new design workflow for responsive Web design. A new way of thinking leads to a new way of design—the sooner you get the hang of it, the sooner you will be ready to discover what works best for your projects.
Chapter keywords: responsive Web design, device-agnostic approach, content inventory, future-friendly approach, breakpoint graphing, designing in the browser. |
||
| Andy Clarke | Becoming Fabulously Flexible | |
There are significant upsides to responsive Web design for designers, especially in workflows that embrace flexibility. Responsive Web design still asks more questions than it answers, and it challenges the working relationships and interactions between everyone involved in every process. Andy Clarke gives you some insight into the techniques that helped him become fabulously flexible when developing responsive designs. Learn his approach to designing atoms and elements of a design first and see if it works for you. It might enable you to create many facets of the same experience within a single workflow.
Chapter keywords: Responsive Web design, design challenges, style tiles, design atmosphere, flexibility, designing components first. |
||
Well-respected professionals have poured their heart and expertise into these contributions. To ensure quality, every chapter of this book has been thoroughly reviewed by experts, including Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Josh Clark, Anders M. Andersen, Bryan Rieger, Joshua Porter, Ryan Carson and Elliot Jay Stocks.
Technical Details
- 340 pages, 16.5 × 24.0 cm (6.5 × 9.5 inches).
- Download a free sample (.zip, in PDF, EPUB and Kindle)
- Quality flexibound cover, with stitched binding and a ribbon page marker.
- Delivery from Berlin, Germany, only via air mail (3 to 15 working days).
- $5 worldwide shipping (check worldwide delivery times).
- Also available as an eBook (PDF, EPUB, Kindle).
- Get your Smashing Book #3 today!

Our new books: the Smashing Book 3 and Smashing Book 3⅓—The Extension. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.
Smashing Book #3⅓ — The Extension
With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platform. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy—which is an important process, often underestimated, and dependent on many factors.
Smashing Book 3⅓, otherwise known as “The Extension,” presents practical applications of storytelling to Web design, reviews emerging navigation design patterns and helps you understand how to meaningfully employ content strategy on your websites. A case study of Smashing Magazine’s responsive redesign illustrates how this approach could look like in practice.
Table of Contents
| AUTHOR | CHAPTER | DETAILS |
| Iris Lješnjanin | Preface | |
|
|
||
| Denise Jacobs | The Missing Element of Redesign: Story | |
|
Chapter keywords: storytelling, invisible design, literature, narrative devices. |
||
| Christian Holst and Jamie Appleseed | Rethinking Navigation: Techniques and Design Patterns | |
|
Chapter keywords: navigation, design patterns, filtering, mega menus, checklist. |
||
| Colleen Jones | Rework Your Content So It Works for You | |
|
Chapter keywords: content strategy, content inventory, audit, context, maintenance, results assessment. |
||
| Vitaly Friedman | Responsive Smashing Redesign: A Case Study | |
|
Chapter keywords: redesign trap, responsive Web design, advertising constraints, design persona, typography-out approach, designing in the browser, redesign manifesto. |
||
Technical Details
- 160 pages, 14.0 × 21.0 cm (5.5 × 8.3 inches).
- Quality flexibound cover, with stitched binding and a ribbon page marker.
- Delivery from Berlin, Germany, only via air mail (3 to 15 working days).
- $5 worldwide shipping. The book will be shipped separately, starting from 15 May 2012. (Check worldwide delivery times.)
- Also available as an eBook (PDF, EPUB, Kindle).
- Get your Smashing Book #3⅓ alone for $14.95 or as a part of a bundle.
Cover Design by Veerle Pieters
The Smashing Book series has gotten a rather eye-catching facelift. The well-respected Belgian artist Veerle Pieters has taken on the significant task of putting together an innovative, bold cover design. And the result is bold indeed. Veerle’s styling of Smashing Magazine’s “S” reflects the many aspects that make up a Web designer’s workflow today.

An excerpt of Veerle’s final cover design for the Smashing Book #3.

Veerle’s final sketches for the cover of the Smashing Book #3.
Exclusive Artwork by Kate McLelland
If you have the Smashing Book 2, you’ll know that animals play a distinct role—forming almost a tradition for the series. This time, we have asked the talented young illustrator Kate McLelland to illustrate the introductory pages for all of the chapters. Kate has been impressively creative in her designs; the theme of redesign has obviously shaped the tone of her artwork. Each chapter begins with an elaborate drop cap.

A detail of a chapter illustration, designed by Kate McLelland.
Each illustration employs a different metaphor that relates to the accompanying chapter. See what they all are once you get your hands on the book. Appropriately enough, when strung together, the drop caps spell out “Redesign the Web.” The composite style of the illustrations points to how so many components have to come together for a successful redesign.
Reviews and Testimonials
We’re looking forward to honest, objective reviews of the brand new Smashing Books. Please share your photos, opinions and feedback on Twitter using the hashtag #smbook3. The first feedback has been throughout positive and, in fact, we’ve discovered the first reviews of the books as well:
“The entire book is wonderfully balanced between theoretical and practical, with each author contributing a strong point of view on their area of expertise as well as a thorough explanation of how to execute it in a way that is useful. [...] curating the most cutting edge perspectives on the Web and offering the tools and information that the rest of us need to build upon them. If you’re into that, check out this book.”
— Christopher Butler, Book Review: Smashing Book #3
“This book is worth buying and reading for yourself. It really covers many aspects of modern website production in eleven in-depth chapters. There will likely be a few you don’t care for—we all have our own tastes—but I’d be surprised if any genuinely leave you disappointed given the chance. I was quite prepared to write something less positive, the first Smashing Book didn’t excite me, but this one very much did.”
— David Bushell, Smashing Book #3
“The Smashing Book #3 is an invaluable resource for Web designers, regardless of skill level or experience and we highly recommend it.”
— Cameron Chapman, Review: Smashing Book #3
“[...] not only is this a good book and an enjoyable read, but it is an important book that really can change the way we design, or redesign, for the Web.”
— Jeremy Girard, Reviewing The Smashing Book #3
Please feel free to submit a link to your review in the comments to the post and we’ll add your testimonial into this article. Feel free to provide criticism or praise: we’d love to hear your honest opinions!

A quick peek into the Smashing Book #3. Yes, we do like animated GIFs.
The Smashing Anthology
If you haven’t purchased Smashing Books #1 and #2 yet, we’ve prepared a couple of complete bundles for your convenience. Even though the first two books were published a couple of years ago, they remain relevant and valuable, because they were designed by our editorial team to be timeless. Save 20% off the price and get yourself the Smashing Anthology, a collection of all of our books as of today:
- complete Printed Smashing Books Bundle with all printed books for $84.90 (i.e. 20% off the price) or
- complete Digital Smashing Books Bundle with the digital versions of the books for $44.90 (i.e. 15% off the price) .
Frequently Asked Questions (FAQ)
We want to make it as easy as possible for everyone to buy the new Smashing Book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the Smashing Books #3 and #3⅓:
| What’s the difference between Smashing Books 1, 2 and 3? | |
|
The first two books covered best practices in modern Web design. Although they had similarities, the two books covered different areas of Web design. Smashing Book #3 has a particular theme: redesign. It covers the redesign process per se, as well as cutting-edge approaches to Web design on a broader scale. It focuses on the most recent developments and current demands of today’s rapidly changing environment. Smashing Book #3 gives professional advice on the what, when and how of responsive and bulletproof Web design, according to the requirements of today’s Web. |
|
| What’s this extra Smashing Book #3⅓? | |
|
Our authors have turned out to be much more productive than we anticipated, coming up with more exciting chapters than one book could handle. Adding these chapters to the book would have increased the size and weight—and, hence, shipping cost—substantially. Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present the Smashing Book #3⅓: The Extension, four extra chapters of quick quality reading. Buy it as part of a bundle and save! |
|
| Will the book be available in other languages? | |
|
Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath. |
|
| Are the Smashing Books #3 and #3⅓ available as eBooks? | |
|
Yes, the books are available in PDF, EPUB and Mobipocket formats, and you can order an eBook bundle right now. |
|
| What are the costs for shipping to my country? | |
|
The shipping cost for one book or a bundle is $5—wherever you are in the world. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay! |
|
| How long will delivery take to my country? | |
|
All books are shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview. |
|
| What payment methods are accepted? | |
|
We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. |
|
| Is there a money-back guarantee? | |
|
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it. |
|
| I have a question that is not covered here. | |
|
Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can! |
|
Please Spread The Word!
These new books took seven months of production time, from brainstorming to delivery; 43 people worked on the content, design, layout, editing and proofreading of the book; 623 animals are hidden in various places in the Smashing Book #3; and the production costs for initial circulation, excluding marketing costs, required a six-figure budget. That’s what it took us to ensure that our Berlin warehouses are stocked with these new valuable books, waiting to be shipped right away as soon as you place your order.
















The authors of the new Smashing books. We’ve donated over $5000 on behalf of the book contributors to Doctors Without Borders.
Here at Smashing Magazine, we do our best to support and enrich the design community. Yet we also rely heavily on community opinion—in fact, the magazine would not be what it is today without the constant feedback of the community. That’s where you come in: we now pass the book onto you. Use it, enjoy it, test it, read it, rate it, evaluate it, criticize it or praise it—and share your honest opinion of it with the rest of the world.
Feel free to take as many pictures of it as you like and to use the Smashing Book #3 media kit (.zip, 9 Mb), which is full of interesting facts, figures and images related to the book. Be one of the first to give the community a critical view of the book; stir the discussion, and encourage feedback on your website.
Your criticism helps us further improve future projects, shapes the selection of topics and enables us to stay close to the pulse of the community. We sincerely appreciate your support.
© Smashing Editorial for Smashing Magazine, 2012.
Desktop Wallpaper Calendar: May 2012
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.
We continue to nourish you with a monthly spoon of inspiration. This post features free desktop wallpapers created by artists across the globe for May 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
Please note that:
- All images can be clicked on and lead to the preview of the wallpaper,
- You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
You May Rain
Designed by Ioana Bitin (aka Yoot) from Romania.
- preview
- with calendar: 1280×800, 1280×1024, 1600×1200, 1680×1050, 1920×1200, 2560×1440
- without calendar: 1280×800, 1280×1024, 1600×1200, 1680×1050, 1920×1200, 2560×1440
Flight Of The Owl
Designed by Katerina Bobkova from Ukraine.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
Colorful
Designed by Lotum from Germany.
- preview
- with calendar: 320×480, 640×960, 1024×1024, 1280×800, 1280×1024, 1440×900, 1920×1200
- without calendar: 320×480, 640×960, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
May Charts
"Charts of May weeks. Designed for working environment that helps classify desktop files into categories." Designed by Sherif Saleh from France.
- preview
- with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1360×768, 1366×768, 1440×900, 1440×1050, 1600×1200, 1680×1050, 1680×1200, 1920×1080
Yatta!
Designed by Alex Dovksha from Belarus.
- preview
- with calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
Food Of Love
"Love needs food too! And what can be better than music! The two most prescious gifts of life, love and music is expressed beautifullyin this quote by William Shakespeare." Designed by Adrija Mukhopadhyay from India.
- preview
- with calendar: 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050
- without calendar: 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050
Sunny Hours
Designed by Christine Bradway from USA.
- preview
- with calendar: 320×480, 800×600, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 320×480, 800×600, 1024×768, 1024×1024, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 2560×1440
Japan
"Japan is the land of the rising sun." Designed by Cheloveche.ru from Russia.
- preview
- with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
Doodle Lizard
"Negative space lizard on a bed of doodles." Designed by James N Osborne from United Kingdom.
- preview
- with calendar: 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1440
- without calendar: 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200, 2560×1440
Spring Dots
Designed by Pietje Precies from the Netherlands.
- preview
- with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
Limundograd
"Limundograd (Limundocity) is an illustration for an e-commerce auction site called limundo.com, designed to show users what the site consists of, and much more!" Designed by Mrki from Serbia.
- preview
- with calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 2560×1440
- without calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 2560×1440
Wishing On A Star
"Keep an eye out for those shooting stars during the clear summer nights. If you see one, make a wish and maybe it’ll come true…" Designed by Eddie Wong from Ireland.
- preview
- with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
- without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440, 2560×1440
Be Like Him
"Inspired by a verse in the Bible." Designed by Lex Valishvili from Russia/USA.
- preview
- with calendar: 800×600, 1280×800, 1440×900, 1600×1200, 1920×1080
- without calendar: 800×600, 1280×800, 1440×900, 1600×1200, 1920×1080
Thingvellir
"The photo was taken at Thingvellir national park, Iceland." Designed by Naioo from Germany.
- preview
- with calendar: 1280×720, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 1280×720, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
Justin Bbq
"It’s spring time, and we at JustLanded.com are celebrating with a BBQ!" Designed by Adelacreative from UK.
- preview
- with calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440
- without calendar: 320×480, 640×480, 800×480, 800×600, 1024×768, 1024×1024, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1366×768, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200, 1920×1080, 1920×1200, 1920×1440
Red Panda
Designed by Ingrid Cruz from USA.
Mangolicious May
"In India, May is mostly known for summer holidays and the season of Mango- the best amongst all the fruits. Its the best in terms of flavour, richness and sweetness.As the scorching heat increases in this month, its the delicious mango which keeps us going and makes us look forward to summers. This wallpaper is dedicated to the King of Fruits-Mango." Designed by Charuta Puranik from India.
- preview
- with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200
- without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200
Grunge Fairy
"May’s fairy is grungy and dark." Designed by Bobbie Killip from UK.
- preview
- with calendar: 1024×1024, 1280×1024, 1280×796, 1440×900, 1920×1080, 1920×1200
- without calendar: 1024×1024, 1280×1024, 1280×796, 1440×900, 1920×1080, 1920×1200
Wonderful Island
"Wonderful Island is the annual meeting point for a unique community of various fairy creatures from different parts of the world. They come here every single year on the exact same day – May, 1 to talk with the old friends and have fun. The merriest guys are, certainly, Furst, the middle-aged Yeti from the North of Iceland and his best friend Charles Dooon, aka DJ Chuck-Chuck, who can’t imagine their lives without music." Designed by Maria S. from USA.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1680×1050, 1920×1080, 1920×1200
Solitude Is Bliss
Designed by Mohammed Aaqib Ansari from India.
- preview
- with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
Tentacles
Designed by Julie Lapointe from Canada.
- preview
- with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
Come What May
Designed by Melissa Infantino from USA.
- preview
- with calendar: 320×480, 1024×768, 1240×1240, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 320×480, 1024×768, 1240×1240, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
Join In Next Month!
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
A big thank you to all designers for their participation. Join in next month!
What’s Your Favourite?
What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.
Stay creative and keep on smashing!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2012.
Manage Events Like A Pro With WordPress
If you’ve ever tried working with, coding for or just thinking about anything to do with events, you know they are a total nightmare in every possible way. Repeating events, schedules, multiple days, multiple tracks, multiple prices, multiple speakers, multiple organizations, multiple payment options — the list goes on on for quite some time.

Today we’ll show you how to make event management an easy — nay, enjoyable — task by making WordPress do the grunt work for you. We’ll be looking at out-of-the-box WordPress features, plugins and themes and a DIY approach to managing events. Please do let us know if you have more or better ideas.
In A Nutshell
I know some people don’t like to read lengthy reviews, so here are my recommendations in the shortest possible form. We’ll look at all of these recommendations in depth, so read on if you want to know more about them.
If money is not an issue or you just want the best possible combination of products, I recommend using Event Espresso to manage the events and Eventure from ThemeForest to display them. This will set you back at least $125 (more if you need add-ons for Event Espresso), but it will give you one of the most powerful event-management setups you can get without touching any code.
If you don’t need a payment gateway, multiple-day event-specific options or other advanced features or you’re on a budget, you could use Events Manager Free Version, Event Espresso Lite or Events Made Easy. These are all free and easy to use, providing roughly the same functionality. You might also want to purchase a theme to display your events nicely, which will set you back at least $35, but this is in no way required.
Event Management Features
Before we get to specific tools, let’s look at some of the features we get from an event-management system. You might not need all of these, but looking at them is useful when planning your system.
Events
Obviously, our event-management plugin should at least support events. The ability to create events that are separate from your regular posts is a powerful feature, allowing you to add events to your website’s existing content.
Event Taxonomies
Regular posts can be ordered into taxonomies — categories and tags. Having separate taxonomies for events (i.e. event categories and event tags) is useful for separating them from your regular content. If you organize Web development conferences, you might want to differentiate between design- and coding-related ones, or you might want to single out JavaScript- and Ruby-related ones. Your regular content might have nothing to do with Web development, so having separate taxonomies would come in handy.
Registrations
Allowing people to register for events right there on your website can greatly boost attendance. The path a user has to take from discovering your event to participating becomes that much shorter, which translates into a better user experience and more registrants.
You will also need to be able to manage registrations through the back end. Registrants should be listed somewhere, with easy access to their details.
Payment Gateways
The ability to accept payments online breaks down another barrier between your events and potential attendees. A feature that allows you to accept the widest variety of payment methods would be ideal.
Speaker Management
As a software programmer, I don’t like when I enter data somewhere and it’s not stored in an easily reusable way. The ability to manage speakers across your events is a big plus because it opens up access to powerful features later on. This feature should include the ability to add biographies and photos of speakers to the website.
Venue Management
As with speaker management, having all your locations stored properly will make them ease to reuse in future. If you need to schedule another event at the same venue, there’s no need to reenter the details; just select it from a menu, and off you go.
Participating Organizations
Another nice feature is being able to attach companies to events. Companies will often host events, and giving them some recognition for it is a nice thing to do in return.
Sponsors
Almost all major events have sponsors that contribute in some way (usually with money). They often require you to add their logo in various places. Being able to add the names, descriptions and logos of sponsors for an event would be handy.
Notification Management
There are two kinds of notifications we might want to control. On-site notifications are shown to users once they perform specific actions. When a user successfully pays for a ticket or encounters an error while registering, an on-site notification should pop up to let them know what’s going on. Being able to tailor the language of these to your style would be a nice feature.
The second type of notification are email messages to participants. Confirmations, reminders and so on would all be customized to your style.
Form Management
Controlling the information to gather from registrants is key to finding sponsors and making the lives of users easier. Being able to control this on an event-by-event basis would be best. Some events require less information from users, others more.
Coupon Management
Many events offer coupons for promotional purposes. If you want to engage users beyond your website, then giving coupons for third parties to distribute is a great tactic. Creating multiple coupons for various events would enable you to manage a full-blown coupon campaign.
Price Management
Another way to persuade visitors to register is to offer different price options, such as early-bird pricing, student discounts, last-minute offers and so on.
Multiple Day Events
Many events have so much going on that splitting them into multiple days is the only way to go. Being able to control this from the administration section would be a great plus, especially when coupled with price-management options (such as registration for one day only).
Repeating Events
If you are organizing a repeating event, you wouldn’t want to have to create it from scratch a hundred times a year. Scheduling and repeating tools would help minimize your effort.
Powerful Global and Miscellaneous Settings
A great event-management system has to have great global and miscellaneous settings. Settings for creating an events listing page, changing currencies, setting time zones and so on are all part of a complete system.
Complete Solutions
All of the WordPress plugins in this section are paid plugins, but if you’re running a serious operation, then the first two listed here are well worth the money.
The three best plugins around are Events Planner, Events Manager and Event Espresso. Event Espresso is by far the best of the lot, but all three are versatile and under constant development.
Event Espresso

Event Espresso is the cream of the crop. It has built-in support for almost all of the features mentioned above (except perhaps sponsor management) — and much more! It enables you to set up multiple forms of payment, multiple event dates and times, multiple prices, discounts, promotions (coupons), locations (even virtual ones) and emails. It also creates posts for events automatically and does so much more!
Event Espresso also has a free “Lite” version, which gives you a taste of the solution. The lite version is actually pretty robust and can be used for simple situations. It includes event and attendee management, automated emails, customizable registration and PayPal Standard Payment.
You can easily tailor the design of event listings to your current theme. If you are willing to dish out the money for this plugin, I recommend getting a premium website theme as well and modifying that as needed.
Event Espresso is not cheap, but its feature set is top notch, so the price is justified. The basic version costs $89.95, which contains all of the features that 95% of people will need. From there, you can download free and paid add-ons to the basic system. Some free add-ons are for payment gateways, social media and calendars.
MailChimp integration, recurring events management, developer customization options, WordPress integration, Groupon integration, multiple event registration and shopping cart integration (coming soon) is available at between $25 and $35 a pop. Most of these are well worth their money, although getting the WordPress members integration for free would have been nice, because that’s not a huge programming leap.
A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft
Events Planner

Events Planner is another well-rounded system. It doesn’t have all of the features of Event Espresso, but it does give you a lot to work with. Event categories, tags, instructors, locations, companies, notifications, payments, registrations and more can be managed with ease.
The main difference between Events Planner and Event Espresso is that the former’s UI is less polished, and some features found in both are not as well implemented in it. Despite this, Events Planner remains extremely flexible and robust. If you don’t want to part with almost a hundred bucks, you’ll be able to grab Events Planner for $39, plus another $24 if you need plugins that supports advanced date- and time-specific functions.
Events Planner does not have a lite version, but you can create a custom installation yourself and test drive the pro version. This is a little unusual for plugins, but it does mean you can fully test it before purchasing.
A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft
Events Manager

Events Manager is very similar to Events Planner in many ways. Some features have a better UI in Events Planner, while others are better in Events Manager. Were the price not so different, it would be a matter of preference, but because Events Manager costs a lot more than Events Planner, I would not recommend this solution.
Events Manager will set you back $75, and the price buys you only one year’s worth of upgrades. There are no plugins or add-ons here (which could be a good thing), but the higher price and losing access to updates after a year seems a bit cheeky at this price point.
Events Manager has a free version that gives you a lot of functionality. It supports event and booking management, recurring events, locations and more.
A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft
Final Verdict
Of the three, Event Espresso is the clear winner. It supports every feature the other two do and a lot more. It also has handy (albeit slightly expensive) plugins, with more to come. Even at $89, if you run a successful business (or plan to), it isn’t a high price to pay for the features you get.
If you can’t spend that much on a plugin, then Events Planner is a very capable alternative that will not leave you wanting. When all is said and done, it does cost less than half of Event Espresso and still has 80% of its features. I would still heartily recommend it.
If you don’t need payment options, however, and you need a free solution, the free version of this plugin might be your best option. Have a look at the partial solutions below.
Partial Solutions
Quite a few solutions do not offer advanced features such as payment gateways and coupon management but do allow some flexibility and customizations for events.
The best options for a simpler approach are All-in-One Event Calendar, Event Organiser and Events Made Easy, as well as the free versions of Event Espresso and Events Manager. In a showdown, it would be a close call between Event Espresso and Events Manager.
All-in-One Event Calendar creates a new post type for your events, allowing you to keep blog posts and events side by side. It supports event categories, tags and a few other options. Because it allows you to create a calendar page, it’s a great solution if you need something simple and workable in minutes.
Event Organiser has all of the same functions plus a lot more! It has permission settings, permalink settings, importing and exporting options and even venue support. In addition, it has an admin calendar view that gives you a useful overview of your events.
Events Made Easy has all of the features of All-In-One Event Calendar (except event tags), and it supports registrations and locations. If you absolutely need to support on-site registration, this would be the easiest to use. The UI is the least polished, though, so it won’t look as pretty in the administration section, but the features are solid.
Final Verdict
Despite the great features offered by these plugins, I would stick with Event Espresso Lite or the free version of Events Manager. Apart from offering more functionality, they will also ease your transition if you need the full-blown system later on.
Using WordPress Out Of The Box
If you don’t need to manage data for each event, WordPress’s core functionality will do just fine. Here are a few ideas to get you started:
- Use posts to store events.
- If you want to be able to have regular posts as well, distinguish them using categories.
- Create top-level categories for distinguishing organizations, sponsors and venues.
- Use your website’s registration functionality to manage past attendees, or use it as a master attendee list if separate registration is not required for your events.
- Create pages for important information such as payment options.
- Use PayPal buttons in event posts to let people register and pay directly through PayPal.
Many of these features are far from optimal for event-intensive websites, but if you just need something simple that you can set up in 10 minutes, give it a go.
If you do choose this option, pay close attention to consistency. If your goal is expansion, you are guaranteed to want a better system later on, and consistency will ensure that you can make the switch without a hiccup.
Comparing All Of The Options
There is a lot to learn and a lot of options if you want to get started with event management. To make your life easier, here is a table with all of the features discussed, along with the solutions that support them. Click on the image to go to the large version (it’s a bit small to look at here).
Event-Friendly Themes
While the plugins do a nice job of helping you manage events, they are not designed to make your website pretty, which is equally important. No matter which route you take, you will need to do some work to make things fit perfectly, but some premium themes out there will shorten this process.
Eventure
![]()
$35 | Large screenshot | Live preview
Diarise
![]()
$70 | Large screenshot | Live preview
Events (from Elegant Themes)
![]()
Large screenshot | Live preview
Eventure
![]()
Large screenshot | Live preview
Conclusion
Whichever solution you choose, you will have to put in a few hours of work to make your website work well and look good. I usually advise using free software whenever possible, but this happens to be one of those areas where I would go with a complete solution. Getting it right from the get-go will save you a lot of headaches in the long run.
If you can afford to spend over $100 on managing events, go for Event Espresso, coupled with one of the premium themes mentioned above.
If you want to spend as little as possible, then try Events Manager Free Version, Event Espresso Lite or Events Made Easy. If you don’t plan on expanding a lot or you need multiple price points, go with Events Made Easy because it is completely free, with no paid version, so supporting the developer by using his product would be a nice gesture.
If you do plan on expanding, go with Event Espresso Lite because the pro version will have everything you need when you’re ready to buy it and you won’t have any migration or data problems.
(al)
© Smashing Editorial for Smashing Magazine, 2012.
Keep Your Analytics Data Safe And Clean
Whoever works with analytics on a day-to-to-day basis knows how important it is to have a continuity with the data. Any slip might be fatal: data can disappear, trends misunderstood and jobs lost. Losing data can have long-lasting consequences, as very often it isn’t possible to reprocess the data—so what is lost cannot be recovered.
For this reason, it is essential to have a place where you can test changes to your settings and configurations. It is also important to keep track of changes in a way that they can be used to provide a context for analysts, so that when you are looking at incomprehensible spikes in past data, you can check whether any changes were made to the data collection methods (or if an offline campaign was in place during the period analyzed). Having such a process in place will help to keep data safe from loss and clean from inaccuracies.
As Neil Mason describes on his presentation about Data Discovery: “all data is dirty and needs to be cleaned and transformed, this is the heavy lifting stage.” Below I describe four techniques that will help analysts and marketers to ease the burden of inaccurate data usage Google Analytics. I provide examples on how this can affect the data, and share tips on ways to make them happen.
Google Analytics Accounts And Profiles
The Google Analytics code site offers an in depth explanation of the hierarchy used by the tool to manage report access and data collection. There are three important levels that we need to be aware of:
- Account: An account is the mother of all Web properties and profiles, and has a unique account ID that can be used to track multiple websites.
- Web Property: The web property has a unique ID, which is a combination of the account ID and additional digits. Since different Web properties have different IDs, their data cannot be merged.
- Profile: the gateway to the website reports. It determines which data from your website appears in the reports. Filters can be applied to profiles in order to segment the data; for example, it is possible to create a profile only with visitors from USA, only from new visitors, etc. Since profiles use the same account and Web property IDs, data for multiple profiles can also be seen in aggregate.
Below is part of the scheme provided on the code from the website mentioned above. The image well represents the possibilities of data collection and management.

Diagram showing the possible Analytics account configurations.
Important to note that Google Analytics still misses the mark on an important feature related to account configuration: report level access. This means that the lowest access that can be given to a user is a profile, so it is not possible to provide access to reports. As I wrote in an article about Google Analytics Perception & Reality:
As of today, Google provides just two options when it comes to providing access: Administrator (who can access anything in the account) and Viewer (who can access specific profiles). This division is far from good. In any mid-sized company, the data needs to be more modular (i.e. enable showing different reports to different people).
Creating an Analytics Staging Profile
Let’s suppose you read in a random blog that you should create a filter to lowercase URIs for all of your profiles (if you don’t have one yet, check point five on this implementation checklist). And suppose you have no idea how this can impact your data.
The best way to learn how filters affect your Google Analytics data would be to have two profiles with the exact same settings (the real profile, and the test profile) and apply a new filter only to the test profile. Once it is applied, you can check the data and compare the number to learn if anything went wrong. Here is an article from the Google Analytics Help Center on how to create profiles.
Creating an Analytics Staging Account
If you work in the Web Analytics field long enough, you have certainly experienced data loss as a consequence of bad implementations. It happens, and the best we can do is to have a Web Analytics Process in place that will help us avoid it. Not long ago, I implemented the _trackPageLoadTime() method (now deprecated) for a website, and as a result from a lack of attention, I lost six days worth of data (yes, I didn’t log in quite enough to Analytics during this week!) See graph below:

Example of how a bad Google Analytics implementation can affect data collection.
The story above illustrates the fact that code changes should be dealt with carefully. Since most websites do have a staging site where changes are tested before going live, I suggest having a different tracking code used for those environments to test code changes on the Google Analytics script (i.e. a new Google Analytics account). This technique is very similar to the one proposed above to check filter changes—it only goes one step further.
Tracking Profile Changes & Configurations
When it comes to both external and internal changes, context is one of the most important factors for analyzing data. For this reason, it is crucial to have a log of changes that affect your data, as well as changes in marketing campaigns and other company efforts. Below I present two ways to keep this data in an accurate and accessible way.
Keeping Track of Internal Changes
Changes are constantly made to Google Analytics profiles by users: website goals, improved filters, new features, and others. Every change may impact data in several ways, even when not expected. For this reason, I propose a method that will help to keep track of those changes, especially in large organizations where more than one person is involved with Google Analytics. Even when one person is involved, this is important as employees usually do not work with just one company “to infinity… and beyond!”
In order to make this task easy and centralized, I propose using a Google Docs form. Using such a form will facilitate the collection and sharing of the changes made to a Google Analytics account. The form should be created so that multiple teams will be aware of all changes. These will then be aggregated for historical knowledge that can be used by the whole team (and future teams members).
Below is an example of such a form with fields that you might want to create (learm how to build a Google Docs form).

Example of a Google Docs form that can be used to track Google Analytics changes.
Keeping Track of External & Overall Changes with Annotations
Back in 2010, The Analytics team had announced a feature which in my opinion is one of the most important features of the tool: Google Analytics Annotations. This feature allows website managers to provide context for where the numbers live (the graphs on the interface), allowing for richer analyses. Here are some important occasions when you should use this feature:
- New offline marketing campaigns (e.g. radio, TV, billboards).
- Major changes to the website (e.g. design, structure, content).
- Changes to tracking (e.g. changing the tracking code, adding events).
- Changes to goals or filters.
While annotations can—and should—also be used for technical changes to the website (as mentioned above), it is important to keep them at a high level. This means that you shouldn’t add too much information about your changes, just the overall picture; otherwise the annotations will quickly become overcrowded. Therefore, the use of both methods described above (form and annotations) should create an optimal mix. Below is a video explaining how to use the Annotations feature:
Video explaining how to use the Google Analytics Annotations feature.
Closing Thoughts
In this post we discussed ways to avoid bad implementations—by putting into place a process that requires users to report on changes made to their Google Analytics accounts. This not only helps in avoiding mistakes, but also helps find the source of problems, and solutions for fixing them quickly.
Google Analytics is a great tool, and one of its greatest qualities is that it makes Analytics ubiquitous—most people in any organization can use it; from Management to Marketing to IT. This means that many hands must deal with the tool, which requires an easy way to deal with the changes to those tool settings and configurations. Hopefully this post has provided some ideas on how to do it.
Please comment with any additional ideas on how to keep Google Analytics data safe and clean.
(jvb) (il)
© Daniel Waisberg for Smashing Magazine, 2012.
Keep Your Analytics Data Safe And Clean
Whoever works with analytics on a day-to-to-day basis knows how important it is to have a continuity with the data. Any slip might be fatal: data can disappear, trends misunderstood and jobs lost. Losing data can have long-lasting consequences, as very often it isn’t possible to reprocess the data—so what is lost cannot be recovered.
For this reason, it is essential to have a place where you can test changes to your settings and configurations. It is also important to keep track of changes in a way that they can be used to provide a context for analysts, so that when you are looking at incomprehensible spikes in past data, you can check whether any changes were made to the data collection methods (or if an offline campaign was in place during the period analyzed). Having such a process in place will help to keep data safe from loss and clean from inaccuracies.
As Neil Mason describes on his presentation about Data Discovery: “all data is dirty and needs to be cleaned and transformed, this is the heavy lifting stage.” Below I describe four techniques that will help analysts and marketers to ease the burden of inaccurate data usage Google Analytics. I provide examples on how this can affect the data, and share tips on ways to make them happen.
Google Analytics Accounts And Profiles
The Google Analytics code site offers an in depth explanation of the hierarchy used by the tool to manage report access and data collection. There are three important levels that we need to be aware of:
- Account: An account is the mother of all Web properties and profiles, and has a unique account ID that can be used to track multiple websites.
- Web Property: The web property has a unique ID, which is a combination of the account ID and additional digits. Since different Web properties have different IDs, their data cannot be merged.
- Profile: the gateway to the website reports. It determines which data from your website appears in the reports. Filters can be applied to profiles in order to segment the data; for example, it is possible to create a profile only with visitors from USA, only from new visitors, etc. Since profiles use the same account and Web property IDs, data for multiple profiles can also be seen in aggregate.
Below is part of the scheme provided on the code from the website mentioned above. The image well represents the possibilities of data collection and management.

Diagram showing the possible Analytics account configurations.
Important to note that Google Analytics still misses the mark on an important feature related to account configuration: report level access. This means that the lowest access that can be given to a user is a profile, so it is not possible to provide access to reports. As I wrote in an article about Google Analytics Perception & Reality:
As of today, Google provides just two options when it comes to providing access: Administrator (who can access anything in the account) and Viewer (who can access specific profiles). This division is far from good. In any mid-sized company, the data needs to be more modular (i.e. enable showing different reports to different people).
Creating an Analytics Staging Profile
Let’s suppose you read in a random blog that you should create a filter to lowercase URIs for all of your profiles (if you don’t have one yet, check point five on this implementation checklist). And suppose you have no idea how this can impact your data.
The best way to learn how filters affect your Google Analytics data would be to have two profiles with the exact same settings (the real profile, and the test profile) and apply a new filter only to the test profile. Once it is applied, you can check the data and compare the number to learn if anything went wrong. Here is an article from the Google Analytics Help Center on how to create profiles.
Creating an Analytics Staging Account
If you work in the Web Analytics field long enough, you have certainly experienced data loss as a consequence of bad implementations. It happens, and the best we can do is to have a Web Analytics Process in place that will help us avoid it. Not long ago, I implemented the _trackPageLoadTime() method (now deprecated) for a website, and as a result from a lack of attention, I lost six days worth of data (yes, I didn’t log in quite enough to Analytics during this week!) See graph below:

Example of how a bad Google Analytics implementation can affect data collection.
The story above illustrates the fact that code changes should be dealt with carefully. Since most websites do have a staging site where changes are tested before going live, I suggest having a different tracking code used for those environments to test code changes on the Google Analytics script (i.e. a new Google Analytics account). This technique is very similar to the one proposed above to check filter changes—it only goes one step further.
Tracking Profile Changes & Configurations
When it comes to both external and internal changes, context is one of the most important factors for analyzing data. For this reason, it is crucial to have a log of changes that affect your data, as well as changes in marketing campaigns and other company efforts. Below I present two ways to keep this data in an accurate and accessible way.
Keeping Track of Internal Changes
Changes are constantly made to Google Analytics profiles by users: website goals, improved filters, new features, and others. Every change may impact data in several ways, even when not expected. For this reason, I propose a method that will help to keep track of those changes, especially in large organizations where more than one person is involved with Google Analytics. Even when one person is involved, this is important as employees usually do not work with just one company “to infinity… and beyond!”
In order to make this task easy and centralized, I propose using a Google Docs form. Using such a form will facilitate the collection and sharing of the changes made to a Google Analytics account. The form should be created so that multiple teams will be aware of all changes. These will then be aggregated for historical knowledge that can be used by the whole team (and future teams members).
Below is an example of such a form with fields that you might want to create (learm how to build a Google Docs form).

Example of a Google Docs form that can be used to track Google Analytics changes.
Keeping Track of External & Overall Changes with Annotations
Back in 2010, The Analytics team had announced a feature which in my opinion is one of the most important features of the tool: Google Analytics Annotations. This feature allows website managers to provide context for where the numbers live (the graphs on the interface), allowing for richer analyses. Here are some important occasions when you should use this feature:
- New offline marketing campaigns (e.g. radio, TV, billboards).
- Major changes to the website (e.g. design, structure, content).
- Changes to tracking (e.g. changing the tracking code, adding events).
- Changes to goals or filters.
While annotations can—and should—also be used for technical changes to the website (as mentioned above), it is important to keep them at a high level. This means that you shouldn’t add too much information about your changes, just the overall picture; otherwise the annotations will quickly become overcrowded. Therefore, the use of both methods described above (form and annotations) should create an optimal mix. Below is a video explaining how to use the Annotations feature:
Video explaining how to use the Google Analytics Annotations feature.
Closing Thoughts
In this post we discussed ways to avoid bad implementations—by putting into place a process that requires users to report on changes made to their Google Analytics accounts. This not only helps in avoiding mistakes, but also helps find the source of problems, and solutions for fixing them quickly.
Google Analytics is a great tool, and one of its greatest qualities is that it makes Analytics ubiquitous—most people in any organization can use it; from Management to Marketing to IT. This means that many hands must deal with the tool, which requires an easy way to deal with the changes to those tool settings and configurations. Hopefully this post has provided some ideas on how to do it.
Please comment with any additional ideas on how to keep Google Analytics data safe and clean.
(jvb) (il)
© Daniel Waisberg for Smashing Magazine, 2012.
Desktop Wallpaper Calendar: April 2012
We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one — desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.
We continue to nourish you with a monthly spoon of inspiration. This post features free desktop wallpapers created by artists across the globe for April 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!
Please note that:
- All images can be clicked on and lead to the preview of the wallpaper,
- You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
Noisy Neighbors
Designed by Katerina Bobkova from Ukraine.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1080
Bird Songs
"”Spring would not be spring without bird songs.” – Francis M. Chapman." Designed by Raymond Lopez from USA.
Bear On The Moon
Designed by Oxana Kostromina from Germany/Russia.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1536×2048, 1680×1050, 1920×1080
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1366×768, 1440×900, 1536×2048, 1680×1050, 1920×1080
Retro Light Wall
Designed by Marian Cepa from Slovakia.
- preview
- with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1080
- without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1080
Happy In April
"Here’s to a cheery-even-when-it’s-raining kind of April!" Designed by Candace Jones from USA.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200, 2560×1440
The Heart Sees What Is Invisible To The Eye
"What your sees and what your heart feels may not be same.The heart sees things more clearly than the eye. Best Example is feeling of love which can be feel and can never be seen. In Love, you will see what your heart wants you to see, to feel, to make you happy which an eye can’t see." Designed by Harshi Shah from India.
- preview
- with calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
- without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200
Who’s The Fool
Designed by Julia Factor from Israel.
- preview
- with calendar: 800×600, 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 800×600, 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 2560×1440
Tidy Desktop
"Spring time, cleaning time! Here’s a simple and clean calendar to help you keep your desktop nice and tidy." Designed by Axura from Italy.
- preview
- with calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
Scrap April
"April is a month of love,dates and flowers." Designed by Irur from Ukraine.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440
- without calendar: 320×480, 1024×768, 1024×1024, 1440×900, 1680×1050, 1920×1080, 2560×1440
Circus
"There are 48 more clowns in this picture. Find them all." Designed by Cheloveche.ru from Russia.
- preview
- with calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
Vintage Times
Designed by Pietje Precies from The Netherlands.
- preview
- with calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
The Big Burn
"Indoor Tanning is more risky than you think! It’s true! Before you go back to the tanning bed, get the real facts from real sources. Find out why youth are more at risk and discover the burning truth about indoor tanning." Designed by Zgm from Canada.
- preview
- with calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1280×800, 1440×900, 1680×1050, 1920×1080, 1920×1200
Jean-cloud Van Damme
"Hope that this little cloud will make you laugh. Happy Fools’ Day everybody)." Designed by Marika Smirnova From “oblako Studio” from Russia.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1920×1080, 1920×1200, 2560×1440
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1920×1080, 1920×1200, 2560×1440
Busy April
"This wallpaper based on idea of Estonian folk tale. We want to believe we are very busy nation and that is our goal to be the best in everything :-)Springmonth is a good start to change life more active and busy. Of course there are little detail focused on Easter Holiday, too." Designed by Anne Pikkov from Estonia.
- preview
- with calendar: 1024×768, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
Graceful Descent
"Ahh, the warm, fat raindrops of Spring, gently floating to Earth. Don’t they look happy?" Designed by Matt Mink from USA.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200
Cherry Blossom
"The photo was taken in Toronto High Park in 2011." Designed by Tetyana Kovyrina from Canada.
- preview
- with calendar: 1024×768, 1280×1024, 1440×900, 1680×1050, 1920×1200
- without calendar: 1024×768, 1024×1024, 1280×1024, 1440×900, 1680×1050, 1920×1200
Always In Spring
"Color and optimism for everyone this spring." Designed by Destaca Imagen from Spain.
- preview
- with calendar: 640×480, 1024×768, 1280×720, 1280×960, 1440×900, 1680×1050, 1920×1200, 1920×1440, 2560×1440
- without calendar: 640×480, 1024×768, 1280×720, 1280×960, 1440×900, 1680×1050, 1920×1200, 1920×1440, 2560×1440
Spring Up !
"Energy-efficient wallpaper." Designed by Anna Pochodaj from Poland.
- preview
- with calendar: 1024×768, 1024×1024, 1280×800, 1680×1050, 1920×1440
- without calendar: 1024×768, 1024×1024, 1280×800, 1680×1050, 1920×1440
Dyed Easter Eggs
"Colored Easter Eggs were a really special part of my family’s Easter traditions. The eggs symbolize new life offered by Jesus’ death and resurrection on Easter." Designed by Evan Chiu from Cincinnati, OH, USA.
- preview
- with calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
Bulbs
"April light is coming…" Designed by Dennis Nielsen from DK.
- preview
- with calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 2560×1440
- without calendar: 1280×720, 1280×800, 1440×900, 1680×1050, 1920×1080, 2560×1440
Sky Buster
"Get ready to lift you mood and get some new energy!" Designed by Pixeltoxhtml Team from India.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050, 2560×1440
Funny Bunny
"Our funny bunny takes a look at the giant carrot in shape of an easter egg." Designed by Adconcept Werbeagentur Gmbh from Germany.
- preview
- with calendar: 1280×720, 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1280×720, 1280×800, 1366×768, 1440×900, 1680×1050, 1920×1080, 1920×1200
Fools Month
"Really liked this quote from Mark Twain, so wanted to design something around fools day on the first of the month." Designed by Martin Lucas from UK.
- preview
- with calendar: 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1680×1200
- without calendar: 640×480, 800×480, 800×600, 1024×768, 1152×864, 1280×720, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1600×1050, 1680×1200
Spring Invasion
"Spring is here and you can’t hide! Just beware of viruses ‘cause you don’t want to stay inside on such a beautiful day." Designed by Nose Invaders from Sweden.
- preview
- with calendar: 320×480, 1024×1024, 1280×800, 1680×1050, 1920×1080, 1920×1200, 2560×1440
- without calendar: 320×480, 1024×1024, 1280×800, 1680×1050, 1920×1080, 1920×1200, 2560×1440
Life Is Beautiful
Designed by Christine Bradway from USA.
- preview
- with calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050
- without calendar: 320×480, 1024×768, 1024×1024, 1280×800, 1280×1024, 1440×900, 1680×1050
Skate Boarding Into April
"Brownie Bunny wishes all a blast into the 2nd quarter of the year! Stay cool, cute and green! =)." Designed by Lew Su-ann from Brunei Darussalam.
- preview
- with calendar: 800×600, 1024×768, 1024×1024, 1280×720, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
- without calendar: 800×600, 1024×768, 1024×1024, 1280×720, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200, 1920×1440
Along Came A Spider
Designed by Octavo Designs from USA.
- preview
- with calendar: 1024×768, 1280×720, 1280×800, 1280×1024, 1366×768, 1440×900, 1600×1200, 1600×900, 1680×1050, 1920×1080, 1920×1200
- without calendar: 1024×768, 1280×720, 1280×800, 1280×1024, 1366×768, 1440×900, 1600×1200, 1600×900, 1680×1050, 1920×1080, 1920×1200
There’s No You In I
"There’s No You In I wallpaper typography, helvetica, minimal." Designed by Dan Ciobanu from UK.
- preview
- with calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1200, 1920×1440
- without calendar: 1024×1024, 1280×800, 1440×900, 1680×1050, 1920×1200, 1920×1440
Join In Next Month!
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
A big thank you to all designers for their participation. Join in next month!
What’s Your Favourite?
What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.
Stay creative and keep on smashing!
(il) (vf)
© Smashing Editorial for Smashing Magazine, 2012.
Publish What You Learn
I don’t think anyone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate—far from it. But I believe that through honest discussion and objective collaboration, accurate and useful information is much more likely to be the end result of any educational endeavor.
In the final week of November 2011, a smart group of developers launched a project called Move The Web Forward, which you can read more about in Addy Osmani’s Smashing Magazine article.
For this post, I want to focus on one piece of advice given by those developers in that project, under the heading “Write”.
The advice is: Publish what you learn.
As soon as I read that exhortation (which originated with this tweet), I knew this was a project made by a group of people who cared about the Web and that they understand what it takes to move forward as developers, and as an industry.
Let’s explore those four simple words, because I believe that concept is at the heart of how much progress has been made in the front-end development niche. And it’s something that could help almost any industry, in any field.
Just Do It
Very few blogs start out with much traffic at all. Unless the blog is based on an already existing brand that has a lot of exposure, most blogs will begin with very few readers. Even Smashing Magazine, who now has millions of readers, subscribers, and followers, started out with nothing.
CSS-Tricks is another good example of a blog that started out as nothing, and has grown into a thriving, collaborative community. Its founder and curator, Chris Coyier, certainly couldn’t have predicted how much that website would grow. And I’m sure we could come up with additional examples of websites that went from zero to hero in a relatively short time.
Why did they become successful? Because they published what they learned. At one time I somewhat favored the view that too many blogs were being launched. But I think the benefits of so much being published in so many different places outweigh any drawbacks.
Of course, this is not to suggest that the reason you want to publish your thoughts is to “make it big”—that should be secondary, if considered at all. In fact, what you publish doesn’t necessarily have to be on a run-of-the-mill monetized WordPress blog. It could be a GitHub account, a Wiki-style website, a Tumblr feed, or even a bunch of quick tips on a simple Twitter account.
Which brings us to another important supplement to this theme. Immediately after the folks at Move The Web Forward told us to publish what we learn, they made an equally important statement.
Don’t Be Afraid To Make Mistakes
You might be thinking: “Wait. What? Me? Publish a blog? I’ve been coding websites for a measly six months (or some other ostensibly short period of time). Even if people visit my website and read it, my articles will probably get torn to shreds!”
That doesn’t matter. What’s important is that you recognize the value in researching, teaching, collaborating, and correcting mistakes. That’s why the Move The Web Forward folks went on to encourage writers to “keep your posts updated.”
And that’s why Rebecca Murphey, when discussing how to get better at writing JavaScript, said:
“The number one thing that will make you better at writing JavaScript is writing JavaScript. It’s OK if you cringe at it six months from now. It’s OK if you know it could be better if you only understood X, Y, or Z a little bit better. Cultivate dissatisfaction, and fear the day when you aren’t disappointed with the code you wrote last month.”
In this case, Rebecca was talking about actually writing code, not writing about code. But the same principle applies: you will get better when you make mistakes and correct them.
And if you think you’ve made some progress and you have something unique and educational to share, don’t be afraid to offer it to one of the many design and development blogs that will gladly pay you for content.
Comments Are Part Of The Content
There are too many websites that view the readers’ comments as secondary content that is not nearly as valuable as what the author has to say in the main article. Every website should continually make changes or updates to content that is clearly shown to be incorrect. This shows that the publisher wants to provide accurate information, and that they respect the views of their readers.
In fact, you could make the argument that without reader comments, the quality of content on many design and development blogs would not be as strong as it is today. On my own website, I’ve written so many things that were just downright wrong. In some cases, things can be a matter of opinion and personal preference. But in other cases, they’re just factually incorrect. In indisputable cases, I’ve always tried to post updates to articles and credit the commenters who pointed them out.
Teachers Learn By Teaching
Randy Rhoads, a popular rock guitarist (who died in a plane crash in 1982), was well-known for being a guitar teacher. He once said:
“I’ve been playing about 18 years and I started to get a style when I started teaching.”
In other words, he believed that his success as a guitarist was largely impacted by the fact that he spent time teaching his skill to others. The same can be true for any one of us.
I’ve learned so much from readers’ comments and from doing research on stuff that I plan to publish. I’ve even learned from content I never actually did publish. The Move The Web Forward project, once again, summarizes this point quite nicely:
“Teaching is a great learning tool as well. So, even if you are getting started in an area, you’re helping yourself by writing about it as well.”
GitHub Gets It Right
The collaboration level on many projects from the “social coding” website GitHub is truly amazing, and is something that shows how revolutionary the Web really is.
Think about a large project like HTML5 Boilerplate. When that project was first released, many front-end devs were amazed at how much front-end knowledge had been packed into a single starting template. Many were even intimidated by it. But what it is today is nothing compared to what it was when it first launched.
Why? Because from the get-go the contributors to the project had the same attitude that Paul Irish expressed in the launch post of his blog:
“I’m very interested in your contributions… what else deserves to be in this base template?”
With those words, Paul began what might be the most important front-end development project in the Web’s short history. And the collaboration continues today. In fact, there have been over 1000 issues opened and closed on that repo. All because Paul Irish—who has every right to never solicit feedback, because he’s so dang smart—encouraged collaboration.
Blog Posts Should Be Like GitHub Repos
The collaboration on apps like GitHub should be exactly what happens on blog posts. The readers posting comments should read the entire article, and should offer constructive, polite criticism and suggestions, without any unnecessary negativity.
If the author feels the advice is not accurate or best practice, than he should explain why. If it’s established that the point needs clarification and/or correction, then he should humbly accept this and post an update, crediting the person or persons that brought it up. Personally, I’ve seen too many posts where the author doesn’t make corrections, even when clear technical or factual errors are pointed out.
This doesn’t mean that “majority rules”—that would be ridiculous, and would probably cause more problems than it solves (particularly in matters of opinion, where often there are no hard-and-fast rules).
But if it’s a technical matter, then the author has the responsibility to make updates and keep the information fresh, practical, and relevant. This is especially important if readers are finding the article via search. The “copy-and-paste-but-don’t-read” mentality is common among developers looking for quick solutions. We all face tight budgets and even tighter deadlines, so the last thing we want to do is verify a piece of code’s quality by reading a 900-word accompanying article along with 50+ comments.
If you notice a lot of search traffic coming in for older articles on your website, that might very well be incentive to update those older posts, and ensure you’re not promoting something that you no longer believe is accurate or best practice. And this has a twofold benefit: It will get you even more traffic, and your readers will have accurate information that they can trust.
So let’s do our best to imitate collaborative communities like those found on GitHub and StackOverflow, and continue making progress by correcting our errors. This will help all of us overcome the fears inherent in publishing what we learn.
The “TL;DR” Conclusion
If you don’t read this entire post, or if you take nothing else away from it, then just remember these points:
- When you learn something, write about it, and don’t do it just to make money off it.
- Don’t be afraid to make mistakes.
- Teaching others will help you learn.
- Encourage collaboration by allowing a free flow of constructive comments.
- If you make a mistake, fix it.
I think this is a winning strategy for all those who are involved in design or development blogging, as well as tutorial writing.
When we’re willing to put ourselves out there, listen to what our peers have to say, and improve as needed, we will become better developers, and will help each other solve design and development problems in a more effective manner.
As this article suggests, your voice is just as important in this discussion. What do you think? Are you motivated to publish what you learn? Do you think collaboration and constructive feedback is an important part of moving the Web forward? We’d love to hear your thoughts.
Image used on frontpage: opensourceway.
(il) (jvb)
© Louis Lazaris for Smashing Magazine, 2012.
Useful WordPress Tools, Themes And Plugins
If you’re looking for some great ways to improve your WordPress workflow, read on for a massive collection of free themes, plugins, tools and tutorials. These resources were all linked via the Smashing Magazine Twitter stream, Facebook stream, and other social-media streams around the Web.
These awesome resources have now been organized and consolidated for easy reference to help you get the most out of the world’s #1 publishing platform. Enjoy!
Free WordPress Themes
There are probably a billion WordPress themes available these days. But not all of them are worth using or even looking at. Fortunately our readers send in some amazing and beautifully designed themes for us to check out and share. So without further ado, here are some of the best WordPress themes we’ve discovered along the way, neatly summarized and linked for your surfing pleasure.
Grid Portfolio Theme
Beautiful minimal and modern WordPress themes. Design for illustrators, photographers and graphic designers.
The focus should be on your work, not the theme.
Foghorn Theme
Foghorn is a minimalist WordPress theme built off of the foundation of Twenty Eleven. It has a custom options panel for switching layouts, removing sidebars, uploading a logo, and changing footer text.
BonPress: WPZOOM
BonPress is the perfect personal blog theme. Packed with a post formats feature (for audio and video) and multiple custom widgets, like Twitter, Flickr, it will offer you a unique experience from blogging.
Roots WordPress Theme
Roots is a starting WordPress theme made for developers that is based on HTML5 Boilerplate, Starkers, and the most popular CSS frameworks.
NeueGrafik: A Free Modern WordPress Theme
This theme is totally unique and simple, it’s great for any graphic designer, illustrator or photographer to showcase their portfolio.
Free Minimal Swiss Design WordPress Themes (4 Themes)
In this post the authors release yet another freebie: an original set of four exclusive minimal, clean WordPress themes designed by Marios Lublinski and released for the Web design community.
Free HTML 4.01/HTML5 WordPress Theme: Spectacular
A free WordPress theme that aims to provide a warm and pleasurable atmosphere for personal musings and ramblings.
Scherzo: Free WordPress Theme
A clean, readable theme. Boasts a responsive design, which means it displays perfectly on all devices, including mobile phones (not just iPhones), tablets and desktops.
Unspoken WordPress Theme
Advanced WordPress Premium theme that was developed from your proceeding wishes. Unspoken is our first, clean, simple and easy to customize premium WordPress theme specifically designed for your news or magazine website.
Free WordPress 3.1 Theme: Splendio (With PSD Sources)
A new freebie: a beautiful theme, designed by Vlad and Elena Scanteie which was developed exclusively for Smashing Magazine and its readers.
Suburbia 1.1 WordPress Theme
Suburbia is a free premium WordPress theme for magazines. The layout is very clean and flexible and designed in a modest and minimalistic style.
Portfolium 1.1 WordPress Theme
Portfolium can be used on portfolio websites or blogs and has a minimalistic design that is perfect as is or as a foundation for your custom design.
Typominima: A gorgeous typography-based minimal WordPress theme
Neat and flexible grid-based theme for WordPress CMS and Portfolium that can be used on portfolio websites or blogs. If you are designer, artist, photographer, or other creative specialist, you can take a full advantage of Portfolium’s fresh minimalistic design — perfect as is, or as a foundation for your custom design.
Modernist: Free WordPress theme with focus on typography
Yet another freebie: a beautiful Modernist WordPress theme, designed by Rodrigo Galindez, and released for Smashing Magazine and its readers. This theme is based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists.
Free HTML 5 Responsive WordPress Theme for Photographers
Photum is a theme to use with WordPress that will turn your site into a clean portfolio that you can use to show off your photos.
Renova WordPress Theme
Renova, a new single column theme for WordPress. The main design of Renova concentrates on a minimal style dedicated to those writers who need a simple layout, without the useless stuff. Just words… your words.
Free E-Commerce WordPress Theme: Balita: Smashing Magazine
In this post the authors release yet another freebie: the Balita WordPress theme, a theme dedicated to shops that sell products for children.
Ari WordPress Theme
A free WordPress theme for WordPress 3.0+ and translation-ready.
WordPress Anniversary Theme
On January 25, 2003, a seemingly one-off comment by “Mike” on Matt Mullenweg’s blog started a chain reaction that resulted in the creation of WordPress. Today, WordPress powers millions of blogs and websites, making it incredibly easy to build a website!
Free WordPress 3.0 Theme for Portfolios and Magazines: JournalCrunch
In this post the authors release yet another freebie: JournalCrunch WordPress 3.0+ theme, a theme for either portfolios or magazines with an integrated journal.
Academica: Free WordPress 3.0 Theme For Educational Websites — Smashing Magazine
A free WordPress theme designed specifically for educational websites such as universities, schools, etc.
Free Theme: Quality Control, a Simple Ticket or Bug Tracker
This theme allows for the easy creation of a ticket / support system right within WordPress, and for free.
Free Designer Theme
Beautiful minimal and modern WordPress themes. Designs for illustrators, photographers and graphic designers. The focus should be on your work, not the theme.
HTML5Press
HTML5Press lives here. HTML5Press is a WordPress theme based on the HTML5 template by Jesper.
Landing pages, squeeze pages, sales pages, and A/B testing made easy for WordPress
The authors deliver high-quality premium WordPress themes and plugins that make it easy to take your website to the next level.
Bubblog Theme
A modern, clean WordPress theme. It has a management console, is widget ready, advertisement ready, and is an easily customizable theme to use.
WordPress Plugins
Besides themes, plugins are another way to customize your WordPress website with advanced functionality and interactivity. As with themes, there are plugins for just about everything you can possibly imagine. But also like themes, it can be difficult to sift through the fluff, and find those gems that truly improve your website.
When you do find a WordPress plugin that’s great, you just have to share it with others in the community. So put on your plugin-checking goggles, because it’s about to get interesting!
Event Organizer
Event Organiser adds event management that integrates well with your WordPress site. By using WordPress’ in-built ‘custom post type’, this plug-in allows you to create events that have the same functionality as posts, while adding further features that allow you to manage your events.
Ninja Forms: A New Free Plugin for Creating Forms in WordPress
Every website needs forms – it’s an integral part of visitor/customer communication. However, custom forms can be a downright pain to code.
Bookings: Zingiri
Bookings is a WordPress plugin allowing you to provide online booking services for your website.
How To Safely Store A Password
bcrypt uses a variant of the Blowfish encryption algorithm’s keying schedule, and introduces a work factor, which allows you to determine how expensive the hash function will be. Because of this, bcrypt can keep up with Moore’s law. As computers get faster, you can increase the work factor and the hash will get slower.
WordPress › Welcome Pack « WordPress Plugins
Welcome Pack is a BuddyPress plugin that enhances the new user’s experience
WordPress › Pricing Table « WordPress Plugins
WordPress Pricing Table plugin will help the admin to publish a pricing table on your WordPress page, or even to post content to it. WordPress Pricing Table plugin has a full-featured (but easy to use) administration option to create a pricing table.
WordPress › Anti-Splog « WordPress Plugins
The ultimate plugin and service to stop and kill splogs in WordPress Multisite and BuddyPress, from WPMU DEV.
WordPress › Email Address Encoder « WordPress Plugins
A lightweight plugin to protect email addresses from email-harvesting robots by encoding them into decimal and hexadecimal entities.
The Sweet Plugin: User Switching
Today’s Sweet Plugin is User Switching, which has quickly become one of my all-time favorite plugins. It allows admins to easily switch to another user, skipping the log-in / log-out process, which can become quite time-consuming for testing the websites of different users. This is one plugin that is seriously worth checking out.
welaika/wordless – GitHub
Wordless is an opinionated WordPress plugin that dramatically speeds up and enhances your custom themes creation.
Pin, organize and show your favorite places through OpenStreetMap/WMTS, Google Maps/Earth (KML), GeoJSON or Augmented-Reality browsers » Leaflet Maps Marker WordPress Plugin
The WordPress plugin “Leaflet Maps Marker” allows you to pin, organize and show your favorite places through OpenStreetMap on your blog and via different APIs on external websites or apps
Front End Upload, a New WordPress Plugin — Monday By Noon
Announcing Front End Upload, a New WordPress Plugin
Simple:Press
Welcome to Simple:Press — the feature-rich, completely integrated and fully scalable forum plugin for WordPress.
Types WordPress Plugin: Easy Custom Post Types
WordPress › Wordgento « WordPress Plugins
yolink — widgets / yolink Search for WordPress
Optimize your website search, maximize engagement, and position your website to drive organic search rankings with the most powerful search solution for WordPress.
More Fields « More Plugins
More Fields is a WordPress plugin that adds boxes to the Write / Edit page. These boxes contains input fields, so that additional (more) fields can be added to a post. For example, if you write about books, you can add a box where you can enter the title and the author, etc. The boxes can be placed either to the right or to the left of the Write / Edit page.
Usernoise Modal Feedback: A Free WordPress Contact Form That Just Works
WordPress websites are always in need of a good contact form. Are you looking for a feedback / contact form that works right out of the box? Should it have an attractive aesthetic, with a simple yet full-featured form? Look no further than the free Usernoise Modal Feedback Contact Form plugin.
WordPress SEO by Yoast, version 1.0 — Yoast
The SEO plugin by Yoast helps all our editors add SEO juice to their post fast and easy. Editors should focus on writing content, not gaming results. But they are the ones most suitable to write descriptions and titles for their own stories. This plug-in allows them to do just that without needing an SEO expert to walk them through the process. An invaluable tool for any professional blog.
Michael Fields » Post Format Queries
WP Document Revisions — Document Management for WordPress
WP Document Revisions is a document management and version control plugin for the popular content management system, WordPress. Built for time-sensitive and mission-critical projects, teams can collaboratively edit files in any format — text documents, spreadsheets, images, sheet music… anything, while seamlessly tracking the document’s progress as it moves through your organization’s existing workflow.
WordPress Tools
Beyond themes and plugins, there are tools and resources to further help with improving the presentation, organization, and functionality of your WordPress-powered website. Here is our growing collection of WordPress tools that we’ve collected from around the Web:
Manage WordPress Websites from One Dashboard — ManageWP.com
WordPress Mobile Pack
The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress website and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the website, a selection of mobile themes, extra widgets, device adaptation, and a mobile administration panel to allow users to edit their website, or write new posts when they are out and about.
zencoder/html5-boilerplate-for-wordpress
This theme is built on the HTML5 Boilerplate by Paul Irish and Divya Manian. The sole purpose of this theme is to save developers the time it takes to apply the HTML5 Boilerplate to WordPress. The “HTML5 Boilerplate” name is used with permission from Paul Irish.
Default WordPress Generated CSS Cheat Sheet for Beginners
The goal of this cheat sheet is to assist beginners who are looking to get into WordPress theme styling.
Reverie: Versatile HTML5 WordPress Framework
HTML Sitemap for WordPress
There are plenty of plugins out there that will help you make an HTML sitemap
Web Design WordPress Function List
WordPress TextMate Bundle
The WordPress TextMate Bundle is a TextMate bundle that is built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up those little things that we work with every day.
WordPress 3 Template Hierarchy
The idea is that WordPress will look for files in a theme that will be used to render the current page in a specific order.
OnSwipe — Insanely Easy Tablet Publishing
Make your blog look beautiful on tablet Web browsers in under 3 minutes.
Wonderflux — WordPress free, open source theme framework
WordPress Widget Boilerplate
The WordPress Widget Boilerplate features file organization, documented code, and is built with the WordPress API for best practices.
Force Reload of Scripts and Stylesheets in your Plugin or Theme — tutorial plugin theme — WP Engineer
Force Reload of Scripts and Stylesheets in your Plugin or Theme
Instant WordPress
Instant WordPress is a complete standalone, portable WordPress development environment. It turns any Windows machine into a WordPress development server. It can even run from a USB key.
Reverie: Versatile HTML5 WordPress Framework
Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of device. Reverie follows HTML5 Boilerplate standards, and is hNews microformat ready. It is optimized for search engines, while at the same time improves readability.
andreascreten/wp-cli — GitHub
A set of tools for controlling WordPress installations from the command line.
WordPress Tutorials
Wrapping up these super-useful themes, plugins, and tutorials, here is a hand-picked collection of some great WordPress tutorials:
Using TextMate for WordPress Code Cleanup
In this post, the author will show you how to add two useful commands to TextMate, then move through the steps taken for theme code cleanup, finally putting the commands into practice.
WordPress Internals: How WordPress Boots Up — Theme.fm
The authors have written their own Twitter (or other service feed plugins / widgets), to those who are simply interested in PHP and software architecture. They invite you to join us on a journey deep into WordPress core code.
Importing WordPress Users via CSV Files
Conceptually, the idea is simple: import the data to create actual users for a WordPress-powered website. The trick is to clean up the data as much as possible to ensure valid username and password information. Once the data is good, importing it is easy, using a plugin.
How to Redirect Logged-In Users
WordPress provides a variety of ways to redirect logged-in users. In this DiW post, we explain each of these methods along with some useful tips and tricks along the way. These techniques enable you to redirect logged-in users to internal pages, external pages, and even return them to the current page.
How to Build a Shortened URL Service with WordPress Custom Post Type
The point of this tutorial is to push the limits of WordPress, and that’s going to take some real thought!
Ajax-Powered Error Logs for WordPress
This tutorial shows you how to set up dynamic error monitoring on any typical website. But the script will require some tweaking to get it to work with WordPress.
Scaling WordPress for High-Traffic
This talk (presented by Envato’s very own developer extraordinaire, Ryan Allen), will detail some of the potential pitfalls and solutions when maintaining massive WordPress blogs, such as “Tuts+”.
How to optimize plugin loading — Practical
This tutorial is primarily for plugin developers, but it can also be useful reading for anyone working with WordPress, to help them better understand how plugins load, and what can be done to improve them.
WordPress Optimization — DreamHost
There are many reasons why you may want to optimize your WordPress blog — primarily, you want your website to load quickly. That of course encompasses a number of other things such as wanting to make sure your website can handle large volumes of traffic without choking, and making sure your website’s processes aren’t being killed due to using too many server resources.
WordPress HTTP API — easily GET or POST in WordPress — Yoast
The WordPress HTTP API makes fetching from (or posting to) remote servers a breeze. It does this by allowing you to be transport agnostic when you either fetch or post something. The HTTP API will choose the fastest and most reliable method out of the five different transports available in PHP. It will take care of discovering what transports are allowed on that server at that time.
WordPress SEO Tips — WPShout.com
Admin Bar Tricks
In this DigWP post, the authors round up a ton of tips, tricks, and plugins for ultimately mastering the WordPress admin bar.
Optimizing WordPress Permalinks with htaccess
The topic of this post is how to use htaccess to optimize WordPress permalinks.
Writing Unit Tests For WordPress Plugins
When my WordPress plugin had only three users, it didn’t matter much when it broke down. By the time I reached 100,000 downloads, every new update made my palms sweat. My first goal for the WordPress Editorial Calendar was to make it do anything useful. I was new to JavaScript as well as PHP, and didn’t really know what I could pull off. In a few days I had a proof of the concept. In a few more days I had a working version, and was asking friends to install it. The calendar worked… sort of. I spent three times as much time fixing bugs as I did with coding. Once the plugin worked, I wrote unit tests to make sure it kept working. The unit tests for my calendar use QUnit, but they really use just three functions: test, expect, and ok. This article shows you how to integrate unit tests into your WordPress plugin, where to write unit tests, and how they can help you.
How to Setup Your Own Nginx Powered WordPress Server
Nginx is a Web server software that allows your server to serve files. Nginx is fairly new to Web server work, relative to other popular Web servers. If you look at the graph below, you can see Apache as the “top dog” (going all the way back to before 1995), while Nginx just started showing up in March, 2007.
Group WordPress Project: A Purpose & A Name
This time, the author is looking to narrow things down a bit, and needs your help to determine the overall purpose of the theme, and to start thinking about a possible name.
Inside WordPress Actions and Filters
How To Create Custom Post Meta Boxes In WordPress
Creating custom meta boxes is extremely simple — at least it is once you’ve created your first one using the tools baked into WordPress’ core code. In this tutorial, the author will walk you through everything you need to know about meta boxes.
How to use Ajax in WordPress
AJAX is the technology that lets you update the contents of a page without actually having to reload that page in the browser.
Limiting The Visibility Of Posts In WordPress Via Usernames — Smashing WordPress
How to Sync A Local And Remote WordPress Blog
If you prefer to work on your WordPress projects locally, but have to get them to sync remotely, then this tutorial is for you.
WordPress Multisite: Practical Functions And Methods — Smashing WordPress
Multisite is a powerful new feature that arrived with the release of WordPress 3.0. It allows website managers to host multiple independent websites with a single installation of WordPress.
The Definitive Check List for Publishing Your WordPress Plugin
This tutorial will guide you through publishing your plugin in the WordPress plugin directory. It works as a check list to help you make sure the plugin will be ready for the prime time by the time you hit publish.
Last Click
More than 40 Keyboard Shortcuts to Use in the WordPress Editor
WordPress functions.php Snippets
WordPress Snippets
Code snippets for WordPress developers
Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS
There are all sorts of different types of code and snippets that just keep growing and growing… and finally it gets to a point where I just need to dump everything, and start over again fresh. That’s the purpose of this post.
(jvb) (il)
© Smashing Editorial for Smashing Magazine, 2012.
Twtter new revolution
1Twtter is the biggest all in one Twitter application directory. People here can subscribe to whole lots of apps and get benefits- of all the applications free of cost. Twitter is not just a place where you Tweet, it is more than that where people can share and help each other out. So, twtter has been making application that makes user ease their twitter.
Find most exciting Twitter application on the internet just here. You can have lots and lots of fun with application and make you tweet easy. You can have access to different twitter related applications that can access twitter and get information related to your twitter account. You can optimize your twitter account by getting the Report Card for your twitter, getting the latest trends that may be beneficial to you interest, auto following the followers and more.
Popularity: 1% [?]


“Years ago I started collecting links, and once a week I would write an email to my colleagues with a small introduction to every link. Later on I decided that more people than just my colleagues might benefit from this collection, so I decided to publish everything on 






























































































































































