Author Archive

Open Call For International Communities


  

At Smashing Magazine, we are big proponents of diversity and sharing. We encourage designers and developers worldwide to step up and use Smashing Magazine as a platform to share their opinions, ideas or techniques. Our editorial process is quite evolved, yet we are very open to users’ suggestions. In fact, if an author has something to say, we try to help them collect their thoughts, strengthen their points and sharpen their language.

As it is, Smashing Magazine is in English; we communicate in English in our articles, through our comments, in social channels — everywhere. We have a quite good overview of what’s happening in the Web design scene among creative professionals where English is prevalent. When it comes to non-English Web design communities, we have almost no idea what’s going on there… it’s as if they never existed.

Last year, I was lucky to have attended quite a few conferences across Europe. I wanted to get a better understanding of what’s going on in those countries, how evolved their industry is and, more importantly, what techniques and tools they have developed and use in their work. Among all the small talks and casual discussions I had, I was impressed by the creative energy of designs in Czech Republic, by the pursuit of optimization of Russian projects, by the attention to professionalism in Norway and by the abundant democratic design culture of Swedes. Before I spoke to all those people and had a look at their projects, I had no idea about all the fantastic small projects and techniques they developed.

Future of Web Design Conference in London, 2010
Web design conferences offer fantastic opportunities for building connections in our community. Also, they are great for exploring innovative techniques and recent developments of our craft. Image credit

In fact, it appeared to me that there is so much going on in these non-English speaking communities, yet many of them are closed and separate, almost inaccessible to the rest of the world. For instance, in Russia there are fantastic design blogs like Habrahabr.ru where creative professionals share their thoughts, techniques and tools, yet because the blog is in Russian, it’s invisible for most creative professionals worldwide. Fortunately, Russian is my native language so I can read and write in Russian, but not everybody is as lucky as I am.

In my discussions with Christian Heilmann who has been traveling around the world much more than I have, the same holds true for many countries in Eastern Europe, Asia and South America, partly because of the language barrier.

We can change that. We invite all professionals from all parts of the world to get in touch with us. If you have been writing in Russian, Czech or any other language, but have a good command of English, we’d be more than happy to learn from your insights and share your expertise, techniques or tools with our worldwide audience. Our proofreaders will be more than happy to brush up your English writing, so it surely isn’t a reason not to write.

We’d Love To Learn From You!

We are always happy to support designers and developers who contribute to our fantastic Web design community and present tools, goodies, templates, articles or anything else for everybody to use and learn from. You could write about:

  • case-studies from your work, the decisions made and decisions rejected,
  • front-end / back-end techniques you’ve developed or implemented in your projects,
  • expert advice for beginners or professionals that you’ve gathered over years of professional work,
  • the cultural differences that designers worldwide should be aware of when working on projects targeted at your country,
  • open source projects, tools and other resources you’ve released or contributed to.

Of course, we will publish quality material and you will get paid, too. Even if you don’t want to write an article, we will do our best to support you on Twitter, Facebook, or in our email newsletter. And if you don’t feel that Smashing Magazine fits you for one reason or another, feel free to go ahead and contact other publications, we’re perfectly fine with that.

Spread the word!

If you don’t have time to write in English, here is what you can do to help:

  • If writing isn’t for you, draw the attention of your colleagues to this post and encourage them to share their insights,
  • Translate this article into your native language and publish it in popular design blogs or magazines in your country,
  • Bring up the topic during your next meetup, bar-camp or mini-conference.

Let’s Get In Touch!

Please drop us an email at ideas@smashingmagazine.com and tell us a bit about yourself, your expertise and the projects you’ve contributed to. Share your techniques and your thoughts! And if you’re organizing a social event, please invite foreign speakers and attendees to join and encourage them to share their expertise as well.

I sincerely believe that we can all benefit from diversity, and we can enrich our toolboxes, workflows and perhaps even our mindset with new viewpoints and insights. We are looking forward to your emails!

(jvb)


© Vitaly Friedman for Smashing Magazine, 2012.


Useful Coding Tools and JavaScript Libraries For Web Developers





 



 


Everyone who is a regular Smashing Magazine reader will know that we have a traditional habit of regularly researching the latest resources, tools and services out there on the Web, as productivity is a crucial asset of professional Web designers and developers. We could, and should, all integrate workflow optimization into our working practices.

Perhaps we should warn you upfront for the long compilation, but what can we say — there are so many excellent tools out there which deserve attention of the community, yet unfortunately remain obscure way too often. We love all the designers and developers out there for releasing and producing useful, valuable resources for all of us to use! We, for one, surely sincerely appreciate it in the name of the Web design community. Whether you like it or not, here are some of the most useful coding and workflow tools released recently.

Feel free to comment to this post and let us know how exactly you use these tools in your workflow and also share other tools you’ve found with others who may also find them useful and still haven’t run across them. Please do avoid link dropping and share your insights and your experience instead.

Useful Coding and Workflow Tools

Stripe: Easy Credit-Card Processing For Online Stores
A website owner has many options for accepting credit card payments. Most of those options have a verification process that is quite slow; some have APIs and interfaces that are more or less robust than others; and some solutions are much easier to use than others. With Stripe, you can forget the tedious experience of the PayPal API and other mysterious programming environments. Unfortunately, Stripe is currently available only in the US.

Stripe: Easy Credit-Card Processing For Online Stores

The Web Developer’s Wonderland
Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. Livereload is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. Currently available only for Mac.

The Web Developer’s Wonderland

Ender: The End Of Monolithic JavaScript Libraries
Ender allows you to search, install, manage and compile front-end JavaScript packages and their dependencies. Essentially, it’s a command-line tool that allows you to combine and mix all of the popular and small JavaScript libraries out there to create your own personal development library. If one library you use goes bad or is abandoned, Ender will help you quickly replace it with another. And if you need a particular version of a package, the tool can help you out as well. The release page contains detailed documentation, a user guide and some video tutorials. No more wasted bandwidth!

Ender: the end of monolithic JS libraries

Open-Source Exchange Rates and Currency Conversion
So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Finding a free and reliable API for developers to access the rates data is darn hard. Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub.

Open-Source Exchange Rates and Currency Conversion

Easier Number and Currency Formatting
This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators.

Easier Number and Currency Formatting

Tilt Firefox Extension: DOM Inspection In 3-D
How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.

Tilt Firefox Extension: DOM Inspection in 3D

Mou – Markdown editor for web developers, on Mac OS X
When current available Markdown editors are almost all for general writers, Mou is different: It’s for web developers. Syntax highlighting, live preview, fullscreen mode, auto save, powerful actions, auto pair, incremental search, custom themes, HTML export, enhanced CJK characters support. It’s exactly the app you want.

Mou - Markdown editor for web developers, on Mac OS X

Creating Buzz With Launch Effect
The one-page theme lets visitors sign up using their email. Upon signing up, the page generates a special URL for them to share with their friends, so that you can track your most active promoters and reward them for spreading the word. What more do you need from a pre-launch page? This is a good tool to bookmark for your next creative breakthrough or start-up idea.

Making a Buzz With the Launch Effect

