вторник, 29 января 2013 г.

New Smashing Releases: 60 Quality eBooks for only $99 a year!

Sorry, but why am I receiving this? If this email is not displayed properly, view the online version.

The Mobile Book AddendumThe UX eBook BundleSmashing BestsellersSmashing Library

We have just added new eBooks to the Smashing eBook Library! You can grab the eBooks in your dashboard — a brand new UX Bundle and extra chapters for our brand new Mobile Book. If you haven't checked the Mobile Book yet, you're in for a real treat.


Also in our Smashing Library

The Mobile Book Addendum:

The Addendum contains three exclusive chapters on mobile design patterns and designing for iOS and Windows Phone. With 200 extra pages of quality content!

Read more →

The Mobile Book Addendum

The UX eBook Bundle

Navigation & Interaction

Navigation & Interaction

The foundations of good UX design lie in transparent navigation and interaction patterns and systems…

Read more →

eBook Emotional Design Elements

Emotional Design Elements

The elements of emotional design show you how to imbue your creation with personality and to shape the user's perception…

Read more →

eBook UX Design Process

UX Design Process

Sometimes, the solution to a problem is to fix a broken UX; other times, you will need to constantly fine-tune…

Read more →

Bestselling Smashing Books

The Smashing Book 3, The Smashing Book 1/3, The Mobile Book

Our printed books are our editorial flagship. Quality material from experts, as printed books and eBooks.

• Smashing Book 3

• Smashing Book 3 1/3

• The Mobile Book

Get all eBooks automatically!

Smashing Library - $99 a year / 89€ a year

The Smashing Library

All eBooks above are part of our annual eBook subscription, the Smashing Library. Still not a member? Subscribe today for only $99 / €89 a year and get immediate access to more than 40 existing and at least 24 new eBooks throughout the year!

Sign up!

вторник, 15 января 2013 г.

Smashing Newsletter #76: CSS/JS - Free Fonts - Typography - Videos

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #76 | Tuesday, January 15th 2013 | 129,115 subscribers | Previous issues

Dear Friends,

eBook testing is always fun. Kind of. You know the drill: take a test device, upload the eBook in ePUB format or Kindle or PDF depending on the device (and eBook reader) that you are testing for. Look out for issues and inconsistencies, discover weird uncontrollable bugs, debug in the dark, re-upload. Repeat. As Tim Brown once so eloquently said, often in the Web we "build experiences by manipulating their shadows." What holds true for websites holds true for eBooks as well. Yet while there are fantastic solutions for mobile testing, there aren't many tools for quick eBook testing.

Editorial

Over the last few weeks, we've been revising and redesigning our eBooks in all popular formats, testing their readability and functionality, improving your reading experience, page by page. In the coming weeks you'll see the new eBooks in the Smashing eBook Library, carefully and thoroughly redesigned and rebuilt from scratch for your iPads, iPhones, Androids, Kindles, Nooks and any other devices out there. We'd love to hear your feedback as well as bug reports, and we'll do our best to fix them right away!

Vitaly, editor-in-chief of Smashing Magazine

Table of Contents

01. 3-D Book Showcase With CSS
02. Lettering Against Calligraphy: A Decent Fight
03. Plaaan: Back to Paper
04. Aware.js: Making Your Site Reader Aware
05. Colorful Free Font For Your Next Artwork
06. Inspiring And Exciting Product Videos
07. FFF: Creative Interactive Web Experiments
08. Smashing Highlights (From Archives)
09. Recent Articles on Smashing Magazine
10. New on Smashing Job Board


1. 3-D Book Showcase With CSS

Assume you are designing a website to promote a new item for an online shop. Wouldn't it be nice to give your readers some sense of the depth and other physical qualities of the item instead of a flat 2-D image or photo? E.g. what if we used a series of 3-D transforms along with effects such as rotating, flipping and opening to create a more engaging 3-D experience for the books?

3-D Book Showcase With CSS

3D Book Showcase is an experiment that does exactly that. Using CSS 3-D transforms and three images (front cover, spine, back cover), Manoela Ilic created an example of an interactive book that users can flip, turn by hovering over and even open. The source code is available for free download, and a tutorial is provided as well. Browsers that don't support 3-D transforms just get the main book cover which is a simple and reasonable fallback for the technique. (vf)


