Author Archive

Desktop Wallpaper Calendar: June 2012


  

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd.

This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for June 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Without Angry

"This bird is cool not angry :-)." Designed by Tinjo Thomas from India.

Smashing Wallpaper - june 12

Hello Summer

"Flying people are saying hello to summer." Designed by Paul Capcan from Moldova.

Smashing Wallpaper - june 12

Chromatic Baba

"Baba(sadhu) is the Hindu ascetic who has renounced caste, social position, money, and authority and occupies a special place in Hindu society.He absorbed all colors from a spiritual life, devoid of material pleasure, mostly engaged in visiting holy places." Designed by Yoshita Singhai from India.

Smashing Wallpaper - june 12

Fontstache

"This piece pays homage to Mr. Roger Hargreaves, creative kids author to such imaginative stories as Mr. Messy and my personal favourite: Mr. Bounce.We utilized the ‘Curly Brackets’ and titled each according to the font type that was used. Appropriate for the month of June as we celebrate Father’s Day this month." Designed by Pop Up Factory from Milton, Ontario, Canada.

Smashing Wallpaper - june 12

Go Nuts For Donuts

Designed by Bonnie Bladen from USA.

Smashing Wallpaper - june 12

Brjs – Playing Cards

Designed by Gisela Eblagon from Argentina.

Smashing Wallpaper - june 12

Sunset In Jamaica

"Photo from a recent trip to Jamaica edited to give a retro look and feel." Designed by Tommy Digiovanni from USA.

Smashing Wallpaper - june 12

Beach

Designed by Lotum from Germany.

Smashing Wallpaper - june 12

Dreams

"This is the summer of dreams. Go get them!" Designed by Nandor Tamas from USA.

Smashing Wallpaper - june 12

Friendly Fire

Designed by Roland Szabo from Hungary.

Smashing Wallpaper - june 12

June Romance

"Mark and Jenny Linn are, perhaps, the dreamiest and the most romantic couple in the whole world. Their love story began in a vintage San Francisco bookstore 5 years ago and continues till the present day. In June Mark and Jenny usually arrange aspecial dinner to watch the night sky and make a common wish for the future, while watching the falling star." Designed by Maria S. from USA.

Smashing Wallpaper - june 12

Magic Night

Designed by Mateusz Mackowiak from Poland.

Smashing Wallpaper - june 12

Africa

Designed by Cheloveche.ru from Russia.

Smashing Wallpaper - june 12

Fruit Ninja Did This

Designed by Ioana Bitin (aka Yoot) from Romania.

Smashing Wallpaper - june 12

Basketball Nagraj

"Nagraj is an comic superhero in India. In this wallpaper you can see Nagraj as a basketball. I made this a little fun because in India June is a Holiday season for children." Designed by Sandeep Virk from India.

Smashing Wallpaper - june 12

Retro Smile

"This is the retro photography of my aunt from 1964 photographed in the beautiful village near the city Nis in Serbia." Designed by Marija Zaric from Serbia.

Smashing Wallpaper - june 12

Vidovdan – Folk Festival

Designed by Tihomir Budic from BiH/Republika Srpska.

Smashing Wallpaper - june 12

I Need Holidays

"After a busy year, we need a long vacation!" Designed by Gopango Networks from Spain.

Smashing Wallpaper - june 12

Out Of The Box

"Release your creativity!" Designed by Ajan Navaratnasingam from London, UK.

Smashing Wallpaper - june 12

Fete De La Musique

"La Fete de la Musique, also known as World Music Day, is a music festival taking place on June 21, read more on wikipedia." Designed by Sherif Saleh from France.

Smashing Wallpaper - june 12

June Pastures

Designed by Nishant Sapra from India.

Smashing Wallpaper - june 12

Illustration

"Vector hand drawing illustration of beautiful woman’s face with flowers in her hair and floral pattern behind her." Designed by Jane Lane from Russia.

Smashing Wallpaper - june 12

Euro 2012

Designed by Katerina Bobkova from Ukraine.

Smashing Wallpaper - june 12

Paris Summer

Designed by Martina Pitбkovб from Slovakia.

Smashing Wallpaper - june 12

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favourite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

Stay creative and keep on smashing!

(il) (vf)


© Smashing Editorial for Smashing Magazine, 2012.


The First Smashing Conference Is Coming: A Community Event For Web Designers


  

Probably the most remarkable characteristic of our Web design community is that we care about our craft. We care about best practices, about our work, about learning, sharing and improving our skills. This very spirit is the driving force behind our daily work at Smashing Magazine, and this spirit is what has prompted us to organize the very first Smashing Conference: a friendly, valuable and inspiring community event that will help us all become better at what we do.

Whether you are a designer, developer, content strategist or business owner, at the Smashing Conference you’ll explore insights hands on and gain practical tips and new perspectives on our craft. We are very happy to provide an opportunity for you to share and gain practical knowledge in an intimate, informal atmosphere — right in our beautiful home town of Freiburg, Germany, at the foot of the legendary Black Forest.


The legendary Historical Merchants Hall, a late-Gothic building built between 1520 and 1530. Its façade is decorated with statues and the coat of arms of four Habsburg emperors. An exquisite location for the very first Smashing Conference. Image credit.