A Better Responsive Grid
The Golden Grid System uses the concept of “folding� grid columns into one another, based on the browser’s size. So, a 16-column grid that works great in desktop browsers would fold down to an 8-column grid for tablets, and a 4-column grid for mobile devices. It can handle screen sizes ranging anywhere from 240 pixels wide all the way up to 2560 pixels. The columns themselves are not the only things that are elastic either; while the column’s widths are based on screen size, the gutter widths adjust based on the page’s font size (specified in ems). The Golden Grid System comes with other features that make it perfectly suited to modern responsive Web design.

A Better Responsive Grid

The Semantic Grid System
CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

The Semantic Grid System

Bootstrap Kick-Start Development Toolkit
Bootstrap is a toolkit that includes the base CSS and HTML for typography, tables, grids, navigation, error messages, modal boxes, buttons and forms. It’s built with the LESS framework. It comes with a standard 940-pixel grid (i.e. 960.gs without the side margins), or you can create your own. Bootstrap allows you to create fixed or fluid layouts, and it comes with many elements that can be used as is or restyled to fit your website. Of course, the toolkit is free to use.

Kickstart Your Website and App Development

Colour Bookmark
Drag the Colour Bookmark link to your toolbar to find out the colour palette of the website you’re currently on. Then simply: copy, paste and use the colours you choose.

Colour Bookmark

Leaflet: Open-Source Interactive Maps with JavaScript
The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.

Leaflet

Weinre
weinre is a Web Inspector Remote that is essentially a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it’s designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

Weinre

Aardwolf: Remote JavaScript Debugger
Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. One of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious — real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. You can use JSConsole for this purpose but when it comes to JavaScript debugging, Aardwolf is a better choice. Aardwolf is a JavaScript debugger for iPhone / Android / WindowsPhone 7 / BlackBerry OS 6+. (via Varun Kumar)

Varun's ScratchPad: JavaScript Remote Debugging

IE Vms
Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. But setting these virtual machines up without Microsoft’s VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE7, IE8 and IE9 running in separate virtual machines.

IE Vms

WhatFont
The tool allows you to easily get CSS typography details about the text you are hovering on.

WhatFont

WordPress TextMate Bundle
The WordPress TextMate Bundle is a TextMate bundle built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up the little things that we work with every day. The plugin features auto-completion of WordPress functions, snippets for common sections of code, and templates for WordPress components. We even snuck in function completion for the Carrington template framework functions. We’re always making improvements as we find more that we want covered by the plugin (merged from WordPress MU with the WordPress 3.0 code base consolidation).

WordPress TextMate Bundle

cubic-bezier previewer
No matter how much you see someone changing the parameters, if you don’t picture it in a 2D plane, it’s very hard to understand how bouncing animation with cubic-bezier works. Lea Verou searched for a tool could use to show how bezier curves are formed. She found plenty, but all of them restricted the the coordinates to the 0-1 range. Lea then proceded to create her own cubic_bezier() curves generator.

cubic-bezier.com

Patternizer – Stripe Pattern Generator Tool
With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing. And you can access them from any device worldwide.

Patternizer - Stripe Pattern Generator Tool

Chainvas
A tiny, modular library that can add chaining to any API that isn’t naturally chainable, like the Canvas API, the DOM and more.

Chainvas

Comparison Table Generator
This generator allows you to create beautiful HTML/CSS comparison tables on the fly.

Compare Ninja Table Generator

DropKick.js
A custom drop-down jQuery plugin which degrades gracefully. If the user has JavaScript disabled, the drop-down will display normally using regular <select> elements. It works on IE7+.

DropKick.js

-prefixfree
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Prefixfree

{less}
An automated folder scanning/parsing tool for LESS. Once you add your project folders to the application, it will automatically start monitoring the less files inside these folders for changes. After you have saved the less file, the application will automatically parse your less file into a regular CSS file. Also, see: SimpLESS, an app for Mac, Linux and PC to compile *.less files into valid CSS.

SimpLESS

Recurly.js
This tool allows you to easily embed a PCI compliant order form within your website. The library performs in-line validation, real-time total calculations, and gracefully handles errors. Your customer stays on your website while their billing information is securely sent to Recurly for approval. Because the cardholder data is sent directly to Recurly, your PCI compliance scope is dramatically reduced.

Recurly.js

Responsive Overlay Grid for In-Browser Development
The Heads-Up Grid is a recently released grid overlay for in-browser development. It works with fixed-width designs but also works great with responsive grids. Just specify the page units, column units, page width, number of columns, column width, gutter width, top margin and row height, and then paste the Heads-Up Grid code into the head element of your website to generate the grid overlay.

Responsive-Compatible Overlay Grid for In-Browser Development

Has.js
The library is similar to Modernizr, but instead of testing for HTML5/CSS3 features, it tests for JavaScript features such as: ES5 array, string, and object featuresNative JSON supportNative console supportActiveXNative XHRSome DOM and event features.

grumble.js
This library allows you to create tooltips that can be rotated around a given element at any angle. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and all modern browsers.

testling: Automated Cross-Browser JavaScript Testing
An automated cross-browser JavaScript testing platform for your quality assurance.

Instant WordPress
A standalone, portable WordPress development environment for Windows that can run from USB.

CSS Stress Testing and Profiling
A bookmarklet for stress testing the CSS on any given webpage. It indexes all the elements and their classes, and then — class by class — it removes one, and times how long it takes to scroll the page. Selectors that save a considerable amount of time when removed indicate problem areas.

Needle: Automated Tests for Your CSS
This tool checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

Last Click

Cutting-Edge Web Typography Experiments
The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative.

Cutting-Edge Web Typography Experiments

Font-Bot
It is time for your favorite font to stand its ground. The idea of this project is to build robots out of typeface glyphs, showcase them and hope others put together an opponent. Participating is not hard, the rules are clear: all Robots must be built of type alone (A-Z). You may reflect and rotate the letters. Keep it civil. May the best bot win. Let’s see if your type design has what it takes to defend its corner. Fight!

Font-Bot

Lights
“Lights” is an interactive music experience which is created with CSS, JavaScript and HTML5. This is why we love the Web.

Lights

Stay Tuned!

More posts with useful tools and techniques are coming very soon here, on Smashing Magazine. If you want to be among the first to be informed about the new tools, resources and techniques, please

You won’t regret it. Thank you.

Thank you to the Smashing Editorial team, especially Christiane Rosenberger, Iris Ljesnjanin and Luca Degasperi for their help in preparing and editing the post.


© Vitaly Friedman for Smashing Magazine, 2011.


Dear Web Design Community, Where Have You Gone?

Advertisement in Dear Web Design Community, Where Have You Gone?
 in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?  in Dear Web Design Community, Where Have You Gone?

As Web craftsmen, we are living in exciting times today. The frenetic pace of evolution in our industry has created remarkable opportunities for our work. Our established set of design and coding practices is more comprehensive than it has ever been before. Our designs are becoming more usable, our code more scalable, our layouts more responsive. In fact, just by comparing our design processes to those from a decade ago, it’s remarkable to observe how quickly we’ve developed and honed our craft over all these years.