2. Lettering Against Calligraphy: A Decent Fight

Don't we all enjoy a fine dose of competition now and then? At Lettering Versus Calligraphy, Berlin-based Giuseppe Salerno and Martina Flor battle out a visual fight between a letterer and a calligrapher. Every day each of the duo creates one letter based on a description provided by a moderator: a "Hedonist E," a "Subtle K" or a "Lazy "y." The results are posted on the site, head-to-head, and the visitors can vote on their favorites.

Lettering Against Calligraphy: A Decent Fight

Both Martina and Giuseppe have worked in the creative industry for more than 12 years, and they met while living in Berlin. Their competition aims to explore and demonstrate the capabilities of the two different technical approaches — the diverse emotions of hand-drawn lettering against the unvarnished passion of the pen. (ea)


3. Plaaan: Back to Paper

New year. New luck. New calendar. The new year is already starting its third week and you've realized that you have forgotten to get a new planner? Or you couldn't bring yourself to buy one, because the ones available don't fit your needs? With their new tool, the team of Lab Fiftyfive has created a Web app that could help you solve this problem. It takes just a few clicks to create a printable calendar that is not only free but also comes in a nice, sleek design.

 Plaaan: Back to Paper

The best thing about it: you can customize your planner the way you like. Choose your start and end dates, paper size, portrait or landscape orientation and whether your planner should have a weekly, multi-week or monthly view. When you are done, you can download it as a PDF and print it out, hang it above your desk or stuff it into your bag. Plaaan is a nice alternative to typing your dates in on a computer. Sure it doesn't sync with all your devices. But isn't planning a creative and expressive act? So get out your pens, jot down meetings and highlight your deadlines! (cm)


The Smashing eBook Library grants you immediate unlimited access to all of our Smashing eBooks, including digital versions of our existing and upcoming printed books — for just two coffees a month!
Smashing eBook Library
Still not a Smashing eBook Library subscriber? Sign up now and save up to 70%!


4. Aware.js: Making Your Site Reader Aware

With smartphones and tablets, the way we read online has changed and new habits have developed. We often take out the tablet in the evening, lean back and catch up on what's new. Now wouldn't it be nifty if the sites knew what we have already read and where we left off? The Austin-based design and development company XOXCO has developed a tool that does exactly that.

 Aware.js: Making Your Site Reader Aware

Aware.js is a jQuery plugin that personalizes the display of content according to a reader's behavior — without log-in, authentication or any server-side processing. The plugin uses cookies and localStorage to identify different classes of users and assign appropriate CSS classes in the DOM. It then tracks the time between their visits and uses the information to alter the layout of a page, accommodating different reading scenarios.

First-time visitors could get a special introduction, repeat visitors see the newest content highlighted and readers who haven't stopped by lately find a recap of the top stories. Aware.js is released under the MIT Open Source license and is free to use. On XOXCO's test site you can see it in action. A little tool that makes reading online so much more comfortable. (cm)


5. Colorful Free Font For Your Next Artwork

Are you on the hunt for an exciting typeface to pimp up your next project? Multicolore Free Fonts might be just what you are looking for — a cheerful free font which will look pretty darn good in a headline, on a poster, or in any other artwork. If it could speak, it would probably say: "Don't you just want to create something cool and shiny with me?"

Colorful Free Font For Your Next Artwork

The beautiful rounded glyphs were designed by Ivan Filipov, a self-proclaimed typography aficionado from Bulgaria. The font is available in the .otf font format (black-and-white version) as well as .eps and .ai vector formats (colored versions). Wonderful for private projects, Multicolore can be used in commercial work as well. (ea)


6. Inspiring And Exciting Product Videos

We all are always on the lookout for inspiration and interesting stories. As designers, in fact, we are storytellers, finding meaningful ways to tell stories of our clients to their website visitors. But do you always know how to tell a story effectively? What if you had a new product that you had to present in a video?

Inspiring And Exciting Product Videos