When and Where?

We’re delighted to invite you to come together for this inspiring, forward-thinking event on 17 to 19 September 2012. The conference will host a two-day single-track conference on September 17th and 18th, as well as three workshops on September 19th. By “we,â€� we mean Vitaly Friedman, editor-in-chief of Smashing Magazine, and Marc Thiele, who has been running community events such as beyond tellerrand for over 12 years.

The aim of the event is to deliver the same high-quality content that we deliver on Smashing Magazine, in the familiar atmosphere that beyond tellerrand events are known for. This will be a high-caliber yet friendly event that brings great value to everyone involved, and we’d be honored if you took a part in it.

The conference will take place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest.

Kaufhaus
The main hall of the venue. 350 tickets are available in all for our two-day single-track event. Image credit

Keeping the conference affordable for everyone is important to us. All tickets includes two full single-track conference days, on Monday and Tuesday. Please note that only 350 seats are available.

We are pleased to announce that the first 70 early-bird tickets are on sale for a price of €249. The regular price after that is €349. And all prices include the German VAT of 19% and booking fees! Get your ticket now before it’s too late. We’d be honored to meet you in September!

Get your ticket!

Speakers and Topics

If you’ve been following Smashing Magazine for a while, then you won’t be surprised by the focus of the Smashing Conference. We’re aiming to cover a wide variety of Web design topics, such as visual design, front- and back-end development, UX design, mobile, responsive design, the business aspects of running a website, as well as the intricate details of the designer and developer’s workflows. We’re encouraging our dear speakers to share details on how they work, what tools they use, and what their design and coding process looks like. We’re aiming for valuable, practical and inspiring talks.

We’ve handpicked all of the speakers to ensure the high quality of the event. So far, 10 out of 15 speakers are officially confirmed. Please note that the topics presented here are subject to change. More details on the conference, speakers, talks and workshops are available on the conference’s official website.

Speakers

Speaker Talk Details
Aarron Walter The Real Me
Aarron WalterAarron Walter is the lead user experience designer for MailChimp, where he socializes with primates and ponders ways to make interfaces more human. Aarron is the author of Designing for Emotion, the purple stripe in the rainbow of knowledge from A Book Apart. He lives with his wife and son in Athens, Georgia, and is a wannabe barista. He tweets about design under the moniker @aarron.
Chris Heilmann To be announced
Christian HeilmannChris Heilmann has dedicated a lot of his time to making the Web better. Originally from a radio journalism background, he built his first website from scratch in around 1997, and he spent the following years working on a lot of large international websites, and a few years at Yahoo building products and training people; he is now at Mozilla. Chris has written and contributed to four books on Web development and has written many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more.
Jeremy Keith The Spirit of the Web
Jeremy KeithJeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there.
Jonathan Snook Your CSS Is a Mess
Jonathan SnookJonathan Snook writes about tips, tricks and bookmarks on his blog. He has also written for A List Apart, 24ways, and .net magazine, and he has coauthored two books, The Art and Science of CSS and Accelerated DOM Scripting. Most recently, Snook has written the eBook SMACSS, sharing his experience and best practices on CSS architecture. Snook also works on the design team at Shopify.
Josh Brewer Responsive Is as Responsive Does
Josh BrewerJosh spends his time thinking about, designing and building things that live at the intersection of form, function and aesthetic. He is principal designer at Twitter and is the co-creator of 52 Weeks of UX, Ffffallback and Shares. He is also an advisor and mentor at The Designer Fund.
Lea Verou To be announced
Lea VerouLea has a long-standing passion for open Web standards and has been often called a CSS guru. She loves researching new ways to take advantage of modern Web technologies, and she shares her findings on her blog. Lea also makes popular tools and libraries that help Web developers learn and use these standards. She speaks at a number of well-known international Web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures in the Web development course at the Athens University of Economics and Business.
Paul Boag Better Websites, Happier Clients and Improved Job Satisfaction
Paul BoagPaul Boag has been working on the Web since 1993. He is Web Strategist at Headscape Ltd, a Web design agency that he cofounded back in 2002. Paul also produces and hosts the longest-running and award-winning Web design podcast at boagworld. He is a regular speaker at conferences and author of Client-Centric Web Design.
Rachel Andrew The Future of Content Management
Rachel AndrewRachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website.
Stephen Hay To be announced
Stephen Hay

Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. Aside from his client work, he can be found speaking at industry events about Web design-related topics such as CSS layout and responsive design workflow. Stephen is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences. He is also co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side.

Stephen has written for publications including A List Apart and .net Magazine. He also coauthored the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack.

Tim Ahrens Web Fonts Backstage and On Stage
Tim Ahrens
Tim Ahrens is a type designer based in Berlin, where he runs Just Another Foundry with Shoko Mugikura. As a former architect, he is interested in the interplay between technology and design. He develops design software such as the Font Remix Tools and Web applications such as the FontFonter. Since 2010, he has been working as a consultant for Typekit.

Aarron WalterChristian HeilmannJeremy KeithJonathan SnookJosh Brewer
Lea VerouPaul BoagRachel AndrewStephen HayTim Ahrens
Gallery of the speakers at the Smashing Conference.