However, the maturity of our industry is far from being complete. While producing a myriad of technological advancements, we have outpaced other developments along the way. These developments aren’t related to the lack of cross-browser standards support or technical downsides of the tools we are using. No, they have a different nature. They have emerged within our design community — a community which is now so fertile and diverse that it is becoming increasingly difficult to ensure its professional maturity.

In fact, there are many issues that require a thorough, profound discussion within our industry, yet they are not properly discussed for one reason or the other. This article is based on my recent, often unrelated, observations of our community. It features my personal opinion on the problems we need to tackle and conversations we need to start to ensure its healthy evolution.

Where Did The Community Spirit Go?

I was very lucky to have experienced the development of the Web design community from its early days on. As a passionate newcomer to the industry, I was captivated by the sense of enthusiasm that seemed to be flourishing everywhere and spurring everyone. It was a strong and genuine feeling that was sparkled among dozens of sites and magazines and fueled by the motivation of experienced and non-experienced designers. The community was reasonably small and therefore very welcoming and supportive, so everybody was perfectly fine with asking lengthy questions and providing detailed answers.

I clearly remember in-depth discussions with hundreds of meaningful, engaged comments, in which designers would thoroughly analyze the techniques presented and suggest improvements or alternatives. I remember having experienced print and digital designers writing articles and teaching inexperienced designers the obscure details of and practical tips about the new craft. I remember vivid debates spreading from one site to another, connecting designers and building professional relationships in the community.

These discussions still take place today. There are many more designers and developers out there encouraging these discussions. The remarkable work of people like Paul Boag, Dan Mall, Jeffrey Zeldman, Francisco Inchauste, Chris Coyier, Simon Collison, Andy Clarke, Paul Irish, Chris Heilmann, Jeffrey Way, Trent Walton and many others is a vivid manifestation of the tremendous care and dedication of designers and developers to our industry. There are literally thousands of talented folks out there who are writing articles and releasing wonderful new tools and resources for all of us to use. That’s great. That’s great because all of these contributions bring our community much further.

However, every now and again I can’t help but realize that the number of active contributors with knowledge and experience hasn’t increased proportionally to the overall magnitude of our growing community. Way too often I find it extremely difficult to find meaningful debates spanning over the whole community — debates that would create a strong echo and prompt us all to revise, extend or adjust our practices and hence become better professionals.

Hashbang-community in Dear Web Design Community, Where Have You Gone?
The recent hashbang debate is an excellent example of community-wide discussions that our community could use.

Way too often do I come to the conclusion that this remarkable, inspiring enthusiasm we once had is now gone. What remained are stranded cliques of passionate designers who lead design discussions privately and separately, often unnoticed by the vast majority of the community.

The tragic irony is that although we are probably one of the most connected professional communities out there, it seems that we are increasingly not connecting. It’s not that we’ve become just a bit too comfortable with the processes we’ve developed over the years nor that we don’t care about improving our design and coding skills. In dialogue with our readers and colleagues at conferences or even online, I’ve become confident that this development has entirely different roots.

Finding Time to Contribute

Since there is so much going on the Web these days, it seems only reasonable that many of us might experience difficulties finding time to actively engage in professional discussions. Personally, I am just as guilty as the next guy, as I find it extremely difficult to read more than 5–7 design pieces a day — not to mention commenting on any of them. I’m trying to challenge myself to be more responsive and engaging. Sometimes it works, sometimes it doesn’t, but I have firmly committed to this change and maybe — just maybe — so could you.

I believe that the lack of time is one of the reasons for our changed behavior online. Our emails have become shorter, and so are our blog posts and comments. Our interest has become much more difficult to enrapture, and so we’ve become more passive and less critical. We way too easily consume and accept ideas, designs, concepts out there, sometimes without even questioning their validity and correctness. Instead of debating, we agree; instead of criticizing, we accept — or simply click away and ignore the discussion altogether. And this is the reason why many conversations in the community do not get a critical mass of interest.

Design-pet-peeves-community in Dear Web Design Community, Where Have You Gone?
Web design discussions on Quora and StackExchange sites are wonderful examples of websites that we have already started using to exchange ideas, ask questions and conduct valuable design discussions.

The worrying part is that the number of the less experienced active contributors has increased exponentially. Due to that, I am afraid that the community is not led in the right direction. The true leaders — professional, knowledgeable designers and coders — are busy. Busy with their work or perhaps they feel that it’s no longer worthwhile for them to spend much time contributing. I hope this attitude can change. We need more professionals to find time to contribute and help to teach others. After all, so many of us are self-taught. And where would we be today without the contributions of others?

We need more meaningful and helpful discussions within our community. Finding time is difficult, but we don’t have to jump into writing or commenting with both feet. An occasional comment, tweet, reply or short blog post about whatever it is we’ve learned or thought would already help; it might just as well invoke thought-provoking discussions by other members of the community. As artisans of the Web, we love to discuss things that are important to us — be it design, coding, writing or anything else. We might have no time for profound writing, but we certainly have enough time to suggest an idea and encourage our friends to join in the discussions. Taking just a couple of minutes every day to think about the craft we love will bring us further and accumulate the wisdom within our community.

Francisco Inchauste summarized this point nicely in one of our recent conversations: “Everyone has a perspective and experience to share. Without more perspectives, we’ll become limited in our growth. The community is only as strong as our weakest people. To improve, we need to lift others up by helping to educate and guide.”

We Need to Curate Valuable, Meaningful Resources

Probably the easiest way to jump into design discussions would be by observing and replying to the tweets marked with the hashtag #design. Well, that’s what I thought before adding the #design column on my Tweetdeck a couple of weeks ago. After a couple of days of occasional scanning of tweets in that stream, I did find a couple of interesting discussions; however, more often than not I stumbled upon loud, inaccurate and promotional tweets which led to tutorials, freebies or inspirational websites.

Don’t get me wrong: I have nothing against these resources per se, but I don’t quite understand why we, multi-talented, versatile craftsmen of the Web, are restricting the use of such a powerful medium as Twitter primarily to these resources. Why don’t we use it for meaningful discussions as well? Have we somehow become blindfolded by pure eye-candy or tremendous technological opportunities we have now with jQuery, CSS3 and HTML5? We are experimenting with visual and interactive enhancements in our tutorials and our designs, yet we tend to forget about the fundamentals of our work — our design principles, the quality of our processes and the integrity of our creations. We could all benefit from writing and talking about the ways we work, the decisions we make and the solutions we come up with.

Just compare finding a jQuery slideshow plugin against finding a practical resource on UX design patterns. Or finding a social media icon set against finding detailed case-studies written by experienced designers. Valuable, useful resources are becoming rarities and unfortunately many of them just do not get the attention they well deserve.

We need to support and curate the creators of thought-provoking and valuable resources and help them maintain and support these resources. We need to support them because they are the ones that raise questions and seek for answers; they are the ones that support the maturity of our profession; they are the ones that are not afraid to question status quo and encourage experimentation, sharing and innovation — the so needed attributes of our exploding industry.