Well, you might want to dig into the Inspiring Product Videos round-up on Gimme Bar. It features well-done product announcement videos showing extraordinary ways of telling stories and infusing emotions. The videos are a hodgepodge of everything, featuring successful apps like Paper by FiftyThree, Flipboard and Path, sites like Behance, businesses like start-ups and restaurants, as well as other obscure and well-known brands.

The creative approaches presented in the videos are as mixed as the products themselves. There are artsy camera-pannings, entire worlds created out of paper-cuts and wooden blocks and even illustrations of bears in flannel shirts sharing their love for ricotta sandwiches via social networks. Giving some examples of how designers think outside the box, this collection will certainly fuel your own creativity. Definitely a must-see: Behance's "An Ode to Creative Work." (cm)


The Mobile Book
Buy the printed book now and get the eBook for free!


7. FFF: Creative Interactive Web Experiments

What happens if you combine WebGL, HTML5 Audio and CSS3? Maybe sprinkle a bit of extra JavaScript goodness here and there, HTML5 canvas and localStorage? Now we are getting somewhere! If you also spend weekends playing around with Web technologies — working on your little side projects, demos or just weird experiments — a side project by Jongmin Kim could be worth checking out.

FFF: Creative Interactive Web Experiments

FFF: Form Follows Function is essentially a collection of interactive experiences. It contains creative experiments with various technologies, each having its own unique design and functionality. Typographic Rain? Check. Campbell's Soup in 3-D? Check. Colorful Surface Waves? Check. The experiments are beautiful and inspiring, and quite entertaining, too. If your portfolio isn't quite full yet, perhaps you could put your experiments online as well. If that's not a good way to impress your potential clients, what is? (vf)


8. Smashing Highlights (From Archives)

  • Resolution Independence With SVG
    With a thoughtful content strategy and mobile-first approach, we're starting to offer an experience that adapts across devices and browsers to suit the user's context. In this article, we'll look at SVG, one of the most underused technologies in website development today.

  • Free Icon Set: Retro Toys
    The set contains 9 "toys" icons (png, 128×128px) that may come in handy in a variety of settings, e.g. in projects related to children and family.

  • Improving Customer Service with UX
    User experience design isn't just about building wireframes and Photoshop mock-ups. It extends to areas that you wouldn't necessarily think are part of the discipline.


9. Recent Articles on Smashing Magazine


10. New on Smashing Job Board

Here are the job openings published recently at our very own Smashing Job Board:

  • Software Engineer, Server Development at Turn, Inc. (Redwood City, CA)
    Turn delivers real-time insights that transform the way leading advertising agencies and marketers make decisions. Our cloud applications and Internet-scale architecture work together to provide a complete picture of customers, execute cross-channel campaigns, and connect with a worldwide ecosystem of over 100 partners.

  • Front End Designer With WordPress Experience at NoSleepForSheep (Us: Nashville, TN | You: Anywhere)
    NoSleepForSheep is a design, development and marketing agency that is passionate about crafting meaningful digital media experiences and delivering amazing results for our clients.

  • User Experience Designer - Schrödinger - New York, NY at Schrödinger (New York, NY)
    Schrödinger creates cutting-edge scientific software for drug discovery. Our massive commitments to R&D advance the field, drive growth, and positively impact human health. With over 1 billion people living with chronic disease and the average drug development process exceeding $1 billion and 10 years, we're motivated by the urgent necessity to make a positive difference.


Before You Close This Window...

If you happen to be in Germany in March, we're organizing a Smashing Meetup on 7th of March 2013 with a talented UX designer Christoph Kolb from Cologne, Germany, who also contributed to the Smashing Book 2. Christoph is also a lecturer in Media Psychology at the Fresenius University in Cologne. Register for a seat and join us for beers! We are looking forward to meeting you!

Yours sincerely,
The Smashing Family

Join our community: follow us on Twitter and join us on Facebook

The authors are: Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).

unsubscribe | update preferences | view it in your browser

вторник, 1 января 2013 г.

Smashing Newsletter #75: Animated GIFs, CSS, jQuery, Web Design Process

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #75 | Tuesday, January 1st 2013 | 128,316 subscribers | Previous issues