Workshops

Trainer Workshop Details
Aarron Walter Interface Design Bootcamp
Aarron WalterWhether you are designing a Web app or website, following best practices and standard design methodologies will help ensure that your interfaces are usable and engaging. In this workshop, we’ll explore the design process in detail, including user research, wireframing, prototyping and visual design. Through real-world examples, you’ll see how an idea can evolve into an interface.

Andy Clarke Fashionably Flexible Responsive Web Design
Andy ClarkeResponsive design has made designing flexible websites fashionable again, but there is more to being fashionably flexible than technology or using CSS3 media queries. So, this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the “content out,â€� instead of from the “canvas in.â€� He’ll demonstrate how to separate design from layout; and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (color, texture and typography) before reassembling it for a fluid continuum of devices, from phones to desktops and everything in between.

Jonathan Snook SMACSS: Scalable and Modular Architecture for CSS
Jonathan SnookThe SMACSS workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It brings the eBook to life with practical examples and in-depth discussion.

Aarron WalterAndy ClarkeJonathan Snook
Gallery of the workshop experts at the Smashing Conference.

Further Details About the Conference

As we finalize some major details of organization, we are working hard on a plethora of small details to make the event as valuable and memorable as possible. Please expect more speakers to be confirmed soon and more topics to be announced.

Also, we are looking for sponsors of the event, so if you are interested, please get in touch with us. More details on the location, hotels, speakers, talks, workshops and after party are presented on the official Smashing Conference website.


One of the workshop rooms, with medieval decoration and statues of medieval knights. 30 seats are available for each workshop. Image credit.

Get your ticket!

Facts

  • In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business.
  • Dates: 17 to 19 September 2012 (workshops on the 19th, and conference on the 17th and 18th).
  • Venue for workshops and conference: “Zum Roten Bären”, Historical Merchants Hall, Freiburg.
  • Early-bird price (only 70 tickets): €249 ($315) (including German VAT and fees).
  • Regular price: €349 ($440) (including German VAT and fees).
  • Each workshop costs €349 ($440) (including German VAT and fees).
  • Twitter: @smashingconf
  • Lanyrd: http://lanyrd.com/2012/smashingconf/
  • Facebook: http://www.facebook.com/smashingconf
  • Website: http://www.smashingconf.com

Screenshot
Zum Roten Bären“, one of the locations for the conference’s workshops. Large view.

We’re very excited about the Smashing Conference, and we’ll do our best to make it a valuable, memorable and useful event. We can’t wait to meet you, and please feel free to contact us if you have any questions about participation or sponsorship.


© Smashing Editorial for Smashing Magazine, 2012.


Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs


  

Editor’s Note: This post is the first in the new Smashing Daily series on Smashing Magazine, where we highlight items to help you stay on the top of what’s going on in the industry. Vasilis van Gemert will carefully pick the most interesting discussions, tools, techniques and articles that were published recently and present them in a nice compact overview. Smashing Daily #2 and Smashing Daily #3 are now published, too.

Vasilis goes through dozens of RSS feeds and hundreds of tweets so that you don’t have to. Do you find the new series interesting? What would you like to have? And what wouldn’t you like to see? Let us know! We’d love to hear your feedback in the comments!

A couple of words from Vasilis himself:

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

“Last November, during the Fronteers conference in Amsterdam, Lea Verou convinced me to start writing in English; up until then, I wrote my comments in Dutch. More and more people started following me, and I think that’s a good thing; I believe more talented people than me should know the things I know. By more talented people, I of course mean you, the reader, so you can understand just how excited I was when Vitaly Friedman asked me if I wanted to start publishing the Daily Nerd on Smashing Magazine. So, here we are, the first episode of the Smashing Daily! I hope you like it!”

Smashing Daily #1: Mobile Device Lab, Browsers and Animated GIFs

Your local mobile device lab
Jeremy Keith started an open local mobile device lab in Brighton, and he urges you to do the same in your home town.

Screenshot

Web font performance: Weighing @font-face options and alternatives
An important part of design and UX is performance, so when you decide to use a Web font, you should definitely know what the negative impact that choice might have on your users. Here’s an excellent in-depth article about font performance. Yes, you should definitely read it (and the comments, too, because they’re actually quite good).

Miscellany #7,� Shady Characters
Here’s a short post by Keith Houston, with news and thoughts about unusual characters. A pleasure to read, like everything else on his blog.

Screenshot

TypeStacks: Instant font stacks based on your font
Here’s a nice tool that suggests a font stack based on your chosen font. It knows the fonts served by TypeKit, although it doesn’t seem to know too many Google Fonts. Still, a very handy tool.

Let’s Get Physical (Units)
There are a few occasions when we’d love to use physical units (such as cm and in), but unfortunately these units don’t work as expected in CSS. Boris Smus has written an extensive article about these units, how they should work, why we want them and why they work the way they work.

Screenshot

Cutting the Mustard
The BBC is working on a responsive news website, and it is sharing everything it finds out, which is extremely useful. In this article Tom Maslen explains how the BBC manages browser support. An absolute must read for anybody who is struggling with the growing complexity of browser support. This solution (or something similar) should be implemented everywhere.