Html5-boilerplate-community in Dear Web Design Community, Where Have You Gone?
HTML5 Boilerplate is a remarkable example of a cooperation of dozens of Web designers who share their thoughts and insights to create something useful for all of us to use. Unfortunately, many useful projects on Github do not manage to get such strong community-wide support.

We can use our communication channels wisely and invite our colleagues and friends to join in the discussions, sharing opinions and spreading the word about those of us who truly dedicate their time and effort to produce useful, valuable resources. I am certain that by doing so, we’ll be able to unleash the remarkable potential for a strong and supportive exchange of ideas and expertise.

The emerging conferences like Fronteers, Brooklyn Beta and New Adventures in Web Design show very well which benefits a strong community has: it is inspiring, helpful, forward-thinking, challenging. I will never forget the moment when I was sitting among the attendees during one of the conference’s talks and my neighbor turned to her colleague and whispered, almost mindlessly: “I feel that these talks are going to change my views of design forever”. I’d love to experience this feeling in our online discussions, too.

Community-Wide Discussions and Polls

There is so much content out there so that our focus is distributed among dozens of resources and discussions every day; it’s not easy to see how exactly we could lead large community-wide discussions. A blog’s audience is usually limited by its RSS-subscribers, random visitors and social reach of the blog owner. Spreading the word in social circles outside this audience might work to some extent, but it usually won’t help reach the vast majority of the community, especially if the blog is relatively small or obscure.

We need to have some sort of a mechanism that would connect like-minded designers and developers which are not already connected via other media. Twitter’s hashtags are a good example of ways how we are already trying to solidify exchange of ideas and thoughts. But we can make it better.

So what if we had a consistent standard in place? We could strengthen these exchanges through hashtags by developing and having the community adapt some common tags to use en mass. For instance, #design_type, #design_layout, #design_js and others. We could even conduct community-wide polls (#design_poll) that could be easily recognized and retweeted by users with smaller as well as larger followship, thus spreading the word and strengthening the active participation within the community. We could have a website tracking these hashtags, presenting the most popular discussions and filtering spam and other malicious activities.

The same mechanism could be used for supporting valuable design resources and their creators as well as passionate designers who write insightful articles or produce useful resources. When elaborated properly, this approach will make it easier for us to connect and participate in large, community-wide discussions. These discussions might even spread beyond the limits of our community, providing a different perspective on our conversations by professionals from other industries.

So What Exactly Should We Be Discussing?

As Web designers, we’ve come a long way. We’ve shaped a new, strong industry and developed professional design processes. We also have learned a lot on our journey — be it some bits of psychology, copywriting, marketing or other related disciplines. If you think about it, that’s already a massive achievement, and so we have a damn good reason to be proud of what we have contributed to all these years altogether.

However, like in any other industry, we need to permanently revise our practices, innovate and improve our design processes. In fact, there are a number of things that might need to be extended and reconsidered. Let’s cover the not-so-obvious ones.

Our Professional Vocabulary

As mentioned above, when it comes to Web design, there are always so many different disciplines and professions involved, that it is becoming increasingly difficult to make sure that everybody involved is on the same page in terms of vocabulary used in our discussions.

Misunderstandings between designers, developers and stakeholders are the running joke in our community. And there is a reason behind it: the vocabulary we are using has dramatically evolved over years — it was primarily expanded, sometimes with abbreviations and concept titles which are counter-intuitive or misleading. We have applied terms from print design to Web design; we have coined new terms for new concepts and methodologies; we have introduced terms that might have become outdated today (think of the outdated floppy disk symbol for the “Save” icon). The result is a quite sloppy and inconsistent vocabulary — we often have various terms describing one concept, or one term describing various concepts.

Unsuckit-community in Dear Web Design Community, Where Have You Gone?
Unsuck It explains terrible business jargon in plain words. Hopefully, we won’t need something like this for the design community as well.

For instance, there are design attributes that we call ‘responsive’, ‘adaptive’ or ‘flexible’, but what exactly do we mean when we apply them? Different designers might even have a different idea on what they mean with the word “design”; is it visual design, design as a concept or maybe UX design? And what is UX exactly anyway? The same problem occurs when we discuss terms such as “HTML5″, “page”, “fold”, “navigation” and others. Just imagine how devastating the results would be if any other professional industry, e.g. medicine, wouldn’t have a common vocabulary for its technical terms?

At the New Adventures in Web Design Conference last month, Dan Rubin talked about this very issue, saying that the industry as a whole needs a common grammar and vocabulary. He asserts that the ones we have now, were perhaps somewhat hastily chosen. And that with some careful thought and planning, we can design a much more accurate vocabulary to help avoid the confusion which can stem from the existing one.

We could use more precise and intuitive terms which would be based on certain concepts that are familiar to us and other professionals. As Dan noticed, “responsive design”, coined by Ethan Marcotte, is an excellent example of such a term. It derived from the concept of “responsive architecture” which explores how physical spaces can respond to the presence of people passing through them. So instead of creating unchanging spaces that define a particular experience, they create spaces in which inhabitants and structure can — and should — mutually influence each other.

Applied to Web design, it means that we could treat our designs (very much like these spaces) as facets of the same experience. The concept can be easily explained and understood. It’s not too technical, it’s not too abstract and it’s not chosen randomly. It is rational, visual and memorable which are all excellent qualities for a term describing a new design approach.

Perhaps we could create a standardized design language which would accumulate our vocabulary and provide us and our stakeholders with a consistent and unambiguous terminology for our discussions. Finding a common vocabulary is a challenging task and it’s an ongoing process that would need permanent revisions and updates.

Our Design and Coding Practices

Actually, we need to refine more than our design vocabulary: our design and coding practices require regular revisions as well. Faced with new design requirements in our regular work, we keep conquering design problems and exploring appropriate solutions for them. These activities are the driving force behind learning; they heavily influence the decisions we make once we approach similar design problems in the future. This is what makes us experienced professionals.

Method-and-craft-2-community in Dear Web Design Community, Where Have You Gone?
Method and Craft is an excellent website where professional designers and developers are sharing tips about their workflow and design processes. This is a goldmine for newcomers to the industry.

We learn something new every single day. We discover a new CSS trick or a new UX tweak. An obscure Photoshop technique or a beautiful font pairing. Our convenient coding techniques are gradually dating as browsers become more capable and so we discover that certain browser hacks are no longer necessary. We find new ways of how certain common conventions could or should be adjusted. All these small things we discover in our daily routine help us improve our skills and workflow. Actively exchanging thoughts and methodologies with your colleagues will mutually benefit and improve the overall design and coding practices.

We shouldn’t be afraid of asking challenging questions or posing bold statements. If you feel that we should all stop using CAPTCHAs, then say so and explain your rationale behind the argument. If you think that there is a way to reinvent scrollbar, say so and explain how exactly you imagine this technique to work and why it’s better. And if you are struggling with a personal problem and would like to hear how the community members managed to solve it, say it, too — it’s very likely that other members of the community have had similar problems and will be glad to join the discussion and help out.

Our Professional Ethics