Dear Friends,

Do you remember the days when we needed a set of images to create rounded corners for boxes in our designs? Remember when the brand new, shiny border-radius property was announced and how sad we all were that we couldn't use it "right away"? We kept waiting for Godot, also known as "universal cross-browser support," to come, and we waited patiently and stubbornly. We were mistaken, Godot wasn't about to come anytime soon.

Editorial

However, what did come was a rapid pace of innovation in Web standards. Many exciting CSS Level 3 features are available today, and most of them have fantastic fallback by default. Once being experimental, they are now the de-facto standard — prompting us to always think of the fallback to ensure that they don't break layouts. In fact, we all can remove some unnecessary prefixes to make our code just a bit cleaner. As David Storey reminds us in his article, today we can update our CSS3 code and hence review our coding habits and practices for 2013.

Since Opera added support for some -webkit- prefixes, you might want to reorder the position of your -o- prefixed properties. border-radius doesn't really need any prefix any longer; for box-sizing and box-shadow you probably need only the -moz and -webkit prefixes now. And you might want to update the gradient and flexbox syntaxes as well.

Revise and update your base stylesheets today to make sure that you avoid maintenance issues in your projects throughout the year. And don't wait for the perfect, universal browser support: it will never come.

— The Smashing Editorial Team

Table of Contents

01. The Web Design Process, Illustrated
02. The Stranger, Santa And The Grog
03. Typing Accent Characters, The Easy Way
04. 3-D Chess With HTML, CSS And JavaScript
05. Collaborative Work For... Everything!
06. Music History in GIFs
07. Smashing Highlights (From Archives)
08. Recent Articles on Smashing Magazine
09. New on Smashing Job Board


1. The Web Design Process, Illustrated

Tired of bending over books to explain how you work at a party? Looking for a more interesting and exciting way to get the meaning of your workflow? Why not use a thrilling visualization that gets the point across? That's what A Website Named Desire is for — a picture that illustrates the non-linear and highly erratic nature of the web design process in the real world.

The Web Design Process, Illustrated

This colorful, large, interactive illustration wants to help the world understand what it takes to bring a website to life. Looking at the place in the illustration is like peering into a Lego wonderland of a Web design agency. Everybody can explore a scene starring 26 Web professionals, including a project manager, who you can follow on a chaotic journey through kick-offs, sign-offs, war room meetings and lots of other things that can go haywire.

The project created by MIX Online celebrates the creators of the Web, and the chances are high that you might find your own character in there. Look at what you do from a different angle and smile about matters which may upset you in real life. Unfortunately, the interactive illustration requires a Silverlight plugin, but you can also learn about how the poster was created and download the full-pfledged PDF (6 Mb). (ea)


2. The Stranger, Santa And The Grog

Holidays are almost over, and if you are one of the lucky ones who got all their presents delivered on time, you could help Santa to accomplish his task and deliver the rest of the packages. While it might be difficult to help him out in the real world, it's not that difficult online, especially if you have a couple of minutes to spare anyway.

The Stranger, Santa And The Grog

The Stranger, Santa and the Grog is a little addictive game that kindly asks to you to help the flying Santa aim and throw the presents through the chimney. It sounds easier than it is, and finding the right angle and the right speed can be quite a challenge. Now this could also be a funny little game to play while you are waiting for the mailman to arrive with your remaining presents! (tts)


3. Typing Accent Characters, The Easy Way

We all know the drill: you want to type special characters into an input field, yet you don't have the characters on your keyboard. You search for the character online, and then copy and paste it into the input field. Next accented character — and the journey starts again. Wouldn't it be better if the designer took care of providing the access to alternate characters as you type them?

Typing Accent Characters, The Easy Way

Long Press jQuery plugin eases the writing of accented and rare characters by allowing users to have a typing experience similar to iOS and Android. Users can focus on a form field and hold a key to display alternate characters. It's possible to pick a letter by using the mouse wheel, hovering over it with the mouse, or using the arrow keys. Not every Web form will need the plugin, but it might be a good fit if many users will want to use accented characters on your site — of course you'll have to explain how it works as well. The plugin is released under the MIT license and is available on GitHub. (vf)