H5BP
Here’s an overview of projects related to the HTML5 Boilerplate. Some excellent stuff is in there, but before you start using everything in there, remember the excellent advice of Rachel Andrew: “Stop solving problems you don’t yet have.�

Screenshot

html5shiv and Serving Content From Code Repositories
Never just link to scripts hosted on other domains, because you won’t always get the advantages, such as caching and Gzip. This is explained in detail in this excellent article. Yes, you should definitely read it.

Thinking Async
Loading an external JavaScript file can block the rest of the page from loading, which of course is a major performance and usability problem. The solution is to load scripts asynchronously, and Chris Coyier shows us ways to do that, extensively as always.

Screenshot

Experience Design Is the Future of Mobile Payments
“Holisticâ€� means something like “complete.â€� So, Perry Chan argues that a “completeâ€� user experience is the future of mobile payments. I actually think that right now, in the short run, whatever the future, the things we have right now are just terrible. Anything would less painful (at least here in the Netherlands). (I also think the future of UX on the Web is bigger fonts — much bigger).

Learn CSS selectors interactively
CSS selectors can be pretty hard to understand, especially the difference between nth-child and nth-of-type. There are many tools to visualize the difference, and this is another one by Ben Howdle.

Screenshot

Allen Tan on highlighting and focus,� Readmill Blog
My father always scribbles annotations in the margins of his paper books. He’s probably been doing this for more than 50 years now, and if somehow we could assemble these annotations, it would be an incredibly interesting and useful database. But as it is, it’s pretty useless. Allen Tan writes about this and more in this article on modern digital reading.

Browser Support
If, for whatever reason, you don’t like any of the tools or websites out there that tell you what browsers support what CSS feature, then this tool might be the one you’re looking for. I still prefer When Can I Use… or Mozilla Developer Network Docs, though.

Stamen
Your app needs a map, but you want something other than boring old Google Maps? You could try OpenStreetMap with one of these beautiful map tiles.

Different map styles

Browser Support? Forget It!
What does “browser support” mean exactly? Some think it means pixel perfection for a predefined set of browsers. According to David Bushell, it means something else. This is a good read for people (or clients) who struggle with the ever-expanding browser landscape.

The id Attribute Got More classy in HTML5
One of the easy ways to get a somewhat unique ID is by using the UNIX epoch time, which generates a string like 1336984564. The problem is that in HTML, an ID had to begin with a letter. Mathias Bynens tells us if this is still the case in HTML5.

Some examples of valid ids

Autofill City and State From Zip Code With Ziptastic
Filling out forms is a pain in the butt, especially on devices without a traditional keyboard. You should be asking users for as little information as possible. If there were a way to make things easier, you should probably do it. For instance, you could prefill parts of an address when the user enters their ZIP code. Chris Coyier shows us what a flow like that could look like.

CSS Layout Gets Smarter With calc()
A thing we needed desperately before being able to use box-sizing: border-box was the ability to mix different CSS units. There are still some use cases for this, though, and luckily more and more browsers are supporting the calc() property. Here’s how it works.

Last Click

The Origin of the <blink> Tag
Here’s the true story behind the blink tag by the guy who came up with the idea, Louis J. Montulli II. A nice anecdote on early browser history.

mr. div
Of course, you could use a simple Web technology like canvas or WebGL to generate beautiful animations, but why do it the easy way when you could use the ever-amazing animated GIF? Here’s a great Tumblr blog to follow if you’re looking for some random fantastic 4-D inspiration.

What Do You Think?

Do you like this new series? What would you like to see in it? Please provide some feedback, and let us know what you think!

(al) (vf) (il)


© Smashing Editorial for Smashing Magazine, 2012.


The Smashing Book #3 “Redesign The Web” Is Out!


  

The new Smashing Book #3 has finally arrived—freshly printed, neatly packed and ready to be shipped to you, our dear reader. We believe this is by far the best book we’ve produced so far. We are very proud and excited, and the initial verdict has been thoroughly positive, yet in the end it’s up to you to decide how valuable and useful they really are. Get your books now!

Why The Theme Of “Redesign�?

In recent years, the Web has changed—a lot. The Web designer’s tools are now advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they face new challenges and are embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web. The new Smashing books will change the way you design websites for the better.

But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? The books explain what you need to know in order to create effective websites today, and what you need to know to be prepared for the future. Well-known experts share practical know-how and introduce a whole new mindset for progressive, future-proof Web design.

Smashing Book #3 (Printed & eBook)

The Smashing Book #3 With over 40 people having worked on the project, a lot of thorough editing and consideration needed to be done to fine-tune each chapter’s content and order to make the most sense. In the end, 11 of the most outstanding articles made it into the Smashing Book #3, covering topics ranging from the business side of design to mobile approaches and responsive design.

The Smashing Book #3 covers innovative coding, design and UX techniques and discusses the peculiarities of the mobile context and emotional design. It also presents practical HTML5, CSS3 and JavaScript techniques, as well as a bulletproof workflow for responsive Web design. The book challenges you to think differently about your work, your code and your designs.