Saying “no” can be extremely difficult sometimes, especially when personal or financial incentives are at play. However, as professionals, we owe it to ourselves and to our projects to not get enticed by offers and suggestions that do not wholeheartedly coincide with our intentions and objectives. The former can bring temporary benefits, but if applied consistently, the latter will bring long-term benefits.

We need to become more aware of the ethics that we should be following while designing, coding, writing, editing and publishing on the Web. The times when soulless copy-pasted press releases were used “as-is” across online publications are long gone, so let’s stop doing that. Cheap generic stock photos neither visualize nor support the article, so let’s stop using them, too. Professional publications often use “nofollow” attribute to block link-droppers from gaining Google’s link juice; and most users will not click on links titled “Milestone Professional Web Design Agency”, so let’s stop doing it as well. There are many similar examples which we can use to adapt, and optimize our online behavior accordingly.

Ethics-community in Dear Web Design Community, Where Have You Gone?
The website Ethics and Web Design is a valuable resource which covers the fundamentals of professional ethics in our industry.

As content creators, we often depend on advertising, and that’s sometimes the necessary evil that we need to accept to be able to monetize our dedicated writing efforts. And there is nothing wrong about it. However, we need to set clear limits to how the advertising can and how it cannot be presented on our websites. For example, text link advertising and sponsored posts should always be clearly marked as such. We should have a strict separation between content and advertising. Each of us could design a set of personal principles for his or her websites (publishing policy), publish these rules online and stick to them no matter what. This way the readers will respect you and appreciate the simple fact that you are strongly committed to quality work.

We could benefit from being more critical about our content and the way we present it online. It means paying more attention to copy, consistency of our writing style, quality of images and image captions, design of code snippets etc. These details give our writing a different tone; they empower our thoughts and make the content more trustworthy and reliable. Why don’t we make our work more challenging by trying to make every article we publish at least a tiny bit better than the previous one? We could try not to just “put stuff out there”, but curate our delicate ramblings, making sure that every published article has the highest level of quality that we can afford for it. A style guide can be helpful in this case, especially for larger websites.

Photoshop-community in Dear Web Design Community, Where Have You Gone?
Photoshop Etiquette Manifesto is a website listing helpful and subtle suggestions to organize your Photoshop documents — making the transfer of them less painful.

In Web design it means to stop using anti-patterns — design patterns which are created specifically to trick our users. Instead, we should respect and advocate for our audience and protect their interests. Think about building loyal, honest, authentic user base for your own project or your client’s brand and think about the quality of relationships you create with each user.

Not only should our designs be usable for our visitors, but also our code should be maintainable for developers. Just like with content, you could come up with your set of standards which you’d like to follow in your work, make it public and stick to it. Make it your final checklist item before you hit that “Publish” or “Commit” button. That’s what will make people look up to you and respect your work.

Bottom line: we should strive for responsible Web design that not only embraces best design and coding practices, but also respects our publishing policies, protects the interests of our users and supports the professional work of our colleagues.

Our View of Web Design Trends

As professionals who care about producing beautiful, top-notch products for the Web, we love to explore innovative design and coding techniques. We love to take them apart and put them together again, learning about their potential during the process. We love to discuss them with our colleagues and keep them in mind for upcoming projects. The more other designers use these techniques, the more important they become to us. Among ourselves, we start to respectfully call them trends.

Nevertheless, trends can be dangerous and misleading beasts. They give us an exciting feeling of having a valuable insight that most of our colleagues don’t have yet. We feel fortunate to have discovered one early enough to use it effectively before it becomes common practice. Trends are precursors of the “next big thing,� and so we pay attention to them.

I can’t help but think that trends seem to be spectacularly overrated in our industry. Often they are regarded as bulletproof solutions, respected and universally accepted for the simple reason that they are innovative and widely used (think of drop shadows or text shadows, for example). I believe that we tend to adopt trends too quickly, often getting carried away by their originality rather than understanding their purpose. This should not be the case. Trends are not a panacea for all of the problems we encounter, and often they don’t even provide an optimal solution for the situation in which they were used in the first place.

Not to say that trends are unimportant, though. They are important, especially when they foster innovation and make us reconsider our design decisions. They can challenge us to be more effective and more thoughtful in our designs. Yet they inevitably fail in one particular regard.

103-russian-web-design in Dear Web Design Community, Where Have You Gone?
We can learn a lot simply by examining obscure websites out there, such as Mospromstroy, the website of an industrial construction company in Moscow. The code is far from optimal, but the website itself reveals some interesting design decisions.

One thing I’ve learned to love over the last year is thoroughly examining unfamiliar foreign websites; Russian and Korean websites, to be specific. I feel inspired and empowered just going through them, creating wireframes from them, exploring their interaction patterns and analyzing the source code. I love wondering about the decisions that the designers must have made and the rationales behind those decisions. However, I can only speculate about them; ultimately, I cannot know the context in which these decisions were made.

This lack of context is the main reason why design trends should be approached cautiously. If we don’t know why a certain technique was used, then we need to properly test and validate it before applying it into our own designs. This is the part of the process that I find is often missing in discussions about trends.

We should observe and analyze trends but not consider them as finished “off the shelf� solutions. Instead of following them, we should be confronting them, improving on them and replacing them with our own. Adding elements to our designs merely for the sake of visual or functional interest is counter-productive. We should rather aim for designs that serve their purpose independent of volatile trends. Why not focus on approaching trends responsibly; building on them when they add meaning to a design and ignoring them when they do not fit the contextual scope of the design problem. This would make our websites original, well-formed and timeless.

Learning From The Past

While trends tell us what designers are doing now, we could expand our skills by drawing on our heritage, too. As designers, we are essentially problem-solvers. We analyze existing problems, learn the given objectives and requirements and then start searching for meaningful solutions. However, initially, it is not a clever visual nor technical approach that we are looking for. We are looking for an idea.

At this stage, what helps us most is our experience and creative thinking. And this is exactly where our rich history of visual communication is particularly useful. By studying lessons from the past, we can better understand how ideas and techniques have emerged and evolved over time. We can learn what approaches other professionals have taken to solve the problems facing them — problems that we still might be struggling with today or will in the near future.

Designishistory-community in Dear Web Design Community, Where Have You Gone?
Websites like Design Is History, Smart History and Graphics Atlas are all excellent resources on the history of graphic design, visual communication and the evolution of design processes. We can learn a lot about our craft by exploring them thoroughly.

Andy Clarke’s talk at the New Adventures in Web Design conference was intriguing and pointed out the need for designers to learn about the importance of storytelling in Web design. Andy shared a unique perspective in his presentation, saying that we can shape how users not only interact with content, but consume it in general. He drew a comparison to comic books and Western movies from the 1960s, which used various techniques to dictate the pace of how their information was consumed — be it through a stretch of silence in a movie or the shapes of panels in comic strips.

We could use this technique in our designs to keep readers in the grip of our content just a little longer. Instead of letting users not have to think, we could do the opposite and engage as well as intrigue them (a good example would be of the Ben the Bodyguard website).

Ben-body-community in Dear Web Design Community, Where Have You Gone?
Ben The Bodyguard keeps you on the site longer than you expect.