The Smashing Library: the annual subscription to Smashing Magazine's eBooks


4. 3-D Chess With HTML, CSS And JavaScript

If you happen to love chess and love building websites, you just hit a jackpot. With the 3-D Hartwig chess set by Julian Garnier, you can combine both of your passions. The game is coded and built using only HTML, CSS and JavaScript. Before you make your move, you can preview your options by clicking on a chess piece. You can even select different themes.

3-D Chess With HTML, CSS And JavaScript

The lighting effects are done with Photon, and Chess.js is used for move generation and validation. Unfortunately, the demo works only in WebKit browsers, but perhaps you'd like to add support for other browsers as well? A great experiment that pushes the boundaries of what we can do on the Web. (ml)


5. Collaborative Work For... Everything!

As designers and developers, we should never work in silos. Collaboration is necessary, yet usually it's quite difficult, especially if team members are working remotely. Wouldn't it be great to have a tool that would allow you to screen share and work in the same Photoshop mock-ups, Web applications and text editors — think of it like Google Docs for any application on your computer? Well, now there is a tool for that.

Collaborative Work For... Everything!

PowWow is an application that allows you to screen share and work within any application with your colleagues. You can interact with the same application simultaneously by having multiple mouse pointers for every user. It worked fairly well in our tests. For example, you could share a text editor for pair programming or code reviews, or write emails collaboratively in an email application. To use PowWow, every collaborator has to install the application on their local machine.

So far only a Mac version is available, and the tool is in public beta, so things might break. Now that's a little helper that can relieve the headache from many projects! (vf)


6. Music History in GIFs

The last years celebrated the return of the wonderful artifact of the Web — good ol' animated GIFs. Remember rainbow ribbons? Well, suddenly their younger revivals were all over the place again, whether displaying short scenes from movies, lazy kitties, ecstatic hamsters or playful children. But what about creating something a bit more… well, meaningful out of the GIF legacy?

Music History in GIFs

Meet Music History in GIFs, a collection of 8-bit animated GIFs dedicated to famous music videos and important events in the history of music. The animations are short, yet memorable, and it's easy to recognize the events by watching their animated replicas. An interesting way to use GIFs to portray interesting moments in the history of human culture. What about creating something similar for the evolution of the Web? (vf)


The Mobile Book: a brand new printed book on best practices for mobile.


7. Smashing Highlights (From Archives)

  • Learning To Use The :before And :after Pseudo-Elements In CSS
    This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.

  • Exporting From Photoshop
    Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.

  • The Design Matrix: A Powerful Tool For Guiding Client Input
    Competitor reviews can devolve into cherry-picking sessions that spawn "frankencomps" rather than provide helpful feedback. And mood boards don't help to articulate or prioritize design goals. With a design matrix, you can guide discussions and establish clear direction.


8. Recent Articles on Smashing Magazine


9. New on Smashing Job Board

Here are the job openings published recently at our very own Smashing Job Board:

  • front-end designer (Bologna, Italy) at Blacktrend (Bologna, Italy)
    Blacktrend is a wannabe famous digital marketing agency and crazy ideas incubator. Our goal is to make any brand tasty, clean, cool and explosive for the online audience. Blacktrend is also the owner of The Web-Gang's brand that is going to be an online reality-show featuring the first web agency on-the-road.

  • Web Graphic Design & Content Manager, Stanford Law School at Stanford University School of Law (Stanford, CA)
    This position is responsible for graphic design and content for both Web and print projects. The Graphic Design and Content Manager also provides project coordination and graphics support to other members of the law school on a project-by-project basis.

  • Product UI Designers Needed—Innovative Digital Startups and Boutiques at Vitamin T (New York, NY)
    Let us introduce you to inspired, cutting-edge Agile startup environments and visionary digital agencies. Our clients' perks include hands-on high-tech field trips, breakfast buffets, "Prototype Tuesdays", and stock options.


Join our community: follow us on Twitter and join us on Facebook

The authors are: Esther Arends (ea), Talita Telma Stöckle (tts), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).

unsubscribe | update preferences | view it in your browser