Table of Contents

AUTHOR CHAPTER DETAILS
Elliot Jay Stocks Preface

Elliot Jay StocksElliot Jay Stocks introduces the new Smashing Book #3 by making us think about our workflow, the quality of our work, our industry and our community. Working in an industry that evolves at an incredible speed takes a lot of effort—at the same time, it’s what keeps us going.

Paul Boag The Business Side of Redesign
Paul BoagA redesign is the best thing that a Web designer can experience. Yet before leaping head on into a project, we must consider the business behind the redesign. By its nature, a redesign has the potential to make a website successful, but it also has the power to destroy a perfectly good idea. Important considerations to keep in mind before engaging in a redesign project include common dangers, required research, the working process with the client and testing. Paul Boag leads you through this process step by step.

Chapter keywords: business model, redesign timing, scope of redesign, redesign considerations, realignment, project pitfalls.

Rachel Andrew Selecting a Platform for Redesign
Rachel AndrewOnce you have understood the business side of the redesign project, the next step is to choose the right platform. Understanding all of the requirements of a project will save you valuable time in aligning the new functionality with the technological circumstances. Take stock of existing structures such as the CMS, e-commerce system and payment gateway. Beware of the project constraints, including the budget and wishes of the client. Only then will you be able to concentrate fully on the project, without encountering unpleasant surprises ahead.

Chapter keywords: technical requirements, CMS, eCommerce, payment gateway, refactoring, platform choice, redesign project constraints.

Ben Schwarz Jumping Into HTML5
Ben SchwarzBen Schwarz takes away the fear that many Web developers suffer when confronted with a new technology—by encouraging experimentation. The chapter guides you through the new HTML5 elements and discusses the possibilities that come with the adaptation to these elements. This is a practical, compact guide to HTML5, with everything you need to know today in order to create flexible and maintainable websites for the future.

Chapter keywords: HTML5, semantics, semantic outlining, ARIA, client-side storage.

Lea Verou, David Storey Restyle, Recode, Reimagine With CSS3
Lea VerouDavid StoreySome CSS workarounds that have hung around from earlier days prevent us from becoming better, more efficient designers. Learn how to recode CSS to reduce the number of images, HTTP requests, presentational JavaScript and wrapper divs on the page, while making the style more flexible and maintainable. Learn about the rem unit, Flexible Box Layout, source-order independence with flex order, multiple backgrounds and gradients, background clipping, border images, transforms, transitions, box sizing and new CSS3 selectors. Restyle, recode, reimagine: because CSS3 is here to stay!

Chapter keywords: CSS3, techniques, Flexbox, multiple backgrounds and gradients, transforms, transitions, box-sizing, selectors, layout.

Christian Heilmann JavaScript Rediscovered
Christian HeilmannEven though jQuery is written in JavaScript, it is not the same; nor is it native to browsers. The large jQuery library abstracts away a lot of issues that Web developers face, yet sometimes it’s used without a real purpose. Christian Heilmann takes us back to its origins and shows us how to implement simple JavaScript solutions without resorting to jQuery, achieving the same result in a slimmer and less process-intensive way.

Chapter keywords: JavaScript, jQuery, CSS selectors, classlist, localStorage, tutorials.

Dmitry Fadeyev Techniques for Building Better User Experiences
Dmitry FadeyevUser experience means good design, and the central aim of design is not to decorate, but to solve problems. Whether that means getting more sign-ups, inviting users to post more content or making the interface easier and faster to use, this is ultimately the sort of design that delivers a great user experience. This chapter features powerful UX techniques that you can easily apply to your products and websites. Make sure users stay on your website for the right reasons, and get an edge over the competition by improving user-targeted processes. Also, explore experimental approaches and avoid some misleading design techniques.

Chapter keywords: UX design, forms, good defaults, customer service, copywriting, storytelling, experimental techniques, design pitfalls.

Marc Edwards Designing for The Future, Using Photoshop
Marc EdwardsBecause good design and user experience are almost mandatory for success today, the lines between desktop software, mobile software and the Web are increasingly blurry. We have to continually change our tools and techniques to meet new requirements. Marc Edwards addresses some of the challenges that Web designers face today and will in the future when using Photoshop. Realism, scale, screen sizes, resolutions, formats, techniques—this chapter touches on all of it. There is no reason to surrender to scaleability and liquid image requirements when using Photoshop!

Chapter keywords: Photoshop, screen sizes, pixel density, scale, gradients, shapes, color profile, mobile, Retina display.

Aaron Walter Redesigning With Personality
Aaron WalterAny design that does not effectively establish a connection with its audience has missed its goal. Getting to know your user is just as important as knowing yourself and the personality behind the brand; this will set you apart from competitors. This chapter describes how to develop your own design persona and define the key characteristics to guide your project’s path. New technologies and techniques are not what build connections with users, but rather the empathy evoked by the personality behind them. Aaron Walter explains how to bring out the personality at the heart of your work.

Chapter keywords: personality, brand sympathy, engagement methods, design persona, voice and tone.