We shouldn’t hesitate to apply concepts from other time periods or other media into our designs. The concepts actually don’t even have to be design-related. Instead of thinking in terms of shadows, gradients and rounded corners, maybe we should be thinking in terms of tension, timing and narrative.

Next time you’re looking for an idea, pick up that book you’ve always enjoyed reading and read it with a different perspective. Then, search for any unusual points of view that might be worth bringing to the forefront in your next project. Once you’ve found one, grasp this moment, as this is the very second when a unique, innovative design is born.

In Conclusion

As our industry matures, so will our practices and the quality of our work. We may have successfully solved many important problems in our short history, yet there is still much to be done. Writing and talking about the ways we work, the decisions we make and the solutions we come up with will benefit each of us. We could explore the connections between our discipline and other established industries as well as revise and reinforce our professional vocabulary and our ethics.

Perhaps we could all dedicate 10 to 15 minutes of our time to the community every day. We could (and should) make this a firm personal commitment and encourage each other to take part. Find some time to leave a meaningful comment, support a valuable resource, write a short article about what you’ve learned. All of these contributions matter and will prompt meaningful and inspiring discussions. For starters, we could start raising awareness of our commitments by using the hash tag #wdcommunity.

I strongly believe that if we keep doing this every single day, we’ll wake up one day marvelling at how remarkable our community has become. I, for one, am eagerly looking forward to this day.

Huge thanks to Francisco Inchauste, Chris Shiflett, Nishant Kothary, Paul Scrivens, Andy Clarke, Dan Rubin and others for their valuable contributions and suggestions for this article.


© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: , , ,


CSS: Innovative Techniques and Practical Solutions

Advertisement in CSS: Innovative Techniques and Practical Solutions
 in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions  in CSS: Innovative Techniques and Practical Solutions

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

Css-187 in CSS: Innovative Techniques and Practical Solutions

CSS Box Shadow & Text Shadow Experiments
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

Triangle in CSS: Innovative Techniques and Practical Solutions

CSS3 Depth of Field
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

New-css-techniques-119 in CSS: Innovative Techniques and Practical Solutions

Art Deco Selectable Text
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

Art-deco in CSS: Innovative Techniques and Practical Solutions

CSS3 :toggle-button without JavaScript
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

Css-268 in CSS: Innovative Techniques and Practical Solutions

About War and Bananas
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

Css-150 in CSS: Innovative Techniques and Practical Solutions

WebKit Clock
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Css-146 in CSS: Innovative Techniques and Practical Solutions

Pure CSS Slideshow
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

New-css-techniques-102 in CSS: Innovative Techniques and Practical Solutions

CSS Dock
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

New-css-techniques-108 in CSS: Innovative Techniques and Practical Solutions

Andrew Hoyer
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

New-css-techniques-197 in CSS: Innovative Techniques and Practical Solutions

Type study: An all CSS button
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

New-css-techniques-103 in CSS: Innovative Techniques and Practical Solutions

3D Text
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

3d-text in CSS: Innovative Techniques and Practical Solutions

Spin those Icons with CSS3
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

Css-111 in CSS: Innovative Techniques and Practical Solutions

The Shapes of CSS
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

Css-272 in CSS: Innovative Techniques and Practical Solutions

CSS background image hacks
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Background-image-hacks in CSS: Innovative Techniques and Practical Solutions

Making Better Select Elements with CSS3 and jQuery
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

Css-190 in CSS: Innovative Techniques and Practical Solutions

CSS-Only 3D Slideshow
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “betterâ€� than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

New-css-techniques-157 in CSS: Innovative Techniques and Practical Solutions

Have Fun with Borders
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

New-css-techniques-223 in CSS: Innovative Techniques and Practical Solutions

Animated CSS3 Owl
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

Owl in CSS: Innovative Techniques and Practical Solutions

CSS Social Sign-in Buttons
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

Css-258 in CSS: Innovative Techniques and Practical Solutions

Rotating color cube box with CSS3 animation, transforms and gradients
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

Css-260 in CSS: Innovative Techniques and Practical Solutions

CSS3 Demo: 3D Interactive Galaxy
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

Galaxy in CSS: Innovative Techniques and Practical Solutions

Getting Hardboiled with CSS3 2D Transforms
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available as well.

Css-261 in CSS: Innovative Techniques and Practical Solutions

How to create Microsoft Office Minibar with jQuery and CSS3
Janko Jovanovic explains how to create a Microsoft Office Minibar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

New-css-techniques-171 in CSS: Innovative Techniques and Practical Solutions

Angled Content Mask with CSS
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Bicycle in CSS: Innovative Techniques and Practical Solutions

Rotating Feature Boxes
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Feature-boxes in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 box-shadow page curl effect
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Curl in CSS: Innovative Techniques and Practical Solutions

Pure CSS Folded-Corner Effect
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Fold in CSS: Innovative Techniques and Practical Solutions

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS3
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Smooth in CSS: Innovative Techniques and Practical Solutions

Fade Image Into Another
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

Web-services-030 in CSS: Innovative Techniques and Practical Solutions

New @Font-Face Syntax: Simpler, Easier
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax. Please notice that this technique no longer works in Internet Explorer 9.

New-css-techniques-174 in CSS: Innovative Techniques and Practical Solutions

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

New-css-techniques-168 in CSS: Innovative Techniques and Practical Solutions

Quick Tip: Mimic a Click Event with CSS
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Css-200 in CSS: Innovative Techniques and Practical Solutions

Responsive Images: Experimenting with Context-Aware Image Sizing
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

New-css-techniques-121 in CSS: Innovative Techniques and Practical Solutions

CSS powered ribbons the clean way
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

New-css-techniques-123 in CSS: Innovative Techniques and Practical Solutions

Create a centred horizontal navigation
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

New-css-techniques-198 in CSS: Innovative Techniques and Practical Solutions

Pure CSS3 Post Tags
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape.

Tag-name in CSS: Innovative Techniques and Practical Solutions

Styling children based on their number, with CSS3
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

New-css-techniques-115 in CSS: Innovative Techniques and Practical Solutions

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

New-css-techniques-165 in CSS: Innovative Techniques and Practical Solutions

Pure CSS(3) accordion
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Css-114 in CSS: Innovative Techniques and Practical Solutions

Target iPhone and iPad with CSS3 Media Queries
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

New-css-techniques-193 in CSS: Innovative Techniques and Practical Solutions

Inline Boxes with Bottom Alignment
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

Css-168 in CSS: Innovative Techniques and Practical Solutions

Transparent CSS Sprites
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out� transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Css-170 in CSS: Innovative Techniques and Practical Solutions

Mimic Equal Columns with CSS3 Gradients
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

New-css-techniques-207 in CSS: Innovative Techniques and Practical Solutions

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recastingâ€� elements.

Center in CSS: Innovative Techniques and Practical Solutions

Clearing Floats with Overflow
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

Overflow in CSS: Innovative Techniques and Practical Solutions

Different Transitions for Hover On / Hover Off
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Layout in CSS: Innovative Techniques and Practical Solutions

Using CSS Text-Shadow to Create Cool Text Effects
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

New-css-techniques-186 in CSS: Innovative Techniques and Practical Solutions

Fluid Width Equal Height Columns
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

New-css-techniques-204 in CSS: Innovative Techniques and Practical Solutions

CSS Box-Shadow:Inset
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

Inset in CSS: Innovative Techniques and Practical Solutions

Flexible Navigation
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

Deaxon in CSS: Innovative Techniques and Practical Solutions

Circle Zoom
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

Circle in CSS: Innovative Techniques and Practical Solutions

Last Click

CSS3 Memory
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

New-css-techniques-199 in CSS: Innovative Techniques and Practical Solutions

CSS 3D Scrolling @ BeerCamp at SXSW 2011
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

New-css-techniques-175 in CSS: Innovative Techniques and Practical Solutions

50 New Useful CSS Techniques, Tutorials and Tools
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

Css-237 in CSS: Innovative Techniques and Practical Solutions


© Vitaly Friedman for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags:


Desktop Wallpaper Calendar: January 2011

Advertisement in Desktop Wallpaper Calendar: January 2011
 in Desktop Wallpaper Calendar: January 2011  in Desktop Wallpaper Calendar: January 2011  in Desktop Wallpaper Calendar: January 2011

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 almost two years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

As the new year begins, we will continue to nourish you with a monthly spoon of inspiration for the next 12 months. This post features 65 free desktop wallpapers created by artists across the globe for January 2011. 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 and
  • 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?

Update: you may be interested in Smashing Magazine January 2011 Windows 7 Theme (calendar) and Smashing Magazine January 2011 Windows 7 Theme (no calendar).

So what wallpapers have we received for January 2011?

Creative Chocolate

"January is a very cold month and it’s a perfect season to drink an hot chocolate. Even better if it’s a Creative Chocolate!" Designed by Fabrizio Venanzi from Italy.

Creatchoco 79 in Desktop Wallpaper Calendar: January 2011

One/2011

"And the winner is: January 2011! All the best for the new year!" Designed by Marco Palma from Italy/Germany.

One 2011 41 in Desktop Wallpaper Calendar: January 2011

A Handy New Year

"Being Designers we tend to use our hands a lot, in order to portray our most basic feelings onto a Calendar we substitute the numbers with our hands." Designed by siewhui from Singapore.

A Handy Year 13 in Desktop Wallpaper Calendar: January 2011

On the ground

Designed by Nathalie Ouederni from the Netherlands.

On The Ground 65 in Desktop Wallpaper Calendar: January 2011

Frozen World

"When it is too cold outside you feel like the whole world is frozen…" Designed by Rumena Zlatkova from Bulgaria.

Frozen World 89 in Desktop Wallpaper Calendar: January 2011

Treelight

Designed by Nathalie Ouederni from the Netherlands.

Treelight 38 in Desktop Wallpaper Calendar: January 2011

Resolution Bottle

Designed by Tim Fritz from USA.

Resolution Bottle 3 in Desktop Wallpaper Calendar: January 2011

Icy Tree Smashing

Designed by Vlad Gerasimov from Russia.

Icy Tree Smashing 8 in Desktop Wallpaper Calendar: January 2011

Drupal 7 is coming

"More beautiful than ever!" Designed by Jaro Mlkvy from Slovakia.

Drupal 7 Is Coming 62 in Desktop Wallpaper Calendar: January 2011

Silver Winter

Designed by Violeta Dabija from Moldova.

Silver Winter 52 in Desktop Wallpaper Calendar: January 2011

Quiet Please

Designed by Diana Samoila from Romania.

Quiet Please 20 in Desktop Wallpaper Calendar: January 2011

Creepy Forest

"The cold, rainy winter carries with it a surreal, gloomy and threatening ambience…" Designed by Ron Gilad from Israel.

Creepy Forest 19 in Desktop Wallpaper Calendar: January 2011

Little Gizmo

"Little Gizmo would like to wish you a happy and prosperous New Year." Designed by Mad Sprocket from USA.

Little Gizmo 25 in Desktop Wallpaper Calendar: January 2011

Winter Fun

"Winter is the greatest time to walk, ski, play snowballs and have fun with friends." Designed by cheloveche.ru from Russia.

Winter Fun 11 in Desktop Wallpaper Calendar: January 2011

Winter Light

Designed by Patr’cia Segade from Portugal.

Winter Light 56 in Desktop Wallpaper Calendar: January 2011

Snowman

"I wanted to convey something wintery, but still joyful, to keep me upbeat when I start up my laptop every chilly morning." Designed by Steph Struthers from USA.

Snowman 8 in Desktop Wallpaper Calendar: January 2011

Winter’s Warmth

"Although England’s winter has been very, very cold – it’s also been bright and colourful. I can’t remember seeing so many outrageously “warm” sunsets. Definitely not going to complain. This was actually taken on Christmas Day. Woohoo! Happy 2011 to you all. :)" Designed by Sasha Bell from England, UK.

Winters Warmth 34 in Desktop Wallpaper Calendar: January 2011

Lost in Winter’s Fog

"One of the most beautiful things about winter is the thick, dense fog we so often get. Sometimes it’s so bad you can’t see 100 yards in front of you. It’s maddening but beautiful at the same time. Happy 2011!" Designed by Olivia Bell from England, UK.

Lost In Winters Fog 40 in Desktop Wallpaper Calendar: January 2011

Winter Forest

"Happy New Year!" Designed by Oxana Kostromina from Poland/Russia.

Winter Forest 33 in Desktop Wallpaper Calendar: January 2011

Hazy dawn

"I’ve always created wallpapers for my own use. This time I share one of them with you!" Designed by Agnese Ločmele from Latvia.

Hazy Dawn 4 in Desktop Wallpaper Calendar: January 2011

Love out of Focus

Designed by Sara Duan.

Love Out Of Focus 13 in Desktop Wallpaper Calendar: January 2011

Snow Goggles

"Perfect Powder day at Zwšlferhorn (St. Gilgen, Austria)" Designed by Maroni Gschwandtner from Austria.

Snow Goggles 93 in Desktop Wallpaper Calendar: January 2011

In the Snow

"Hidden beauty in the snow." Designed by Rumena Zlatkova from Bulgaria.

In The Snow 86 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Be careful – You won’t know which kind of people you will meet. There are good, evil, intrigue, etc. Open your eyes big while seeing the big and awesome world.” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Be Careful 62 in Desktop Wallpaper Calendar: January 2011

Going Home

"Peaceful scenery around my hometown in winter." Designed by Alexander Franzelin from Italy.

Going Home 51 in Desktop Wallpaper Calendar: January 2011

Frost Bitten

"A collaboration between two sisters. One’s a photographer and the other is a designer." Designed by Denise Johnson and Sharleen Heist from USA.

Frost Bitten 48 in Desktop Wallpaper Calendar: January 2011

New Decade