Aral Balkan Mobile Considerations in UX Design: Web or Native?
Aral BalkanThe native vs. Web debate is meaningless and counterproductive. All products nowadays have high demands for UX design. Web designers turn into UX designers by gaining specialized knowledge of the Web and by mastering auxiliary frameworks and their components. Not only do the aesthetics of an interaction object count, but also how the object behaves upon contact. Designing documents and designing applications requires knowledge of basic responsive design principles and progressive enhancement. This chapter helps you understand your medium, explains what exactly it means for an application to be “native,� and goes over how to choose the right tools and technologies for the job.

Chapter keywords: mobile, user experience, native applications, native as culture, interaction design principles, responsive Web design.

Stephen Hay Workflow Redesigned: A Future-Friendly Approach
Stephen HayWeb design changes quickly. In multiplatform design, where websites and apps are used on many and varied devices, we are confronted with multiple destinations. How do you go about integrating as many devices as possible? Is targeting as many different platforms as possible really important? In this chapter, Stephen Hay suggest a new design workflow for responsive Web design. A new way of thinking leads to a new way of design—the sooner you get the hang of it, the sooner you will be ready to discover what works best for your projects.

Chapter keywords: responsive Web design, device-agnostic approach, content inventory, future-friendly approach, breakpoint graphing, designing in the browser.

Andy Clarke Becoming Fabulously Flexible
Andy Clarke There are significant upsides to responsive Web design for designers, especially in workflows that embrace flexibility. Responsive Web design still asks more questions than it answers, and it challenges the working relationships and interactions between everyone involved in every process. Andy Clarke gives you some insight into the techniques that helped him become fabulously flexible when developing responsive designs. Learn his approach to designing atoms and elements of a design first and see if it works for you. It might enable you to create many facets of the same experience within a single workflow.

Chapter keywords: Responsive Web design, design challenges, style tiles, design atmosphere, flexibility, designing components first.

Well-respected professionals have poured their heart and expertise into these contributions. To ensure quality, every chapter of this book has been thoroughly reviewed by experts, including Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Josh Clark, Anders M. Andersen, Bryan Rieger, Joshua Porter, Ryan Carson and Elliot Jay Stocks.

Technical Details

Get your  Smashing Book #3 today.

Pre-order the printed bundle with Smashing Books #3 and 3 1/3 Pre-order the eBook Bundle (PDF, EPUB, Kindle) Pre-order the full Smashing Book #3 Bundle: Print + eBooks
Our new books: the Smashing Book 3 and Smashing Book 3⅓—The Extension. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Smashing Book #3⅓ — The Extension

Smashing Book #3 1/3

With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platform. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy—which is an important process, often underestimated, and dependent on many factors.

Smashing Book 3⅓, otherwise known as “The Extension,� presents practical applications of storytelling to Web design, reviews emerging navigation design patterns and helps you understand how to meaningfully employ content strategy on your websites. A case study of Smashing Magazine’s responsive redesign illustrates how this approach could look like in practice.

Table of Contents

AUTHOR CHAPTER DETAILS
Iris Lješnjanin Preface

Iris LješnjaninThe Smashing Book #3 was limited to a certain size and format, making it impossible to include all of the chapters without compromising the book’s overall integrity. The Smashing Book #3⅓ is a challenge: explore the possibilities that modern technology and our design legacy have in store for us Web designers.

Denise Jacobs The Missing Element of Redesign: Story

Denise JacobsToday’s Web audience is on the search for more than just information. Consumers expect to be engaged and want to be drawn in by a website, one that makes them feel something and manages to inspire. While changing the look and feel of a website used to be somewhat easy, it is time to reconsider the fundamentals of our approach to a redesign. Learn how to successfully capture attention by using copywriting and storytelling, and understand the important relationship between emotion, design and story.

Chapter keywords: storytelling, invisible design, literature, narrative devices.

Christian Holst and Jamie Appleseed Rethinking Navigation: Techniques and Design Patterns

Christian Holst Jamie AppleseedNavigation is what lends a page interactivity, connecting otherwise isolated pages into a logical order. Still, its design must fit the content and purpose of the website, not the other way around. Organic content calls for new and adaptive navigational elements. But how do we go about that? This chapter gives you useful insight into rethinking your approach to navigation.

Chapter keywords: navigation, design patterns, filtering, mega menus, checklist.

Colleen Jones Rework Your Content So It Works for You

Colleen JonesIf you invest much time and effort in the design of your website, but not the content, you’re taking a big risk. Don’t disappoint your users with the same old content after raising expectations with an impressive design. This chapter takes a strategic approach to content and explains the basics of formulating the right content strategy for your website redesign.

Chapter keywords: content strategy, content inventory, audit, context, maintenance, results assessment.

Vitaly Friedman Responsive Smashing Redesign: A Case Study

Vitaly Friedman Redesigns usually introduce unexpected changes and are rarely applauded; moreover, a large-scale redesign is a tough and risky game to play. Smashing Magazine faced a long list of technical and UX changes in July 2011, and the team decided to act. This chapter presents a detailed case study of the whole redesign process, from A to Z, as it happened, and it sheds some light on the design, UX and technical considerations that actually led to the redesign.

Chapter keywords: redesign trap, responsive Web design, advertising constraints, design persona, typography-out approach, designing in the browser, redesign manifesto.

Technical Details


Cover Design by Veerle Pieters

The Smashing Book series has gotten a rather eye-catching facelift. The well-respected Belgian artist Veerle Pieters has taken on the significant task of putting together an innovative, bold cover design. And the result is bold indeed. Veerle’s styling of Smashing Magazine’s “S� reflects the many aspects that make up a Web designer’s workflow today.

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

Screenshot
Veerle’s final sketches for the cover of the Smashing Book #3.

Exclusive Artwork by Kate McLelland

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

A detail of a chapter illustration, designed by Kate McLelland.


A detail of a chapter illustration, designed by Kate McLelland.

Each illustration employs a different metaphor that relates to the accompanying chapter. See what they all are once you get your hands on the book. Appropriately enough, when strung together, the drop caps spell out “Redesign the Web.� The composite style of the illustrations points to how so many components have to come together for a successful redesign.

Reviews and Testimonials

We’re looking forward to honest, objective reviews of the brand new Smashing Books. Please share your photos, opinions and feedback on Twitter using the hashtag #smbook3. The first feedback has been throughout positive and, in fact, we’ve discovered the first reviews of the books as well:

“The entire book is wonderfully balanced between theoretical and practical, with each author contributing a strong point of view on their area of expertise as well as a thorough explanation of how to execute it in a way that is useful. [...] curating the most cutting edge perspectives on the Web and offering the tools and information that the rest of us need to build upon them. If you’re into that, check out this book.”

— Christopher Butler, Book Review: Smashing Book #3

“This book is worth buying and reading for yourself. It really covers many aspects of modern website production in eleven in-depth chapters. There will likely be a few you don’t care for—we all have our own tastes—but I’d be surprised if any genuinely leave you disappointed given the chance. I was quite prepared to write something less positive, the first Smashing Book didn’t excite me, but this one very much did.”

— David Bushell, Smashing Book #3

“The Smashing Book #3 is an invaluable resource for Web designers, regardless of skill level or experience and we highly recommend it.”

— Cameron Chapman, Review: Smashing Book #3

“[...] not only is this a good book and an enjoyable read, but it is an important book that really can change the way we design, or redesign, for the Web.”

— Jeremy Girard, Reviewing The Smashing Book #3

Please feel free to submit a link to your review in the comments to the post and we’ll add your testimonial into this article. Feel free to provide criticism or praise: we’d love to hear your honest opinions!

Get the Smashing Book #3!
A quick peek into the Smashing Book #3. Yes, we do like animated GIFs.

The Smashing Anthology

If you haven’t purchased Smashing Books #1 and #2 yet, we’ve prepared a couple of complete bundles for your convenience. Even though the first two books were published a couple of years ago, they remain relevant and valuable, because they were designed by our editorial team to be timeless. Save 20% off the price and get yourself the Smashing Anthology, a collection of all of our books as of today:


Frequently Asked Questions (FAQ)

We want to make it as easy as possible for everyone to buy the new Smashing Book. We welcome all suggestions and advice that could improve Smashing Magazine’s user-friendliness. Here are answers to some frequently asked questions about the Smashing Books #3 and #3â…“:

Questions
What’s the difference between Smashing Books 1, 2 and 3?

The first two books covered best practices in modern Web design. Although they had similarities, the two books covered different areas of Web design. Smashing Book #3 has a particular theme: redesign. It covers the redesign process per se, as well as cutting-edge approaches to Web design on a broader scale. It focuses on the most recent developments and current demands of today’s rapidly changing environment. Smashing Book #3 gives professional advice on the what, when and how of responsive and bulletproof Web design, according to the requirements of today’s Web.

What’s this extra Smashing Book #3⅓?

Our authors have turned out to be much more productive than we anticipated, coming up with more exciting chapters than one book could handle. Adding these chapters to the book would have increased the size and weight—and, hence, shipping cost—substantially. Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present the Smashing Book #3â…“: The Extension, four extra chapters of quick quality reading. Buy it as part of a bundle and save!

Will the book be available in other languages?

Maybe in future, but we have not made arrangements for that yet, so don’t hold your breath.

Are the Smashing Books #3 and #3â…“ available as eBooks?

Yes, the books are available in PDF, EPUB and Mobipocket formats, and you can order an eBook bundle right now.

What are the costs for shipping to my country?

The shipping cost for one book or a bundle is $5—wherever you are in the world. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay!

How long will delivery take to my country?

All books are shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.

What payment methods are accepted?

We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate.

Is there a money-back guarantee?

Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back—no ifs, ands or buts about it.

I have a question that is not covered here.

Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can!

Please Spread The Word!

These new books took seven months of production time, from brainstorming to delivery; 43 people worked on the content, design, layout, editing and proofreading of the book; 623 animals are hidden in various places in the Smashing Book #3; and the production costs for initial circulation, excluding marketing costs, required a six-figure budget. That’s what it took us to ensure that our Berlin warehouses are stocked with these new valuable books, waiting to be shipped right away as soon as you place your order.

Elliot Jay StocksPaul BoagRachel AndrewBen SchwarzLea VerouDavid StoreyChristian Heilmann Dmitry FadeyevMarc EdwardsAarron WalterAral BalkanStephen HayAndy Clarke Iris Lješnjanin Denise JacobsChristian HolstJamie AppleseedColleen JonesVitaly Friedman
The authors of the new Smashing books. We’ve donated over $5000 on behalf of the book contributors to Doctors Without Borders.

Here at Smashing Magazine, we do our best to support and enrich the design community. Yet we also rely heavily on community opinion—in fact, the magazine would not be what it is today without the constant feedback of the community. That’s where you come in: we now pass the book onto you. Use it, enjoy it, test it, read it, rate it, evaluate it, criticize it or praise it—and share your honest opinion of it with the rest of the world.

Feel free to take as many pictures of it as you like and to use the Smashing Book #3 media kit (.zip, 9 Mb), which is full of interesting facts, figures and images related to the book. Be one of the first to give the community a critical view of the book; stir the discussion, and encourage feedback on your website.

Your criticism helps us further improve future projects, shapes the selection of topics and enables us to stay close to the pulse of the community. We sincerely appreciate your support.


© Smashing Editorial for Smashing Magazine, 2012.


Desktop Wallpaper Calendar: May 2012


  

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for over four years now, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

We continue to nourish you with a monthly spoon of inspiration. This post features free desktop wallpapers created by artists across the globe for May 2012. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

You May Rain

Designed by Ioana Bitin (aka Yoot) from Romania.

Smashing Wallpaper - may 12

Flight Of The Owl

Designed by Katerina Bobkova from Ukraine.

Smashing Wallpaper - may 12

Colorful

Designed by Lotum from Germany.

Smashing Wallpaper - may 12

May Charts

"Charts of May weeks. Designed for working environment that helps classify desktop files into categories." Designed by Sherif Saleh from France.

Smashing Wallpaper - may 12

Yatta!

Designed by Alex Dovksha from Belarus.

Smashing Wallpaper - may 12

Food Of Love

"Love needs food too! And what can be better than music! The two most prescious gifts of life, love and music is expressed beautifullyin this quote by William Shakespeare." Designed by Adrija Mukhopadhyay from India.

Smashing Wallpaper - may 12

Sunny Hours

Designed by Christine Bradway from USA.

Smashing Wallpaper - may 12

Japan

"Japan is the land of the rising sun." Designed by Cheloveche.ru from Russia.

Smashing Wallpaper - may 12

Doodle Lizard

"Negative space lizard on a bed of doodles." Designed by James N Osborne from United Kingdom.

Smashing Wallpaper - may 12

Spring Dots

Designed by Pietje Precies from the Netherlands.

Smashing Wallpaper - may 12

Limundograd

"Limundograd (Limundocity) is an illustration for an e-commerce auction site called limundo.com, designed to show users what the site consists of, and much more!" Designed by Mrki from Serbia.

Smashing Wallpaper - may 12

Wishing On A Star

"Keep an eye out for those shooting stars during the clear summer nights. If you see one, make a wish and maybe it’ll come true…" Designed by Eddie Wong from Ireland.

Smashing Wallpaper - may 12

Be Like Him

"Inspired by a verse in the Bible." Designed by Lex Valishvili from Russia/USA.

Smashing Wallpaper - may 12

Thingvellir

"The photo was taken at Thingvellir national park, Iceland." Designed by Naioo from Germany.

Smashing Wallpaper - may 12

Justin Bbq

"It’s spring time, and we at JustLanded.com are celebrating with a BBQ!" Designed by Adelacreative from UK.

Smashing Wallpaper - may 12

Red Panda

Designed by Ingrid Cruz from USA.

Smashing Wallpaper - may 12

Mangolicious May

"In India, May is mostly known for summer holidays and the season of Mango- the best amongst all the fruits. Its the best in terms of flavour, richness and sweetness.As the scorching heat increases in this month, its the delicious mango which keeps us going and makes us look forward to summers. This wallpaper is dedicated to the King of Fruits-Mango." Designed by Charuta Puranik from India.

Smashing Wallpaper - may 12

Grunge Fairy

"May’s fairy is grungy and dark." Designed by Bobbie Killip from UK.

Smashing Wallpaper - may 12

Wonderful Island

"Wonderful Island is the annual meeting point for a unique community of various fairy creatures from different parts of the world. They come here every single year on the exact same day – May, 1 to talk with the old friends and have fun. The merriest guys are, certainly, Furst, the middle-aged Yeti from the North of Iceland and his best friend Charles Dooon, aka DJ Chuck-Chuck, who can’t imagine their lives without music." Designed by Maria S. from USA.

Smashing Wallpaper - may 12

Solitude Is Bliss

Designed by Mohammed Aaqib Ansari from India.

Smashing Wallpaper - may 12

Tentacles

Designed by Julie Lapointe from Canada.

Smashing Wallpaper - may 12

Come What May

Designed by Melissa Infantino from USA.

Smashing Wallpaper - may 12

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month!

What’s Your Favourite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

Stay creative and keep on smashing!

(il) (vf)


© Smashing Editorial for Smashing Magazine, 2012.


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