"It’s time to welcome New Year’s 2011 – and say a fond goodbye to 2010.New Year is expected to bring good luck and charm for people and this is the reason why everybody love to celebrate it with fun and enjoyment.I designed this wallpaper to welcome the new year and show the Transition between the two years." Designed by Neelam Asrani from India.

New Decade 62 in Desktop Wallpaper Calendar: January 2011

Twisted Winter

"A cold, vacant, and erie scene of tangled branches. Enjoy!" Designed by Colin Oakes from Canada.

Twisted Winter 68 in Desktop Wallpaper Calendar: January 2011

Hello 2011

"An old rotary phone breaking out of 2 old polaroid photos." Designed by Kristen Cook from USA.

Hello 2011 61 in Desktop Wallpaper Calendar: January 2011

Smashing January

"My journey of 2011 starts with Smashing Magazine" Designed by Marina Aftab from Pakistan.

Smashing January 52 in Desktop Wallpaper Calendar: January 2011

New Year, New Goals

"A New Year means a New Start! Get out and do something this year that impresses yourself." Designed by WaltWinchel from USA.

New Year New Goals 23 in Desktop Wallpaper Calendar: January 2011

Yeti weekends

"The winter sports season has arrived, beware with the deadly Yeti." Designed by joaomalveiro from Portugal.

Yeti Weekends 45 in Desktop Wallpaper Calendar: January 2011

Lost Wiseman

"I Decided to make a little joke with the 3 wiseman, so I made them lost,so insted they’re in the desert they’re in a snow region." Designed by Rui Madeira from Portugal.

Lost Wiseman 90 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Put your ear down close to your soul and listen hard – I am who I am. I am myself. I don’t want to be anyone else. I am unique.” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Unique 29 in Desktop Wallpaper Calendar: January 2011

A Door to a New Year

Designed by Christine Bradway from USA.

A Door To A New Year 26 in Desktop Wallpaper Calendar: January 2011

Dear Diary

Designed by Maggi Giovanni from Italy.

Dear Diary 70 in Desktop Wallpaper Calendar: January 2011

Bull fight, the ancient sport of heroes

"Bull fighting, called as Jallikattu is an ancient traditional sport in which young Indian men wrestle bulls with their bare hands. This hand drawn picture depicts the spirit of the gutsy game." Designed by Narendar . N from India.

Bull Fight The Ancient Sport Of Heroes 99 in Desktop Wallpaper Calendar: January 2011

Winter Light

"I wish you all a very happy and healthy new year!" Designed by Nathalie Ouederni from the Netherlands.

Winter Light 48 in Desktop Wallpaper Calendar: January 2011

CMYK 2011

"CMYK and Prinitng elements" Designed by Sherif Saleh from Egypt/France.

Cmyk 2011 85 in Desktop Wallpaper Calendar: January 2011

Smashing 2011

"A smashing 2011!" Designed by Minhaj Mohamed from Sri Lanka.

Smashing 2011 22 in Desktop Wallpaper Calendar: January 2011

2010 memories

"2010 Memories : As the year 2010 approaches its last few days, it’s time to look back on the previous 12 months. All 2010 photos." Designed by Sahra Tamo from Syria.

2010 Memories 72 in Desktop Wallpaper Calendar: January 2011

Global Greetings

Designed by Sarah Hufkens from Belgium.

Global Greetings 78 in Desktop Wallpaper Calendar: January 2011

New life

"Forget all bad memories,welcome something new in our lives…" Designed by Nishith from India.

New 76 in Desktop Wallpaper Calendar: January 2011

Purple Dze

"The fog that clouds our thoughts on those rainy winter days." Designed by Nicole Dominguez from United States.

Purple Daze 50 in Desktop Wallpaper Calendar: January 2011

New Life

"I wish you an Happy New Year! After 12 months of events, emotions, moments, it’s time to restart and continue from the end. Hope everyone has the opportunity to grant his dreams!" Designed by Davide Reppucci from Italy.

New Life 33 in Desktop Wallpaper Calendar: January 2011

Nike

"Happy New Year :)" Designed by Marta Miazek from Poland.

Nike 26 in Desktop Wallpaper Calendar: January 2011

Snow Walk

"My dog enjoying the first snowfall at the terrace. After the first walk, she tried to eat the snow." Designed by Luis Herrero Jimenez from Spain.

Snow Walk 23 in Desktop Wallpaper Calendar: January 2011

Tea and Tiles

Designed by Pietje Precies from The Netherlands.

Tea And Tiles 42 in Desktop Wallpaper Calendar: January 2011

New Year Celebration

Designed by Maggiey from India.

New Year 88 in Desktop Wallpaper Calendar: January 2011

Silent Love

Designed by Han Htut Zaw from Myanmar.

Silent Love 81 in Desktop Wallpaper Calendar: January 2011

Tsuru

"An ancient Japanese legend promises that anyone who folds a thousand origami cranes will be granted a wish by a crane, such as long life or recovery from illness or injury." Designed by Pedro Nobre from Portugal.

Tsuru 17 in Desktop Wallpaper Calendar: January 2011

Smashing Magazine 2011

"Celebrate a new year with a smash!" Designed by knsqnt interactive from Germany.

Smashing Magazine 2011 36 in Desktop Wallpaper Calendar: January 2011

Get started with drupal 7

"Drupal 7: the best version of Drupal yet!" Designed by Jaro Mlkvy from Slovakia.

Get Started With Drupal 7 30 in Desktop Wallpaper Calendar: January 2011

Symbol of Love

"Let the coming new year be a start for One love of the world. Humans across all the countries love each other without any difference. With an open heart stop the wars and welcome peace and love between individuals. The Taj mahal which stands as a symbol of eternal love be taken as an inspiration and join the peace for human." Designed by Mohamed rafi from India.

Symbol Of Love 17 in Desktop Wallpaper Calendar: January 2011

Communion Cups & Someone’s Coat

Designed by Brad Cerasani from Canada.

Communion Cups 038 Someone S Coat 40 in Desktop Wallpaper Calendar: January 2011

Lumanti

"Lumanti is nepali word which means remembrance. Rememberence of year 2010, every small to big things, sadness to happiness, and our every moment of 2010." Designed by Moksha Design Studio from Nepal.

Lumanti 41 in Desktop Wallpaper Calendar: January 2011

International 2011

"We love typography and we’ll love the year 2011." Designed by LOTUM from Germany.

Lotum 40 in Desktop Wallpaper Calendar: January 2011

Another Chance

"Hope for the coming year." Designed by Kellie Gave from USA.

Another Chance 72 in Desktop Wallpaper Calendar: January 2011

Wonderful Winter

"A great new year with these lovely deer!" Designed by Agnes Swart from The Netherlands.

Wonderful Winter 61 in Desktop Wallpaper Calendar: January 2011

Flowers

"”Hold me tight. Smile to me. You are special. You are not like any of them out there. I feel comfortable with you. So please, hold me tight and never let go. Will you?” – Juanita OMFª" Designed by Juanita Ooi from London, UK (Originally Malaysia).

Never Let Go 19 in Desktop Wallpaper Calendar: January 2011

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 favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below! Wishing you a smashing Two-Thousand Eleven, guys!

(ik) (vf)


© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress